Workshop description styling

MixedRealityLab · Aug 7, 2024 · ef84934 · ef84934
1 parent 34f1fd3
commit ef84934
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -18,6 +18,7 @@
 		<base href="{{ site.produrl }}">
 		{% endif %}
         {%- include header_social.html -%}
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
     </head>
     <body class="m-0 p-0">
         <header class="container">

diff --git a/_sass/theme-style.scss b/_sass/theme-style.scss
@@ -158,6 +158,20 @@ article {
     }
 }
 
+.collapse-link-chevron {
+  & > span {
+    margin-right: 30px;
+  }
+  & i {
+    transition-timing-function: $transition-timing-function;
+    transition-duration: $transition-duration/2;
+    transition-property: transform;
+  }
+  &[aria-expanded="true"] i {
+    transform: rotate(90deg);
+  }
+}
+
 @include media-breakpoint-up(lg) {
     .navbar-container {
         margin-right: -8px;

diff --git a/program/workshops.md b/program/workshops.md
@@ -16,9 +16,20 @@ The day prior to the main program, 16th September 2024, we will be hosting a se
 
 {% for workshop in site.data.workshops %}
 <div class="background-lightgray rounded border mb-3 p-3">
-  <h3 class="mt-0 pt-0 text-primary">{{ workshop.title }}</h3>
-  {{ workshop.description | markdownify }}
-  {% if workshop.website %}<div class="d-block"><em><a href="{{ workshop.website }}" title="{{ workshop.title }} website">Workshop website &raquo;</a></em></div>{% endif %}
+  <h3 class="m-0 p-0 text-primary d-flex flex-row collapse-link-chevron small" data-bs-toggle="collapse" href="#workshop{{ forloop.index }}" role="button" aria-expanded="false" aria-controls="workshop{{ forloop.index }}">
+    <span class="flex-grow-1">
+    {{ workshop.title }}
+    </span>
+    <i class="float-right bi bi-chevron-right mt-1"></i>
+  </h3>
+  <div class="description collapse pt-3 mb-0" id="workshop{{ forloop.index }}">
+    {{ workshop.description | markdownify }}
+    {% if workshop.website %}
+    <div class="d-block">
+      <em><a href="{{ workshop.website }}" title="{{ workshop.title }} website">Workshop website &raquo;</a></em>
+    </div>
+    {% endif %}
+  </div>
 </div>
 {% endfor %}