From 9acaa03a71f5ec3858b3eea47622fac83070d503 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Sat, 17 Apr 2021 14:49:53 +0200 Subject: [PATCH] migrate basic elements to bs5 Signed-off-by: Michael Weimann migrate body color to bs5 Signed-off-by: Michael Weimann migrate the nav menu to bs5 Signed-off-by: Michael Weimann migrate to bs5 badges Signed-off-by: Michael Weimann migrate to bs5 nav pills Signed-off-by: Michael Weimann migrate the login page to bs5 Signed-off-by: Michael Weimann fix the language dropdown in bs5 Signed-off-by: Michael Weimann --- includes/sys_menu.php | 28 ++-- includes/sys_template.php | 65 ++++++---- package.json | 1 + resources/assets/themes/base.scss | 105 +++++++-------- resources/assets/themes/cyborg_styles.scss | 43 +----- resources/assets/themes/cyborg_variables.scss | 94 +++++++------- resources/assets/themes/theme1.scss | 24 ++-- resources/views/admin/log.twig | 2 +- resources/views/errors/404.twig | 2 +- resources/views/layouts/parts/navbar.twig | 122 +++++++----------- resources/views/pages/design.twig | 52 +++++--- resources/views/pages/faq/overview.twig | 4 +- resources/views/pages/login.twig | 58 +++++---- resources/views/pages/settings/oauth.twig | 5 +- resources/views/pages/settings/settings.twig | 11 +- webpack.config.js | 2 +- yarn.lock | 5 + 17 files changed, 309 insertions(+), 314 deletions(-) diff --git a/includes/sys_menu.php b/includes/sys_menu.php index b6dec73c..c8f69ac0 100644 --- a/includes/sys_menu.php +++ b/includes/sys_menu.php @@ -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 '
    ' . join("\n", $menu) . '
'; + return '
    ' . join("\n", $menu) . '
