Les écrans peu larges ne voient plus un tableau mensuel, mais une liste

app/assets/stylesheets/all.css.sass

@@ -4,6 +4,7 @@
 *
   margin: 0
   padding: 0
+  max-width: 100%
   box-sizing: border-box
   line-height: 1em
   @include transition-duration(0.5s)
@@ -18,7 +19,7 @@ html
 body
   border: 1px solid #68A6E5
   margin: 5px 5px 0
-  padding: 10px
+  padding: 0 10px 10px 10px
   text-align: center
   border-bottom: 0px
   background-color: white
@@ -61,14 +62,13 @@ a:hover, a:active, a:focus
 header.top
   img.logo
     float: left
-    margin-top: -10px
     margin-left: 20px
 
   ul.countries
     float: right
     height: 81px
     font-size: 0.7em
-    margin-top: -8px
+    margin-top: 2px
     margin-right: 16px
     list-style-type: none
     li
@@ -80,20 +80,18 @@ header.top
         vertical-align: middle
 
   h1
-    margin: 10px 5px 5px
+    margin: 10px 5px 12px
-    padding: 0
     font-size: 2.1em
-    line-height: 1em
+    padding-top: 10px
     letter-spacing: 2px
   h2
     font-size: 0.8em
-    margin-top: 0.9em
     font-style: italic
     font-weight: normal
+    margin-bottom: 22px
 
-  a#banner img
+  #banner img
-    display: inline-block
+    height: auto
-    margin-top: 1.4em
 
 main
   h1

app/assets/stylesheets/events.css.sass

@@ -3,7 +3,7 @@
 form.region_selector
   width: 98%
   position: absolute
-  margin: 2.45em 0.4em
+  margin-top: 2.45em
   label
     display: none
 
@@ -36,7 +36,7 @@ body.events.index table
       padding-bottom: 0.35em
       text-transform: capitalize
     td
-      width: 14% !important
+      width: 14%
       height: 4.8em
       border: 1px solid #89B7E5
       vertical-align: top

app/assets/stylesheets/mobile.css.sass

@@ -1,22 +1,56 @@
-@media all and (max-width: 800px)
+@media all and (min-width: 1600px)
-  *
+  body.events.index table
-    max-width: 100%
+    font-size: larger
 
+@media all and (max-width: 1024px)
+  body.events.index table
+    width: 100%
+
+@media all and (max-width: 900px)
   body
+    border: none
     margin: 0
     padding: 0
+    header.top h1
+      margin-top: 0
+    main ul
+      margin-left: 0
 
-  table
+  #advises
-    width: 100% !important
+    margin: 0 10%
+
+  body.events.index table
     font-size: smaller
-    ul
+    td
-      padding-left: 10px !important
+      border-width: 0
+      ul.events
+        padding-left: 0
+        li
+          list-style-type: none
+
+  #advises
+    margin: 0
+
+  table tr td
+    border-width: 0px !important
 
 @media all and (max-width: 640px)
-  table
+  body.events.index table
-    border-spacing: 0
+    font-size: inherit
-    td
+    thead
+      display: none
+    tr td
+      clear: both
+      width: auto
+      height: auto
+      margin: 1px
+      padding: 0 0.4em
+      display: block
+      min-height: 1.1em
       border-width: 1px !important
-    ul
+      .day_number
-      padding: 0 !important
+        float: right
-      list-style-position: inside
+      ul.events
+        list-style-position: inside
+        li
+          list-style-type: circle

app/views/events/_form.html.haml

@@ -39,7 +39,7 @@
     = f.label Event.human_attribute_name :city
     = f.text_field :city, required: true, size: 70, list: :cities
     %datalist#cities
-      - City.connection.select_values('select distinct name from cities join events on name=city').each do |name|
+      - City.connection.select_values('select distinct name from cities join events on name=city group by city order by count(*) desc').each do |name|
         %option= name
   .field
     = f.label Event.human_attribute_name :related_region