Skip to content

Commit

Permalink
Responsibe journey overview
Browse files Browse the repository at this point in the history
  • Loading branch information
krasch committed Jan 28, 2025
1 parent 63deb07 commit f382efe
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 156 deletions.
69 changes: 12 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,14 @@
<!-- styles -->
<link rel="stylesheet" href="style/layout.css">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/components/summary.css">
<!--link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/layout.css">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/mobile.css">
<link rel="stylesheet" href="style/components/map/map.css">
<link rel="stylesheet" href="style/components/modal.css">
<link rel="stylesheet" href="style/components/journeyOverview.css">
<link rel="stylesheet" href="style/components/summary.css">
<link rel="stylesheet" href="style/components/calendar.css">
<link rel="stylesheet" href="style/components/datepicker.css">
<link rel="stylesheet" href="style/components/footer.css"-->
Expand Down Expand Up @@ -169,11 +170,13 @@ <h3><span class="from"></span> &nbsp;⮕&nbsp;<span class="to"></span></h3>
<a href="/"><img src="images/logo.svg" alt="logo for the trans-europe-planner"></a>
</div>

<!--div id="map"></div>
<div id="map"></div>

<travel-calendar id="calendar" start-date="2025-01-01"></travel-calendar>
<div id="calendar">
<travel-calendar start-date="2025-01-01"></travel-calendar>
</div>

<div id="journey-overview">
<div id="summary">
<div>
<h3>Von <span class="from"></span> nach <span class="to"></span></h3> <span class="via"></span>
<div>Gesamte Reisezeit: <span class="total-time"></span></div>
Expand All @@ -182,21 +185,14 @@ <h3>Reiseverlauf:</h3>
<div id="perlschnur"></div>
</div>

<div id="date-picker">
<div id="config" class="hidden">
<h3><label for="date-picker-input">Abreisedatum: </label></h3>
<div>
<a id="decrease-date" title="One day earlier">◀</a>
<input type="date" id="date-picker-input" value="2025-02-01"/>
<a id="increase-date" title="One day later">▶</a>
</div>
</div-->

<div id="map"></div>
<div id="summary" style="background-color: purple"></div>
<div id="calendar">
<travel-calendar start-date="2025-01-01"></travel-calendar>
</div>
<div id="config" style="background-color: green"></div>

<aside id="warning"><span>Prototyp, Datenfehler sind wahrscheinlich.
<a onclick="alert(
Expand Down Expand Up @@ -227,49 +223,6 @@ <h3><label for="date-picker-input">Abreisedatum: </label></h3>
</footer>



<!--div id="sidebar" class="hidden">
<nav>
<input type="radio" name="tab" id="tab-overview" checked>
<label for="tab-overview">🛈 &nbsp;Reiseübersicht</label>
<input type="radio" name="tab" id="tab-calendar">
<label for="tab-calendar">🖉 &nbsp;Reise anpassen &nbsp;&nbsp;</label>
</nav>
<div id="journey-overview">
<div>
<h3>Von <span class="from"></span> nach <span class="to"></span></h3> <span class="via"></span>
<div>Gesamte Reisezeit: <span class="total-time"></span></div>
</div>
<h3>Reiseverlauf:</h3>
<div id="perlschnur"></div>
</div>
<div id="calendar-container">
<travel-calendar id="calendar" start-date="2025-01-01"></travel-calendar>
</div>
<div id="bottom-buttons">
<button onclick="alert('coming soon');">🔗 Teilen</button>
<button onclick="alert('coming soon');">🎫 Buchen</button>
</div>
</div-->

<!--div id="footer" class="hidden">
<span>Trans Europe Planner - <em>Einfacher mit dem Zug quer durch Europa</em></span>
<a href="https://github.com/krasch/trans-europe-planner">
<img src="images/logos/github.svg" alt="logo for github">
</a>
<a href="https://fosstodon.org/@trans_europe_planner">
<img src="images/logos/mastodon.svg" alt="logo for mastodon">
</a>
<a href="about-impressum.html#about">About</a>
<a href="about-impressum.html#impressum">Impressum</a>
<a href="about-impressum.html#data-protection">Datenschutz</a>
</div>
<div id="map" class="hidden"></div-->

