iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

migrate basic elements to bs5 

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

migrate body color to bs5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

migrate the nav menu to bs5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

migrate to bs5 badges

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

migrate to bs5 nav pills

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

migrate the login page to bs5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

fix the language dropdown in bs5

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
This commit is contained in:
Michael Weimann 2021-04-17 14:49:53 +02:00
parent 02fa603090
commit 9acaa03a71
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1
17 changed files with 309 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
includes/sys_menu.php
View File

@ -60,24 +60,24 @@ function make_user_submenu()
$user_submenu = make_language_select();
if (auth()->can('user_settings') || auth()->can('logout')) {
$user_submenu[] = toolbar_item_divider();
$user_submenu[] = toolbar_dropdown_item_divider();
}
if (auth()->can('user_settings')) {
$user_submenu[] = toolbar_item_link(
$user_submenu[] = toolbar_dropdown_item(
page_link_to('user_settings'),
'list-alt',
__('Settings'),
$page == 'user_settings'
$page == 'user_settings',
'bi-gear'
);
}
if (auth()->can('logout')) {
$user_submenu[] = toolbar_item_link(
$user_submenu[] = toolbar_dropdown_item(
page_link_to('logout'),
'log-out',
__('Logout'),
$page == 'logout'
$page == 'logout',
'bi-box-arrow-left',
);
}
@ -138,9 +138,8 @@ function make_navigation()
}
$title = ((array)$options)[0];
$admin_menu[] = toolbar_item_link(
$admin_menu[] = toolbar_dropdown_item(
page_link_to($menu_page),
'',
__($title),
$menu_page == $page
);
@ -150,7 +149,7 @@ function make_navigation()
$menu[] = toolbar_dropdown('', __('Admin'), $admin_menu);
}
return '<ul class="nav navbar-nav">' . join("\n", $menu) . '</ul>';
return '<ul class="navbar-nav mb-2 mb-lg-0">' . join("\n", $menu) . '</ul>';
}
/**
@ -187,13 +186,13 @@ function make_room_navigation($menu)
$rooms = Rooms();
$room_menu = [];
if (auth()->can('admin_rooms')) {
$room_menu[] = toolbar_item_link(page_link_to('admin_rooms'), 'list', __('Manage rooms'));
$room_menu[] = toolbar_dropdown_item(page_link_to('admin_rooms'), __('Manage rooms'), false, 'list');
}
if (count($room_menu) > 0) {
$room_menu[] = toolbar_item_divider();
$room_menu[] = toolbar_dropdown_item_divider();
}
foreach ($rooms as $room) {
$room_menu[] = toolbar_item_link(room_link($room), 'map-marker', $room->name);
$room_menu[] = toolbar_dropdown_item(room_link($room), $room->name, false, 'map-marker');
}
if (count($room_menu) > 0) {
$menu[] = toolbar_dropdown('map-marker', __('Rooms'), $room_menu);
@ -215,9 +214,8 @@ function make_language_select()
foreach (config('locales') as $locale => $name) {
$url = url($request->getPathInfo(), ['set-locale' => $locale]);
$items[] = toolbar_item_link(
$items[] = toolbar_dropdown_item(
htmlspecialchars($url),
'',
$name,
$locale == $activeLocale
);

65
includes/sys_template.php
View File

@ -169,46 +169,68 @@ function toolbar_pills($items)
* Render a link for a toolbar.
*
* @param string $href
* @param string $glyphicon
* @param string $icon
* @param string $label
* @param bool $selected
* @param bool $active
* @return string
*/
function toolbar_item_link($href, $glyphicon, $label, $selected = false)
function toolbar_item_link($href, $icon, $label, $active = false)
{
return '<li class="' . ($selected ? 'active' : '') . '">'
. '<a href="' . $href . '">'
. ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
return '<li class="nav-item">'
. '<a class="nav-link ' . ($active ? 'active' : '') . '" href="' . $href . '">'
. ($icon != '' ? '<span class="bi bi-' . $icon . '"></span> ' : '')
. $label
. '</a>'
. '</li>';
}
/**
* @return string
*/
function toolbar_item_divider()
function toolbar_dropdown_item(string $href, string $label, bool $active, string $icon = null): string
{
return '<li class="divider"></li>';
return strtr(
'<li><a class="dropdown-item{active}" href="{href}">{icon}{label}</a></li>',
[
'{href}' => $href,
'{icon}' => $icon === null ? '' : '<i class="bi ' . $icon . '"></i>',
'{label}' => $label,
'{active}' => $active ? ' active' : ''
]
);
}
function toolbar_dropdown_item_divider(): string
{
return '<li><hr class="dropdown-divider"></li>';
}
/**
* @param string $glyphicon
* @param string $icon
* @param string $label
* @param array $submenu
* @param string $class
* @return string
*/
function toolbar_dropdown($glyphicon, $label, $submenu, $class = '')
function toolbar_dropdown($icon, $label, $submenu, $class = ''): string
{
return '<li class="dropdown ' . $class . '">'
. '<a href="#" class="dropdown-toggle" data-toggle="dropdown">'
. ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
. $label
. '<span class="caret"></span></a>'
. '<ul class="dropdown-menu" role="menu">'
. join("\n", $submenu)
. '</ul></li>';
$template =<<<EOT
<li class="nav-item dropdown {class}">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{icon} {label}
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
{submenu}
</ul>
</li>
EOT;
return strtr(
$template,
[
'{class}' => $class,
'{label}' => $label,
'{icon}' => empty($icon) ? '' : '<i class="bi ' . $icon . '"></i>',
'{submenu}' => join("\n", $submenu)
]
);
}
/**
@ -239,7 +261,6 @@ function toolbar_popover($glyphicon, $label, $content, $class = '')
</script></li>';
}
/**
* Generiert HTML Code für eine "Seite".
* Fügt dazu die übergebenen Elemente zusammen.

1
package.json
View File

@ -28,6 +28,7 @@
"@babel/preset-env": "^7.11.5",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.1.0",
"bootstrap-icons": "^1.4.1",
"css-loader": "^5.2.2",
"css-minimizer-webpack-plugin": "^2.0.0",
"file-loader": "^6.1.0",

105
resources/assets/themes/base.scss
View File

@ -1,11 +1,17 @@
// select 2 variables
$cursor-disabled: false;
$link-decoration: none !default;
$link-hover-decoration: underline !default;
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css";
@import "~select2/dist/css/select2.css";
@import "error";
$navbar-height: 3.125rem;
body {
padding-top: 50px;
}
@ -14,11 +20,6 @@ body {
color: $text-muted;
}
.first {
clear: both;
margin-top: 30px;
}
.text-big {
display: block;
font-size: 30px;
@ -27,7 +28,7 @@ body {
}
.icon-icon_angel {
background-color: $text-color;
background-color: $body-color;
display: inline-block;
width: 1em;
@ -42,15 +43,15 @@ a .icon-icon_angel {
}
.navbar .icon-icon_angel {
background-color: $navbar-default-link-disabled-color;
background-color: $nav-link-disabled-color;
}
.navbar-brand .icon-icon_angel {
background-color: $navbar-default-brand-color;
background-color: $navbar-dark-brand-color;
}
table a > .icon-icon_angel {
background-color: $text-color;
background-color: $body-color;
}
.table .form-group {
@ -67,7 +68,7 @@ table a > .icon-icon_angel {
font-weight: 200;
}
@media (max-width: $screen-md) {
@media (max-width: map-get($grid-breakpoints, 'md')) {
font-size: inherit;
.number {
font-size: 40px;
@ -77,15 +78,15 @@ table a > .icon-icon_angel {
.stats-danger {
color: $brand-danger;
color: map-get($theme-colors, 'danger');
}
.stats-warning {
color: $brand-warning;
color: map-get($theme-colors, 'warning');
}
.stats-success {
color: $brand-success;
color: map-get($theme-colors, 'success');
}
.dashboard-panel {
@ -101,7 +102,7 @@ table a > .icon-icon_angel {
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: $brand-primary; /* Fix to make div clickable in IE */
background-color: $primary; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
@ -111,35 +112,35 @@ table a > .icon-icon_angel {
}
}
.panel-primary .panel-heading a {
color: $panel-primary-text;
background-color: $panel-primary-heading-bg;
}
.panel-default .panel-heading a {
color: $panel-default-text;
background-color: $panel-default-heading-bg;
}
.panel-info .panel-heading a {
color: $panel-info-text;
background-color: $panel-info-heading-bg;
}
.panel-success .panel-heading a {
color: $panel-success-text;
background-color: $panel-success-heading-bg;
}
.panel-warning .panel-heading a {
color: $panel-warning-text;
background-color: $panel-warning-heading-bg;
}
.panel-danger .panel-heading a {
color: $panel-danger-text;
background-color: $panel-danger-heading-bg;
}
//.panel-primary .panel-heading a {
// color: $panel-primary-text;
// background-color: $panel-primary-heading-bg;
//}
//
//.panel-default .panel-heading a {
// color: $panel-default-text;
// background-color: $panel-default-heading-bg;
//}
//
//.panel-info .panel-heading a {
// color: $panel-info-text;
// background-color: $panel-info-heading-bg;
//}
//
//.panel-success .panel-heading a {
// color: $panel-success-text;
// background-color: $panel-success-heading-bg;
//}
//
//.panel-warning .panel-heading a {
// color: $panel-warning-text;
// background-color: $panel-warning-heading-bg;
//}
//
//.panel-danger .panel-heading a {
// color: $panel-danger-text;
// background-color: $panel-danger-heading-bg;
//}
.select2-dropdown {
background-color: $input-bg;
@ -157,14 +158,14 @@ table a > .icon-icon_angel {
width: 100%;
.lane {
background: $table-bg-accent;
background: $table-striped-bg;
flex-grow: 1;
min-width: 280px;
width: 280px;
flex-shrink: 1;
.header {
background: $panel-bg;
background: $dark; //@todo bs5
border-bottom: 1px solid $table-border-color;
height: 30px;
padding: 5px 5px 5px 16px;
@ -172,7 +173,7 @@ table a > .icon-icon_angel {
.tick {
height: 30px;
border-top: 1px solid darken($table-bg-accent, 2%);
border-top: 1px solid darken($table-striped-bg, 2%);
}
.tick.hour {
@ -182,7 +183,7 @@ table a > .icon-icon_angel {
}
.tick.day {
border-top: 2px solid $brand-primary;
border-top: 2px solid $primary;
font-size: 0.9em;
padding-left: 5px;
}
@ -255,7 +256,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
}
.user-settings .settings-menu ul {
margin-top: $line-height-computed;
margin-top: map-get($spacers, 3); //@todo bs5
}
span.ref-id[id] {
@ -330,9 +331,9 @@ span.ref-id[id] {
max-height: $navbar-height;
.icon {
border-color: $brand-primary;
border-color: $primary;
font-weight: bold;
color: $brand-primary;
color: $primary;
font-size: 25px;
&-close {
padding: 0 3px;
@ -350,7 +351,7 @@ span.ref-id[id] {
}
@media screen and (max-width: $grid-float-breakpoint-max) {
@media screen and (max-width: map-get($grid-breakpoints, 'xxl')) {
#navbar-offcanvas {
display: block;
position: absolute;
@ -364,7 +365,7 @@ span.ref-id[id] {
transition: left .3s ease-in-out;
background: $navbar-default-bg;
background: $light; // @todo bs5
margin: 0 !important; // Overridden in theme with high specifity:
// .container > .navbar-header,
// .container-fluid > .navbar-header,

43
resources/assets/themes/cyborg_styles.scss
View File

@ -45,37 +45,6 @@ THE SOFTWARE.
// Bootswatch
// -----------------------------------------------------
// Navbar =====================================================================
// Buttons ====================================================================
// Typography =================================================================
.text-primary,
.text-primary:hover {
color: $brand-primary;
}
.text-success,
.text-success:hover {
color: $brand-success;
}
.text-danger,
.text-danger:hover {
color: $brand-danger;
}
.text-warning,
.text-warning:hover {
color: $brand-warning;
}
.text-info,
.text-info:hover {
color: $brand-info;
}
// Tables =====================================================================
table,
@ -102,13 +71,13 @@ table,
.help-block,
.control-label,
.form-control-feedback {
color: $brand-warning;
color: $warning;
}
.form-control,
.form-control:focus,
.input-group-addon {
border-color: $brand-warning;
border-color: $warning;
}
}
@ -116,13 +85,13 @@ table,
.help-block,
.control-label,
.form-control-feedback {
color: $brand-danger;
color: $danger;
}
.form-control,
.form-control:focus,
.input-group-addon {
border-color: $brand-danger;
border-color: $danger;
}
}
@ -130,13 +99,13 @@ table,
.help-block,
.control-label,
.form-control-feedback {
color: $brand-success;
color: $success;
}
.form-control,
.form-control:focus,
.input-group-addon {
border-color: $brand-success;
border-color: $success;
}
}

92
resources/assets/themes/cyborg_variables.scss
View File

@ -38,25 +38,25 @@ $gray: #555; // #555
$gray-light: #999; // #999
$gray-lighter: #eee; // #eee
$brand-primary: #99ba00;
$brand-success: #99ba00;
$brand-info: #0076ba;
$brand-warning: #ffc600;
$brand-danger: #d9534f;
$primary: #99ba00;
$success: #99ba00;
$info: #0076ba;
$warning: #ffc600;
$danger: #d9534f;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #060606;
$body-color: $gray-light;
//** Global text color on `<body>`.
$text-color: $gray-light;
$text-muted: $gray-light;
//** Global textual link color.
$link-color: $brand-primary;
$link-color: $primary;
//** Link hover color set via `darken()` function.
$link-hover-color: $link-color;
@ -132,7 +132,7 @@ $border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg: $brand-primary;
$component-active-bg: $primary;
//** Width of the `border` for generating carets that indicator dropdowns.
$caret-width-base: 4px;
@ -172,23 +172,23 @@ $btn-default-bg: $gray-light;
$btn-default-border: darken($btn-default-bg, 10%);
$btn-primary-color: $btn-default-color;
$btn-primary-bg: $brand-primary;
$btn-primary-bg: $primary;
$btn-primary-border: darken($btn-primary-bg, 10%);
$btn-success-color: $btn-default-color;
$btn-success-bg: $brand-success;
$btn-success-bg: $success;
$btn-success-border: darken($btn-success-bg, 10%);
$btn-info-color: $btn-default-color;
$btn-info-bg: $brand-info;
$btn-info-bg: $info;
$btn-info-border: darken($btn-info-bg, 10%);
$btn-warning-color: $btn-default-color;
$btn-warning-bg: $brand-warning;
$btn-warning-bg: $warning;
$btn-warning-border: darken($btn-warning-bg, 10%);
$btn-danger-color: $btn-default-color;
$btn-danger-bg: $brand-danger;
$btn-danger-bg: $danger;
$btn-danger-border: darken($btn-danger-bg, 10%);
$btn-link-disabled-color: $gray-light;
@ -436,7 +436,7 @@ $nav-tabs-border-color: $gray-dark;
$nav-tabs-link-hover-border-color: transparent;
$nav-tabs-active-link-hover-bg: $brand-primary;
$nav-tabs-active-link-hover-bg: $primary;
$nav-tabs-active-link-hover-color: #fff;
$nav-tabs-active-link-hover-border-color: $gray-dark;
@ -462,7 +462,7 @@ $pagination-hover-bg: $component-active-bg;
$pagination-hover-border: transparent;
$pagination-active-color: #000;
$pagination-active-bg: $brand-primary;
$pagination-active-bg: $primary;
$pagination-active-border: transparent;
$pagination-disabled-color: $gray-light;
@ -501,21 +501,21 @@ $jumbotron-font-size: ceil(($font-size-base * 1.5));
//
//## Define colors for form feedback states and, by default, alerts.
$state-success-text: $brand-success;
$state-success-bg: darken($brand-success, 40%);
$state-success-border: $brand-success;
$state-success-text: $success;
$state-success-bg: darken($success, 40%);
$state-success-border: $success;
$state-info-text: $brand-info;
$state-info-bg: darken($brand-info, 40%);
$state-info-border: $brand-info;
$state-info-text: $info;
$state-info-bg: darken($info, 40%);
$state-info-border: $info;
$state-warning-text: $brand-warning;
$state-warning-bg: darken($brand-warning, 40%);
$state-warning-border: $brand-warning;
$state-warning-text: $warning;
$state-warning-bg: darken($warning, 40%);
$state-warning-border: $warning;
$state-danger-text: $brand-danger;
$state-danger-bg: darken($brand-danger, 40%);
$state-danger-border: $brand-danger;
$state-danger-text: $danger;
$state-danger-bg: darken($danger, 40%);
$state-danger-border: $danger;
//== Tooltips
@ -569,18 +569,12 @@ $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%
//
//##
//** Default label background color
$label-default-bg: $btn-default-bg;
//** Primary label background color
$label-primary-bg: $brand-primary;
//** Success label background color
$label-success-bg: $brand-success;
//** Info label background color
$label-info-bg: $brand-info;
//** Warning label background color
$label-warning-bg: $brand-warning;
//** Danger label background color
$label-danger-bg: $brand-danger;
$label-primary-bg: $primary;
$label-success-bg: $success;
$label-info-bg: $info;
$label-warning-bg: $warning;
$label-danger-bg: $danger;
//** Default label text color
$label-color: #fff;
@ -656,15 +650,15 @@ $progress-bg: $gray-darker;
$progress-bar-color: #fff;
//** Default progress bar color
$progress-bar-bg: $brand-primary;
$progress-bar-bg: $primary;
//** Success progress bar color
$progress-bar-success-bg: $brand-success;
$progress-bar-success-bg: $success;
//** Warning progress bar color
$progress-bar-warning-bg: $brand-warning;
$progress-bar-warning-bg: $warning;
//** Danger progress bar color
$progress-bar-danger-bg: $brand-danger;
$progress-bar-danger-bg: $danger;
//** Info progress bar color
$progress-bar-info-bg: $brand-info;
$progress-bar-info-bg: $info;
//== List group
@ -721,8 +715,8 @@ $panel-default-heading-bg: lighten($gray-darker, 10%);
$panel-footer-bg: $panel-default-heading-bg;
$panel-primary-text: #fff;
$panel-primary-border: $brand-primary;
$panel-primary-heading-bg: $brand-primary;
$panel-primary-border: $primary;
$panel-primary-heading-bg: $primary;
$panel-success-text: $state-success-text;
$panel-success-border: $state-success-border;
@ -775,10 +769,10 @@ $well-border: darken($well-bg, 7%);
$badge-color: #000;
//** Linked badge text color on hover
$badge-link-hover-color: #000;
$badge-bg: $brand-primary;
$badge-bg: $primary;
//** Badge text color in active nav link
$badge-active-color: $brand-primary;
$badge-active-color: $primary;
//** Badge background color in active nav link
$badge-active-bg: #fff;
@ -855,7 +849,7 @@ $component-offset-horizontal: 180px;
//** Abbreviations and acronyms border color
$abbr-border-color: $gray-light;
//** Headings small color
$headings-small-color: $brand-primary;
$headings-small-color: $primary;
//** Blockquote small color
$blockquote-small-color: $gray;
//** Blockquote font size

24
resources/assets/themes/theme1.scss
View File

@ -10,10 +10,10 @@ $gray-dark: #282828; // #333
$gray-light: #888; // #999
$gray-lighter: #ADAFAE; // #eee
$brand-primary: #428bca;
$brand-success: #5cb85c;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$primary: #428bca;
$success: #5cb85c;
$info: #5bc0de;
$warning: #f0ad4e;
//== changed Buttons
@ -22,13 +22,9 @@ $btn-default-color: #fff;
$btn-default-bg: lighten($gray-dark, 10%);
$btn-primary-border: darken($btn-default-bg, 10%);
$btn-success-border: $btn-primary-border;
$btn-info-border: $btn-primary-border;
$btn-warning-border: $btn-primary-border;
$btn-danger-border: $btn-primary-border;
$btn-link-disabled-color: $gray-light;
@ -37,42 +33,38 @@ $btn-link-disabled-color: $gray-light;
//== changed Forms
$input-bg: $gray-darker;
$input-bg-disabled: lighten($gray-lighter,15%);
$input-group-addon-bg: $gray-lighter;
//== changed Pagination
$pagination-hover-color: #fff;
$pagination-active-color: #fff;
//== changed Form states and alerts
$state-success-text: #fff;
$state-success-bg: $brand-success;
$state-success-bg: $success;
$state-success-border: darken($state-success-bg, 5%);
$state-info-text: #fff;
$state-info-bg: $brand-info;
$state-info-bg: $info;
$state-info-border: darken($state-info-bg, 7%);
$state-warning-text: #fff;
$state-warning-bg: $brand-warning;
$state-warning-bg: $warning;
$state-warning-border: darken($state-warning-bg, 3%);
$state-danger-text: #fff;
$state-danger-bg: $brand-danger;
$state-danger-bg: $danger;
$state-danger-border: darken($state-danger-bg, 3%);
//== changed Badges
$badge-color: #fff;
$badge-link-hover-color: #fff;

2
resources/views/admin/log.twig
View File

@ -46,7 +46,7 @@
<tr>
<td class="{{ td_type }}">{{ entry.created_at.format(__('Y-m-d H:i')) }}</td>
<td class="{{ td_type }}">
<span class="label label-{{ type }}">{{ entry.level|capitalize }}</span>
<span class="badge bg-{{ type }}">{{ entry.level|capitalize }}</span> <!-- //todo bs5 -->
</td>
<td>{{ entry.message|nl2br }}</td>
</tr>

2
resources/views/errors/404.twig
View File

@ -7,7 +7,7 @@
<div class="col-sm-6 col-sm-offset-3 error-big">
<h2>
4<span class="pulse">:</span>{{ status|slice(1, 2) }}
<small>{{ __("No sleep found") }}</small>
<small class="text-muted">{{ __("No sleep found") }}</small>
</h2>
{% block content_text %}

52
resources/views/layouts/parts/navbar.twig
View File

@ -1,39 +1,28 @@
{% macro toolbar_item(label, link, active_page, icon) %}
<li{% if page() == active_page %} class="active"{% endif %}>
<a href="{{ link }}">
{% if icon %}<span class="{% if 'glyphicon-' in icon %}glyphicon {% endif %}{{ icon }}"></span>{% endif %}
<li class="nav-item">
<a class="nav-link{% if page() == active_page %} active{% endif %}" href="{{ link }}">
{% if icon %}<span class="{% if 'bi-' in icon %}bi {% endif %}{{ icon }}"></span>{% endif %}
{{ label|raw }}
</a>
</li>
{% endmacro %}
<div class="navbar navbar-default navbar-fixed-top">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark border-bottom border-dark">
<div class="container-fluid">
{% block navbar %}
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="offcanvas"
data-target="#navbar-offcanvas"
aria-label="Toggle navigation">
<span class="text-primary glyphicon glyphicon-menu-hamburger icon-open"></span>
<span class="text-primary glyphicon glyphicon-remove icon-close"></span>
</button>
<a class="navbar-brand" href="{{ url('/') }}">
<span class="icon-icon_angel"></span>
<strong class="visible-lg-inline">{{ config('app_name')|upper }}</strong>
</a>
</div>
{% block menu %}
<div class="collapse navbar-collapse" id="navbar-offcanvas">
{% block menu_items %}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
{{ menu() }}
{% if config('header_items') %}
<ul class="nav navbar-nav">
<ul class="navbar-nav mb-2 mb-lg-0">
{% for text,link in config('header_items', {}) %}
<li>
<li class="nav-item">
<a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
{{ text }}
</a>
@ -41,11 +30,7 @@
{% endfor %}
</ul>
{% endif %}
{% endblock %}
{% block menu_toolbar %}
<ul class="nav navbar-nav navbar-right">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
{% if is_user() %}
{{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'glyphicon-time') }}
{% elseif has_permission_to('register') and config('registration_enabled') %}
@ -66,21 +51,14 @@
{{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }}
{% endif %}
<li class="hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
</a>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
{{ menuUserSubmenu()|join(" ")|raw }}
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-mobile hidden-sm hidden-md hidden-lg">
{{ menuUserSubmenu()|join(" ")|raw }}
</ul>
{% endblock %}
</div>
{% endblock %}
{% endblock %}
</div>
</div>
</nav>

52
resources/views/pages/design.twig
View File

@ -6,6 +6,16 @@
{% set colors=['success', 'info', 'warning', 'danger'] %}
{% set types=['default', 'primary', 'success', 'info', 'warning', 'danger'] %}
{% set types_color=[
['primary', 'light'],
['secondary', 'light'],
['success', 'light'],
['danger', 'light'],
['warning', 'dark'],
['info', 'dark'],
['light', 'dark'],
['dark', 'light'],
] %}
{% set types_buttons=types|merge(['link']) %}
{% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
{% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}
@ -13,15 +23,15 @@
{% block content %}
<div class="col-12">
<div class="container">
<h1>{{ block('title') }} <small>{{ themes[theme] }}</small></h1>
<h1>{{ block('title') }} <small class="text-muted">{{ themes[theme] }}</small></h1>
<h2>Elements <small class="text-muted">small</small></h2>
<div class="row">
<div class="col-md-2">
<h3>Headings <small>small</small></h3>
<h4>H4 <small>small</small></h4>
<h5>H5 <small>small</small></h5>
<h6>H6 <small>small</small></h6>
<h3>Headings <small class="text-muted">small</small></h3>
<h4>H4 <small class="text-muted">small</small></h4>
<h5>H5 <small class="text-muted">small</small></h5>
<h6>H6 <small class="text-muted">small</small></h6>
</div>
<div class="col-md-6">
<h3>Lists</h3>
@ -78,17 +88,29 @@
<div class="col-md-3">
<h3>Navigation Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li class="nav-item">
<a class="nav-link active" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dolor</a>
</li>
</ul>
</div>
<div class="col-md-3 settings-menu">
<h3>Navigation Pills</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Some</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Menu</a></li>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Some</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu</a>
</li>
</ul>
</div>
</div>
@ -113,10 +135,10 @@
<div class="row">
<div class="col-md-6">
<h3>Labels</h3>
<h3>Badges</h3>
<p>
{% for type in types %}
<span class="label label-{{ type }}">{{ type|capitalize }}</span>
{% for type in types_color %}
<span class="badge bg-{{ type[0] }} text-{{ type[1] }}">{{ type[0]|capitalize }}</span>
{% endfor %}
</p>
</div>

4
resources/views/pages/faq/overview.twig
View File

@ -34,7 +34,9 @@
<div class="panel-heading">
<h3>
{{ item.question }}
<small><a class="ref-link" href="#faq-{{ item.id }}">{{ m.glyphicon('link') }}</a></small>
<small class="text-muted">
<a class="ref-link" href="#faq-{{ item.id }}">{{ m.glyphicon('link') }}</a>
</small>
</h3>
</div>

40
resources/views/pages/login.twig
View File

@ -5,13 +5,13 @@
{% block content %}
<div class="col-md-12">
<div class="row">
<div class="row mb-3 mt-5">
<div class="col-sm-12 text-center" id="welcome-title">
<h2>{{ __('Welcome to the %s!', [config('name') ~ m.angel() ~ (config('app_name')|upper) ])|raw }}</h2>
</div>
</div>
<div class="row">
<div class="row mb-3">
{% for name,date in {
(__('Buildup starts')): config('buildup_start'),
(__('Event starts')): config('event_start'),
@ -28,19 +28,21 @@
{% endfor %}
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div class="panel panel-primary first">
<div class="panel-body">
<div class="row mb-5">
<div class="col-sm-6 offset-sm-6 col-md-4 offset-md-4">
<div class="card bg-dark">
<div class="card-body">
{% include 'layouts/parts/messages.twig' %}
<form action="" enctype="multipart/form-data" method="post">
{{ csrf() }}
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-lg">{{ m.angel }}</span>
<div class="mb-3">
<div class="input-group input-group-lg">
<span class="input-group-text text-light">
{{ m.angel }}
</span>
<input
class="form-control input-lg"
class="form-control"
id="form_nick"
type="text"
name="login"
@ -50,23 +52,26 @@
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-lg">{{ m.glyphicon('lock') }}</span>
<div class="mb-3">
<div class="input-group input-group-lg">
<span class="input-group-text text-light">
<i class="bi bi-key"></i>
</span>
<input
class="form-control input-lg" id="form_password"
class="form-control" id="form_password"
type="password" name="password" value="" placeholder="{{ __('Password') }}"
>
</div>
</div>
<div class="form-group">
<div class="mb-3 text-center">
<button class="btn btn-primary btn-lg btn-block" type="submit" name="submit">
{{ __('Login') }}
</button>
</div>
<div class="form-group btn-group btn-group-justified">
{% if config('oauth') is not empty %}
<div class="mb-3 btn-group btn-group-justified">
{% for name,config in config('oauth') %}
<a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} hidden{% endif %}">
{{ __(
@ -76,6 +81,7 @@
</a>
{% endfor %}
</div>
{% endif %}
<div class="text-center">
<a href="{{ url('/password/reset') }}" class="">
@ -88,7 +94,7 @@
</div>
</div>
<div class="row">
<div class="row mb-5">
<div class="col-sm-6 text-center">
<h2>{{ __('Register') }}</h2>
{% if has_permission_to('register') and config('registration_enabled') %}

5
resources/views/pages/settings/oauth.twig
View File

@ -4,7 +4,10 @@
{% block title %}{{ __('settings.oauth') }}{% endblock %}
{% block container_title %}
<h1 id="oauth-settings-title">{{ __('settings.settings') }} <small>{{ block('title') }}</small></h1>
<h1 id="oauth-settings-title">
{{ __('settings.settings') }}
<small class="text-muted">{{ block('title') }}</small>
</h1>
{% endblock %}
{% block row_content %}

11
resources/views/pages/settings/settings.twig
View File

@ -6,15 +6,18 @@
{% block content %}
<div class="container user-settings">
{% block container_title %}
<h1>{{ __('settings.settings') }} <small>{{ block('title') }}</small></h1>
<h1>
{{ __('settings.settings') }}
<small class="text-muted">{{ block('title') }}</small>
</h1>
{% endblock %}
<div class="row">
<div class="col-md-3 settings-menu">
<ul class="nav nav-pills nav-stacked">
<ul class="nav nav-pills flex-column">
{% for url,title in settings_menu %}
<li{% if url == request.url() %} class="active"{% endif %}>
<a href="{{ url }}">{{ __(title) }}</a>
<li class="nav-item">
<a class="nav-link {% if url == request.url() %}active{% endif %}" href="{{ url }}">{{ __(title) }}</a>
</li>
{% endfor %}
</ul>

2
webpack.config.js
View File

@ -24,7 +24,7 @@ const plugins = [
const themeEntries = {};
for (let i = 1; i < 2; i++) {
for (let i = 0; i < 2; i++) {
themeEntries[`theme${i}`] = `./resources/assets/themes/theme${i}.scss`;
}

5
yarn.lock
View File

@ -1178,6 +1178,11 @@ boolbase@^1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap-icons@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.4.1.tgz#5071d2ea9dab0ad79ca5673a97a0074872c74e14"
integrity sha512-EcATaAGsRgyy4NtnwXlNzkgWttpb6PqcXCoLtZZKdZtAYJU/WYqoQFxuGFKAppOlf7NmKpvGtSsC/921H7LIjg==
bootstrap@5.0.0-beta3:
version "5.0.0-beta3"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta3.tgz#c959f61fbd03667a1b158f763856994859d7a465"