fix css and datepicker

includes/sys_form.php

@@ -68,7 +68,7 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
     $end_date = is_numeric($end_date) ? date('Y-m-d', $end_date) : '';
 
     return form_element($label, '
-    <div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
+    <div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '" data-target-input="nearest">
         <input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '" autocomplete="off">'
         . '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
     </div>

includes/view/ShiftCalendarRenderer.php

@@ -204,10 +204,7 @@ class ShiftCalendarRenderer
             $rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
         }
 
-        $bg = '';
-        if (theme_type() === 'light') {
-            $bg = 'bg-light';
-        }
+        $bg = 'bg-' . theme_type();
 
         return div('lane', [
             div('header ' . $bg, $lane->getHeader()),

resources/assets/js/forms.js

@@ -98,8 +98,16 @@ $(function () {
  */
 $(function () {
     $([
-        {'select': $('.input-group.date'), 'format': 'YYYY-MM-DD'},
-        {'select': $('.input-group.datetime'), 'format': 'YYYY-MM-DD HH:mm'},
+        {
+            'select': $('.input-group.date'), 
+            'format': 'YYYY-MM-DD',
+            'extraFormats': []
+        },
+        {
+            'select': $('.input-group.datetime'),
+            'format': 'YYYY-MM-DD HH:mm',
+            'extraFormats': ['YYYY-MM-DDTHH:mm']
+        },
     ]).each(function (_, element) {
         element.select.each(function () {
             var elem = $(this);
@@ -108,6 +116,7 @@ $(function () {
                 maxDate: '',
                 locale: $('html').attr('lang'),
                 format: element.format,
+                extraFormats: element.extraFormats,
                 widgetPositioning: {horizontal: 'auto', vertical: 'bottom'},
                 icons: {
                     time: 'bi bi-clock',
@@ -116,29 +125,29 @@ $(function () {
                     down: 'bi bi-arrow-down'
                 }
             };
+
             $.extend(opts, elem.data());
+
             if (opts.minDate.length === 0) {
                 delete opts.minDate;
             }
+
             if (opts.maxDate.length === 0) {
                 delete opts.maxDate;
             }
+
             elem.children('input').attr('type', 'text');
-            elem.children().on('click', function (ev) {
+            elem.datetimepicker(opts);
+
+            // close on click anywhere outside
+            $(document).on('click', () => {
+                elem.data('datetimepicker').hide()
+            })
+
+            elem.children().on('click', (ev) => {
                 ev.stopImmediatePropagation();
-                if (typeof elem.data('datetimepicker') === 'undefined') {
-                    elem.datetimepicker(opts);
-                    elem.data('datetimepicker').show();
-
-                    // close on click anywhere outside
-                    $(document).on('click', () => {
-                        elem.data('datetimepicker').hide()
-                    })
-                } else {
-                    elem.data('datetimepicker').toggle();
-                }
+                elem.data('datetimepicker').toggle();
             });
-
         });
     });
 });

resources/assets/js/sticky-headers.js

@@ -23,6 +23,7 @@ $(document).ready(function () {
                 });
                 headers.css({
                     'top': Math.max(0, $(window).scrollTop() - top
+                        - 13
                         + topReference.offset().top)
                         + 'px'
                 });

resources/assets/themes/base.scss

@@ -106,6 +106,7 @@ table a > .icon-icon_angel {
   margin-bottom: 0;
 }
 
+.input-group.date,
 .input-group.datetime,
 .input-group.time {
     .bootstrap-datetimepicker-widget {

resources/views/layouts/maintenance.html

@@ -8,59 +8,43 @@
     <script type="text/javascript" src="assets/vendor.js"></script>
 </head>
 <body>
-<div class="navbar navbar-default navbar-fixed-top">
+<div class="navbar navbar-light bg-light fixed-top">
     <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed"
-                    data-toggle="collapse" data-target="#navbar-collapse-1">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#">
-                <span class="icon-icon_angel"></span> <strong class="visible-lg-inline">%APP_NAME%</strong>
-            </a>
-        </div>
-        <div class="collapse navbar-collapse" id="navbar-collapse-1">
-            <ul class="nav navbar-nav"></ul>
-            <ul class="nav navbar-nav navbar-right">
-            </ul>
-        </div>
+        <a class="navbar-brand" href="#">
+            <span class="icon-icon_angel"></span> <strong class="visible-lg-inline">%APP_NAME%</strong>
+        </a>
     </div>
 </div>
 <div class="container-fluid">
-    <div class="row">
-        <div class="jumbotron">
-            <div class="container text-center">
-                <h1>
-                    <span class="bi bi-scissors"></span>
-                    <span class="bi bi-wrench"></span>
-                    <span class="bi bi-cloud-lightning-rain"></span>
-                </h1>
-                <div class="col-md-6">
-                    <h2>
-                        The <span class="icon-icon_angel"></span> <strong>%APP_NAME%</strong> is in maintenance mode.
-                    </h2>
-                    <p>This may be due to...</p>
-                    <p>
-                        ...archangels closing the gates of heaven. <br>
-                        ...somebody's stolen the power chord and now the battery is empty. <br>
-                        ...DHCP decided to give me another ip address.
-                    </p>
-                </div>
-                <div class="col-md-6">
-                    <iframe width="560" height="315"
-                            src="https://www.youtube.com/embed/0aV_vHcunSQ?rel=0"
-                            frameborder="0" allowfullscreen>
-                    </iframe>
-                </div>
+    <div class="container text-center">
+        <h1 class="mb-4">
+            <span class="bi bi-scissors"></span>
+            <span class="bi bi-wrench"></span>
+            <span class="bi bi-cloud-lightning-rain"></span>
+        </h1>
+        <div class="row">
+            <div class="col-xl-6">
+                <h2>
+                    The <span class="icon-icon_angel"></span> <strong>%APP_NAME%</strong> is in maintenance mode.
+                </h2>
+                <p>This may be due to...</p>
+                <p>
+                    ...archangels closing the gates of heaven. <br>
+                    ...somebody's stolen the power chord and now the battery is empty. <br>
+                    ...DHCP decided to give me another ip address.
+                </p>
+            </div>
+            <div class="col-xl-6">
+                <iframe width="560" height="315"
+                        src="https://www.youtube.com/embed/0aV_vHcunSQ?rel=0"
+                        frameborder="0" allowfullscreen>
+                </iframe>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-md-12">
-            <div class="text-center footer">
+            <div class="text-center footer my-5">
                 <a href="https://github.com/engelsystem/engelsystem/issues">Bugs / Features</a>
                 · <a href="https://github.com/engelsystem/engelsystem/">Development Platform</a>
             </div>

resources/views/pages/design.twig

@@ -260,6 +260,26 @@
                         </label>
                     </div>
                 </div>
+                <div class="row">
+                    <div class="col-md-3 col-lg-2">
+                        <label class="form-label">Date</label>
+                        <div class="input-group date" data-target-input="nearest">
+                            <input type="date" placeholder="YYYY-MM-DD" name="design-date" class="form-control" value="2021-09-15">
+                            <span class="input-group-text">
+                                <span class="bi bi-grid-3x3-gap-fill"></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="col-md-3 col-lg-2">
+                        <label class="form-label">Datetime</label>
+                        <div class="input-group datetime" data-target-input="nearest">
+                            <input type="datetime-local" placeholder="YYYY-MM-DD HH:MM" name="design-datetime" class="form-control" value="2021-09-15T13:37">
+                            <span class="input-group-text">
+                                <span class="bi bi-grid-3x3-gap-fill"></span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>