.

Author: krasch

index.html

@@ -234,7 +234,7 @@ <h3>Reiseverlauf:</h3>
     <div id="tab2-content" style="padding-left: 2rem; padding-right: 2rem;">
         <!--button id="help-calendar" onclick="alert('coming soon');">❓ Was kann ich hier machen?</button-->
         <h3 style="color: var(--color-dark); padding-bottom: 0.5rem; padding-top: 2rem">Journey Calendar</h3>
-        <calendar-grid id="calendar" start="2024-12-01" num-days="3" resolution="4"></calendar-grid>
+        <travel-calendar id="calendar" start-date="2025-02-12"></travel-calendar>
     </div>
 
     <div id="bottom-buttons">

script/components/datepicker.js

@@ -26,7 +26,7 @@ class Datepicker {
 
     this.#inputElement.min = this.#start.toISODate();
     this.#inputElement.max = this.#end.toISODate();
-    this.#inputElement.value = "2025-02-15";
+    this.#inputElement.value = "2025-02-11";
 
     // previously picked date might still be set after reloading the page
     if (this.#currentDate !== null) {

script/customElements/travelCalendar/entry.css

@@ -37,7 +37,7 @@
 }
 
 .entry-part .header {
-  height: 1.5rem;
+  min-height: 1.5rem;
 
   display: flex;
   flex-direction: row;

style/layout.css

@@ -27,7 +27,7 @@ body {
     --logo-size: 6rem;
     --logo-padding: 1.5rem;
     --logo-size-with-padding: calc(var(--logo-size) + 2 * var(--logo-padding));
-    --sidebar-width: 27rem; /* excluding logo */
+    --sidebar-width: 25rem; /* excluding logo */
     --footer-height: 2rem;
 
   display: grid;
@@ -287,7 +287,7 @@ a#hide-sidebar {
 }
 
 travel-calendar {
-  height: 700px; /* important to set a fixed height for this element */
+  height: 670px; /* important to set a fixed height for this element */
 }
 
 /***********************************************