ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render different building elevation levels when selected

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:32 -07:00
parent a2d136e7c5
commit 448ec8dd3a
2 changed files with 93 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
public/radial.html
View File

@@ -118,6 +118,14 @@
fill: lightblue;
}
.building .elevation-2 use {
fill: lightgreen;
}
.building .elevation-3 use {
fill: lightpink;
}
.view-elevation-roof .floor {
fill: darkgray;
}
@@ -126,7 +134,7 @@
display: none;
}
.building [class^="elevation"] {
.building > * {
display: none;
}
@@ -134,16 +142,65 @@
display: none;
}
[data-view-elevation="-1"] .building .elevation-basement {
[data-view-elevation="-1"] .building > * {
display: none;
}
[data-view-elevation="-1"] .building > .elevation-basement,
[data-view-elevation="-1"] .building > .elevation-basement ~ .structure {
display: inline;
}
[data-view-elevation="0"] .building .elevation-0,
[data-view-elevation="0"] .building .elevation-0 ~ .structure {
display: inline;
}
[data-view-elevation="1"] .building .elevation-1,
[data-view-elevation="1"] .building .elevation-1 ~ .structure {
display: inline;
}
[data-view-elevation="1"] .building .elevation-1 + .structure [class*='wall'] {
display: none;
}
[data-view-elevation="1"] .building .elevation-1 + .structure .floor {
fill: gray;
}
[data-view-elevation="2"] .building .elevation-2,
[data-view-elevation="2"] .building .elevation-2 ~ .structure {
display: inline;
}
[data-view-elevation="2"] .building .elevation-2 + .structure [class*='wall'] {
display: none;
}
[data-view-elevation="2"] .building .elevation-2 + .structure .floor {
fill: gray;
}
[data-view-elevation="3"] .building .elevation-3,
[data-view-elevation="3"] .building .elevation-3 ~ .structure {
display: inline;
}
[data-view-elevation="3"] .building .elevation-3 + .structure [class*='wall'] {
display: none;
}
[data-view-elevation="3"] .building .elevation-3 + .structure .floor {
fill: gray;
}
[data-view-elevation="0"] .elevation-0 {
display: inline;
}
[data-view-elevation="1"]>.elevation-0,
[data-view-elevation="1"]>.elevation-1 {
[data-view-elevation="1"] > .elevation-0,
[data-view-elevation="1"] > .elevation-1 {
display: inline;
}
@@ -431,6 +488,8 @@
<div class="select-elevation">
<button>🡅</button>
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
<label for="select-elevation-3">3</label>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />