migrate shift overview cards to panels

migrate shift overview cards to panels

includes/pages/user_shifts.php

@@ -276,7 +276,7 @@ function view_user_shifts()
                     . __('Description of the jobs.')
                     . '</a>',
                 'shifts_table'  => msg() . $shiftCalendarRenderer->render(),
-                'ical_text'     => ical_hint(),
+                'ical_text'     => div('mt-3', ical_hint()),
                 'filter'        => __('Filter'),
                 'filter_toggle' => __('shifts.filter.toggle'),
                 'set_yesterday' => __('Yesterday'),

includes/view/ShiftCalendarRenderer.php

@@ -204,8 +204,13 @@ class ShiftCalendarRenderer
             $rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
         }
 
+        $bg = '';
+        if (theme_type() === 'light') {
+            $bg = 'bg-light';
+        }
+
         return div('lane', [
-            div('header', $lane->getHeader()),
+            div('header ' . $bg, $lane->getHeader()),
             $html
         ]);
     }
@@ -244,8 +249,13 @@ class ShiftCalendarRenderer
      */
     private function renderTimeLane()
     {
+        $bg = '';
+        if (theme_type() === 'light') {
+            $bg = 'bg-light';
+        }
+
         $time_slot = [
-            div('header', [
+            div('header ' . $bg, [
                 __('Time')
             ])
         ];
@@ -311,7 +321,7 @@ class ShiftCalendarRenderer
      */
     private function renderLegend()
     {
-        return div('legend', [
+        return div('legend mt-3', [
             badge(__('Your shift'), 'primary'),
             badge(__('Help needed'), 'danger'),
             badge(__('Other angeltype needed / collides with my shifts'), 'warning'),

includes/view/ShiftCalendarShiftRenderer.php

@@ -5,6 +5,9 @@ namespace Engelsystem;
 use Engelsystem\Models\Room;
 use Engelsystem\Models\User\User;
 
+use function config;
+use function theme_type;
+
 /**
  * Renders a single shift for the shift calendar
  */
@@ -23,7 +26,7 @@ class ShiftCalendarShiftRenderer
     {
         $info_text = '';
         if ($shift['title'] != '') {
-            $info_text = icon('info') . $shift['title'] . '<br>';
+            $info_text = icon('info-circle') . $shift['title'] . '<br>';
         }
         list($shift_signup_state, $shifts_row) = $this->renderShiftNeededAngeltypes(
             $shift,
@@ -48,10 +51,10 @@ class ShiftCalendarShiftRenderer
                 . ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN)
                 . 'px;',
                 div(
-                    'shift panel panel-' . $class,
+                    'shift card bg-' . $class,
                     [
                         $this->renderShiftHead($shift, $class, $shift_signup_state->getFreeEntries()),
-                        div('panel-body', [
+                        div('card-body ' . $this->classBg(), [
                             $info_text,
                             Room_name_render($room)
                         ]),
@@ -79,7 +82,7 @@ class ShiftCalendarShiftRenderer
             case ShiftSignupState::NOT_ARRIVED:
             case ShiftSignupState::NOT_YET:
             case ShiftSignupState::SHIFT_ENDED:
-                return 'default';
+                return 'light';
 
             case ShiftSignupState::ANGELTYPE:
             case ShiftSignupState::COLLIDES:
@@ -133,7 +136,7 @@ class ShiftCalendarShiftRenderer
         }
 
         if (auth()->can('user_shifts_admin')) {
-            $html .= '<li class="list-group-item">';
+            $html .= '<li class="list-group-item d-flex align-items-center ' . $this->classBg() . '">';
             $html .= button(shift_entry_create_link_admin($shift),
                 icon('plus-lg') . __('Add more angels'),
                 'btn-sm'
@@ -143,7 +146,7 @@ class ShiftCalendarShiftRenderer
         if ($html != '') {
             return [
                 $shift_signup_state,
-                '<ul class="list-group">' . $html . '</ul>'
+                '<ul class="list-group list-group-flush">' . $html . '</ul>'
             ];
         }
 
@@ -167,8 +170,8 @@ class ShiftCalendarShiftRenderer
     {
         $entry_list = [];
         foreach ($shift_entries as $entry) {
-            $style = $entry['freeloaded'] ? ' text-decoration: line-through;' : '';
+            $class = $entry['freeloaded'] ? 'text-decoration-line-through' : '';
-            $entry_list[] = '<span style="' . $style . '">' . User_Nick_render($entry) . '</span>';
+            $entry_list[] = '<span class="text-nowrap ' . $class . '">' . User_Nick_render($entry) . '</span>';
         }
         $shift_signup_state = Shift_signup_allowed(
             $user,
@@ -186,14 +189,14 @@ class ShiftCalendarShiftRenderer
             case ShiftSignupState::ADMIN:
             case ShiftSignupState::FREE:
                 // When admin or free display a link + button for sign up
-                $entry_list[] = '<a href="'
+                $entry_list[] = '<a class="me-1 text-nowrap" href="'
                     . shift_entry_create_link($shift, $angeltype)
                     . '">'
                     . $inner_text
                     . '</a> '
                     . button(
                         shift_entry_create_link($shift, $angeltype),
-                        __('Sign up'), 'btn-sm btn-primary d-print-none'
+                        __('Sign up'), 'btn-sm btn-primary text-nowrap d-print-none'
                     );
                 break;
 
@@ -240,8 +243,8 @@ class ShiftCalendarShiftRenderer
                 break;
         }
 
-        $shifts_row = '<li class="list-group-item">';
+        $shifts_row = '<li class="list-group-item d-flex flex-wrap align-items-center ' . $this->classBg() . '">';
-        $shifts_row .= '<strong>' . AngelType_name_render($angeltype) . ':</strong> ';
+        $shifts_row .= '<strong class="me-1">' . AngelType_name_render($angeltype) . ':</strong> ';
         $shifts_row .= join(', ', $entry_list);
         $shifts_row .= '</li>';
         return [
@@ -250,6 +253,20 @@ class ShiftCalendarShiftRenderer
         ];
     }
 
+    /**
+     * Return the corresponding bg class
+     *
+     * @return string
+     */
+    private function classBg(): string
+    {
+        if (theme_type() === 'light') {
+            return 'bg-white';
+        }
+
+        return 'bg-dark';
+    }
+
     /**
      * Renders the shift header
      *
@@ -261,16 +278,16 @@ class ShiftCalendarShiftRenderer
     {
         $header_buttons = '';
         if (auth()->can('admin_shifts')) {
-            $header_buttons = '<div class="float-end d-print-none">' . table_buttons([
+            $header_buttons = '<div class="ms-auto d-print-none">' . table_buttons([
                     button(
                         page_link_to('user_shifts', ['edit_shift' => $shift['SID']]),
                         icon('pencil'),
-                        "btn-$class btn-sm"
+                        "btn-$class btn-sm border-light"
                     ),
                     button(
                         page_link_to('user_shifts', ['delete_shift' => $shift['SID']]),
                         icon('trash'),
-                        "btn-$class btn-sm"
+                        "btn-$class btn-sm border-light"
                     )
                 ]) . '</div>';
         }
@@ -279,11 +296,11 @@ class ShiftCalendarShiftRenderer
             . $shift['name'];
 
         if ($needed_angeltypes_count > 0) {
-            $shift_heading = '<span class="badge">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
+            $shift_heading = '<span class="badge bg-light text-danger me-1">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
         }
 
-        return div('panel-heading', [
+        return div('card-header d-flex align-items-center', [
-            '<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
+            '<a class="d-flex align-items-center text-white" href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
             $header_buttons
         ]);
     }

resources/assets/themes/base.scss

@@ -170,7 +170,6 @@ table a > .icon-icon_angel {
     flex-shrink: 1;
 
     .header {
-      background: $dark; //@todo bs5
       border-bottom: 1px solid $table-border-color;
       height: 30px;
       padding: 5px 5px 5px 16px;
@@ -252,14 +251,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   overflow-x: inherit;
 }
 
-.inline-form-spacing {
-  margin-bottom: map-get($spacers, 3);
-}
-
-.user-settings .settings-menu ul {
-  margin-top: map-get($spacers, 3); //@todo bs5
-}
-
 span.ref-id[id] {
   padding-top: 50px;
 }
@@ -352,59 +343,3 @@ span.ref-id[id] {
     }
   }
 }
-
-@media screen and (max-width: map-get($grid-breakpoints, 'xxl')) {
-  #navbar-offcanvas {
-    display: block;
-    position: absolute;
-    width: 90%;
-    height: calc(100vh - #{$navbar-height});
-    max-height: unset;
-    left: 101%;
-    top: $navbar-height + 1;
-    // extra padding because mobile Safari displays a bottom bar hiding parts of the menu
-    padding-bottom: 75px;
-
-    transition: left .3s ease-in-out;
-
-    background: $light; // @todo bs5
-    margin: 0 !important;   // Overridden in theme with high specifity:
-    // .container > .navbar-header,
-    // .container-fluid > .navbar-header,
-    // .container > .navbar-collapse,
-    // .container-fluid > .navbar-collapse
-
-    // Is open
-    &.collapse.in {
-      left: 10%;
-      display: block;
-      overflow-y: auto;
-      box-shadow: -5px 20px 20px 0 rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5);
-    }
-
-    // Hide current page in nav.
-    .nav > li.active {
-      display: none;
-    }
-
-    .caret {
-      float: right;
-      margin-top: 7px;
-    }
-  }
-
-  .navbar-toggle {
-    align-items: center;
-    font-size: 18px;
-    display: flex;
-    height: 38px;
-    justify-content: center;
-    padding: 0;
-    transform: none;
-    width: 38px;
-
-    .icon-close {
-      padding: 0;
-    }
-  }
-}

resources/views/admin/log.twig

@@ -10,7 +10,7 @@
 
         <div class="row">
             <div class="col-md-12">
-                <div class="inline-form-spacing">
+                <div class="mb-3">
                     <form method="POST" action="{{ url('/admin/logs') }}" class="form-inline">
                         {{ csrf() }}
 

resources/views/pages/settings/settings.twig

@@ -14,7 +14,7 @@
 
         <div class="row">
             <div class="col-md-3 settings-menu">
-                <ul class="nav nav-pills flex-column">
+                <ul class="nav nav-pills flex-column mt-3">
                     {% for url,title in settings_menu %}
                         <li class="nav-item">
                             <a class="nav-link {% if url == request.url() %}active{% endif %}" href="{{ url }}">{{ __(title) }}</a>

resources/views/pages/user-shifts.html

@@ -4,8 +4,9 @@
         <div class="col-md-6">
             <h1>%title%</h1>
             <div class="row align-items-center">
-                <div class="col-2">%start_select%</div>
+                <div class="col-12 col-xxl-5 row pe-xxl-0">
-                <div class="col-2">
+                    <div class="col-6 pe-xxl-0">%start_select%</div>
+                    <div class="col-6">
                         <div class="input-group time" data-target-input="nearest">
                             <input
                                 type="time" class="form-control" id="start_time" name="start_time" size="5"
@@ -18,9 +19,11 @@
                             </div>
                         </div>
                     </div>
-                &#8211;
+                </div>
-                <div class="col-2">%end_select%</div>
+                <div class="col-12 col-xxl-1 text-center px-xxl-0">&#8211;</div>
-                <div class="col-2">
+                <div class="col-12 col-xxl-5 row px-xxl-0">
+                    <div class="col-6 pe-xxl-0">%end_select%</div>
+                    <div class="col-6">
                         <div class="input-group time" data-target-input="nearest">
                             <input
                                 type="time" class="form-control" id="end_time" name="end_time" size="5"
@@ -34,6 +37,7 @@
                         </div>
                     </div>
                 </div>
+            </div>
             <div class="form-group d-print-none" style="margin-top: .5em">
                 <div class="btn-group">
                     <a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>