From e85ba440b60e5eac7d154ec8cb401c66ef1633b8 Mon Sep 17 00:00:00 2001 From: rgarcia Date: Wed, 20 Jan 2016 12:24:37 +0100 Subject: [PATCH 1/3] configures jquery datepicker --- Gemfile | 1 + Gemfile.lock | 3 +++ app/assets/javascripts/application.js | 2 ++ app/assets/stylesheets/application.scss | 3 ++- 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/Gemfile b/Gemfile index bf657d345..5352a8052 100644 --- a/Gemfile +++ b/Gemfile @@ -15,6 +15,7 @@ gem 'coffee-rails', '~> 4.1.0' # Use jquery as the JavaScript library gem 'jquery-rails' +gem 'jquery-ui-rails' # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks' diff --git a/Gemfile.lock b/Gemfile.lock index fafb13808..b5f4e866d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -203,6 +203,8 @@ GEM rails-dom-testing (~> 1.0) railties (>= 4.2.0) thor (>= 0.14, < 2.0) + jquery-ui-rails (5.0.5) + railties (>= 3.2.16) json (1.8.3) jwt (1.5.2) kaminari (0.16.3) @@ -475,6 +477,7 @@ DEPENDENCIES i18n-tasks initialjs-rails (= 0.2.0.1) jquery-rails + jquery-ui-rails kaminari launchy letter_opener_web (~> 1.3.0) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 24f164bb2..52d176c41 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -12,6 +12,8 @@ // //= require jquery //= require jquery_ujs +//= require jquery-ui/datepicker +//= require jquery-ui/datepicker-es //= require foundation //= require turbolinks //= require ckeditor/init diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0dedc20b6..415c23f9e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -9,4 +9,5 @@ @import "participation"; @import "c3"; @import "annotator.min"; -@import "annotator_overrides"; \ No newline at end of file +@import "annotator_overrides"; +@import "jquery-ui/datepicker"; \ No newline at end of file From 6905d07638e62714013dcb9f7a81215f77a9ebb8 Mon Sep 17 00:00:00 2001 From: rgarcia Date: Wed, 20 Jan 2016 12:25:47 +0100 Subject: [PATCH 2/3] uses jquery datepicker instead of html5 date field --- app/assets/javascripts/advanced_search.js.coffee | 15 +++++++++++++-- app/views/shared/_advanced_search.html.erb | 10 ++++++---- app/views/shared/_locale_switcher.html.erb | 2 +- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/advanced_search.js.coffee b/app/assets/javascripts/advanced_search.js.coffee index 8bff7f996..a5e657633 100644 --- a/app/assets/javascripts/advanced_search.js.coffee +++ b/app/assets/javascripts/advanced_search.js.coffee @@ -10,12 +10,23 @@ App.AdvancedSearch = toggle_date_options: -> if $('#js-advanced-search-date-min').val() == 'custom' $('#js-custom-date').show() - $('#js-custom-date input').prop 'disabled', false + $( ".js-calendar" ).datepicker( "option", "disabled", false ) else $('#js-custom-date').hide() - $('#js-custom-date input').prop 'disabled', true + $( ".js-calendar" ).datepicker( "option", "disabled", true ) + + init_calendar: -> + locale = $('#js-locale').data('current-locale') + if locale == 'en' + locale = '' + + $('.js-calendar').datepicker + regional: locale + maxDate: "+0d" initialize: -> + App.AdvancedSearch.init_calendar() + if App.AdvancedSearch.advanced_search_terms() $('#js-advanced-search').show() App.AdvancedSearch.toggle_date_options() diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb index 2f0233b53..68cf1441d 100644 --- a/app/views/shared/_advanced_search.html.erb +++ b/app/views/shared/_advanced_search.html.erb @@ -27,13 +27,15 @@ diff --git a/app/views/shared/_locale_switcher.html.erb b/app/views/shared/_locale_switcher.html.erb index c5c69bbe4..e0a550667 100644 --- a/app/views/shared/_locale_switcher.html.erb +++ b/app/views/shared/_locale_switcher.html.erb @@ -1,5 +1,5 @@ <% if I18n.available_locales.size > 1 %> -
+
<%= t("layouts.header.locale") %> From ffbbdb33580d9928325b320d5ef1789e8ec2e687 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Wed, 20 Jan 2016 15:57:14 +0100 Subject: [PATCH 3/3] Adds custom styles for date picker --- app/assets/stylesheets/application.scss | 3 +- .../stylesheets/datepicker_overrides.scss | 94 +++++++++++++++++++ app/assets/stylesheets/layout.scss | 1 + app/views/shared/_advanced_search.html.erb | 4 +- config/locales/en.yml | 1 + config/locales/es.yml | 3 +- 6 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/datepicker_overrides.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 415c23f9e..822e4cd4c 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -10,4 +10,5 @@ @import "c3"; @import "annotator.min"; @import "annotator_overrides"; -@import "jquery-ui/datepicker"; \ No newline at end of file +@import "jquery-ui/datepicker"; +@import "datepicker_overrides"; \ No newline at end of file diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss new file mode 100644 index 000000000..abab720e0 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 749c009b0..26aeebfcc 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -482,6 +482,7 @@ header { @media (min-width: $small-breakpoint) { background: white; + min-height: rem-calc(50); } a { diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb index 68cf1441d..03c1a4319 100644 --- a/app/views/shared/_advanced_search.html.erb +++ b/app/views/shared/_advanced_search.html.erb @@ -29,12 +29,14 @@ <%= text_field_tag 'advanced_search[date_min]', params[:advanced_search].try(:[], :date_min), + placeholder: t("shared.advanced_search.date_placeholder"), class: 'js-calendar' %>
<%= text_field_tag 'advanced_search[date_max]', params[:advanced_search].try(:[], :date_max), + placeholder: t("shared.advanced_search.date_placeholder"), class: 'js-calendar' %>
@@ -46,4 +48,4 @@ <% end %> - \ No newline at end of file + diff --git a/config/locales/en.yml b/config/locales/en.yml index 0e31c1261..2cb4a93f5 100755 --- a/config/locales/en.yml +++ b/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' diff --git a/config/locales/es.yml b/config/locales/es.yml index cbd7c5789..9a2ca6a4b 100644 --- a/config/locales/es.yml +++ b/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'