diff --git a/bower.json b/bower.json index 969ded3..9f4c518 100644 --- a/bower.json +++ b/bower.json @@ -11,9 +11,9 @@ "awesome-bootstrap-checkbox": "~0.3.7", "Sortable": "~1.6.0", "simplemde": "~1.11.2", - "datetimepicker": "~2.5.16", "SpinKit": "~1.2.5", "bootstrap-sass": "^3.3.7", - "list.js": "^1.5.0" + "list.js": "^1.5.0", + "pickadate": "^3.5.6" } } diff --git a/gulpfile.js b/gulpfile.js index 91f0a6d..8fc8b5e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -61,7 +61,8 @@ const jsDashboardLibs = [ "bower_components/jquery/dist/jquery.js", "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js", "bower_components/Sortable/Sortable.js", - "bower_components/datetimepicker/build/jquery.datetimepicker.full.js", + "bower_components/pickadate/lib/picker.js", + "bower_components/pickadate/lib/picker.date.js", "bower_components/list.js/dist/list.js", "bower_components/simplemde/dist/simplemde.min.js" ]; diff --git a/resources/assets/js/dashboard.js b/resources/assets/js/dashboard.js index acef1e4..9051a46 100644 --- a/resources/assets/js/dashboard.js +++ b/resources/assets/js/dashboard.js @@ -263,7 +263,7 @@ function editItemInit() { $submit = $("#submit"), $backButton = $("#back"), $textInputs = $(".text-input"), - $dateTimePickers = $(".date-time-picker"), + $datePickers = $(".date-picker"), $mkdEditors = $(".mkd-editor"), $imgUploads = $(".image-upload"), $token = $("#_token"), @@ -327,8 +327,8 @@ function editItemInit() { addFormData(column, value); }); - // add values from the contents of date-time-picker class elements - $dateTimePickers.each(function() { + // add values from the contents of date-picker class elements + $datePickers.each(function() { const $this = $(this), column = $this.attr("id"), value = $this.val() + ":00"; @@ -401,12 +401,12 @@ function editItemInit() { } } - // enable the datetimepicker for each element with the date-time-picker class - $dateTimePickers.each(function() { - $(this).datetimepicker({ - format: "Y-m-d H:i", - allowTimes: allowTimes, - step: 15 + // enable the datepicker for each element with the date-picker class + $datePickers.each(function() { + $(this).pickadate({ + format: "yyyy-mm-dd", + formatSubmit: "yyyy-mm-dd", + clear: false }); }); diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss index 4cfa909..e3d0af6 100644 --- a/resources/assets/sass/dashboard.scss +++ b/resources/assets/sass/dashboard.scss @@ -2,7 +2,8 @@ @import "bootstrap-sass/assets/stylesheets/_bootstrap.scss"; @import "font-awesome/scss/font-awesome.scss"; @import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss"; -@import "datetimepicker/jquery.datetimepicker"; +@import "pickadate/lib/themes/default"; +@import "pickadate/lib/themes/default.date"; @import "simplemde/dist/simplemde.min"; @import "SpinKit/css/spinners/11-folding-cube"; @@ -338,8 +339,18 @@ body { .edit-item { margin-top: 10px; - .CodeMirror, .CodeMirror-scroll { min-height: 100px; } - .date-time-picker { cursor: pointer; } + + .CodeMirror, .CodeMirror-scroll { + min-height: 100px; + } + + .CodeMirror { + padding: 5px; + } + + .picker__holder { + overflow-y: hidden; + } label { height: 32px; @@ -350,6 +361,17 @@ body { margin-bottom: 15px; display: block; width: 100%; + + &:not([type=file]) { + padding: 5px 8px; + border: 1px solid darken($c-dashboard-light, 10%); + border-radius: 2px; + transition: border-color 150ms; + } + + &.date-picker { + cursor: pointer; + } } .current-image { diff --git a/resources/views/dashboard/edit-item.blade.php b/resources/views/dashboard/edit-item.blade.php index fde660e..c7cd19a 100644 --- a/resources/views/dashboard/edit-item.blade.php +++ b/resources/views/dashboard/edit-item.blade.php @@ -32,7 +32,7 @@ @if($column['type'] == 'text') @elseif($column['type'] == 'date') - + @elseif($column['type'] == 'mkd') @elseif($column['type'] == 'select')