Allow collapsing series on a course page

app/assets/javascripts/course.ts

@@ -61,6 +61,19 @@
         return this._bottom;
     }
 
+    private get cardId(): string {
+        return `series-card-${this.id}`;
+    }
+
+    private get card(): HTMLElement {
+        return document.getElementById(this.cardId);
+    }
+
+    private get scrollspy(): HTMLElement {
+        const anchor = this.card.querySelector(".anchor");
+        return document.querySelector(`#scrollspy-nav a[href="#${anchor.id}"]`);
+    }
+
     static findAll(cardsSelector = ".series.card"): Array<Series> {
         const cards = document.querySelectorAll(cardsSelector);
         return Array.from(cards, card => new Series(card));
@@ -79,6 +92,7 @@
         this.loading = false;
         this._top = card.getBoundingClientRect().top + window.scrollY;
         this._bottom = this.top + card.getBoundingClientRect().height;
+        this.initCollapse();
     }
 
     needsLoading(): boolean {
@@ -93,10 +107,37 @@
             if (response.ok) {
                 eval(await response.text());
                 this.loading = false;
-                this.reselect(document.getElementById(`series-card-${this.id}`));
+                this.reselect(this.card);
             }
         });
     }
+
+    collapse(): void {
+        localStorage.setItem(this.cardId, "collapsed");
+        this.renderCollapsed();
+    }
+
+    expand(): void {
+        localStorage.removeItem(this.cardId);
+        this.renderCollapsed();
+    }
+
+    initCollapse(): void {
+        this.renderCollapsed();
+
+        if (this.loaded) {
+            const expandButton = this.card.querySelector(".expand-button");
+            expandButton.addEventListener("click", this.expand.bind(this));
+            const collapseButton = this.card.querySelector(".collapse-button");
+            collapseButton.addEventListener("click", this.collapse.bind(this));
+        }
+    }
+
+    renderCollapsed(): void {
+        const collapsed = localStorage.getItem(this.cardId) === "collapsed";
+        this.card.classList.toggle("collapsed", collapsed);
+        this.scrollspy.classList.toggle("d-none", collapsed);
+    }
 }
 
 function initCourseShow(): void {

app/assets/stylesheets/models/series.css.scss

@@ -69,6 +69,51 @@
   .series-icon {
     margin-right: 16px;
   }
+
+  .expand-button {
+    display: none;
+  }
+
+  &.collapsed {
+    .card-subtitle {
+      margin-bottom: 0;
+    }
+
+    .btn-group {
+      display: none !important;
+    }
+
+    .tab-content {
+      display: none;
+    }
+
+    .card-actions {
+      display: none;
+    }
+
+    d-series-icon {
+      svg {
+        width: 24px !important;
+        height: 24px !important;
+      }
+    }
+
+    h4 {
+      small {
+        display: none;
+      }
+    }
+
+    .series-dropdown {
+      display: none;
+    }
+
+    .expand-button {
+      display: block;
+      margin-top: -7px;
+      margin-bottom: -9px;
+    }
+  }
 }
 
 .series-icon {

app/views/series/_series.html.erb

@@ -23,6 +23,9 @@
         <%= render partial: 'deadlines/absolute', locals: {deadline: series.deadline, met: user && loaded ? series.completed_before_deadline?(user) : false} %>
       </h4>
       <div class="flex-spacer"></div>
+      <button class="btn btn-text expand-button">
+        <%= t "series.show.expand" %>
+      </button>
       <% if policy(series).statistics? %>
         <div id="series-view-<%= series.id %>" class="btn-group btn-toggle nav d-none d-sm-flex" role="tablist">
           <button class="btn active" data-bs-target="#series-content-<%= series.id %>" data-bs-toggle="tab" role="tab" title="<%= t("series.show.series_overview") %>">
@@ -68,6 +71,11 @@
                   <% end %>
                 </li>
               <% end %>
+              <li>
+                <a class="dropdown-item collapse-button">
+                  <i class='mdi mdi-eye-off mdi-18'></i> <%= t "series.show.collapse" %>
+                </a>
+              </li>
             </ul>
           </div>
         </div>
@@ -247,6 +255,11 @@
                 <% end %>
               </li>
             <% end %>
+            <li>
+              <a class="dropdown-item collapse-button">
+                <i class='mdi mdi-eye-off mdi-18'></i> <%= t "series.show.collapse" %>
+              </a>
+            </li>
           </ul>
         </div>
       </div>

config/locales/views/series/en.yml

@@ -48,6 +48,8 @@ en:
       series_overview: Series overview
       apply: apply
       hidden_not_registered: You are not registered for this course. You must register before you can start solving the exercises.
+      collapse: Collapse
+      expand: Expand
     edit:
       title: Edit series
       add_activities: Add activities

config/locales/views/series/nl.yml

@@ -48,6 +48,8 @@ nl:
       series_overview: Reeksoverzicht
       apply: toepassen
       hidden_not_registered: Je bent niet ingeschreven voor deze cursus. Je kan de oefeningen pas oplossen nadat je je ingeschreven hebt.
+      collapse: Inklappen
+      expand: Uitklappen
     edit:
       title: Reeks bewerken
       add_activities: Activiteiten toevoegen