Rename journey details to sidebar

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. ' +

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);
     });
   }
 

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;
 

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;
 }