<!--dialog id="modal">
<a class="logo" href="/">
<img src="images/logo.svg" alt="logo for the trans-europe-planner">
Expand Down Expand Up @@ -310,6 +263,8 @@ <h1>Wo soll die Reise starten?</h1>
const params = new URLSearchParams(window.location.search);
const home = params.get("start");

console.log(home);

if (home && ["Berlin", "Hamburg", "Köln", "München", "Stockholm"].includes(home))
return home;

Expand All @@ -323,8 +278,8 @@ <h1>Wo soll die Reise starten?</h1>
const views = {
map: new MapWrapper('map', [10.0821932, 49.786322], 4.3), // starts async loading map
calendar: new CalendarWrapper(document.querySelector("travel-calendar")),
perlschnur: new Perlschnur(document.getElementById("journey-overview")),
datepicker: new Datepicker(document.getElementById("date-picker")),
perlschnur: new Perlschnur(document.querySelector("#summary")),
datepicker: new Datepicker(document.querySelector("#config")),
layout: new Layout(document.body)
}

Expand Down
60 changes: 0 additions & 60 deletions style/common.css
View file

This file was deleted.

30 changes: 5 additions & 25 deletions style/components/journeyOverview.css → style/components/summary.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,16 @@
Layout for journey overview with Perlschnur
************************************************/

#journey-overview {
align-items: start;
padding: 1rem;
gap: 1rem;
}

#perlschnur {
padding: 0.5rem;
align-self: center;

height: 100%;
width: 100%;

display: flex;
flex-direction: column;
gap: 0.5rem;
}

.perlschnur-connection img {
height: 1rem;
}

.perlschnur-connection h3 {
height: 2rem;
font-size: 1rem;
Expand Down Expand Up @@ -82,20 +74,8 @@
Style
************************************************/

#journey-overview {
background-color: var(--color-light);
}

#journey-overview button {
#summary {
color: var(--color-dark);
background-color: var(--color-light);
border: 1px solid var(--color-dark);
border-radius: 5px;
padding: 0.2rem;
}

#journey-overview button:hover {
cursor: pointer;
}

#perlschnur {
Expand Down
103 changes: 96 additions & 7 deletions style/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ body {
--logo-size: 3rem;
--logo-size-with-padding: 4rem;

/* calendar needs absolute height */
--calendar-height: calc(100vh - var(--logo-size-with-padding) - 8rem);

display: grid;
grid-template-columns:
var(--logo-size-with-padding)
Expand Down Expand Up @@ -243,10 +246,11 @@ Layout for calendar
************************************************/

#calendar {
box-sizing: border-box; /* padding should count in 100% */
width: 100%;

padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-self: center;
}

/* less padding on mobile */
Expand All @@ -259,14 +263,37 @@ Layout for calendar

/* on mobile, calendar should take up the full height, without scrollbar */
travel-calendar {
height: 100%;
max-width: 500px;
height: var(--calendar-height);
}

/* on desktop it should not be too tall and with scrollbar if necessary */
@media only screen and (min-width: 1000px) {
height: 700px;
overflow: auto; /* scrollbar */
travel-calendar{
height: 700px;
overflow-y: scroll;
}
}

/***********************************************
Layout for journey summary
************************************************/

#summary {
padding: 1rem;

display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;

overflow-y: scroll;
}

#summary #perlschnur {
padding: 0.5rem;

box-sizing: border-box; /* padding should count in 100% */
width: min(500px, 100%);
}


Expand All @@ -287,4 +314,66 @@ footer {

footer img {
max-height: 1.3rem;
}


/*******************************************************
the card/menu with title, used in map, perlschnur
*******************************************************/

.card {
--padding: 5px;

list-style-type: none;

border-radius: var(--padding);
overflow: hidden; /* this is necessary to really get the round corners */
}

.card h3,
.card li {
width: 100%;

display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}

.card menu,
.card ul {
padding: 0;
margin: 0;
list-style-type: none;
}

.card h3,
.card li > *:first-child {
padding-left: var(--padding);
}

.card li.hidden {
display: none;
}

.card button {
height: 100%;
width: 100%;

display: flex;
flex-direction: row;
align-items: center;

gap: 0.5rem;

text-align: left;
cursor: pointer;

border: 0;
}

.card img {
height: 1rem;
padding: 0;
margin: 0;
}
Loading

0 comments on commit f382efe

Please sign in to comment.