Better looking forms

Guardfile

@@ -46,5 +46,5 @@ end
 
 guard :rails, port: 3000, host: '0.0.0.0' do
   watch('Gemfile.lock')
-  watch(%r{^(config|lib)/.*})
+  watch(%r{^(config|lib)/.*\.rb})
 end

app/assets/javascripts/moderations.js.coffee

@@ -1,5 +1,5 @@
 $(document).on 'turbolinks:load', ->
-  $('body.moderations .field.closer input[type=radio]').click ->
+  $('body.moderations .radios label').click ->
     $('body.moderations #event_reason').parent().slideUp()
-  $('body.moderations .field.opener input[type=radio]').click ->
+  $('body.moderations .radios label:last-child').click ->
     $('body.moderations #event_reason').parent().slideDown()

app/assets/javascripts/tinymce.coffee.erb

@@ -3,6 +3,7 @@ $(document).on 'turbolinks:load', ->
   tinyMCE.init
     schema: 'html5',
     height: '40em',
+    menubar: '',
     branding: false,
     language: 'fr_FR',
     selector: 'input.description',

app/assets/stylesheets/all.sass

@@ -113,13 +113,6 @@ main, body.mce-content-body
   hr
     margin: 10px 20px
 
-  &.mce-content-body
-    margin: 0
-    border: solid thin transparent
-    font-size: initial
-    min-height: 100%
-    font-family: Palatino, 'URW Palladio L', 'dejavu serif', georgia, serif
-
 aside
   float: right
   width: 16em
@@ -131,7 +124,7 @@ aside
   font-size: 0.7em
   box-shadow: 4px 4px 1em gray
   margin-right: -4em
-  border-radius: 10px
+  border-radius: 1em
   background-color: #D6ECFF
   h1
     font-weight: normal
@@ -144,96 +137,19 @@ aside
       padding: 0.5em 0
       display: block
 
-iframe
-  border: none
-  max-width: 100%
-  margin-bottom: 1.6em
-  border-radius: 1em
-
 fieldset
   border: none
   margin: 1em auto
-  padding: 1em
+  padding: 2%
   box-shadow: 1px 1px 5px gray
   border-radius: 0.4em
   legend
-    float: left
     color: gray
     padding: 0 1em
-    margin-top: -1.6em
     background-color: white
   h2
     margin-top: 0
 
