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(); $user_submenu = make_language_select();
if (auth()->can('user_settings') || auth()->can('logout')) { if (auth()->can('user_settings') || auth()->can('logout')) {
$user_submenu[] = toolbar_item_divider(); $user_submenu[] = toolbar_dropdown_item_divider();
} }
if (auth()->can('user_settings')) { if (auth()->can('user_settings')) {
$user_submenu[] = toolbar_item_link( $user_submenu[] = toolbar_dropdown_item(
page_link_to('user_settings'), page_link_to('user_settings'),
'list-alt',
__('Settings'), __('Settings'),
$page == 'user_settings' $page == 'user_settings',
'bi-gear'
); );
} }
if (auth()->can('logout')) { if (auth()->can('logout')) {
$user_submenu[] = toolbar_item_link( $user_submenu[] = toolbar_dropdown_item(
page_link_to('logout'), page_link_to('logout'),
'log-out',
__('Logout'), __('Logout'),
$page == 'logout' $page == 'logout',
'bi-box-arrow-left',
); );
} }
@ -138,9 +138,8 @@ function make_navigation()
} }
$title = ((array)$options)[0]; $title = ((array)$options)[0];
$admin_menu[] = toolbar_item_link( $admin_menu[] = toolbar_dropdown_item(
page_link_to($menu_page), page_link_to($menu_page),
'',
__($title), __($title),
$menu_page == $page $menu_page == $page
); );
@ -150,7 +149,7 @@ function make_navigation()
$menu[] = toolbar_dropdown('', __('Admin'), $admin_menu); $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(); $rooms = Rooms();
$room_menu = []; $room_menu = [];
if (auth()->can('admin_rooms')) { 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) { if (count($room_menu) > 0) {
$room_menu[] = toolbar_item_divider(); $room_menu[] = toolbar_dropdown_item_divider();
} }
foreach ($rooms as $room) { 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) { if (count($room_menu) > 0) {
$menu[] = toolbar_dropdown('map-marker', __('Rooms'), $room_menu); $menu[] = toolbar_dropdown('map-marker', __('Rooms'), $room_menu);
@ -215,9 +214,8 @@ function make_language_select()
foreach (config('locales') as $locale => $name) { foreach (config('locales') as $locale => $name) {
$url = url($request->getPathInfo(), ['set-locale' => $locale]); $url = url($request->getPathInfo(), ['set-locale' => $locale]);
$items[] = toolbar_item_link( $items[] = toolbar_dropdown_item(
htmlspecialchars($url), htmlspecialchars($url),
'',
$name, $name,
$locale == $activeLocale $locale == $activeLocale
); );

65
includes/sys_template.php
View File

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

1
package.json
View File

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

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

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

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

@ -45,37 +45,6 @@ THE SOFTWARE.
// Bootswatch // 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 ===================================================================== // Tables =====================================================================
table, table,
@ -102,13 +71,13 @@ table,
.help-block, .help-block,
.control-label, .control-label,
.form-control-feedback { .form-control-feedback {
color: $brand-warning; color: $warning;
} }
.form-control, .form-control,
.form-control:focus, .form-control:focus,
.input-group-addon { .input-group-addon {
border-color: $brand-warning; border-color: $warning;
} }
} }
@ -116,13 +85,13 @@ table,
.help-block, .help-block,
.control-label, .control-label,
.form-control-feedback { .form-control-feedback {
color: $brand-danger; color: $danger;
} }
.form-control, .form-control,
.form-control:focus, .form-control:focus,
.input-group-addon { .input-group-addon {
border-color: $brand-danger; border-color: $danger;
} }
} }
@ -130,13 +99,13 @@ table,
.help-block, .help-block,
.control-label, .control-label,
.form-control-feedback { .form-control-feedback {
color: $brand-success; color: $success;
} }
.form-control, .form-control,
.form-control:focus, .form-control:focus,
.input-group-addon { .input-group-addon {
border-color: $brand-success; border-color: $success;
} }
} }

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

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

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

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

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

