mise en forme

src/agenda_culturel/static/style.scss

@@ -1606,73 +1606,84 @@ label.required::after {
 }
 
 .moderation_heatmap {
-    max-width: 600px;
-    margin: auto;
-    th {
-        font-size: 70%;
-        text-align: center;
-    }
-    td {
-        font-size: 60%;
-        text-align: center;
-    }
-    tbody th {
-        text-align: right;
-    }
-    .ratio {
-        padding: 0.1em;
-        a, .a {
-            margin: auto;
-            border-radius: var(--border-radius);
-            color: black;
-            padding: .5em 1em;
-            display: block;
-            width: 6em;
-            height: 2.5em;
-        }
-    }
-    .score_0 {
-        a, .a {
-            background: rgb(0, 128, 0);
-        }
-    }
-    .score_1 {
-        a, .a {
-            background: rgb(255, 255, 0);
-        }
-    }
-    .score_2 {
-        a, .a {
-            background: rgb(255, 166, 0);
-        }
-    }
-    .score_3 {
-        a, .a {
-            background: rgb(255, 0, 0);
-        }
-    }
-    .score_4 {
-        a, .a {
-            background: rgb(128, 0, 128);
-            color: white;
-        }
-    }
-    @media only screen and (max-width: 500px) {
+    overflow-x: auto;
+    table {
+        max-width: 600px;
+        margin: auto;
         .total, .month {
             font-size: 0;
         }
         .label {
             display: none;
         }
-        font-size: 90%;
-    }
-    @media only screen and (max-width: 400px) {
-        font-size: 80%;
 
-        .ratio a, .ratio .a {
+        th {
+            font-size: 90%;
+            text-align: center;
+        }
+        td {
+            font-size: 80%;
+            text-align: center;
+        }
+        tbody th {
+            text-align: right;
+        }
+        .ratio {
             padding: 0.1em;
-            width: 4em;
-            height: 2em;
+            a, .a {
+                margin: auto;
+                border-radius: var(--border-radius);
+                color: black;
+                padding: .5em 1em;
+                display: block;
+                max-width: 6em;
+                width: 3.2em;
+                height: 2em;
+                line-height: 1.1em;
+            }
+        }
+        .score_0 {
+            a, .a {
+                background: rgb(0, 128, 0);
+            }
+        }
+        .score_1 {
+            a, .a {
+                background: rgb(255, 255, 0);
+            }
+        }
+        .score_2 {
+            a, .a {
+                background: rgb(255, 166, 0);
+            }
+        }
+        .score_3 {
+            a, .a {
+                background: rgb(255, 0, 0);
+            }
+        }
+        .score_4 {
+            a, .a {
+                background: rgb(128, 0, 128);
+                color: white;
+            }
+        }
+        @media only screen and (min-width: 550px) {
+            font-size: 90%;
+            .ratio {
+                a, .a {
+                    width: 5em;
+                    height: 3.2em;
+                    line-height: 2.1em;
+                }
+            }
+            .total, .month {
+                font-size: auto;
+            }
+            .label {
+                display: table-cell;
+            }
+            font-size: 100%;
         }
     }
 }

src/agenda_culturel/templates/agenda_culturel/administration.html

@@ -26,8 +26,9 @@
                     <h2>Modération à venir</h2>
                 </header>
                 
+                <div class="moderation_heatmap">
                 {% for w in nb_not_moderated %}
-                    <table class="moderation_heatmap">                        
+                    <table>
                         <thead>
                             <th class="label"></th>
                         {% for m in w %}
@@ -47,7 +48,7 @@
                         </tbody>
                     </table>
                 {% endfor %}
-                
+                </div>
             </article>
 
             <article>