Merge pull request #8 from netgen-layouts/datetime-picker-fix

Fix unscrollable sidebar and make datetime picker inline to prevent i…
netgen-layouts · Oct 19, 2023 · a80df38 · a80df38
2 parents a24a9c0 + 2c0444f
commit a80df38
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 36 deletions.
diff --git a/app/scripts/views/datetime_picker.js b/app/scripts/views/datetime_picker.js
@@ -45,6 +45,7 @@ module.exports = Core.DateTimePicker = View.extend({
 
  this.$dateEl.datetimepicker($.extend({}, this.defaultOptions, this.options));
  this.datePicker = this.$dateEl.data('DateTimePicker');
+ options.pluginOptions && this.datePicker.options(options.pluginOptions)
 
  this.$dateFormatted.val() && this.setPluginDate(this.$dateFormatted.val());
  this.toggleClearBtn();
@@ -72,5 +73,4 @@ module.exports = Core.DateTimePicker = View.extend({
  toggleClearBtn: function(){
  this.datePicker.date() ? this.$el.addClass('date-entered') : this.$el.removeClass('date-entered');
  },
-
 });
diff --git a/app/scripts/views/form.js b/app/scripts/views/form.js
@@ -105,6 +105,12 @@ module.exports = Core.View.extend({
  this.$el.find('.datetimepicker').each(function () {
  new Core.DateTimePicker({
  el: $(this),
+ pluginOptions: {
+ inline: true,
+ sideBySide: false,
+ widgetParent: $(this).closest(".row-input"),
+ keepOpen: false
+ }
  }).on('change', function () {
  self.$submit()
  })

diff --git a/app/styles/_datetime_picker.scss b/app/styles/_datetime_picker.scss
@@ -49,57 +49,90 @@
  }
 }
 
-.datetimepicker {
- padding-right: 2rem;
- position: relative;
 
- .sidebar-panel & {
- padding-right: 0;
- margin-right: .25rem;
+.bootstrap-datetimepicker-widget {
+ .sidebar-panel:first-child &,
+ .tab-pane:last-child & {
+ margin-bottom: 1.25rem;
 
- .datetime {
- input[type='text'] {
+ .material-icons {
+ &::before {
+ color: #ffffff;
+ }
+ }
 
- #sidebar & {
- padding-right: 2.125rem;
+ .picker-switch.accordion-toggle {
+ td span {
+ background-color: #595959;
+ height: 42px;
+ position: relative;
 
+ &:before {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
+ }
  }
  }
 
- .input-icon {
- transform: translateY(calc(-50% - .25rem));
- padding-right: 0.25em;
+ table {
+ thead tr:first-child th:hover {
+ background: #666666;
+ }
+
+ td {
+ &.day:hover,
+ span:hover {
+ background: #666666;
+ }
+ }
  }
  }
+}
 
- .js-clear-input {
- right: auto;
- left: 100%;
- margin-top: -1.25rem;
+.datetimepicker {
+ padding-right: 2rem;
+ position: relative;
 
- }
+ .sidebar-panel:first-child &,
+ .tab-pane:last-child & {
+ padding-right: 0;
+ margin-right: .25rem;
 
- .bootstrap-datetimepicker-widget table {
- thead tr:first-child th:hover {
- background: #666666;
- }
+ .datetime {
+ input[type='text'] {
 
- td {
- &.day:hover,
- span:hover {
- background: #666666;
+ #sidebar & {
+ padding-right: 2.125rem;
+
+ }
+ }
+
+ .input-icon {
+ transform: translateY(0);
+ top: 0;
+ padding-right: 0.25em;
  }
  }
- }
 
- .dropdown-menu {
- background-color: #4f4f4f;
- color: white;
+ .js-clear-input {
+ right: auto;
+ left: 100%;
+ top: .25rem;
+ margin-top: 0;
+
+ i { color: #ffffff;}
+ }
 
- * {
+ .dropdown-menu {
+ background-color: #4f4f4f;
  color: white;
+
+ * {
+ color: white;
+ }
  }
- }
  }
 
  .input-group {

diff --git a/app/styles/_sidebar.scss b/app/styles/_sidebar.scss
@@ -10,9 +10,7 @@
  padding: $gutter;
  border-top: 1px solid $toolbarBorderColor;
  color: #fff;
- overflow-y: visible;
- overflow-x: visible;
-
+ overflow-y: auto;
 
  h1 {
  font-size: 1.4em;