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

Properly size css grid

Browse Source
This commit is contained in:
clerie
2025-07-06 20:49:11 +02:00
parent 0bef06139c
commit 5b7ba0ad69
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File 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; 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) { for (let display_location of display_locations) {
let el_location_name = EL("div", { let el_location_name = EL("div", {
class: [ "station-name" ], class: [ "station-name" ],
@@ -85,7 +88,7 @@ export function drawDraftingBoard() {
"grid-column-start": grid_location_indexes[display_location.id]["column-start"], "grid-column-start": grid_location_indexes[display_location.id]["column-start"],
"grid-column-end": grid_location_indexes[display_location.id]["column-end"], "grid-column-end": grid_location_indexes[display_location.id]["column-end"],
"grid-row-start": 2, "grid-row-start": 2,
"grid-row-end": rows + 2, "grid-row-end": rows + 3,
}, },
}); });

12
web/style.css
View File

@@ -119,14 +119,14 @@ input.form-control {
#drafting-board-content { #drafting-board-content {
display: grid; display: grid;
min-width: 1000px; min-width: 100%;
min-height: 300px; 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 { grid-template-columns: repeat(var(--drafting-board-number-locations), minmax(200px, auto) 2px minmax(200px, auto));
min-height: 0px; grid-template-rows: min-content repeat(var(--drafting-board-number-legs), minmax(0px, min-content)) auto;
} }
#drafting-board .station-name { #drafting-board .station-name {