From 1f1d2b409a699637339493c84fe40dae316b0e23 Mon Sep 17 00:00:00 2001
From: Tobias Huste <t.huste@hzdr.de>
Date: Mon, 24 Aug 2020 14:26:51 +0200
Subject: [PATCH] Hide roadmap items older than 60 days
---
_layouts/roadmap.html | 99 +++++++++++++++++++++++++++--------------
assets/css/roadmap.scss | 6 +++
roadmap/index.md | 2 +
3 files changed, 73 insertions(+), 34 deletions(-)
create mode 100644 assets/css/roadmap.scss
diff --git a/_layouts/roadmap.html b/_layouts/roadmap.html
index 111e643fd..d207adf95 100644
--- a/_layouts/roadmap.html
+++ b/_layouts/roadmap.html
@@ -1,56 +1,87 @@
-{% 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>
diff --git a/assets/css/roadmap.scss b/assets/css/roadmap.scss
new file mode 100644
index 000000000..e0a9db947
--- /dev/null
+++ b/assets/css/roadmap.scss
@@ -0,0 +1,6 @@
+---
+---
+
+.hidden {
+ display: none;
+}
diff --git a/roadmap/index.md b/roadmap/index.md
index 14c088901..5ea7e584f 100644
--- 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."
--
GitLab