feat(PublicPage): add schedule parts system for page with a lot of schedule (dense schedule)

assets/development/styles/organization.css

@@ -478,6 +478,17 @@ section {
 
 ********************************************************************************/
 
+.schedule.dense {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  width: 100%;
+  column-gap: 1em;
+}
+
+.schedule.dense .schedule-category-days-container {
+  margin-right: 7em;
+}
+
 .schedule-category {
   margin-bottom: 1em;
 }
@@ -952,6 +963,13 @@ RESPONSIVE
     width: 80%;
   }
 
+  /**
+  Schedule
+  **/
+  .schedule.dense {
+    grid-template-columns: 1fr;
+  }
+
   .schedule-category-header {
     padding-left: 1em;
     padding-right: 1em;

src/controllers/PublicController.ts

@@ -237,6 +237,17 @@ export default class PublicController {
           })
         }
 
+        if (version.schedule.length > 8) {
+          let isFirst = true;
+          version.scheduleParts = [[], []]
+          version.schedule.forEach((schedule: any) => {
+            version.scheduleParts[isFirst ? 0 : 1].push(schedule)
+            isFirst = !isFirst
+          })
+        } else {
+          version.scheduleParts = [version.schedule]
+        }
+
         version.cutDescription = Utils.isStrUsable(version, 'descriptionLong') && version.descriptionLong.length > 800
         
         // if (version.cutDescription) {

views/organization.twig

@@ -149,8 +149,10 @@
       <h2>Crénaux</h2>
       <div class="section-divider"></div>
     </div>
-    <div class="schedule org-container">
-      {% for item in data.schedule %} 
+    <div class="schedule org-container {% if data.scheduleParts|length > 1 %}dense{% endif %}">
+      {% for schedules in data.scheduleParts %}
+      <div class="schedule-part">
+        {% for item in schedules %}
         {% if item.when|length > 0 %}
         <div class="schedule-category">
           <div class="schedule-category-header" title="Déroulez">
@@ -199,6 +201,8 @@
         {% endif %}
         {% endfor %}
       </div>
+      {% endfor %}
+    </div>
   </section>
   {% endif %}