Spring projects UI

spring-io · Oct 10, 2023 · 7cc7e2a · 7cc7e2a
1 parent 34bfa04
commit 7cc7e2a
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 4 deletions.
diff --git a/src/css/vendor/page-spring-projects.css 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
@@ -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
@@ -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
@@ -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>