Adds custom styles for date picker

app/assets/stylesheets/application.scss

@@ -10,4 +10,5 @@
 @import "c3";
 @import "annotator.min";
 @import "annotator_overrides";
-@import "jquery-ui/datepicker";
+@import "jquery-ui/datepicker";
+@import "datepicker_overrides";

app/assets/stylesheets/datepicker_overrides.scss

@@ -0,0 +1,94 @@
+// Overrides styles of jquery-ui/datepicker
+//
+
+.ui-datepicker-header {
+  background: $brand;
+  color: white;
+  font-weight: bold;
+}
+
+.ui-datepicker-calendar {
+
+  .ui-state-default {
+    background: $highlight;
+    color: $text;
+  }
+
+  .ui-state-hover, .ui-state-active {
+    background: $brand;
+    color: white;
+  }
+}
+
+.ui-datepicker {
+  padding: 0;
+  z-index: 4 !important;
+
+  .ui-datepicker-prev {
+    left: 12px;
+  }
+
+  .ui-datepicker-next {
+    right: 12px;
+  }
+
+  .ui-datepicker-prev, .ui-datepicker-next {
+    color: white;
+    cursor: pointer;
+    font-weight: normal;
+    font-size: $small-font-size;
+    line-height: $line-height;
+    top: 0;
+  }
+
+  table {
+    border: 1px solid $border;
+    border-top: 0;
+
+    thead {
+      background: $dark;
+      border-left: 1px solid $dark;
+      border-right: 1px solid $dark;
+
+      tr th {
+        color: white;
+      }
+    }
+
+    tr {
+      border-bottom: 1px solid $border;
+
+      &:last-child {
+        border-bottom: 0px;
+      }
+
+      &:nth-child(odd) {
+        background: none;
+      }
+    }
+
+    td {
+      padding: 0;
+      border-right: 1px solid $border;
+
+      &:last-child {
+        border-right: 0px;
+      }
+
+      span, a {
+        text-align: center;
+        line-height: $line-height;
+        color: $text;
+      }
+
+      &.ui-datepicker-unselectable.ui-state-disabled {
+        background: white;
+
+        .ui-state-default {
+          background: $input-bg;
+          color: $text-medium;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/layout.scss

@@ -482,6 +482,7 @@ header {
 
   @media (min-width: $small-breakpoint) {
     background: white;
+    min-height: rem-calc(50);
   }
 
   a {

app/views/shared/_advanced_search.html.erb

@@ -29,12 +29,14 @@
             <label><%= t("shared.advanced_search.from") %></label>
             <%= text_field_tag 'advanced_search[date_min]',
                                 params[:advanced_search].try(:[], :date_min),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
                                 class: 'js-calendar' %>
           </div>
           <div class='small-12 large-6 column'>
             <label><%= t("shared.advanced_search.to") %></label>
             <%= text_field_tag 'advanced_search[date_max]',
                                 params[:advanced_search].try(:[], :date_max),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
                                 class: 'js-calendar' %>
           </div>
         </div>
@@ -46,4 +48,4 @@
 
     </div>
   <% end %>
-</div>
+</div>

config/locales/en.yml

@@ -336,6 +336,7 @@ en:
       author_type_4: 'City councillor'
       author_type_5: 'Mayoress'
       date: 'By date'
+      date_placeholder: 'DD/MM/YYYY'
       date_range_blank: 'Choose a date'
       date_1: 'Last 24 hours'
       date_2: 'Last week'

config/locales/es.yml

@@ -261,7 +261,7 @@ es:
       proposal_video_url_note: Puedes añadir un enlace a YouTube o Vimeo
       tags_instructions: Etiqueta esta propuesta. Puedes elegir entre nuestras sugerencias o introducir las que desees.
       tags_label: Temas
-      tags_placeholder: Escribe las etiquetas que desees separadas por una coma (',')
+      tags_placeholder: "Escribe las etiquetas que desees separadas por una coma (',')"
     index:
       featured_proposals: Destacadas
       filter_topic:
@@ -336,6 +336,7 @@ es:
       author_type_4: 'Concejal'
       author_type_5: 'Alcaldesa'
       date: 'Por fecha'
+      date_placeholder: 'DD/MM/AAAA'
       date_range_blank: 'Elige una fecha'
       date_1: 'Últimas 24 horas'
       date_2: 'Última semana'