-label
-  text-align: right
-  padding-right: 0.4em
-.mce-tinymce
-  border: 1px solid darkgray
-  box-shadow: 1px 1px 2px lightgray
-  border-radius: 0.4em
-input, textarea, select, a.button, button
-  color: black
-  margin: 3px 0
-  border: 1px solid darkgray
-  outline: none
-  padding: 0.2em 0.4em
-  font-size: inherit
-  box-shadow: 1px 1px 2px lightgray
-  font-family: inherit
-  border-radius: 0.4em
-  background-color: white
-  &:focus
-    background-color: #F0F8FF
-    box-shadow: 1px 1px 4px gray
-  &[type=radio]
-    box-shadow: none
-  &[type=radio] + label
-    text-align: left
-  &[type=submit], &.button, button
-    color: black
-    border: none
-    cursor: pointer
-    margin: 3px 0.4em
-    padding: 0.2em 0.6em
-    font-size: larger
-    box-shadow: 2px 2px 2px gray
-    font-weight: bolder
-    background-color: #9CC5EE
-select, option
-  color: black
-  padding: 2px 4px
-  background-color: white
-
-button.ws-popover-opener
-  color: darkgray
-  background-color: transparent
-
-.field_with_errors
-  display: inline
-  input, textarea, select, a.button
-    background-color: pink
-
-/*
-  input, textarea, select
-    color: black
-    margin: 3px 0
-    border: 1px solid #868686
-    padding: 0.2em 0.8em
-    font-family: Palatino, 'URW Palladio L', 'dejavu serif', georgia, serif
-    border-radius: 0.7em
-    background-color: white
-    &:focus
-      outline: 0
-      background-color: #F0F8FF
-  input[type=submit]
-    border: none
-    font-size: x-large
-    box-shadow: 0 0 1em lightblue
-    text-shadow: 1px 1px 1px white
-    &:hover
-      box-shadow: 5px 5px 5px lightblue
-
 footer.bottom nav
   clear: both
   a

app/assets/stylesheets/application.sass

@@ -18,6 +18,3 @@
 
 @import font-awesome-sprockets
 @import font-awesome
-
-body.pages main h4
-  text-align: left

app/assets/stylesheets/form.sass

@@ -1,124 +1,157 @@
 @import font-awesome-sprockets
 @import font-awesome
 
-.events form, .moderations form, .orgas, .digests form, .pages form
+$border: none
-  .field, .actions
+$radius: 4px
-    max-width: 70em
+$shadow: 0 0 2px darkgray
-    text-align: left
-    margin-left: auto
-    margin-right: auto
-    .helper
-      color: gray
-      font-style: italic
-      p
-        margin: 0
-        margin-left: 8em
-        padding-left: 0.4em
-    label
-      width: 8em
-      display: inline-block
-    input, select
-      border-top-left-radius: 0
-      border-bottom-left-radius: 0
-    input[type=radio] + label
-      width: 20em
-      &:after
-        content: ''
 
-    input[type=text], input[type=url], input[type=email], .mce-tinymce
+body.mce-content-body
-      min-width: 22em
+  margin: 0
+  border: none
+  padding: 1px 1%
+  min-height: 100%
 
-    .mce-tinymce
+.mce-menubar, .mce-panel
-      display: inline-block
+  border: none !important
-      font-size: inherit
-      max-width: 60em
-      font-family: inherit
-      border-radius: 0.4em
-      border-top-left-radius: 0
-      border-bottom-left-radius: 0
-      .mce-container-body
-        .mce-panel.mce-first
-          border-top-right-radius: 0.4em
-        .mce-panel.mce-last
-          border-bottom-right-radius: 0.4em
 
-  .field label:before, th:before, th a:before
+.helper p
-    color: gray
+  color: gray
-    margin-right: 0.4em
+  width: 60em
-    +fa-icon()
+  text-align: right
-  .field.title label:before
+  margin-top: 0
-    content: $fa-var-newspaper-o
+  margin-bottom: 0
-  .field.start_time label:before
-    content: $fa-var-toggle-on
-  .field.end_time label:before
-    content: $fa-var-toggle-off
-  .field.repeat label:before
-    content: $fa-var-repeat
-  .field.rule > label:before
-    content: $fa-var-calculator
-  .field.description label:before
-    content: $fa-var-pencil-square-o
-  .field.place_name label:before
-    content: $fa-var-map-pin
-  .field.address label:before
-    content: $fa-var-map-marker
-  .field.city label:before, th.city a:before
-    content: $fa-var-building-o
-  .field.department label:before, th.department a:before
-    content: $fa-var-puzzle-piece
-  .field.region label:before, th.region a:before
-    content: $fa-var-shield
-  .field.locality > label:before
-    content: $fa-var-expand
-  .field.contact label:before
-    content: $fa-var-envelope
-  .field.submitter label:before
-    content: $fa-var-envelope-o
-  .field.url label:before, th.url:before
-    content: $fa-var-external-link
-  .field.diaspora label:before, th.diaspora:before
-    content: $fa-var-bullhorn
-  .field.tags label:before, th.tags a:before
-    content: $fa-var-tags
-  .field.active label:before
-    content: $fa-var-heartbeat
-  .field.reason label:before
-    content: $fa-var-comment
 
-  .field.kind > label:before, th.kind:before
+.field
-    content: $fa-var-cubes
+  color: #777
-  .field.feed label:before, th.feed:before
+  width: 60em
-    content: $fa-var-rss
+  border: $border
+  display: inline-block
+  min-width: 50%
+  text-align: left
+  box-shadow: $shadow
+  border-radius: $radius
+  & > label, .field_with_errors > label
+    width: 10em
+    padding: 0.5em
+    display: inline-block
+    text-align: right
+  input[type=text]
+    width: 22em
 
-  .field.future label:before
+input, textarea, select, a.button, .actions > button, .radios, .mce-tinymce, div.tagsinput
-    content: $fa-var-backward
+  border: none
-  .field.period_year label:before
+  padding: 0.5em
-    content: $fa-var-fast-backward
+  font-size: inherit
-  .field.period_week label:before
+  font-family: inherit
-    content: $fa-var-step-backward
+  background-color: white
-  .field.near_location label:before
+  &:focus
-    content: $fa-var-dot-circle-o
+    background-color: #F0F8FF
-  .field.near_distance label:before
+  &[type=radio]
-    content: $fa-var-arrows-h
+    box-shadow: none
-  .field.iframe label:before
+  &[type=radio] + label
-    content: $fa-var-arrows-alt
+    border: none
+  &[type=submit], &.button
+    cursor: pointer
+    margin: 3px 0.4em
+    font-size: larger
+    box-shadow: $shadow
+    font-weight: bolder
+    letter-spacing: 2px
+    background-color: #9CC5EE
+select
+  padding: 0.4em
 
-  .field .radios label
+.field_with_errors
-    width: auto !important
+  display: inline
-    margin-right: 1em
+  input, textarea, select, a.button
+    background-color: pink
 
+.radios
   [type=radio]
     display: none
-  [type=radio] + label:before
+  label
+    color: #258
+    cursor: pointer
+    padding: 0.5em
+    &:hover
+      color: #222
+      box-shadow: 0 0 0 4px lightgray
+  [type=radio]:checked + label
     color: black
-    content: $fa-var-circle-o
+    box-shadow: 0 0 0 6px lightgray
-    font-size: larger
-  [type=radio]:checked + label:before
-    color: black
-    content: $fa-var-dot-circle-o
-    text-shadow: 0 0 1px gray
 
-  .actions
+.actions
-    text-align: center
+  text-align: center
-    input
+  input
-      font-size: x-large
+    font-size: x-large
+
+.field
+  &.required
+    & > label, .field_with_errors > label
+      &:after
+        color: darkred
+        content: '*'
+        font-size: smaller
+  & > label:before, th:before, th a:before
+    margin-right: 0.4em
+    +fa-icon()
+  &.login label:before
+    content: $fa-var-sign-in
+  &.password label:before
+    content: $fa-var-unlock
+  &.title label:before
+    content: $fa-var-newspaper-o
+  &.start_time label:before
+    content: $fa-var-toggle-on
+  &.end_time label:before
+    content: $fa-var-toggle-off
+  &.repeat label:before
+    content: $fa-var-repeat
+  &.rule > label:before
+    content: $fa-var-calculator
+  &.description label:before
+    content: $fa-var-pencil-square-o
+  &.place_name label:before
+    content: $fa-var-map-pin
+  &.address label:before
+    content: $fa-var-map-marker
+  &.city label:before, th.city a:before
+    content: $fa-var-building-o
+  &.department label:before, th.department a:before
+    content: $fa-var-puzzle-piece
+  &.region label:before, th.region a:before
+    content: $fa-var-shield
+  &.locality > label:before
+    content: $fa-var-expand
+  &.contact label:before
+    content: $fa-var-envelope
+  &.submitter label:before
+    content: $fa-var-envelope-o
+  &.url label:before, th.url:before
+    content: $fa-var-external-link
+  &.diaspora label:before, th.diaspora:before
+    content: $fa-var-bullhorn
+  &.tags label:before, th.tags a:before
+    content: $fa-var-tags
+  &.active label:before
+    content: $fa-var-heartbeat
+  &.reason label:before
+    content: $fa-var-comment
+
+  &.kind > label:before, th.kind:before
+    content: $fa-var-cubes
+  &.feed label:before, th.feed:before
+    content: $fa-var-rss
+
+  &.future label:before
+    content: $fa-var-backward
+  &.period_year label:before
+    content: $fa-var-fast-backward
+  &.period_week label:before
+    content: $fa-var-step-backward
+  &.near_location label:before
+    content: $fa-var-dot-circle-o
+  &.near_distance label:before
+    content: $fa-var-arrows-h
+  &.iframe label:before
+    content: $fa-var-arrows-alt

app/assets/stylesheets/list.sass

@@ -9,11 +9,13 @@ table
     padding: 0.3em 0.6em
 
   &.list
+    thead tr
+      background-color: #fed
     tbody
       tr:nth-child(odd)
-        background-color: #D1EAFF
+        background-color: #def
       tr:nth-child(even)
-        background-color: #C9E2F5
+        background-color: #eee
     th
       font-size: larger
     td
@@ -47,10 +49,12 @@ ul.counters
     display: inline
     a:link, a:visited
       color: white
+      padding: 0.4em 1em
       display: inline-block
-      padding: 0.2em 0.8em
+      font-size: x-large
-      border-radius: 1em
+      box-shadow: 0 0 2px black
-      background-color: darkblue
+      border-radius: 0.4em
+      background-color: #258
 
 .edit_link:link, .delete_link:link
   display: none

app/assets/stylesheets/mobile.sass

@@ -112,20 +112,5 @@
     float: none
     padding: 0.4em 0
 
-  .events, .moderations
+  .field
-    h2 + p, #advises, .helper
+    width: 100%
-      display: none
-    form
-      .field, .actions
-        max-width: 100%
-        .helper p
-          margin-left: 0
-          padding-left: 0
-        label
-          width: auto
-          display: block
-          text-align: left
-          margin-left: 0
-        input, .mce-tinymce
-          width: 100%
-          border-bottom-left-radius: 0.4em

app/assets/stylesheets/pages.sass

@@ -0,0 +1,3 @@
+body.pages main
+  h3, h4
+    text-align: left

app/assets/stylesheets/sessions.sass

@@ -1,26 +1,5 @@
-.sessions
+.sessions form
-  form
+  margin: 6em auto
-    margin: 1em auto
-    display: inline-block
-    .field, .actions
-      text-align: left
-      margin: 0.5em
-      *
-        vertical-align: middle
-      .helper p
-        margin: 1px 5px 1px 6.6em
-      label
-        width: 8em
-        display: inline-block
-        &:after
-          content: ':'
-    /*
-      input, textarea, select
-        font-size: larger
-        background-color: #FFB
-    .actions
-      margin-left: 6.75em
-      margin-bottom: 10px
 
 .logout
   margin: 2em auto

app/assets/stylesheets/tags.sass

@@ -14,21 +14,24 @@ p.tags a:last-child:after
 .css4
   font-size: 1.8em
 
-.tagsinput
+div.tagsinput
-  border: none !important
+  height: auto !important
-  padding: 0 !important
+  margin: 0
+  padding: 0
   display: inline-block
-  min-width: 22em
+  min-width: 40em
-  vertical-align: top
+  min-height: auto !important
-
+  vertical-align: middle
-  input, .ui-autocomplete-input
+  span.tag
-    border: 1px solid darkgray
+    margin: 0
-    padding: 0.2em 0.4em
+    padding: 0.5em
     font-size: inherit
+    font-family: inherit
+  input, .ui-autocomplete-input
+    padding: 0.5em
+    font-size: inherit
+    min-width: 8em
     margin-right: 0
   *:first-child
     input, .ui-autocomplete-input
-      min-width: 22em
+      min-width: 20em
-
-.ui-widget-content
-  text-align: left

app/views/devise/sessions/new.html.haml

@@ -1,11 +1,11 @@
 %h2=t '.title'
 
 = form_for resource, as: resource_name, url: session_path(resource_name) do |f|
-  .field
+  .field.login
     = f.label :login
     = f.text_field :login, autofocus: true
 
-  .field
+  .field.password
     = f.label :password
     = f.password_field :password
 

app/views/events/_form.html.haml

@@ -10,59 +10,35 @@
       - @event.errors.full_messages.each do |msg|
         %p.flash.alert= msg
 
-  .field.title
+  .field.title.required
     = f.label :title
     = f.text_field :title, required: true, placeholder: t('.title_helper')
-  .field.start_time
+  .field.start_time.required
     = f.label :start_time
     = f.datetime_select :start_time, default: 1.day.from_now
-  .field.end_time
+  .field.end_time.required
     = f.label :end_time
     = f.datetime_select :end_time, default: 1.day.from_now
 
-  - unless @event.moderated?
-    .field.repeat
-      = f.label :repeat
-      = f.number_field :repeat, in: 0..40, maxlength: 2, size: 2
-
-    .field.rule
-      .helper
-        :markdown
-          #{t '.rule_helper'}
-      = f.label :rule
-      %span.radios
-        - Event::RULES.each do |rule|
-          = f.radio_button :rule, rule
-          = f.label "rule_#{rule}",
-            t(rule, scope: 'activerecord.attributes.event.rule_values')
-
-  .field.description
-    .helper
-      :markdown
-        #{t '.description_helper'}
-    = f.label :description
-    /= f.text_area :description, rows: 25, class: :description
-    = f.text_field :description, class: :description
-
   .field.place_name
     = f.label :place_name
     = f.text_field :place_name
+  .helper
+    :markdown
+      #{raw t '.address_helper'}
   .field.address
-    .helper
-      :markdown
-        #{t '.address_helper'}
     = f.label :address
     = f.text_field :address, list: :addresses
     %datalist#addresses
       - Event.where('address is not null').group(:address).order('count(address) desc').pluck(:address).each do |address|
         %option= address
-  .field.city
+  .field.city.required
     = f.label :city
     = f.text_field :city, required: true, list: :cities
     %datalist#cities
       - Event.group(:city).order('count(city) desc').pluck(:city).each do |city|
         %option= city
-  .field.region
+  .field.region.required
     = f.label :region
     = f.collection_select :region_id, Region.where('region_id is not null'),
       :id, :name, include_blank: true
@@ -78,31 +54,37 @@
         %em.fa.fa-globe
         = t 'attributes.locality_1'
 
-  .field.url
+  .field.description.required{ title: t('.description_helper') }
-    .helper
+    = f.label :description
-      :markdown
+    /= f.text_area :description, rows: 25, class: :description
-        #{t '.url_helper'}
+    = f.text_field :description, class: :description
+
+  .field.url{ title: t('.url_helper') }
     = f.label :url
     = f.url_field :url, placeholder: 'Ex: http://april.org'
-  .field.contact
+  .field.contact.required{ title: t('.contact_helper') }
-    .helper
-      :markdown
-        #{t '.contact_helper'}
     = f.label :contact
     = f.email_field :contact, required: true
-  .field.submitter
+  .field.submitter{ title: t('.submitter_helper') }
-    .helper
-      :markdown
-        #{t '.submitter_helper'}
     = f.label :submitter
     = f.email_field :submitter
-  .field.tags
+
-    .helper
+  .field.tags{ title: t('.tags_helper') }
-      :markdown
-        #{t '.tags_helper'}
     = f.label :tags
     = f.text_field :tag_list, value: f.object.tag_list.to_s
 
+  - unless @event.moderated?
+    .field.repeat{ title: t('.rule_helper') }
+      = f.label :repeat
+      = f.number_field :repeat, in: 0..40
+    .field.rule
+      = f.label :rule
+      %span.radios
+        - Event::RULES.each do |rule|
+          = f.radio_button :rule, rule
+          = f.label "rule_#{rule}",
+            t(rule, scope: 'activerecord.attributes.event.rule_values')
+
   .actions
     = f.button formaction: :preview do
       %em.fa.fa-eye

app/views/moderations/refuse.html.haml

@@ -4,38 +4,33 @@
 
 = form_for @moderation, url: { action: :destroy },
   html: { method: :delete } do |f|
-  .field.closer{ title: t('.reason_r_0_long') }
+  .field.required{ title: t('.reason_r_0_long') }
-    = radio_button_tag :reason, :r_0, params[:event] == 'reason_r_0'
+    = f.label :reason
-    = label_tag :reason_r_0, t('.reason_r_0')
+    %span.radios
-
+      = radio_button_tag :reason, :r_0, params[:event] == 'reason_r_0'
-  .field.closer{ title: t('.reason_r_1_long') }
+      = label_tag :reason_r_0, t('.reason_r_0')
-    = radio_button_tag :reason, :r_1, params[:event] == 'reason_r_1'
+      = radio_button_tag :reason, :r_1, params[:event] == 'reason_r_1'
-    = label_tag :reason_r_1, t('.reason_r_1')
+      = label_tag :reason_r_1, t('.reason_r_1')
-
+      = radio_button_tag :reason, :r_2, params[:event] == 'reason_r_2'
-  .field.closer{ title: t('.reason_r_2_long') }
+      = label_tag :reason_r_2, t('.reason_r_2')
-    = radio_button_tag :reason, :r_2, params[:event] == 'reason_r_2'
+      = radio_button_tag :reason, :r_3, params[:event] == 'reason_r_3'
-    = label_tag :reason_r_2, t('.reason_r_2')
+      = label_tag :reason_r_3, t('.reason_r_3')
-
+      = radio_button_tag :reason, :r_4,
-  .field.closer{ title: t('.reason_r_3_long') }
+        params[:event] == 'reason_r_4' || !params[:event]
-    = radio_button_tag :reason, :r_3, params[:event] == 'reason_r_3'
+      = label_tag :reason_r_4, t('.reason_r_4')
-    = label_tag :reason_r_3, t('.reason_r_3')
-
-  .field.opener
-    = radio_button_tag :reason, :r_4,
-      params[:event] == 'reason_r_4' || !params[:event]
-    = label_tag :reason_r_4, t('.reason_r_4')
 
   .field.reason
     = f.label :reason
     = f.text_area :reason, cols: 40, rows: 5
 
-  = link_to moderations_path do
+  .actions
-    %em.fa.fa-arrow-left
+    = link_to moderations_path do
-    = t '.ko'
+      %em.fa.fa-arrow-left
+      = t '.ko'
 
-  = button_tag do
+    = button_tag do
-    %em.fa.fa-thumbs-down
+      %em.fa.fa-thumbs-down
-    = t '.ok'
+      = t '.ok'
 
 %fieldset
   %legend

app/views/orgas/_form.html.haml

@@ -7,7 +7,7 @@
       - @orga.errors.full_messages.each do |msg|
         %p.flash.alert= msg
 
-  .field.kind
+  .field.kind.required
     = f.label :kind
     %span.radios
       - Kind.all.each do |kind|
@@ -15,20 +15,16 @@
         = f.label "kind_id_#{kind.id}" do
           %em.fa{ class: "fa-#{kind.icon}" }
           = Kind.human_attribute_name "name_#{kind.name}"
-  .field.name
+  .field.name.required
     = f.label :name
     = f.text_field :name, required: true
-  .field.description
-    = f.label :description
-    /= f.text_area :description, rows: 25, class: :description
-    = f.text_field :description, class: :description
   .field.place_name
     = f.label :place_name
     = f.text_field :place_name
+  .helper
+    :markdown
+      #{raw t '.address_helper'}
   .field.address
-    .helper
-      :markdown
-        #{t '.address_helper'}
     = f.label :address
     = f.text_field :address
   .field.city
@@ -40,43 +36,33 @@
   .field.department
     = f.label :department
     = f.text_field :department
-  .field.region
+  .field.region.required
     = f.label :region
     = f.collection_select :region_id, Region.where('region_id is not null'),
       :id, :name, include_blank: true
 
-  .field.url
+  .field.description
-    .helper
+    = f.label :description
-      :markdown
+    /= f.text_area :description, rows: 25, class: :description
-        #{t '.url_helper'}
+    = f.text_field :description, class: :description
+
+  .field.url{ title: t('.url_helper') }
     = f.label :url
     = f.url_field :url, placeholder: 'Ex: http://april.org'
   .field.diaspora
     = f.label :diaspora
     = f.url_field :diaspora
-  .field.feed
+  .field.feed{ title: t('.feed_helper') }
-    .helper
-      :markdown
-        #{t '.feed_helper'}
     = f.label :feed
     = f.url_field :feed, placeholder: 'Ex: http://april.org/index.rss'
-  .field.contact
+  .field.contact{ title: t('.contact_helper') }
-    .helper
-      :markdown
-        #{t '.contact_helper'}
     = f.label :contact
     = f.email_field :contact
-  .field.submitter
+  .field.submitter{ title: t('.submitter_helper') }
-    .helper
-      :markdown
-        #{t '.submitter_helper'}
     = f.label :submitter
     = f.email_field :submitter
 
-  .field.tags
+  .field.tags{ title: t('.tags_helper') }
-    .helper
-      :markdown
-        #{t '.tags_helper'}
     = f.label :tags
     = f.text_field :tag_list, value: f.object.tag_list.to_s
 

app/views/pages/filter.haml

@@ -6,24 +6,6 @@
   #{t '.helper'}
 
 = form_tag events_url, method: :get do
-  .field.future
-    = label_tag :future, t('.past')
-    = check_box_tag :future, :false
-    %span.helper= t '.past_helper'
-
-  .field.period_year
-    .helper
-      :markdown
-        #{t '.period_year_helper'}
-    = label_tag 'period[year]', t('.period_year')
-    = number_field_tag 'period[year]', params['period[year]'],
-                       placeholder: "Ex: #{(Time.zone.today + 7.days).year}"
-
-  .field.period_week
-    = label_tag 'period[week]', t('.period_week')
-    = number_field_tag 'period[week]', params['period[week]'],
-                       placeholder: "Ex: #{(Time.zone.today + 7.days).cweek}"
-
   .field.near_location
     = label_tag 'near[location]', t('.near_location')
     = text_field_tag 'near[location]', params['near[location]'],
@@ -41,14 +23,31 @@
       options_from_collection_for_select(Region.all, :id, :name),
       include_blank: true
 
+  .helper
+    :markdown
+      #{t '.period_year_helper'}
+  .field.period_year
+    = label_tag 'period[year]', t('.period_year')
+    = number_field_tag 'period[year]', params['period[year]'],
+                       placeholder: "Ex: #{(Time.zone.today + 7.days).year}"
+  .field.period_week
+    = label_tag 'period[week]', t('.period_week')
+    = number_field_tag 'period[week]', params['period[week]'],
+                         placeholder: "Ex: #{(Time.zone.today + 7.days).cweek}"
+
   .field.tags
     = label_tag :tag, t('.tag')
     = text_field_tag :tag
 
+  .field.future
+    = label_tag :future, t('.past')
+    = check_box_tag :future, :false
+    = t '.past_helper'
+
   .field.iframe
     = label_tag :iframe, t('.iframe')
     = check_box_tag :iframe, :false
-    %span.helper= t '.iframe_helper'
+    = t '.iframe_helper'
 
   .actions
     = button_tag do

config/locales/views/en.yml

@@ -91,12 +91,12 @@ it more readable or agreable.
     form:
       title_helper: No address nor date, please
       rule_helper: Repeated events will be generated during validation. You
-        will receive by mail edition and cancellation links
+        will receive by mail all edition and cancellation links
       description_helper: You can copy-paste another page here
-      address_helper: Associated to the city, it will generate an
+      address_helper: The address and city generate a
-        [OpenStreetMap](http://www.openstreetmap.org) map displayed above the
+        [<em class='fa fa-map'></em> map](http://www.openstreetmap.org)
-        event
+        displayed above the description
-      url_helper: "**Direct** link to a page with more information on the event"
+      url_helper: "Direct link to a page with more information on the event"
       contact_helper: Contact's email address, obfuscated so that spammers
         won't understand it
       submitter_helper: Submitter's email address. It will only be used by the
@@ -197,8 +197,8 @@ it more readable or agreable.
       reason_r_0: SPAM!
       reason_r_1: Off-topic
       reason_r_2: Not enough information
-      reason_r_3: Event already recorded
+      reason_r_3: Already recorded
-      reason_r_4: Specific reason (specify)
+      reason_r_4: Specific
       reason_r_0_long: SPAM! SPAM! SPAM!
       reason_r_1_long: Nonetheless, the proposed event hasn't yet retained the
         moderators' attention. As it were, the proposed event isn't about Free
@@ -272,11 +272,11 @@ description."
     update:
       ok: Organisation has been updated
     form:
-      address_helper: Associated to the city, it will generate an
+      address_helper: The address and city generate a
-        [OpenStreetMap](http://www.openstreetmap.org) map displayed above the
+        [<em class='fa fa-map'></em> map](http://www.openstreetmap.org)
-        organisation
+        displayed above the description
       url_helper: Link to the organisation's website
-      feed_helper: "**Direct** link to a syndication feed, RSS or atom"
+      feed_helper: "Direct link to a syndication feed, RSS or atom"
       contact_helper: Contact's email address, obfuscated so that spammers
         won't understand it
       submitter_helper: Submitter's email address. It will only be used by the

config/locales/views/fr.yml

@@ -82,22 +82,22 @@ fr:
     form:
       title_helper: Ni lieu ni date, SVP
       rule_helper: Les événements répétés seront générés lors de la
-        validation. Vous recevrez par mail les liens d'édition et d'annulation
+        validation. Vous recevrez par mail tous les liens d'édition et
+        d'annulation
       description_helper: Vous pouvez copier-coller une autre page web ici
-      address_helper: "*Associée à la ville, elle générera une
+      address_helper: L'adresse et la ville sont utilisés pour afficher une
-        [carte](http://www.openstreetmap.org) affichée au dessus de
+        [<em class='fa fa-map'></em> carte](http://www.openstreetmap.org) au
-        l'événement*"
+        dessus de la description
-      url_helper: Lien **direct** vers une page donnant plus d'informations sur
+      url_helper: Lien direct vers une page donnant plus d'informations sur
         l'événement
       contact_helper: Adresse e-mail de contact, affichée de manière peu
         compréhensible par les spammeurs
-      submitter_helper: Adresse e-mail du soumetteur de l'événement. Elle ne
+      submitter_helper: E-mail pour contacter la personne ayant proposé l'événement,
-        sera utilisée que par les modérateurs pour contacter la personne ayant
+        afin de l'informer de sa validation ou rejet. Si e-mail absent, celui de
-        proposé l'événement, pour l'informer de sa validation ou de son rejet.
+        contact sera utilisé
-        Si cette adresse n'est pas présente, l'adresse de contact sera utilisée
       tags_helper: Séparés par des espaces, constitués de lettres, chiffres
         et tirets. Ajoutez le nom de la ou des organisations de l'événement,
-        mais pas de la ville ou de la région.
+        mais pas de ville ou région.
       save: Valider
       visualise: Visualiser
     cancel:
@@ -192,8 +192,8 @@ fr:
       reason_r_0: SPAM!
       reason_r_1: Hors sujet
       reason_r_2: Pas assez d'informations
-      reason_r_3: Événement déjà enregistré
+      reason_r_3: Déjà enregistré
-      reason_r_4: Raison spécifique (précisez)
+      reason_r_4: Spécifique
       reason_r_0_long: SPAM! SPAM! SPAM!
       reason_r_1_long: Toutefois, l'événement proposé n'a pour l'instant pas
         retenu l'attention des modérateurs. En effet, l'événement proposé ne
@@ -271,11 +271,11 @@ description plus complète."
     update:
       ok: L'organisation a été mise à jour
     form:
-      address_helper: "*Associée à la ville, elle générera une
+      address_helper: L'adresse et la ville sont utilisés pour afficher une
-        [carte](http://www.openstreetmap.org) affichée au dessus de
+        [<em class='fa fa-map'></em> carte](http://www.openstreetmap.org) au
-        l'organisation*"
+        dessus de la description
       url_helper: Lien vers le site web de l'organisation
-      feed_helper: Lien **direct** vers un flux de syndication, type RSS ou atom
+      feed_helper: Lien direct vers un flux de syndication, type RSS ou atom
       contact_helper: Adresse e-mail de contact, affichée de manière peu
         compréhensible par les spammeurs
       submitter_helper: Adresse e-mail du soumetteur de l'organisation.

config/locales/views/pt-BR.yml

@@ -96,7 +96,7 @@ completa, deixando o texto mais legível e agradável.
       address_helper: Será gerado um mapa associado a cidade no 
         [OpenStreetMap](http://www.openstreetmap.org), e será exibido acima do
         evento
-      url_helper: "Link **direto** para uma página com mais informações sobre o evento"
+      url_helper: "Link direto para uma página com mais informações sobre o evento"
       contact_helper: E-mail de contato, ofuscado para evitar 
         os spammers
       submitter_helper: E-mail do remetente. Ele será usado apenas pelos
@@ -197,8 +197,8 @@ completa, deixando o texto mais legível e agradável.
       reason_r_0: SPAM!
       reason_r_1: Off-topic
       reason_r_2: As informação não são suficientes
-      reason_r_3: O evento já existe
+      reason_r_3: Já existe
-      reason_r_4: Jutificativas específicas (especifique)
+      reason_r_4: Específicas
       reason_r_0_long: SPAM! SPAM! SPAM!
       reason_r_1_long: O evento inscrito até agora não chamou a atenção
         dos moderadores. Na verdade, o evento proposto não é sobre Software
@@ -276,7 +276,7 @@ descrição mais completa."
         [OpenStreetMap](http://www.openstreetmap.org), e será exibido acima da
         organização
       url_helper: Link para o site da organização
-      feed_helper: "Link **direto** para um feed syndication, RSS ou atom"
+      feed_helper: "Link direto para um feed syndication, RSS ou atom"
       contact_helper: E-mail de contato, ofuscado para evitar 
         os spammers
       submitter_helper: E-mail do remetente. Ele será usado apenas pelos

public/assets/tinymce-349027220ac67592cd3d99154cdaf05736ecad3fbc0a08544fb4415b332902a5.js

@@ -0,0 +1,23 @@
+(function() {
+  $(document).on('turbolinks:load', function() {
+    return tinyMCE.init({
+      schema: 'html5',
+      height: '40em',
+      menubar: '',
+      branding: false,
+      language: 'fr_FR',
+      selector: 'input.description',
+      content_css: '/assets/application-75abbb46f52324695245fd7b9143735c5a76c5a184f1bfd23e2ae3104ea8bef9.css',
+      entity_encoding: 'raw',
+      add_unload_trigger: true,
+      browser_spellcheck: true,
+      toolbar: [' cut copy paste | undo redo | searchreplace | link image media charmap table | code visualblocks preview fullscreen', ' removeformat | bold italic strikethrough | superscript subscript | bullist numlist | alignleft aligncenter alignright alignjustify alignnone | outdent indent'],
+      plugins: 'lists, advlist, autolink, link, image, charmap, paste, print, preview, table, fullscreen, searchreplace, media, insertdatetime, visualblocks, wordcount, contextmenu, code'
+    });
+  });
+
+  $(document).on('turbolinks:before-cache', function() {
+    return tinymce.remove();
+  });
+
+}).call(this);