From 7cc7e2a51dbe91379c843b4a695b99993c5d86b3 Mon Sep 17 00:00:00 2001
From: Damien Vitrac <dvitrac@vmware.com>
Date: Mon, 9 Oct 2023 18:22:14 +0200
Subject: [PATCH] Spring projects UI

---
 src/css/vendor/page-spring-projects.css  | 55 ++++++++++++++++++++++++
 src/js/vendor/page-spring-projects.js    | 11 +++++
 src/partials/article-spring-projects.hbs |  7 ++-
 src/partials/related-project.hbs         | 11 ++++-
 4 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 src/css/vendor/page-spring-projects.css
 create mode 100644 src/js/vendor/page-spring-projects.js

diff --git a/src/css/vendor/page-spring-projects.css b/src/css/vendor/page-spring-projects.css
new file mode 100644
index 0000000..d2c57eb
--- /dev/null
+++ b/src/css/vendor/page-spring-projects.css
@@ -0,0 +1,55 @@
+.page-spring-projects .container {
+  padding: 2rem;
+}
+
+.page-spring-projects #page-title {
+  margin: 0;
+}
+
+.page-spring-projects .projects-list,
+.page-spring-projects .projects-list ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  padding-top: 4px;
+}
+
+.page-spring-projects .projects-list {
+  padding-left: 10px;
+}
+
+.page-spring-projects .projects-list ul {
+  display: none;
+}
+.page-spring-projects .projects-list ul.show {
+  display: block;
+}
+
+.page-spring-projects .projects-list {
+  margin: 1.5rem 0;
+}
+
+.page-spring-projects .projects-list li {
+  padding: 8px 0;
+  padding-left: 20px;
+  position: relative;
+}
+
+.page-spring-projects .projects-list li a.anchor {
+  position: absolute;
+  display: block;
+  top: 2px;
+  left: 2px;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--body-font-color);
+}
+
+.page-spring-projects .projects-list li a.anchor.active {
+  transform: rotate(90deg);
+  top: 4px;
+}
+
+.page-spring-projects .projects-list li a {
+  color: var(--link-font-color);
+}
diff --git a/src/js/vendor/page-spring-projects.js b/src/js/vendor/page-spring-projects.js
new file mode 100644
index 0000000..76dedac
--- /dev/null
+++ b/src/js/vendor/page-spring-projects.js
@@ -0,0 +1,11 @@
+/* eslint-disable no-undef */
+
+(function () {
+  document.querySelectorAll('.anchor').forEach((el) => {
+    const list = el.parentElement.querySelector('ul')
+    el.addEventListener('click', function (e) {
+      el.classList.toggle('active')
+      list.classList.toggle('show')
+    })
+  })
+})()
diff --git a/src/partials/article-spring-projects.hbs b/src/partials/article-spring-projects.hbs
index 8a3616f..9996e55 100644
--- a/src/partials/article-spring-projects.hbs
+++ b/src/partials/article-spring-projects.hbs
@@ -1,5 +1,8 @@
-<div class="page-search">
-  <div class="search-wrap">
+<link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/page-spring-projects.css">
+<script async src="{{{uiRootPath}}}/js/vendor/page-spring-projects.js"></script>
+
+<div class="page-spring-projects">
+  <div class="container">
     <h1 id="page-title" class="page">Spring Projects</h1>
     <ul class="projects-list">
       {{#each (related_projects [''] [''])}}
diff --git a/src/partials/related-project.hbs b/src/partials/related-project.hbs
index c733979..fb1f26b 100644
--- a/src/partials/related-project.hbs
+++ b/src/partials/related-project.hbs
@@ -1,7 +1,13 @@
+<li>
+{{#if ./children}}
+<a class="anchor"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
+{{/if}}
 {{#if ./href}}
-<li><a href="{{./href}}">{{./text}}</a></li>
+<a href="{{./href}}">
+  {{./text}}
+</a>
 {{else}}
-<li>{{./text}}</li>
+  {{./text}}
 {{/if}}
 {{#if ./children}}
 <ul>
@@ -10,3 +16,4 @@
   {{/each}}
 </ul>
 {{/if}}
+</li>