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

Fix styling and initialization for datetime picker in sidebar

app/scripts/models/blocks/block.js

@@ -57,7 +57,6 @@ module.exports = BmModel.extend({
 
 
  remove_block_from_zone: function(){
- console.log(this, arguments);
  return this;
  },
 
@@ -169,7 +168,6 @@ module.exports = BmModel.extend({
  method: 'POST',
  patch: true
  }).done(function() {
- console.log(this);
  this.update_zone_blocks(previous_zone, attributes.zone_identifier);
  this.zone().set('block_ids', zone_block_ids);
  }.bind(this));

app/scripts/views/sidebar.js

@@ -50,6 +50,12 @@ module.exports = Core.View.extend({
  this.$toggle_panels_on_render();
  this.$add_range_values();
  this.remove_loader();
+
+ this.$el.find('.datetimepicker').each(function () {
+ var a = new Core.DateTimePicker({
+ el: $(this),
+ })
+ })
  },
 
  remove_loader: function(){

app/styles/_app.scss

@@ -17,3 +17,4 @@
 @import 'layout_type_modal';
 @import 'specific';
 @import 'modal';
+@import 'datetime_picker'

app/styles/_datetime_picker.scss

@@ -52,6 +52,56 @@
 .datetimepicker {
  padding-right: 2rem;
  position: relative;
+
+ .sidebar-panel & {
+ padding-right: 0;
+ margin-right: .25rem;
+
+ .datetime {
+ input[type='text'] {
+
+ #sidebar & {
+ padding-right: 2.125rem;
+
+ }
+ }
+
+ .input-icon {
+ transform: translateY(calc(-50% - .25rem));
+ padding-right: 0.25em;
+ }
+ }
+
+ .js-clear-input {
+ right: auto;
+ left: 100%;
+ margin-top: -1.25rem;
+
+ }
+
+ .bootstrap-datetimepicker-widget table {
+ thead tr:first-child th:hover {
+ background: #666666;
+ }
+
+ td {
+ &.day:hover,
+ span:hover {
+ background: #666666;
+ }
+ }
+ }
+
+ .dropdown-menu {
+ background-color: #4f4f4f;
+ color: white;
+
+ * {
+ color: white;
+ }
+ }
+ }
+
  .input-group {
  flex: 1;
  }

app/styles/_sidebar.scss

@@ -10,7 +10,10 @@
  padding: $gutter;
  border-top: 1px solid $toolbarBorderColor;
  color: #fff;
- overflow-y: auto;
+ overflow-y: visible;
+ overflow-x: visible;
+
+
  h1 {
  font-size: 1.4em;
  }