Feat/robert

README.md

@@ -1,11 +1,11 @@
-# FIPGuide
+# FIP Guide
 
 - [English](#-english)
 - [Deutsch](#-deutsch)
 
 ## 🇬🇧 English
 
-Welcome to FIPGuide
+Welcome to FIP Guide
 
 The community website for all information about FIP (Groupement pour les facilités de circulation internationales du personnel des chemins de fer) - The association for international travel benefits for railway staff.
 With this international discount card for railway staff, employees can use trains, ships, and buses in Europe at reduced rates.
@@ -14,6 +14,8 @@ This project includes information and usage instructions for FIP as well as spec
 Contributing and providing information is always welcome.  
 Instructions for editing information can be found [here in the Wiki](https://github.com/fipguide/fipguide.github.io/wiki/English).
 
+You can see the current information status for operators here: [Content Status](https://github.com/orgs/fipguide/projects/3) 
+
 ❤️ A project by railway workers for railway workers.
 
 ℹ️  
@@ -30,6 +32,8 @@ In diesem Projekt sind Informationen und Nutzungshinweise zu FIP sowie Besonderh
 Die Mitarbeit und das Beitragen von Informationen sind immer willkommen.  
 Eine Anleitung zum Bearbeiten von Informationen befindet sich [hier im Wiki](https://github.com/fipguide/fipguide.github.io/wiki/Deutsch).
 
+Der aktuellen Bearbeitungsstand der Informationen für Betreiber ist hier zu finden: [Content Status](https://github.com/orgs/fipguide/projects/3)
+
 ❤️ Ein Projekt von Bahnern für Bahner.
 
 ℹ️  

archetypes/operator.de.md

@@ -25,6 +25,7 @@ Z.B.
 ## Gültigkeit FIP-Tickets
 
 FIP-Freifahrtsschein: <✅/⛔>  
+FIP-Freifahrt Angehörige: <✅/⛔>  
 FIP 50 Tickets: <✅/⛔>
 
 <

archetypes/operator.en.md

@@ -25,6 +25,7 @@ For example:
 ## Validity of FIP Tickets
 
 FIP voucher: <✅/⛔>  
+FIP voucher relatives: <✅/⛔>  
 FIP 50 Tickets: <✅/⛔>
 
 <

assets/js/aside.js

@@ -0,0 +1,42 @@
+function initAside() {
+
+  const expandButton = document.querySelector('.o-aside__mobile-container1')?.getElementsByTagName('button');
+
+
+  if (expandButton && expandButton.length > 0) {
+    expandButton[0].addEventListener('click', () => {
+      toggleAside();
+    });
+
+    window.onclick = e => {
+      if (e.target.classList.contains('curtain') || e.target.classList.contains('toc-link')) {
+        toggleAside();
+      }
+    }
+  }
+}
+
+function toggleAside() {
+  const container1 = document.querySelector('.o-aside__mobile-container1');
+  const container2 = document.querySelector('.o-aside__mobile-container2');
+
+  container1.classList.toggle("o-aside__mobile-container--open");
+  container2.classList.toggle("o-aside__mobile-container--open");
+
+  /*
+  if (expandButton.getAttribute("aria-expanded") === 'false') {
+    expandButton.setAttribute("aria-expanded", "true");
+  } else {
+    expandButton.setAttribute("aria-expanded", "false");
+  }
+  */
+}
+
+if (document.readyState === "interactive") {
+  initAside();
+} else {
+  window.addEventListener("DOMContentLoaded", () => {
+    initAside();
+  });
+}
+

assets/js/highlightHeadline.js

@@ -0,0 +1,103 @@
+function initHighlightHeadline() {
+
+	// In this site's layout, the table of contents (.content_with_heading) is an element that appears before any other content at the same hierarchy level
+	const headings = Array.from(document.querySelectorAll('.content_with_heading :is(h1, h2, h3, h4)'));
+	const asideMobileCurrentHeadline = document.getElementById('aside_mobile_current_headline');
+	const windowPath = window.location.pathname;
+	if (headings.length === 0) {
+		return; // No headings? No business here
+	}
+
+	// A few helper functions (.toc is the top-level ordered list)
+	const markTocItemActive = (a) => {return a.setAttribute('data-current', '');}
+	const markTocItemInactive = (a) => {return a.removeAttribute('data-current');};
+	const getTocLinkFromHeading = (h) => {return document.querySelector(`.toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);}
+
+	const getDocHeight = () => Math.floor(document.body.clientHeight);
+
+	const visibleHeadings = new Set();
+	let resizeDebounce;
+	let currentObserver;
+	let height = getDocHeight();
+
+	function beginObservation(docHeight) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					// Keep track of visible headings
+					if (entry.isIntersecting) {
+						visibleHeadings.add(entry.target);
+					} else {
+						visibleHeadings.delete(entry.target);
+					}
+				});
+
+				// Sort visible (intersecting) headings by inverted order of appearance, then grab the first item (i.e. last visible heading)
+				const lastVisible = Array.from(visibleHeadings.values()).sort((a, b) => headings.indexOf(b) - headings.indexOf(a))[0];
+				if (!lastVisible) {
+					return; // If nothing is visible, weird — TOC are opt-in — but let's skip this logic
+				}
+
+				headings.forEach((heading) => {
+
+					// If it's the last visible item, mark it to make it stand out, else, revert to the default style
+					// Find the link in the TOC list matching the heading in this list of hheding elements
+					const tocLink = getTocLinkFromHeading(heading);
+					if (heading === lastVisible) {
+						asideMobileCurrentHeadline.textContent = heading.textContent;
+						if(tocLink){
+							markTocItemActive(tocLink);
+						}
+					} else {
+						if(tocLink){
+							markTocItemInactive(tocLink);
+						}
+					}
+				});
+			},
+			{
+				//? docHeight: Extend the detection above the heading so it's always considered as intersecting if above the scrollport
+				//? -33%: The element won't be considered as intersecting until it has gone _above_ the bottom third of the scrollport
+				rootMargin: `${docHeight}px 0px -80% 0px`,
+				threshold: 1, // Only considered intersecting if all the pixels are inside the intersection area
+			}
+		);
+
+		headings.forEach((heading) => observer.observe(heading));
+
+		return observer;
+	}
+
+	// On page load...
+	// Let us don't do this
+	/*
+	markTocItemActive(getTocLinkFromHeading(headings[0])); // Mark the first item as active (even if the heading appears a bit further down)
+	*/
+	currentObserver = beginObservation(height); // Start the intersection observer
+
+	// On resize, replace the observer with a new one matching the updated body height, if different
+	window.addEventListener('resize', () => {
+		clearTimeout(resizeDebounce);
+		resizeDebounce = setTimeout(() => {
+			const heightAfterResize = getDocHeight();
+			if (height !== heightAfterResize) {
+				if (currentObserver) {
+					currentObserver.disconnect();
+				}
+				currentObserver = beginObservation(heightAfterResize);
+			}
+		}, 200);
+	});
+}
+
+if (document.readyState === "interactive") {
+	if (document.getElementById('aside')) {
+			initHighlightHeadline();
+	}
+} else {
+	window.addEventListener("DOMContentLoaded", () => {
+		if (document.getElementById('aside')) {
+			initHighlightHeadline();
+		}
+	});
+}

assets/js/main.js

@@ -2,3 +2,5 @@ import './mobileMenu.js';
 import './countrySelector.js';
 import './resizeObserver.js';
 import './mediaqueries.js';
+import './highlightHeadline.js';
+//import './aside.js';

assets/js/mobileMenu.js

@@ -1,4 +1,5 @@
 import * as mq from './mediaqueries';
+//import {initWindowOnClick} from './windowOnClickHandling';
 
 function initMobileMenu() {
 
@@ -13,7 +14,11 @@ function initMobileMenu() {
     closeMobileMenu()
   });
 
+  //TODO: window.onClick in mobileMenu.js und aside.js konsollidieren; momentan funktioniert es nicht gemeinsam.
+  //const target =  initWindowOnClick();
+
   window.onclick = e => {
+    console.log(e.target);
     if (e.target.classList.contains('o-header__curtain')) {
       closeMobileMenu();
     }

assets/js/windowOnClickHandling.js

@@ -0,0 +1,5 @@
+export function initWindowOnClick() {
+    window.onclick = e => {
+      return e.target;
+    }
+}

assets/sass/content.scss

@@ -1,6 +1,5 @@
 .updateDate {
     font-size: 1.3rem;
-    margin-bottom: 1.6rem;
 }
 
 code {

assets/sass/fonts.scss

@@ -16,4 +16,6 @@
 
 body {
   font-family: "Roboto",Arial,Helvetica,sans-serif;
+  word-wrap: break-word;
+  hyphens: auto;
 }

assets/sass/form.scss

@@ -1,5 +1,11 @@
 .m-form {
   margin-bottom: 1.6rem;
+  margin-left: 0;
+  margin-right: 0;
+
+  @include media-breakpoint-down(md) {
+    max-width: fit-content;
+  }
 
   .row > label {
     padding: 0;

assets/sass/headings.scss

@@ -4,6 +4,7 @@ h1 {
   font-weight: 700;
   margin-bottom: 2rem;
   text-wrap: balance;
+  scroll-margin-top: 7rem;
 }
 
 h2 {
@@ -12,6 +13,7 @@ h2 {
   margin-bottom: 1.2rem;
   font-weight: 700;
   text-wrap: balance;
+  scroll-margin-top: 7rem;
 }
 
 h3 {
@@ -20,6 +22,7 @@ h3 {
   margin-bottom: 1rem;
   font-weight: 700;
   text-wrap: balance;
+  scroll-margin-top: 7rem;
 }
 
 h4 {
@@ -28,8 +31,5 @@ h4 {
   margin-bottom: 1rem;
   font-weight: 700;
   text-wrap: balance;
-}
-
-h2:has(+ .updateDate) {
-  margin-bottom: .4rem;
+  scroll-margin-top: 7rem;
 }

assets/sass/main.scss

@@ -4,11 +4,13 @@
 @import "styles.scss";
 @import "fonts.scss";
 @import "navigation.scss";
+@import "sidemenu.scss";
 @import "stage.scss";
 @import "teaser.scss";
 @import "footer.scss";
 @import "content.scss";
 @import "textHighlight.scss";
+@import "toc.scss";
 @import "headings.scss";
 @import "form.scss";
 @import "expander.scss";

assets/sass/navigation.scss

@@ -6,7 +6,7 @@
 }
 
 .o-header {
-  background-color: #fff;
+  background-color: var(--bg-default);
 }
 
 .o-header__wrapper {
@@ -198,7 +198,7 @@
     right: 0;
     width: 60%;
     height: 100%;
-    z-index: 3;
+    z-index: 4;
     background-color: white;
     padding: 0 1rem;
     overflow-y: scroll;

assets/sass/sidemenu.scss

@@ -0,0 +1,74 @@
+.o-aside {
+    position: sticky;
+    top: 8rem;
+
+    font-size: 1.4rem;
+    line-height: 1.5;
+
+    margin-right: 0;
+    margin-bottom: 1.2rem;
+
+    z-index: 3;
+
+    @include media-breakpoint-up(lg) {
+        margin-right: 1.2rem;
+        margin-bottom: 0;
+    }
+
+    @include media-breakpoint-down(lg) {
+        display: none;
+    }
+
+    .o-single__relatedLink {
+        display: flex;
+        align-items: center;
+
+        i {
+            margin-right: .4rem;
+        }
+
+        span {
+            align-self: center;
+        }
+    }
+
+    //TODO: Bessere Benamung
+    .o-aside__mobile-container1 {
+        display: none;
+
+        button {
+            display: flex;
+            border: 0;
+            width: 100%;
+            border-radius: var(--border-radius-m);
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+
+    //TODO: Bessere Benamung
+    .o-aside__mobile-container2 {
+        display: block;
+
+        @include media-breakpoint-down(lg) {
+            display: none;
+            justify-content: space-between;
+        }
+    }
+
+    .o-aside__mobile-container--open {
+        @include media-breakpoint-down(lg) {
+            display: block;
+        }
+    }
+}
+
+.tableOfContents ul {
+    list-style-type: none;
+    list-style-position: outside;
+    padding-left: 0;
+}
+
+.tableOfContents a {
+    text-decoration-line: none;
+}