switch config to a grid; move info to popups

ts/deckconfig/BUILD.bazel

@@ -34,6 +34,7 @@ copy_bootstrap_icons(
     name = "bootstrap-icons",
     icons = [
         "arrow-counterclockwise.svg",
+        "info-circle.svg",
     ],
 )
 
@@ -44,6 +45,7 @@ ts_library(
         "DeckConfigPage",
         "lib",
         "//ts/lib",
+        "@npm//@popperjs",
         "@npm//svelte2tsx",
     ],
 )

ts/deckconfig/ConfigEditor.svelte

@@ -20,6 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     :global(input, select) {
         font-size: 16px;
+        text-align: right;
     }
 </style>
 

ts/deckconfig/ConfigEntry.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import RevertIcon from "./RevertIcon.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
 
     export let label: string;
     export let subLabel = "";
@@ -17,28 +18,58 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .outer {
         margin-top: 1em;
 
-        & > * {
-            margin-top: 0.3em;
-        }
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-column-gap: 0.5em;
     }
 
-    .label {
-        font-weight: bold;
+    .full-grid-width {
+        grid-row-start: 2;
+        grid-column: 1 / 3;
+    }
+
+    .table {
+        display: table;
+        height: 100%;
+    }
+
+    .vcenter {
+        display: table-cell;
+        vertical-align: middle;
+    }
+
+    .alert {
+        margin-top: 0.5em;
+    }
+
+    .input-grid {
+        // width: 90vw;
+        display: grid;
+        grid-column-gap: 0.5em;
+        grid-template-columns: 10fr 1fr;
     }
 </style>
 
 <div class="outer">
-    <span class="label">{label}</span>
-    <RevertIcon bind:value {defaultValue} on:revert />
-    <div class="sub">{subLabel}</div>
-
-    <div class="inner">
-        <slot />
+    <div class="table">
+        <span class="vcenter">
+            {label}
+            {#if subLabel}
+                <HelpPopup html={subLabel} />
+            {/if}
+        </span>
     </div>
 
-    {#each warnings as warning}
-        {#if warning}
-            <div class="alert alert-warning">{warning}</div>
-        {/if}
-    {/each}
+    <div class="input-grid">
+        <slot />
+        <RevertIcon bind:value {defaultValue} on:revert />
+    </div>
+
+    <div class="full-grid-width">
+        {#each warnings as warning}
+            {#if warning}
+                <div class="alert alert-warning">{warning}</div>
+            {/if}
+        {/each}
+    </div>
 </div>

ts/deckconfig/ConfigSelector.svelte

@@ -21,52 +21,36 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style lang="scss">
-    .form-select {
-        grid-column: 1 / 5;
-    }
-
-    .fixed-bar {
-        position: fixed;
+    .sticky-bar {
+        position: sticky;
         z-index: 1;
         top: 0;
-        left: 0;
-        width: 100%;
         color: var(--text-fg);
         background: var(--window-bg);
-        display: flex;
-        justify-content: center;
+        padding-bottom: 0.5em;
     }
 
-    .grid {
+    .selector-grid {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        grid-template-columns: 6fr 1fr;
         grid-column-gap: 0.5em;
-    }
-
-    .padding {
-        height: 3em;
+        padding-right: 0.5em;
     }
 </style>
 
-<div class="fixed-bar">
-    <div class="width-limited">
-        <div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
+<div class="sticky-bar">
+    <div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
 
-        <div class="grid">
-            <!-- svelte-ignore a11y-no-onchange -->
-            <select class="form-select" on:change={blur}>
-                {#each $configList as entry}
-                    <option value={entry.idx} selected={entry.current}>
-                        {configLabel(entry)}
-                    </option>
-                {/each}
-            </select>
+    <div class="selector-grid">
+        <!-- svelte-ignore a11y-no-onchange -->
+        <select class="form-select" on:change={blur}>
+            {#each $configList as entry}
+                <option value={entry.idx} selected={entry.current}>
+                    {configLabel(entry)}
+                </option>
+            {/each}
+        </select>
 
-            <OptionsDropdown {state} />
-        </div>
+        <OptionsDropdown {state} />
     </div>
 </div>
-
-<div class="padding">
-    <!-- make sure subsequent content doesn't flow under us -->
-</div>

ts/deckconfig/DeckConfigPage.svelte

@@ -10,15 +10,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let state: DeckConfigState;
 </script>
 
-<style>
-    .outer {
-        display: flex;
-        justify-content: center;
-    }
-
-    :global(.width-limited) {
-        width: 40em;
-        padding: 0.5em;
+<style lang="scss">
+    .editor {
+        // without this, the initial viewport can be wrong
+        overflow-x: hidden;
     }
 </style>
 
@@ -28,8 +23,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ConfigSelector {state} />
 
-<div class="outer">
-    <div class="width-limited">
-        <ConfigEditor {state} />
-    </div>
+<div class="editor">
+    <ConfigEditor {state} />
 </div>

ts/deckconfig/HelpPopup.svelte

@@ -0,0 +1,32 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { infoCircle } from "./icons";
+    import { onMount } from "svelte";
+    import Tooltip from "bootstrap/js/dist/tooltip";
+
+    export let html: string;
+
+    let ref: HTMLAnchorElement;
+
+    onMount(() => {
+        new Tooltip(ref, { placement: "bottom", html: true, offset: [0, 20] });
+    });
+</script>
+
+<style>
+    :global(svg) {
+        vertical-align: text-bottom;
+    }
+</style>
+
+<span
+    href={'#'}
+    bind:this={ref}
+    data-toggle="tooltip"
+    data-placement="bottom"
+    title={html}>
+    {@html infoCircle}
+</span>

ts/deckconfig/RevertIcon.svelte

@@ -23,11 +23,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style>
+    .img-div {
+        display: flex;
+    }
     :global(svg) {
-        vertical-align: text-bottom;
+        align-self: center;
     }
 </style>
 
 {#if modified}
-    <span on:click={revert}>{@html revertIcon}</span>
+    <div class="img-div" on:click={revert}>
+        {@html revertIcon}
+    </div>
 {/if}

ts/deckconfig/StepsInput.svelte

@@ -29,12 +29,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<style lang="scss">
-    input {
-        width: 100%;
-    }
-</style>
-
 <ConfigEntry {label} {subLabel} {value} {defaultValue} {warnings} on:revert={revert}>
     <input type="text" value={stringValue} on:blur={update} class="form-control" />
 </ConfigEntry>

ts/deckconfig/deckconfig-base.scss

@@ -8,6 +8,7 @@
 @import "ts/sass/bootstrap/modal";
 @import "ts/sass/bootstrap/close";
 @import "ts/sass/bootstrap/alert";
+@import "ts/sass/bootstrap/tooltip";
 
 .night-mode {
     @include scrollbar.night-mode;
@@ -17,3 +18,16 @@
 .form-select {
     -webkit-appearance: none;
 }
+
+body {
+    width: min(100vw, 40em);
+    margin: 0 auto;
+}
+
+html {
+    overflow-x: hidden;
+}
+
+#main {
+    padding: 0.5em;
+}

ts/deckconfig/icons.ts

@@ -4,4 +4,6 @@
 // Import icons from bootstrap
 
 import revertIcon from "./arrow-counterclockwise.svg";
-export { revertIcon };
+import infoCircle from "./info-circle.svg";
+
+export { revertIcon, infoCircle };