Upgrade bootswatch to version 4

assets/js/admin.js

@@ -1,26 +1,12 @@
 import '../scss/admin.scss';
-import 'eonasdan-bootstrap-datetimepicker';
 import 'typeahead.js';
 import Bloodhound from "bloodhound-js";
 import 'bootstrap-tagsinput';
+import 'flatpickr';
+import 'flatpickr/dist/flatpickr.css';
+import moment from 'moment';
 
 $(function() {
-    // Datetime picker initialization.
-    // See https://eonasdan.github.io/bootstrap-datetimepicker/
-    $('[data-toggle="datetimepicker"]').datetimepicker({
-        icons: {
-            time: 'fa fa-clock-o',
-            date: 'fa fa-calendar',
-            up: 'fa fa-chevron-up',
-            down: 'fa fa-chevron-down',
-            previous: 'fa fa-chevron-left',
-            next: 'fa fa-chevron-right',
-            today: 'fa fa-check-circle-o',
-            clear: 'fa fa-trash',
-            close: 'fa fa-remove'
-        }
-    });
-
     // Bootstrap-tagsinput initialization
     // https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
     var $input = $('input[data-toggle="tagsinput"]');
@@ -41,6 +27,22 @@ $(function() {
             }
         });
     }
+
+    const locale = $('#post_publishedAt').data('date-locale');
+    const Locale = require(`flatpickr/dist/l10n/${locale}.js`).default[locale];
+    flatpickr.localize(Locale);
+
+    $('[data-toggle="datetimepicker"]').flatpickr({
+        enableTime: true,
+        dateFormat: $('#post_publishedAt').data('date-format'),
+        allowInput: true,
+        parseDate: (datestr, format) => {
+            return moment(datestr, format, true).toDate();
+        },
+        formatDate: (date, format, locale) => {
+            return moment(date).format(format);
+        }
+    });
 });
 
 // Handling the modal confirmation message.
@@ -57,7 +59,7 @@ $(document).on('submit', 'form[data-confirmation]', function (event) {
             .on('click', '#btnYes', function () {
                 $confirm.data('result', 'yes');
                 $form.find('input[type="submit"]').attr('disabled', 'disabled');
-                $form.submit();
+                $form.trigger('submit');
             })
             .modal('show');
     }

assets/js/app.js

@@ -1,11 +1,10 @@
 import '../scss/app.scss';
 
 // loads the Bootstrap jQuery plugins
-import 'bootstrap-sass/assets/javascripts/bootstrap/transition.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/alert.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/collapse.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js';
-import 'bootstrap-sass/assets/javascripts/bootstrap/modal.js';
+import 'bootstrap/js/dist/alert';
+import 'bootstrap/js/dist/collapse';
+import 'bootstrap/js/dist/dropdown';
+import 'bootstrap/js/dist/modal';
 import 'jquery'
 
 // loads the code syntax highlighting library

assets/js/highlight.js

@@ -1,8 +1,8 @@
-import hljs from 'highlight.js/lib/highlight';
+import highlight from 'highlight.js/lib/core';
 import php from 'highlight.js/lib/languages/php';
 import twig from 'highlight.js/lib/languages/twig';
 
-hljs.registerLanguage('php', php);
-hljs.registerLanguage('twig', twig);
+highlight.registerLanguage('php', php);
+highlight.registerLanguage('twig', twig);
 
-hljs.initHighlightingOnLoad();
+highlight.initHighlightingOnLoad();

assets/scss/_variables.scss

@@ -0,0 +1,16 @@
+// setting the value of this variable to an empty data URL is the only working solution
+// to load the Bootswatch web fonts locally and avoid loading them from Google servers
+// see https://github.com/thomaspark/bootswatch/issues/55#issuecomment-298093182
+$web-font-path: 'data:text/css;base64,';
+
+// Make sure the lato font is resolved correctly
+$lato-font-path: '~lato-font/fonts';
+
+$font-default: 17px;
+$font-heading: 2.5rem;
+$font-title: 1.85rem;
+
+$secondary-color: #ecf0f1;
+$gray-7500: #e9ecec;
+
+@import "~bootswatch/dist/flatly/variables";

assets/scss/admin.scss

@@ -1,5 +1,5 @@
-@import "~bootswatch/flatly/variables";
-@import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
+@import "variables";
+// @import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build.scss";
 @import "bootstrap-tagsinput.scss";
 
 /* Page: 'Backend post index'
@@ -24,3 +24,12 @@ body#admin_post_show .post-tags .label-default {
 body#admin_post_show .post-tags .label-default i {
   color: #95A6A7;
 }
+
+.form-control {
+  border-width: .125rem;
+
+  &:focus {
+    color: $blue;
+    box-shadow: none;
+  }
+}