Merge pull request #643 from Club-Alpin-Annecy/stat

Stat design for mobile

Author: jnguiot

collectives/static/css/components/stats.scss

@@ -1,3 +1,7 @@
+.max-100pc{
+    max-width: 100%;
+}
+
 .card {
     position: relative; 
     border-radius: 6px;
@@ -7,6 +11,10 @@
     padding: 1.25rem;
     border: 0.5px solid #e6e6e6;
 
+    &.tall{
+        height: 400px;
+    }
+
     .tooltip{
         position: absolute;
         bottom: 5px;
@@ -47,4 +55,19 @@
     .header-3{
         font-weight: normal;
     }
+}
+
+.filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    > * {
+        flex-grow: 1;
+    }
+    @media screen and (max-width: 680px) {
+        > * {
+            width: 100%;
+        }
+    }
 }

collectives/templates/stats/partials/nb_collectives_by_activity_type.html

@@ -15,7 +15,6 @@
         }]
       },
       options: {
-        aspectRatio: 3,
         plugins: {
           title: {
             text: "{{ engine.INDEX['nb_collectives_by_activity_type']['name'] | safe }}",

collectives/templates/stats/partials/nb_events_by_activity_type.html

@@ -15,7 +15,6 @@
         }]
       },
       options: {
-        aspectRatio: 3,
         plugins: {
           title: {
             text: "{{ engine.INDEX['nb_events_by_activity_type']['name'] | safe }}",

collectives/templates/stats/partials/nb_events_by_leaders.html

@@ -15,7 +15,6 @@
         }]
       },
       options: {
-        aspectRatio: 3,
         plugins: {
           title: {
             text: "{{ engine.INDEX['nb_events_by_leaders']['name'] | safe }}",

collectives/templates/stats/partials/nb_user_per_activity_type.html

@@ -15,7 +15,6 @@
         }]
       },
       options: {
-        aspectRatio: 3,
         plugins: {
           title: {
             text: "{{ engine.INDEX['nb_user_per_activity_type']['name'] | safe }}",

collectives/templates/stats/partials/population_registration_number.html

@@ -14,7 +14,6 @@
         }]
       },
       options: {
-        aspectRatio: 2,
         plugins: {
           title: {
             text: "{{ engine.INDEX['population_registration_number']['name'] | safe }}",

collectives/templates/stats/partials/volunteer_time_by_activity_type.html

@@ -15,7 +15,6 @@
         }]
     },
     options: {
-        aspectRatio: 3,
         plugins: {
         title: {
             text: "{{ engine.INDEX['volunteer_time_by_activity_type']['name'] | safe }}",

collectives/templates/stats/stats.html

@@ -17,7 +17,7 @@
 
       }
     });
-    Chart.defaults.aspectRatio = 1;
+    Chart.defaults.maintainAspectRatio = false,
     Chart.defaults.responsive = true;
     Chart.defaults.scale.grace = "10%";
     Chart.defaults.layout.padding = 10;
@@ -37,22 +37,19 @@
     <div class="heading-1">Statistiques</div>
 
 
-    <form action="{{url_for('root.statistics')}}" id="statistics-form" method="GET" >
-     
-      <div class="form-search search-data">
+    <form action="{{url_for('root.statistics')}}" id="statistics-form" method="GET" class="filters">
           {{ form.activity_id }}
 
           {{ form.year }}
 
           {{ form.submit(class="button button-primary") }}
           {{ form.excel(class="button button-primary") }}
-      </div>
     </form>
 
     <br/>
 
     <div class="tile is-ancestor">
-      <div class="tile is-vertical">
+      <div class="tile is-vertical max-100pc">
 
         <div class="tile">
           <div class="heading-2"><br/>évènements (tous types confondus)</div>
@@ -73,7 +70,7 @@
         {% if engine.activity_id == None %}
           <div class="tile"> <!-- Start line -->
             <div class="tile is-parent">
-              <div class="tile card is-child">
+              <div class="tile card is-child tall">
                 {% include 'stats/partials/nb_events_by_activity_type.html' %}
               </div>
             </div>
@@ -99,7 +96,7 @@
         {% if engine.activity_id == None %}
           <div class="tile"> <!-- Start line -->
             <div class="tile is-parent">
-              <div class="tile card is-child">
+              <div class="tile card is-child tall">
                 {% include 'stats/partials/nb_collectives_by_activity_type.html' %}
               </div>
             </div>
@@ -130,7 +127,7 @@
         {% if engine.activity_id == None %}
           <div class="tile">
             <div class="tile is-parent">
-              <div class="tile card is-child">
+              <div class="tile card is-child tall">
                 {% include 'stats/partials/nb_user_per_activity_type.html' %}
               </div>
             </div>
@@ -141,14 +138,14 @@
 
         <div class="tile "> <!-- Start line -->
           <div class="tile is-parent is-4">
-            <div class="tile card is-child">
+            <div class="tile card is-child tall">
               {% include 'stats/partials/nb_registrations_by_gender.html' %}              
             </div>
           </div>
 
 
           <div class="tile is-parent">
-            <div class="tile card is-child">
+            <div class="tile card is-child tall">
               {% include 'stats/partials/population_registration_number.html' %}   
             </div>
           </div>
@@ -159,13 +156,13 @@
         </div>
         <div class="tile "> <!-- Start line -->
           <div class="tile is-parent is-6">
-            <div class="tile card is-child">
+            <div class="tile card is-child tall">
               {% include 'stats/partials/nb_events_by_event_type.html' %}
             </div>
           </div>
 
           <div class="tile is-parent">
-            <div class="tile card is-child">
+            <div class="tile card is-child tall">
               {% include 'stats/partials/nb_events_by_event_tag.html' %}
             </div>
           </div>
@@ -177,15 +174,15 @@
         </div>
         <div class="tile">
           <div class="tile is-parent">
-            <div class="tile card is-child">
+            <div class="tile card is-child tall">
               {% include 'stats/partials/nb_events_by_leaders.html' %}
             </div>
           </div>
         </div> <!-- End .tile line -->
         {% if engine.activity_id == None %}
           <div class="tile">
             <div class="tile is-parent">
-              <div class="tile card is-child">
+              <div class="tile card is-child tall">
                 {% include 'stats/partials/volunteer_time_by_activity_type.html' %}
               </div>
             </div>