diff --git a/css/app.css b/css/app.css index 4feb549..615d383 100644 --- a/css/app.css +++ b/css/app.css @@ -1,3 +1,20 @@ +:root { + --toggle-background-color-on: #6da0ff; + --toggle-background-color-off: darkgray; + --toggle-width: 32px; + --toggle-height: 15px; + --toggle-gutter: 2px; + --toggle-radius: 50%; + --toggle-control-size: 40px; + --toggle-control-color: white; + --toggle-control-speed: .15s; + --toggle-control-ease: ease-in; + + /** Don't change calculated values! **/ + --toggle-radius: calc(var(--toggle-height) / 2); + --toggle-control-size: calc(var(--toggle-height) - (var(--toggle-gutter) * 2)); +} + body { height: 100vh; } @@ -115,4 +132,57 @@ span:focus { margin-left: -5em; width: 10em; } +} +/** +* Toggle switch styles +* From: https://codepen.io/AriTheElk/pen/YmxYZr +*/ +.toggle-control { + display: block; + position: relative; + padding-left: var(--toggle-width); + margin-bottom: 12px; + cursor: pointer; + font-size: 18px; + user-select: none; + color: #fff; + + input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + + input:checked ~ .control { + background-color: var(--toggle-background-color-on); + + &:after { + left: calc(var(--toggle-width) - var(--toggle-control-size) - var(--toggle-gutter)); + } + } + + .control { + position: absolute; + top: 25%; + left: 0; + height: var(--toggle-height); + width: var(--toggle-width); + border-radius: var(--toggle-radius); + background-color: var(--toggle-background-color-off); + transition: background-color var(--toggle-control-speed) var(--toggle-control-ease); + + &:after { + content: ""; + position: absolute; + left: var(--toggle-gutter); + top: var(--toggle-gutter); + width: var(--toggle-control-size); + height: var(--toggle-control-size); + border-radius: var(--toggle-radius); + background: var(--toggle-control-color); + transition: left var(--toggle-control-speed) var(--toggle-control-ease); + } + } } \ No newline at end of file diff --git a/js/controllers/menu_controller.js b/js/controllers/menu_controller.js index 1fc97bf..da0b660 100644 --- a/js/controllers/menu_controller.js +++ b/js/controllers/menu_controller.js @@ -97,6 +97,12 @@ export default class extends Controller { * @param {HTMLElement} tab Tab content element */ #buildLayersMenu(tree, tab) { + const heading = document.createElement('h1'); + heading.classList.add('fs-5', 'fw-bold', 'ms-0'); + heading.textContent = 'Teatro'; // Hard-coded!! + + tab.appendChild(heading); + for (const node of tree) { tab.appendChild( node.children.length > 0 @@ -110,17 +116,17 @@ export default class extends Controller { * @returns {HTMLDivElement} */ #createLayerToggle(node) { - const checkbox = html` -
- + - -
+ + ${node.id} + `; - return domParser.parseFromString(checkbox, 'text/html').querySelector('div'); + return domParser.parseFromString(toggle, 'text/html').querySelector('label'); } /** * @param {import("../state.js").NormalizedSceneNode} node diff --git a/scenes/ssgp/index.html b/scenes/ssgp/index.html index 9952b8c..31de2ef 100644 --- a/scenes/ssgp/index.html +++ b/scenes/ssgp/index.html @@ -146,8 +146,8 @@ -
-
+
+