Added Scrollspy

src/_layouts/components/tocTools.11ty.js

@@ -29,9 +29,10 @@ exports.getPageTOC = (obj) => {
   const createToc = (collection) => {
 
     const tocItems = collection.filter(item => item.data.level <= maxLevel).map((item) => {
+      const id = eleventy.slugify(item.data.title);
       return `
-        <li>
-          <a href="#${eleventy.slugify(item.data.title)}">${item.data.title}</a><span class="icon">navigate_next</span>
+        <li data-scrollspy-target="${id}">
+          <a href="#${id}">${item.data.title}</a>
         </li>
       `;
     });
@@ -43,7 +44,8 @@ exports.getPageTOC = (obj) => {
   }
 
   return `
-    <nav class="inline-navigation">
+    <nav class="inline-navigation" data-js-scrollspy>
+      <h2 class="navigation-title">Inhalt</h2>
       ${createToc(collection)}
     </nav>
   `;

src/_layouts/kurzbericht.11ty.js

@@ -27,6 +27,15 @@ module.exports = {
 
 		return `
       <div class="content-wrap">
+        <aside>
+          <nav>
+            ${tocTools.getPageTOC({
+              eleventy: this,
+              collection: data.collections.itemsKurzbericht,
+              maxLevel: 2
+            })}
+          </nav>
+        </aside>
 			  <main>
 			    <section class="cover">
 			    	<header>
@@ -44,15 +53,6 @@ module.exports = {
             ${kurzberichtList.join("\n")}
           </section>
 			  </main>
-        <aside>
-          <nav>
-            ${tocTools.getPageTOC({
-              eleventy: this,
-              collection: data.collections.itemsKurzbericht,
-              maxLevel: 2
-            })}
-          </nav>
-        </aside>
       </div>
 		`;
 	}

src/assets/scripts/main.js

@@ -228,6 +228,42 @@ const addScrollToTop = () => {
   };
 };
 
+/* Scrollspy
+############################################################################ */
+
+const addScrollSpy = () => {
+
+  const inlineNavigation = document.querySelector("[data-js-scrollspy]");
+  if(!inlineNavigation) return;
+
+  let scrollSpyActiveElement = false;
+  const sections = document.querySelectorAll("h2[id], h3[id]");
+
+  const intersectionCallback = (entries, observer) => {
+    if (entries[0].intesectionRatio <= 0) return;
+
+    if (entries[0].intersectionRatio > 0 || entries[0].intersectionRatio < 0.2) {
+
+      if(scrollSpyActiveElement) scrollSpyActiveElement.classList.remove('is-active');
+
+      const {id} = entries[0].target;
+      const activeElement = inlineNavigation.querySelector(`[data-scrollspy-target="${id}"]`).querySelector("a");
+      activeElement.classList.add('is-active');
+
+      scrollSpyActiveElement = activeElement;
+    }
+  };
+
+  const intersectionOptions = {};
+  const intersectionObserver = new IntersectionObserver(intersectionCallback, intersectionOptions);
+
+  sections.forEach((section) => {
+    intersectionObserver.observe(section);
+  });
+
+
+};
+
 /* Main
 ############################################################################ */
 
@@ -238,4 +274,5 @@ document.addEventListener("DOMContentLoaded", () => {
   addDynamicHyperlinks();
   addGalleryInteractions();
   addScrollToTop();
+  addScrollSpy();
 });

src/assets/styles/scss/components/navigation.scss

@@ -2,6 +2,12 @@
 ############################################################################ */
 
 .inline-navigation{
+
+  .navigation-title{
+    font-size: var(--m);
+    padding-top: 0;
+  }
+
   li{
     line-height: var(--lh-tight);
     position: relative;
@@ -14,30 +20,11 @@
       transition: padding var(--tr-fast);
       padding-right: var(--fluid-space-s);
 
-      &:hover{
+      &:hover, &.is-active{
         padding-left: var(--half);
         padding-right: var(--fluid-space-xs);
-
-      }
-    }
-
-    & > .icon{
-      transition: all var(--tr-fast);
-      position: absolute;
-      top: 0;
-      right: -20px;
-      bottom: 0;
-      line-height: var(--l);
-      vertical-align: bottom;
-      font-weight: var(--fw-bold);
-      opacity: 0;
-      color: var(--color-accent);
-    }
-
-    &:hover{
-      .icon{
-        opacity: 1;
-        right: var(--quat);
+        border-left: solid var(--border-width-m) var(--color-accent);
+        background-color: var(--darken);
       }
     }
   }

src/assets/styles/scss/composition.scss

@@ -33,18 +33,24 @@ table{
 
 @media screen and (min-width: 160ch){
   .content-wrap:has(aside){
-    display: grid;
+    display: flex;
     gap: var(--fluid-space-m);
-    grid-template-columns: 1fr var(--max-width-navigation);
+    flex-direction: row-reverse;
 
     aside{
       padding-right: var(--xl);
       font-size: var(--s);
+      max-width: var(--max-width-aside);
+
       nav{
         position: sticky;
         top: calc(var(--fluid-space-l) * 1.5);
       }
     }
+
+    main{
+      flex-grow: 2;
+    }
   }
 }
 

src/assets/styles/scss/global/_base.scss

@@ -40,13 +40,15 @@ h2 {
   padding-top: var(--fluid-space-s);
   margin-bottom: var(--fluid-space-s);
   font-size: var(--xl);
+
 }
 
 h3 {
   padding-top: var(--fluid-space-xs);
   font-size: var(--l);
   margin-bottom: var(--fluid-space-xs);
   color: var(--darkest);
+  font-weight: var(--fw-medium);
 }
 
 h4,
@@ -55,7 +57,11 @@ h6 {
   font-size: var(--m);
   padding-top: var(--fluid-space-xs);
   margin-bottom: var(--half);
-  color: var(--darkest);
+}
+
+h5,
+h6 {
+  padding-top: var(--xs);
 }
 
 p,
@@ -105,6 +111,13 @@ ul + h4{
   margin-top: var(--fluid-space-s);
 }
 
+p + h5,
+p + h6,
+ul + h5,
+ul + h6{
+  margin-top: var(--half);
+}
+
 hr{
   margin-top: var(--fluid-space-l);
   margin-bottom: var(--fluid-space-l);

src/assets/styles/scss/global/_variables.scss

@@ -23,6 +23,7 @@
   --max-width-image-l: calc(var(--m) * 15);
   --max-width-image-s: calc(var(--m) * 5);
   --max-width-navigation: calc(var(--m) * 20);
+  --max-width-aside: calc(var(--m) * 25);
   --mi-lila: #9313ce;
   --mi-gruen: #00ad2f;
   --mi-orange: #F58700;

src/kurzbericht/110-curriculumwerkstatt.md

@@ -8,14 +8,13 @@ meta:
   reviewers: cn, mb
   comments: 
     - ">rgr: keine Ahnung, ob das Teilkapitel hier in der Form gedacht ist oder nicht. Die Beschreibung im Web ist auch anders als auf dem pdf (beide im Absatz oben verlinkt). Wenn ich was ändern soll, gebt Bescheid."
+    - "<!-- Input Susanne: Damit ist eine zusammenfassende Beschreibung dazu gemeint, wer wann (und ggf. wie) zu welchen Schritten / Meilensteinen gearbeitet hat. (Gibt es dazu einen guten Begriff in Projektsprache?)  Also den Ablauf und die beteiligten Akteure: Wer war das Entwicklungsteam, wie habt ihr euch Feedback der anderen geholt. Das kann sogar eine Tabelle mit Terminen, Meilenstein und ggf. Fotos sein. Reicht das als Info? Ansonsten können wir auch gerne dazu sprechen? (ich habe auch nochmal den Ablauf angehängt) -->"
   purpose: | 
     Wann (genaue Datumsangaben) wurde die Curriculumwerkstatt durchgeführt? Hinweis: Diese Angaben werden für die Eintragung der Akkreditierung in der Datenbank des Akkreditierungsrates verwendet. 
 ---
 
 
-<!-- Input Susanne: Damit ist eine zusammenfassende Beschreibung dazu gemeint, wer wann (und ggf. wie) zu welchen Schritten / Meilensteinen gearbeitet hat. (Gibt es dazu einen guten Begriff in Projektsprache?)  Also den Ablauf und die beteiligten Akteure:
-Wer war das Entwicklungsteam, wie habt ihr euch Feedback der anderen geholt. Das kann sogar eine Tabelle mit Terminen, Meilenstein und ggf. Fotos sein.
-Reicht das als Info? Ansonsten können wir auch gerne dazu sprechen? (ich habe auch nochmal den Ablauf angehängt) -->
+
 
 Die Reakkreditierung der Studiengänge Medieninformatik Bachelor und Master erfolgte anhand des Entwicklungsprozesses der Curriculumwerkstatt der TH Köln (Stand 25.09.2018, Autoren ZLE / Referat 4). In jedem der sechs Schritten stellt der Prozess Konzepte für die Studiengangsentwicklung in den Fokus (siehe Aufzählung unten). Zu jedem der Konzepte sind zu erarbeitende Artefakte und Aufgaben definiert, siehe [Visualisierung der Schritte der Curriculumwerkstatt TH Köln](https://www.th-koeln.de/mam/downloads/deutsch/hochschule/profil/lehre/curriculumswerkstatt.pdf). Die im Folgenden beschriebene Gliederung orientiert sich an den [Erläuterungen des Zentrums für Lehrentwicklung (ZLE) zur Curriculumwerkstatt](https://www.th-koeln.de/hochschule/studiengangs--und-curriculumsentwicklung_49326.php)
 
@@ -47,12 +46,12 @@ Konkret wurden die [Erkenntnisse/Insights](/insights/) auch genutzt um die fünf
 
 Im Zuge dieser Entwicklungsphasen wurden auch die bestehenden Curricula der beiden Medieninformatikstudiengänge herangezogen, besonders um die Notwendigkeit der jeweiligen Modulen zu hinterfragen. Ausgerichtet auf die [Handlungsfelder](/handlungsfelder/) wurden dann die Learning Outcomes und Prüfungsformen erarbeitet und abgestimmt. Hierzu wurde auch für jedes Modul abgefragt und justiert, inwieweit das Modul auf die konkreten Kompetenzen der Handlungsfelder einzahlt und auf welche Kompetenzen es aufbaut.
 
-**Medieninformatik Bachelor**
+##### Medieninformatik Bachelor
 - [Kompetenzen der Module im Bachelor](/medieninformatik-bachelor/kompetenzen-der-module-bpo5/)
 - [Modulmatrix Bachelor](/medieninformatik-bachelor/modulmatrix-bpo5/)
 - [Modulhandbuch Bachelor](/medieninformatik-bachelor/modulhandbuch-bpo5/)
 
-**Medieninformatik Master**
+##### Medieninformatik Master
 - [Kompetenzen der Module im Master](/medieninformatik-master/kompetenzen-der-module-mpo5/)
 - [Modulmatrix Master](/medieninformatik-master/modulmatrix-mpo5/)
 - [Modulhandbuch Master](/medieninformatik-master/modulhandbuch-mpo5/)