Hide roadmap items older than 60 days

1f1d2b40 · Huste, Tobias · 8323ff05 · 1f1d2b40 · 1f1d2b40 · 1f1d2b40
Verified Commit 1f1d2b40 authored 4 years ago by Huste, Tobias
--- a/_layouts/roadmap.html
+++ b/_layouts/roadmap.html
-{% include top.html %}
+{%- include top.html -%}

 <body>

-    {% include header.html %}
+    {%- include header.html -%}

    <main>
-        {% include title_image.html%}
+        {%- include title_image.html -%}

-        {% assign sorted_roadmap = site.roadmap | sort: "date" %}
-        {% assign service_names = "Backbone Services,Cloud Services,Software Services,HIFIS Overall" | split: "," %}
-        {% assign unique_dates = sorted_roadmap | map: "date" | uniq | sort %}
+        {%- assign sorted_roadmap = site.roadmap | sort: "date" -%}
+        {%- assign service_names = "Backbone Services,Cloud Services,Software Services,HIFIS Overall" | split: "," -%}
+        {%- assign unique_dates = sorted_roadmap | map: "date" | uniq | sort -%}

-        {% assign year = "1999" %}
+        {%- assign year = "1999" -%}

        <section>
-        <div class="timeline">
-        {% for date_item in unique_dates %}
-            {% assign sorted_roadmap_by_date = sorted_roadmap | where_exp: "roadmap", "roadmap.date == date_item" %}
-            {% assign newyear = date_item | date: "%Y" %}
+            <div class="timeline">
+                <div class="text-center">
+                    <div class="expand">
+                        <button onclick="togglePastItems()" class="btn btn-outline-primary btn-sm"><i class="fas fa-plus"></i>
+                            Show past items</a>
+                    </div>
+                    <div class="expand hidden">
+                        <button onclick="togglePastItems()" class="btn btn-outline-primary btn-sm"><i
+                                class="fas fa-minus"></i> Hide past items</a>
+                    </div>
+                </div>
+                {%- for date_item in unique_dates -%}
+                {%- assign sorted_roadmap_by_date = sorted_roadmap | where_exp: "roadmap", "roadmap.date == date_item" -%}
+                {%- assign newyear = date_item | date: "%Y" -%}

-            {% if newyear != year %}
-                {% assign year = newyear %}
+                {%- if newyear != year -%}
+                {%- assign year = newyear -%}
                <h1 class="text-center">{{ newyear }}</h1>
-            {% endif %}
+                {%- endif -%}

-            <div class="roadmap-month">
-                <div class="timeline-bubble"></div>
-                <h2>{{ date_item | date: "%B %Y" }}</h2>
-            </div>
-            <div class="roadmap-item">
+                {%- capture today -%}{{ 'now' | date: '%s'}}{%- endcapture -%}
+                {%- capture roadmap_item_time -%}{{ date_item | date: '%s'}}{%- endcapture -%}
+                {%- assign days_since = today | minus: roadmap_item_time | divided_by: 86400 -%}
+                {%- comment -%}
+                Show the last two months in the past
+                {%- endcomment -%}
+                {%- if days_since > 60 -%}
+                {%- assign hidden_class = "hidden expand" -%}
+                {%- else -%}
+                {%- assign hidden_class = "" -%}
+                {%- endif -%}

+                <div class="roadmap-month {{ hidden_class }}">
+                    <div class="timeline-bubble"></div>
+                    <h2>{{ date_item | date: "%B %Y" }}</h2>
+                </div>
+                <div class="roadmap-item {{ hidden_class }}">

-                        {% for roadmap_item in sorted_roadmap_by_date %}
-                            {% assign service_short = roadmap_item.service | capitalize %}
-                            <article class="alert-{{ roadmap_item.service }}-light">
-                            {% for service_name in service_names %}
-                                {% if service_name contains service_short %}
-                                    <span class="service_name badge badge-{{ roadmap_item.service }}-light">{{ service_name }}</span>
-                                {% endif %}
-                            {% endfor %}
-                            {{ roadmap_item.content | markdownify }}
-                            </article>
-                        {% endfor %}
+                    {%- for roadmap_item in sorted_roadmap_by_date -%}
+                    <article class="alert-{{ roadmap_item.service }}-light">
+                        {%- assign service_short = roadmap_item.service | capitalize -%}
+                        {%- for service_name in service_names -%}
+                        {%- if service_name contains service_short -%}
+                        <span
+                            class="service_name badge badge-{{ roadmap_item.service }}-light">{{ service_name }}</span>
+                        {%- endif -%}
+                        {%- endfor -%}
+                        {{ roadmap_item.content | markdownify }}
+                    </article>
+                    {%- endfor -%}

-            </div>
+                </div>

-        {% endfor %}
-        </div>
+                {%- endfor -%}
+            </div>
        </section>
    </main>

-    {% include footer.html %}
+    {%- include footer.html -%}
+
+    <script>
+        function togglePastItems() {
+            elements = document.getElementsByClassName("expand");
+            for (element of elements) {
+                element.classList.toggle("hidden");
+            }
+        }
+    </script>

 </body>


--- a/assets/css/roadmap.scss
+++ b/assets/css/roadmap.scss
+---
+---
+
+.hidden {
+    display: none;
+}
--- a/roadmap/index.md
+++ b/roadmap/index.md
@@ -2,6 +2,8 @@
 title: Roadmap
 title_image: default
 layout: roadmap
+additional_css:
+  - roadmap.css
 excerpt:
  "The is the roadmap of the HIFIS platform. 
   It summarises the goals for the next months and years."