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

Compare commits

base: clerie:455d54355c618b17d603324e6009853861fbf94b
Branches Tags
clerie:main
..
compare: clerie:5b7ba0ad692218eaefa0071d44d469041fc8f4f5
Branches Tags
clerie:main

2 Commits
455d54355c ... 5b7ba0ad69

Author SHA1 Message Date
clerie
5b7ba0ad69 Properly size css grid 2025-07-06 20:49:11 +02:00
clerie
0bef06139c Add menu bar 2025-07-06 19:59:52 +02:00
3 changed files with 51 additions and 8 deletions
Expand all files Collapse all files

5
web/drafting-board.js
View File

@@ -65,6 +65,9 @@ export function drawDraftingBoard() {
let rows = display_legs.length;
element_board.style.setProperty("--drafting-board-number-locations", display_locations.length);
element_board.style.setProperty("--drafting-board-number-legs", rows);
for (let display_location of display_locations) {
let el_location_name = EL("div", {
class: [ "station-name" ],
@@ -85,7 +88,7 @@ export function drawDraftingBoard() {
"grid-column-start": grid_location_indexes[display_location.id]["column-start"],
"grid-column-end": grid_location_indexes[display_location.id]["column-end"],
"grid-row-start": 2,
"grid-row-end": rows + 2,
"grid-row-end": rows + 3,
},
});

7
web/index.html
View File

@@ -9,7 +9,12 @@
</head>
<body>
<div id="menu">
<div id="journeys-search-button">Search journeys</div>
<div class="menu-item">
<h1>Traveldrafter</h1>
</div>
<div id="journeys-search-button" class="menu-item menu-button">
<div>Search journeys</div>
</div>
</div>
<div id="drafting-board">

47
web/style.css
View File

@@ -9,6 +9,38 @@ body {
background-color: #f5a4d1;
}
#menu {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #ff85c9;
border-bottom-style: solid;
border-bottom-width: 1px;
}
#menu .menu-item {
float: left;
height: 100%;
padding: 10px;
padding-top: auto;
padding-bottom: auto;
}
#menu .menu-button:hover {
background-color: #ff4bb0;
border-left-style: solid;
border-left-width: 1px;
padding-left: 9px;
border-right-style: solid;
border-right-width: 1px;
padding-right: 9px;
}
.container {
margin-right: auto;
margin-left: auto;
@@ -76,22 +108,25 @@ input.form-control {
#drafting-board {
width: 100%;
height: 100vh;
padding: 20px;
padding-top: 70px;
overflow: scroll;
}
#drafting-board-content {
display: grid;
min-width: 1000px;
min-height: 300px;
min-width: 100%;
min-height: 100%;
grid-template-columns: repeat(auto-fit, minmax(200px, auto) 2px minmax(200px, auto));
}
--drafting-board-number-locations: 0;
--drafting-board-number-legs: 0;
#drafting-board div {
min-height: 0px;
grid-template-columns: repeat(var(--drafting-board-number-locations), minmax(200px, auto) 2px minmax(200px, auto));
grid-template-rows: min-content repeat(var(--drafting-board-number-legs), minmax(0px, min-content)) auto;
}
#drafting-board .station-name {