@ -46,7 +46,7 @@
<tr> <tr>
<td class="{{ td_type }}">{{ entry.created_at.format(__('Y-m-d H:i')) }}</td> <td class="{{ td_type }}">{{ entry.created_at.format(__('Y-m-d H:i')) }}</td>
<td class="{{ td_type }}"> <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>
<td>{{ entry.message|nl2br }}</td> <td>{{ entry.message|nl2br }}</td>
</tr> </tr>

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

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

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

@ -1,86 +1,64 @@
{% macro toolbar_item(label, link, active_page, icon) %} {% macro toolbar_item(label, link, active_page, icon) %}
<li{% if page() == active_page %} class="active"{% endif %}> <li class="nav-item">
<a href="{{ link }}"> <a class="nav-link{% if page() == active_page %} active{% endif %}" href="{{ link }}">
{% if icon %}<span class="{% if 'glyphicon-' in icon %}glyphicon {% endif %}{{ icon }}"></span>{% endif %} {% if icon %}<span class="{% if 'bi-' in icon %}bi {% endif %}{{ icon }}"></span>{% endif %}
{{ label|raw }} {{ label|raw }}
</a> </a>
</li> </li>
{% endmacro %} {% 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"> <div class="container-fluid">
{% block navbar %} <a class="navbar-brand" href="{{ url('/') }}">
<div class="navbar-header"> <span class="icon-icon_angel"></span>
<button type="button" <strong class="visible-lg-inline">{{ config('app_name')|upper }}</strong>
class="navbar-toggle collapsed" </a>
data-toggle="offcanvas" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
data-target="#navbar-offcanvas" <span class="navbar-toggler-icon"></span>
aria-label="Toggle navigation"> </button>
<span class="text-primary glyphicon glyphicon-menu-hamburger icon-open"></span> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<span class="text-primary glyphicon glyphicon-remove icon-close"></span> {{ menu() }}
</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 %} {% if config('header_items') %}
<div class="collapse navbar-collapse" id="navbar-offcanvas"> <ul class="navbar-nav mb-2 mb-lg-0">
{% block menu_items %} {% for text,link in config('header_items', {}) %}
{{ menu() }} <li class="nav-item">
<a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
{{ text }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
<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') %}
{{ _self.toolbar_item(__('Register'), url('register'), 'register', 'glyphicon-plus') }}
{% endif %}
{% if config('header_items') %} {% if has_permission_to('login') %}
<ul class="nav navbar-nav"> {{ _self.toolbar_item(__('Login'), url('login'), 'login', 'glyphicon-log-in') }}
{% for text,link in config('header_items', {}) %} {% endif %}
<li>
<a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
{{ text }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endblock %}
{% block menu_toolbar %} {% if is_user() and has_permission_to('user_messages') %}
<ul class="nav navbar-nav navbar-right"> {{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'glyphicon-envelope') }}
{% endif %}
{% if is_user() %} {{ menuUserHints() }}
{{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'glyphicon-time') }}
{% elseif has_permission_to('register') and config('registration_enabled') %}
{{ _self.toolbar_item(__('Register'), url('register'), 'register', 'glyphicon-plus') }}
{% endif %}
{% if has_permission_to('login') %} {% if has_permission_to('user_myshifts') %}
{{ _self.toolbar_item(__('Login'), url('login'), 'login', 'glyphicon-log-in') }} {{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }}
{% endif %} {% endif %}
{% if is_user() and has_permission_to('user_messages') %} <li class="nav-item dropdown">
{{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'glyphicon-envelope') }} <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
{% endif %} </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
{{ menuUserHints() }} {{ menuUserSubmenu()|join(" ")|raw }}
</ul>
{% if has_permission_to('user_myshifts') %} </li>
{{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }} </ul>
{% endif %} </div>
<li class="hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
{{ 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>
</div> </nav>

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

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

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

@ -34,7 +34,9 @@
<div class="panel-heading"> <div class="panel-heading">
<h3> <h3>
{{ item.question }} {{ 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> </h3>
</div> </div>

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

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

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

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

2
webpack.config.js
View File

@ -24,7 +24,7 @@ const plugins = [
const themeEntries = {}; 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`; 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" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= 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: bootstrap@5.0.0-beta3:
version "5.0.0-beta3" version "5.0.0-beta3"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta3.tgz#c959f61fbd03667a1b158f763856994859d7a465" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta3.tgz#c959f61fbd03667a1b158f763856994859d7a465"