kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-22 07:54:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Use pickadate instead of the jquery datetimepicker to select dates in the dashboard, initialize new dates with the current date, and tweak input styles a bit

Browse source
This commit is contained in:
Kevin MacMartin 2018-01-15 23:43:20 -05:00
parent b0a5a55c9a
commit 0b3a322bf3
5 changed files with 39 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
bower.json
View file

@ -11,9 +11,9 @@
"awesome-bootstrap-checkbox": "~0.3.7", "awesome-bootstrap-checkbox": "~0.3.7",
"Sortable": "~1.6.0", "Sortable": "~1.6.0",
"simplemde": "~1.11.2", "simplemde": "~1.11.2",
"datetimepicker": "~2.5.16",
"SpinKit": "~1.2.5", "SpinKit": "~1.2.5",
"bootstrap-sass": "^3.3.7", "bootstrap-sass": "^3.3.7",
"list.js": "^1.5.0" "list.js": "^1.5.0",
"pickadate": "^3.5.6"
} }
} }

3
gulpfile.js vendored
View file

@ -61,7 +61,8 @@ const jsDashboardLibs = [
"bower_components/jquery/dist/jquery.js", "bower_components/jquery/dist/jquery.js",
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js", "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
"bower_components/Sortable/Sortable.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/list.js/dist/list.js",
"bower_components/simplemde/dist/simplemde.min.js" "bower_components/simplemde/dist/simplemde.min.js"
]; ];

18
resources/assets/js/dashboard.js vendored
View file

@ -263,7 +263,7 @@ function editItemInit() {
$submit = $("#submit"), $submit = $("#submit"),
$backButton = $("#back"), $backButton = $("#back"),
$textInputs = $(".text-input"), $textInputs = $(".text-input"),
$dateTimePickers = $(".date-time-picker"), $datePickers = $(".date-picker"),
$mkdEditors = $(".mkd-editor"), $mkdEditors = $(".mkd-editor"),
$imgUploads = $(".image-upload"), $imgUploads = $(".image-upload"),
$token = $("#_token"), $token = $("#_token"),
@ -327,8 +327,8 @@ function editItemInit() {
addFormData(column, value); addFormData(column, value);
}); });
// add values from the contents of date-time-picker class elements // add values from the contents of date-picker class elements
$dateTimePickers.each(function() { $datePickers.each(function() {
const $this = $(this), const $this = $(this),
column = $this.attr("id"), column = $this.attr("id"),
value = $this.val() + ":00"; value = $this.val() + ":00";
@ -401,12 +401,12 @@ function editItemInit() {
} }
} }
// enable the datetimepicker for each element with the date-time-picker class // enable the datepicker for each element with the date-picker class
$dateTimePickers.each(function() { $datePickers.each(function() {
$(this).datetimepicker({ $(this).pickadate({
format: "Y-m-d H:i", format: "yyyy-mm-dd",
allowTimes: allowTimes, formatSubmit: "yyyy-mm-dd",
step: 15 clear: false
}); });
}); });

28
resources/assets/sass/dashboard.scss vendored
View file

@ -2,7 +2,8 @@
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss"; @import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "font-awesome/scss/font-awesome.scss"; @import "font-awesome/scss/font-awesome.scss";
@import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.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 "simplemde/dist/simplemde.min";
@import "SpinKit/css/spinners/11-folding-cube"; @import "SpinKit/css/spinners/11-folding-cube";
@ -338,8 +339,18 @@ body {
.edit-item { .edit-item {
margin-top: 10px; 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 { label {
height: 32px; height: 32px;
@ -350,6 +361,17 @@ body {
margin-bottom: 15px; margin-bottom: 15px;
display: block; display: block;
width: 100%; 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 { .current-image {

2
resources/views/dashboard/edit-item.blade.php
View file

@ -32,7 +32,7 @@
@if($column['type'] == 'text') @if($column['type'] == 'text')
<input class="text-input" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}" /> <input class="text-input" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}" />
@elseif($column['type'] == 'date') @elseif($column['type'] == 'date')
<input class="date-time-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ preg_replace('/:[0-9][0-9]$/', '', $value) }}" /> <input class="date-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value == '' ? date('Y-m-d', time()) : preg_replace('/:[0-9][0-9]$/', '', $value) }}" />
@elseif($column['type'] == 'mkd') @elseif($column['type'] == 'mkd')
<textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea> <textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea>
@elseif($column['type'] == 'select') @elseif($column['type'] == 'select')