clerie/traveldrafter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prototype drafting board

Browse Source
This commit is contained in:
clerie
2025-06-18 18:30:43 +02:00
parent 125dc820eb
commit 597884f5dd
2 changed files with 61 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/index.html
View File

@@ -13,7 +13,16 @@
</div>
<div id="drafting-board">
<div id="drafting-board-content"></div>
<div id="drafting-board-content">
<div class="station-name" style="grid-column: 1 / 4; grid-row: 1;">Göttingen</div>
<div class="station-column" style="grid-column: 2 / 3; grid-row: 2 / 5;"></div>
<div class="station-name" style="grid-column: 4 / 7; grid-row: 1;">Fulda</div>
<div class="station-column" style="grid-column: 5 / 6; grid-row: 2 / 5;"></div>
<div class="trip-left" style="grid-column: 1 / 2; grid-row: 2;">16:45 Uhr<br/>Gleis 7</div>
<div class="trip" style="grid-column: 3 / 5; grid-row: 2;">ICE 1337</div>
<div class="trip-right" style="grid-column: 6 / 7; grid-row: 2;">18:05 Uhr</br>Gleis 3</div>
</div>
</div>
<div id="journeys-search" class="popup">

54
web/style.css
View File

@@ -74,9 +74,57 @@ input.form-control {
}
#drafting-board-content {
border-color: red;
border-width: 1px;
border-style: solid;
display: grid;
min-width: 1000px;
min-height: 300px;
grid-template-columns: repeat(auto-fit, minmax(30px, auto) 2px minmax(30px, auto));
}
#drafting-board div {
min-height: 0px;
}
#drafting-board .station-name {
margin-left: 20px;
margin-right: 20px;
border-bottom-style: solid;
border-bottom-color: black;
border-bottom-width: 2px;
text-align: center;
}
#drafting-board .station-column {
width: 2px;
background-color: black;
}
#drafting-board .trip-left {
margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
text-align: right;
}
#drafting-board .trip {
margin: 10px;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 10px;
padding: 5px;
background-color: #ff4bb0;
}
#drafting-board .trip-right {
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
text-align: left;
}