'; } /** @@ -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 ); diff --git a/includes/sys_template.php b/includes/sys_template.php index 79e32531..0a7aeb98 100644 --- a/includes/sys_template.php +++ b/includes/sys_template.php @@ -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 '
  • ' - . '' - . ($glyphicon != '' ? ' ' : '') + return '
  • ' + . '' + . ($icon != '' ? ' ' : '') . $label . '' . '
    • '; } -/** - * @return string - */ -function toolbar_item_divider() +function toolbar_dropdown_item(string $href, string $label, bool $active, string $icon = null): string { - return '
  • '; + return strtr( + '
  • {icon}{label}
    • ', + [ + '{href}' => $href, + '{icon}' => $icon === null ? '' : '', + '{label}' => $label, + '{active}' => $active ? ' active' : '' + ] + ); +} + +function toolbar_dropdown_item_divider(): string +{ + return '
    • '; } /** - * @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 '
  • ' - . '' - . ($glyphicon != '' ? ' ' : '') - . $label - . '' - . '
    • '; + $template =<< + +
      + {submenu} +
    + +EOT; + + return strtr( + $template, + [ + '{class}' => $class, + '{label}' => $label, + '{icon}' => empty($icon) ? '' : '', + '{submenu}' => join("\n", $submenu) + ] + ); } /** @@ -239,7 +261,6 @@ function toolbar_popover($glyphicon, $label, $content, $class = '') '; } - /** * Generiert HTML Code für eine "Seite". * Fügt dazu die übergebenen Elemente zusammen. diff --git a/package.json b/package.json index 1340bf7d..80a55ef3 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss index bc2ea723..29b6ce4a 100644 --- a/resources/assets/themes/base.scss +++ b/resources/assets/themes/base.scss @@ -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, diff --git a/resources/assets/themes/cyborg_styles.scss b/resources/assets/themes/cyborg_styles.scss index 062ee71b..27fddcce 100644 --- a/resources/assets/themes/cyborg_styles.scss +++ b/resources/assets/themes/cyborg_styles.scss @@ -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; } } diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss index c8ecd15f..4ea19257 100644 --- a/resources/assets/themes/cyborg_variables.scss +++ b/resources/assets/themes/cyborg_variables.scss @@ -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-bg: #060606; +$body-bg: #060606; +$body-color: $gray-light; + //** Global text color on ``. $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 diff --git a/resources/assets/themes/theme1.scss b/resources/assets/themes/theme1.scss index 6590a346..24bce0dc 100644 --- a/resources/assets/themes/theme1.scss +++ b/resources/assets/themes/theme1.scss @@ -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; diff --git a/resources/views/admin/log.twig b/resources/views/admin/log.twig index f5b10754..4e746dce 100644 --- a/resources/views/admin/log.twig +++ b/resources/views/admin/log.twig @@ -46,7 +46,7 @@ {{ entry.created_at.format(__('Y-m-d H:i')) }} - {{ entry.level|capitalize }} + {{ entry.level|capitalize }} {{ entry.message|nl2br }} diff --git a/resources/views/errors/404.twig b/resources/views/errors/404.twig index deff010a..8a67d064 100644 --- a/resources/views/errors/404.twig +++ b/resources/views/errors/404.twig @@ -7,7 +7,7 @@

    4:{{ status|slice(1, 2) }} - {{ __("No sleep found") }} + {{ __("No sleep found") }}

    {% block content_text %} diff --git a/resources/views/layouts/parts/navbar.twig b/resources/views/layouts/parts/navbar.twig index 8eda1395..81ce5105 100644 --- a/resources/views/layouts/parts/navbar.twig +++ b/resources/views/layouts/parts/navbar.twig @@ -1,86 +1,64 @@ {% macro toolbar_item(label, link, active_page, icon) %} - - - {% if icon %}{% endif %} +
  • + + {% if icon %}{% endif %} {{ label|raw }}
    • {% endmacro %} -
    +
    + diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig index 132afad0..e6fa90c6 100644 --- a/resources/views/pages/design.twig +++ b/resources/views/pages/design.twig @@ -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 link amet, consectetur adipisici elit!' %} @@ -13,15 +23,15 @@ {% block content %}
    -

    {{ block('title') }} {{ themes[theme] }}

    +

    {{ block('title') }} {{ themes[theme] }}

    Elements small

    -

    Headings small

    -

    H4 small

    -
    H5 small
    -
    H6 small
    +

    Headings small

    +

    H4 small

    +
    H5 small
    +
    H6 small

    Lists

    @@ -78,17 +88,29 @@

    Navigation Tabs

    Navigation Pills

    -
    @@ -113,10 +135,10 @@
    -

    Labels

    +

    Badges

    - {% for type in types %} - {{ type|capitalize }} + {% for type in types_color %} + {{ type[0]|capitalize }} {% endfor %}

    diff --git a/resources/views/pages/faq/overview.twig b/resources/views/pages/faq/overview.twig index c1032f88..3e547774 100644 --- a/resources/views/pages/faq/overview.twig +++ b/resources/views/pages/faq/overview.twig @@ -34,7 +34,9 @@

    {{ item.question }} - {{ m.glyphicon('link') }} + + {{ m.glyphicon('link') }} +

    diff --git a/resources/views/pages/login.twig b/resources/views/pages/login.twig index 0fbfbaf3..6c1f9e1d 100644 --- a/resources/views/pages/login.twig +++ b/resources/views/pages/login.twig @@ -5,13 +5,13 @@ {% block content %}
    -
    +

    {{ __('Welcome to the %s!', [config('name') ~ m.angel() ~ (config('app_name')|upper) ])|raw }}

    -
    +
    {% for name,date in { (__('Buildup starts')): config('buildup_start'), (__('Event starts')): config('event_start'), @@ -28,19 +28,21 @@ {% endfor %}
    -
    -
    -
    -
    +
    +
    +
    +
    {% include 'layouts/parts/messages.twig' %}
    {{ csrf() }} -
    -
    - {{ m.angel }} +
    +
    + + {{ m.angel }} +
    -
    -
    - {{ m.glyphicon('lock') }} +
    +
    + + +
    -
    +
    -
    - {% for name,config in config('oauth') %} - - {{ __( - 'oauth.login-using-provider', - [__(config.name|default(name|capitalize))] - ) }} - - {% endfor %} -
    + {% if config('oauth') is not empty %} +
    + {% for name,config in config('oauth') %} + + {{ __( + 'oauth.login-using-provider', + [__(config.name|default(name|capitalize))] + ) }} + + {% endfor %} +
    + {% endif %}
    @@ -88,7 +94,7 @@
    -
    +

    {{ __('Register') }}

    {% if has_permission_to('register') and config('registration_enabled') %} diff --git a/resources/views/pages/settings/oauth.twig b/resources/views/pages/settings/oauth.twig index 13f07a72..b8f5806d 100644 --- a/resources/views/pages/settings/oauth.twig +++ b/resources/views/pages/settings/oauth.twig @@ -4,7 +4,10 @@ {% block title %}{{ __('settings.oauth') }}{% endblock %} {% block container_title %} -

    {{ __('settings.settings') }} {{ block('title') }}

    +

    + {{ __('settings.settings') }} + {{ block('title') }} +

    {% endblock %} {% block row_content %} diff --git a/resources/views/pages/settings/settings.twig b/resources/views/pages/settings/settings.twig index 23159796..938b8ac0 100644 --- a/resources/views/pages/settings/settings.twig +++ b/resources/views/pages/settings/settings.twig @@ -6,15 +6,18 @@ {% block content %}