Création événement simplifiée et adaptée à petit écran

app/assets/stylesheets/all.css.sass

@@ -232,8 +232,8 @@ button.ws-popover-opener
 footer.bottom nav
   clear: both
   a
-    display: inline-block
     padding: 1.8%
+    +inline-block()
     em.fa
       font-size: x-large
     &:hover

app/assets/stylesheets/events.css.sass

@@ -174,45 +174,64 @@ aside#lug-list
     label
       width: 8em
       +inline-block()
+    input, select, .select2-container ul
+      +border-top-left-radius(0)
+      +border-bottom-left-radius(0)
     input[type=radio] + label
       width: 20em
       &:after
         content: ''
+    input, .select2-container ul
+      width: 50em
+    input.ws-datetime-local
+      width: inherit !important
+
+    .mce-tinymce
+      width: 50em
+      font-size: inherit
+      font-family: inherit
+      +inline-block()
+      +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
+    color: gray
+  .field.title label
+    +fa-icon('')
+  .field.start_time label
+    +fa-icon('')
+  .field.end_time label
+    +fa-icon('')
+  .field.description label
+    +fa-icon('')
+  .field.address label
+    +fa-icon('')
+  .field.city label
+    +fa-icon('')
+  .field.region label
+    +fa-icon('')
+  .field.locality label
+    +fa-icon('')
+  .field.contact label
+    +fa-icon('')
+  .field.submitter label
+    +fa-icon('')
+  .field.url label
+    +fa-icon('')
+  .field.tags label
+    +fa-icon('')
+
   .actions
     text-align: center
     input
       font-size: x-large
 
-  .mce-tinymce
-    +inline-block()
-
-.field label:before
-  color: gray
-.field.title label
-  +fa-icon('')
-.field.start_time label
-  +fa-icon('')
-.field.end_time label
-  +fa-icon('')
-.field.description label
-  +fa-icon('')
-.field.address label
-  +fa-icon('')
-.field.city label
-  +fa-icon('')
-.field.region label
-  +fa-icon('')
-.field.locality label
-  +fa-icon('')
-.field.contact label
-  +fa-icon('')
-.field.submitter label
-  +fa-icon('')
-.field.url label
-  +fa-icon('')
-.field.tags label
-  +fa-icon('')
-
 .description, body.mce-content-body
   img
     margin-left: 1%

app/assets/stylesheets/lugs.css.sass

@@ -41,6 +41,6 @@ form#lug_search
 
 body.show
   dl, iframe, fieldset
-    display: inline-block
     min-width: 30em
     vertical-align: top
+    +inline-block()

app/assets/stylesheets/maps.css.sass

@@ -19,7 +19,7 @@
     width: 40%
     height: 60em
     margin: 1.6em 2%
-    display: inline-block
+    +inline-block()
 
 html.iframe #map
   width: 100%

app/assets/stylesheets/mobile.css.sass

@@ -1,3 +1,5 @@
+@import compass
+
 @media all and (min-width: 1600px)
   body
     font-size: larger
@@ -68,7 +70,6 @@
       width: auto
       height: auto
       margin: 1px
-      padding: 0 0.4em
       display: block
       min-height: 1.1em
       border-width: 1px !important
@@ -78,12 +79,32 @@
         float: right
       // Enough space for tactile displays
       li a, .fa-li
-        padding: 0.3em 0
+        padding: 0.4em 0
-        display: inline-block
+        +inline-block()
 
   aside
     display: none
 
   .formats, a#banner
     float: none
-    padding: 0.3em 0
+    padding: 0.4em 0
+
+  .events, .moderations
+    h2 + p, #advises, .helper
+      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, .select2-container ul, .mce-tinymce
+          width: 100%
+          +border-bottom-left-radius(0.4em)
+        .select2-container ul
+          min-width: 20em

app/assets/stylesheets/region.css.sass

@@ -1,7 +1,7 @@
 @import compass
 
 .region_selector
-  display: inline-block
+  +inline-block()
   h3
     margin: 0
     .placeholder

app/assets/stylesheets/sessions.css.sass

@@ -3,7 +3,7 @@
 .sessions
   form
     margin: 1em auto
-    display: inline-block
+    +inline-block()
     .field, .actions
       text-align: left
       margin: 0.5em
@@ -13,7 +13,7 @@
         margin: 1px 5px 1px 6.6em
       label
         width: 8em
-        display: inline-block
+        +inline-block()
         &:after
           content: ':'
     /*

app/views/events/_form.html.haml

@@ -11,8 +11,7 @@
 
   .field.title
     = f.label :title
-    = f.text_field :title, required: true, size: 70,
+    = f.text_field :title, required: true, placeholder: "#{t '.title_helper'}"
-      placeholder: "#{t '.title_helper'}"
   .field.start_time
     = f.label :start_time
     = f.datetime_local_field :start_time, required: true
@@ -24,17 +23,17 @@
       :markdown
         #{t '.description_helper'}
     = f.label :description
-    = f.text_area :description, rows: 25, cols: 90
+    = f.text_area :description, rows: 25
 
   .field.address
     .helper
       :markdown
         #{t '.address_helper'}
     = f.label :address
-    = f.text_field :address, size: 70
+    = f.text_field :address
   .field.city
     = f.label :city
-    = f.text_field :city, required: true, size: 70, list: :cities
+    = f.text_field :city, required: true, list: :cities
     %datalist#cities
       - Event.group(:city).order('count(city) desc').pluck(:city).each do |city|
         %option= city
@@ -52,25 +51,25 @@
       :markdown
         #{t '.url_helper'}
     = f.label :url
-    = f.url_field :url, required: true, size: 70, placeholder: 'Ex: http://april.org'
+    = f.url_field :url, required: true, placeholder: 'Ex: http://april.org'
   .field.contact
     .helper
       :markdown
         #{t '.contact_helper'}
     = f.label :contact
-    = f.email_field :contact, required: true, size: 70
+    = f.email_field :contact, required: true
   .field.submitter
     .helper
       :markdown
         #{t '.submitter_helper'}
     = f.label :submitter
-    = f.email_field :submitter, size: 70
+    = f.email_field :submitter
   .field.tags
     .helper
       :markdown
         #{t '.tags_helper'}
     = f.label :tags
-    = f.text_field :tags, size: 70
+    = f.text_field :tags
 
   .actions
     = f.button formaction: :preview do