From 855327f3e451c28f7670907922496529a4018c2e Mon Sep 17 00:00:00 2001
From: krasch <dev@krasch.io>
Date: Mon, 27 Jan 2025 20:02:47 +0100
Subject: [PATCH] Rename journey details to sidebar

---
 index.html                  |  2 +-
 script/components/layout.js | 30 +++++++++++++++---------------
 style/layout.css            | 10 +++++-----
 style/style.css             |  6 +++---
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 5d8733f..776d723 100644
--- a/index.html
+++ b/index.html
@@ -185,7 +185,7 @@ <h3><label for="date-picker-input">Abreisedatum: </label></h3>
     </div>
 </div>
 
-<div id="journey-details" class="hidden">
+<div id="sidebar" class="hidden">
     <div id="warning">Achtung, Prototyp, Datenfehler sind wahrscheinlich.
         <button onclick="alert(
          'Datenabdeckung: Deutschland Fernverkehr vollständig plus ausgewählte Verbindungen im Ausland. ' +
diff --git a/script/components/layout.js b/script/components/layout.js
index 4b72454..8684fee 100644
--- a/script/components/layout.js
+++ b/script/components/layout.js
@@ -6,19 +6,19 @@ export class Layout {
   // relevant HTML elements
   #logo;
   #datePicker;
-  #journeyDetails;
+  sidebar;
   #map;
   #modal;
 
   // state
   #datePickerShouldBeVisible = false;
-  #journeyDetailsShouldBeVisible = false;
+  #sidebarShouldBeVisible = false;
   #collapsed = false;
 
   constructor(container) {
     this.#logo = container.querySelector("#logo");
     this.#datePicker = container.querySelector("#date-picker");
-    this.#journeyDetails = container.querySelector("#journey-details");
+    this.sidebar = container.querySelector("#sidebar");
     this.#map = container.querySelector("#map");
     this.#modal = container.querySelector("#modal");
 
@@ -32,7 +32,7 @@ export class Layout {
     }
 
     this.#datePickerShouldBeVisible = hasActiveJourney;
-    this.#journeyDetailsShouldBeVisible = hasActiveJourney && hasDate;
+    this.#sidebarShouldBeVisible = hasActiveJourney && hasDate;
     this.#updateView();
   }
 
@@ -45,15 +45,15 @@ export class Layout {
   #updateView() {
     if (this.#collapsed) {
       this.#hideDatePicker();
-      this.#hideJourneyDetails();
+      this.#hideSidebar();
       return;
     }
 
     if (this.#datePickerShouldBeVisible) this.#showDatePicker();
     else this.#hideDatePicker();
 
-    if (this.#journeyDetailsShouldBeVisible) this.#showJourneyDetails();
-    else this.#hideJourneyDetails();
+    if (this.#sidebarShouldBeVisible) this.#showSidebar();
+    else this.#hideSidebar();
   }
 
   #showDatePicker() {
@@ -73,20 +73,20 @@ export class Layout {
     });
   }
 
-  #showJourneyDetails() {
-    if (this.#isVisible(this.#journeyDetails)) return; // nothing to do
+  #showSidebar() {
+    if (this.#isVisible(this.sidebar)) return; // nothing to do
 
     this.#removeBorderRadius(this.#datePicker);
-    this.#slideIn(this.#journeyDetails);
-    this.#setVisible(this.#journeyDetails);
+    this.#slideIn(this.sidebar);
+    this.#setVisible(this.sidebar);
   }
 
-  #hideJourneyDetails() {
-    if (!this.#isVisible(this.#journeyDetails)) return; // nothing to do
+  #hideSidebar() {
+    if (!this.#isVisible(this.sidebar)) return; // nothing to do
 
-    this.#slideOut(this.#journeyDetails, () => {
+    this.#slideOut(this.sidebar, () => {
       this.#addBorderRadius(this.#datePicker);
-      this.#setInvisible(this.#journeyDetails);
+      this.#setInvisible(this.sidebar);
     });
   }
 
diff --git a/style/layout.css b/style/layout.css
index 9f38498..431e643 100644
--- a/style/layout.css
+++ b/style/layout.css
@@ -25,7 +25,7 @@ body {
 
   grid-template-areas:
     "logo             date-picker      map"
-    "journey-details  journey-details  map"
+    "sidebar          sidebar          map"
     "footer           footer           footer";
 }
 
@@ -44,9 +44,9 @@ body {
   grid-area: date-picker;
 }
 
-#journey-details {
+#sidebar {
   z-index: 2;
-  grid-area: journey-details;
+  grid-area: sidebar;
 }
 
 #footer {
@@ -80,10 +80,10 @@ body {
 
 
 /***********************************************
- Layout for journey details tabbing setup
+ Layout for sidebar setup
 ************************************************/
 
-#journey-details {
+#sidebar {
   overflow-y: auto;
   padding: 1rem;
 
diff --git a/style/style.css b/style/style.css
index ee31e66..1dd9c14 100644
--- a/style/style.css
+++ b/style/style.css
@@ -2,18 +2,18 @@
   Journey details tabbing
 ************************************************/
 
-#journey-details button {
+#sidebar button {
   font-family: helvetica, arial, sans-serif;
   font-size: 1rem;
   cursor: pointer;
 }
 
-#journey-details {
+#sidebar {
   background: var(--color-light);
   opacity: 90%;
 }
 
-#journey-details input[type="radio"] {
+#sidebar input[type="radio"] {
   display: none;
 }