From 4207954cd5f3d64a3532bfe7604372fd3f810b9d Mon Sep 17 00:00:00 2001 From: echarp Date: Sat, 16 Aug 2014 11:19:27 +0200 Subject: [PATCH] =?UTF-8?q?Le=20s=C3=A9lecteur=20de=20r=C3=A9gions=20et=20?= =?UTF-8?q?l'=C3=A9diteur=20de=20tags=20ont=20=C3=A9volu=C3=A9=20graphique?= =?UTF-8?q?ment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Gemfile | 3 ++ Gemfile.lock | 3 ++ app/assets/javascripts/application.js.coffee | 4 +++ app/assets/javascripts/events.js.coffee | 14 +++++++-- app/assets/stylesheets/all.css.sass | 17 ++++++++-- app/assets/stylesheets/application.css.sass | 2 +- app/assets/stylesheets/events.css.sass | 20 ------------ app/assets/stylesheets/region.css.sass | 33 ++++++++++++++++++-- app/controllers/tags_controller.rb | 9 ++++-- app/views/events/index.html.haml | 10 +----- app/views/regions/_selector.haml | 24 ++++++++++++++ config/locales/fr.yml | 3 +- 12 files changed, 100 insertions(+), 42 deletions(-) create mode 100644 app/views/regions/_selector.haml diff --git a/Gemfile b/Gemfile index df82e6ff..76a1b5af 100644 --- a/Gemfile +++ b/Gemfile @@ -49,6 +49,9 @@ gem 'modernizr-rails' # Patch older browsers so they do understand html5 gem 'webshims-rails' +# Improve the html select element +gem 'select2-rails' + gem 'devise' gem 'devise-i18n' gem 'rails-i18n' diff --git a/Gemfile.lock b/Gemfile.lock index dd5feaff..c4481685 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -260,6 +260,8 @@ GEM sdoc (0.4.1) json (~> 1.7, >= 1.7.7) rdoc (~> 4.0) + select2-rails (3.5.9) + thor (~> 0.14) sexp_processor (4.4.4) simple_calendar (1.1.5) rails (>= 3.0) @@ -342,6 +344,7 @@ DEPENDENCIES redcarpet sass-rails (~> 4.0.1) sdoc (~> 0.4.0) + select2-rails simple_calendar spring sqlite3 diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 8cd3fd0a..02609aba 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -17,6 +17,8 @@ #= require tinymce-jquery #= require modernizr #= require webshims/polyfiller +#= require select2 +#= require select2_locale_fr #= require leaflet #= require_tree . @@ -44,3 +46,5 @@ $(document).ready -> if !Modernizr.testAllProps('forceBrokenImageIcon') $('img.favicon').one 'error', -> $(this).css visibility: 'hidden' + + # $('select').select2() diff --git a/app/assets/javascripts/events.js.coffee b/app/assets/javascripts/events.js.coffee index a7b0a20a..f420cf27 100644 --- a/app/assets/javascripts/events.js.coffee +++ b/app/assets/javascripts/events.js.coffee @@ -1,7 +1,5 @@ $(document).ready -> - $('form.region_selector select').change -> - this.form.submit() - + # Setup the graphical editor for event's description tinyMCE.init selector: 'textarea#event_description', menubar : false, @@ -22,6 +20,16 @@ $(document).ready -> table, fullscreen, searchreplace, media, insertdatetime, visualblocks, visualchars, wordcount, contextmenu, code' + # Manage event tags edition + $('#event_tags').each -> + elt = $(this) + $.ajax + url: '/tags.json' + .done (data) -> + tags = jQuery.map data, (n) -> n[0] + + elt.select2 tags: tags, separator: [' '], tokenSeparators: [' '] + $(document).on 'page:receive', -> # Delete existing tinymce editors, very important in the turbolinks context! tinymce.remove() diff --git a/app/assets/stylesheets/all.css.sass b/app/assets/stylesheets/all.css.sass index 4c34d798..f7a4b738 100644 --- a/app/assets/stylesheets/all.css.sass +++ b/app/assets/stylesheets/all.css.sass @@ -3,11 +3,12 @@ * height: auto - margin: 0 auto padding: 0 max-width: 100% box-sizing: border-box line-height: 1em + margin-left: auto + margin-right: auto html color: black @@ -102,7 +103,7 @@ header.top font-size: 1.2em font-style: italic font-weight: normal - margin-bottom: 22px + margin-bottom: 21px main position: relative @@ -155,7 +156,7 @@ label border: 1px solid darkgray @include box-shadow(1px 1px 2px lightgray) @include border-radius(0.4em) -input, textarea, select, a.button +input, textarea, select, a.button, .select2-container ul color: black margin: 3px 0 border: 1px solid darkgray @@ -235,3 +236,13 @@ footer.bottom nav font-size: 10vw vertical-align: baseline @include text-shadow(0 0 4px gray) + +.select2-container ul + min-width: 6em +.select2-container-multi.select2-container-active .select2-choices, .select2-drop + border: none !important + @include box-shadow(1px 1px 4px gray) +// Otherwise the cross to remove tags is centered +.select2-container *, .select2-choices * + margin: initial + @include transition-duration(0) diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 7c0fced6..452901d2 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -10,9 +10,9 @@ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * + *= require select2 *= require leaflet *= require_tree . - *= require_self */ @import 'awesome_mixins' diff --git a/app/assets/stylesheets/events.css.sass b/app/assets/stylesheets/events.css.sass index 5908d4f0..2f4bba6d 100644 --- a/app/assets/stylesheets/events.css.sass +++ b/app/assets/stylesheets/events.css.sass @@ -1,30 +1,11 @@ @import compass -form.region_selector - left: 0 - width: 100% - position: absolute - max-width: 100% - margin-top: 2.45em - label - display: none - header.calendar-header font-size: 1.5em margin-top: 1em font-weight: bolder - margin-bottom: 0.1em - &.year - margin-top: 1em - margin-bottom: 2.55em - a - margin: 0 a font-weight: normal - &.month_selector - display: block - font-weight: bolder - margin-bottom: -2.1em &:first-child, &:last-child margin: 0 0.3em @@ -36,7 +17,6 @@ header.calendar-header body.events.index table width: 90% max-width: 100% - margin-top: 3.5em tr th padding-bottom: 0.35em diff --git a/app/assets/stylesheets/region.css.sass b/app/assets/stylesheets/region.css.sass index 577305d4..582c5400 100644 --- a/app/assets/stylesheets/region.css.sass +++ b/app/assets/stylesheets/region.css.sass @@ -1,3 +1,32 @@ -body.stats +@import compass + +.region_selector + display: inline-block h3 - text-align: center + margin: 0 + .placeholder + color: gray + ul + margin: 0 + padding: 1em + display: none + position: absolute + list-style: none + background-color: white + @include box-shadow(1px 1px 4px gray) + @include border-radius(3px) + li + margin: 0 + a + display: block + padding: 0.2em + border-top: solid thin black + &:hover + @include text-shadow(1px 1px 0.2em gray) + li:first-child a + border-top: none + &:hover ul + display: block + +body.stats h3 + text-align: center diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb index 1da49163..212662ab 100644 --- a/app/controllers/tags_controller.rb +++ b/app/controllers/tags_controller.rb @@ -3,12 +3,15 @@ class TagsController < InheritedResources::Base def index @tags = Event .pluck(:tags) - .join(' ') - .split - .group_by { |i| i } + .join(' ').split.group_by { |i| i } .reject { |_k, v| v.size < 2 } .map { |k, v| [k, v.size] } .sort + + respond_to do |format| + format.html + format.json { render json: @tags.to_json } + end end def show diff --git a/app/views/events/index.html.haml b/app/views/events/index.html.haml index 4a6dd52c..9ed1df32 100644 --- a/app/views/events/index.html.haml +++ b/app/views/events/index.html.haml @@ -3,15 +3,7 @@ -# Seems necessary, for the time being, to ensure calendar is changing days correctly - Time.zone = 'Paris' -%form.region_selector - - if params[:start_date] - = hidden_field_tag :start_date, params[:start_date] - - if params[:year] - = hidden_field_tag :year, params[:year] - = label_tag :region, Region.model_name.human - = select_tag :region, - options_from_collection_for_select(Region.all, 'id', 'name', params[:region]), - prompt: t('.all_regions') +%nav.region_selector= render '/regions/selector' - if params[:year] -# Whole year calendar diff --git a/app/views/regions/_selector.haml b/app/views/regions/_selector.haml new file mode 100644 index 00000000..3161d5ce --- /dev/null +++ b/app/views/regions/_selector.haml @@ -0,0 +1,24 @@ +-# Display the currently selected region +%h3 + - if params[:region] + = Region.find params[:region] + %em.fa.fa-chevron-down + - else + %span.placeholder + =t '.all_regions' + %em.fa.fa-chevron-down + +-# Choose a region to filter events with +%ul + %li + = link_to t('.all_regions'), region: nil, + start_date: params[:start_date], + year: params[:year], + tag: params[:tag] + + - Region.all.each do |region| + %li + = link_to region, region: region.id, + start_date: params[:start_date], + year: params[:year], + tag: params[:tag] diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 2c0fcd6c..b0eb64c9 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -116,7 +116,6 @@ fr: events: index: calendar_in: Ce calendrier en %{rss}, %{webcal} ou %{ical} - all_regions: Toutes les régions nb_events: "%{count} événements" show: lug-list: Asso de la région @@ -167,6 +166,8 @@ fr: destroy: ok: Votre événément a bien été annulé regions: + selector: + all_regions: Toutes les régions index: title: Liste des flux quick: Chaque flux liste les évènements pour les 30 prochains jours en