From c829db0df8edbb2e3b13f5675ac420117584ac04 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Mon, 24 Jun 2024 19:59:14 -0700 Subject: Render different building elevation levels when selected --- public/radial.html | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 63 insertions(+), 4 deletions(-) (limited to 'public/radial.html') diff --git a/public/radial.html b/public/radial.html index 7c7e31b..a7f137e 100644 --- a/public/radial.html +++ b/public/radial.html @@ -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 @@ 🡅 + + 3 2 -- cgit v1.2.3