Use custom scrollbar in stats screen, use grid layout and tweak CSS (#2154)

* Include base styles in graphs-base.scss

This includes the custom scrollbar styles, which were missing on the stats page.

* Set responsive grid layout on GraphsPage, use TitledContainer component

+ use global button style, tweak input appearance and other small changes

* Improve margins on GraphsPage

sass/base.scss

@@ -55,6 +55,7 @@ button {
     /* override transition for instant hover response */
     transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
     border-radius: prop(border-radius);
+    @include button.base;
 }
 
 pre,
@@ -113,3 +114,17 @@ select {
         color: color(fg);
     }
 }
+
+label,
+input[type="radio"],
+input[type="checkbox"] {
+    cursor: pointer;
+}
+input[type="text"] {
+    border-radius: prop(border-radius);
+    outline: none;
+    border: 1px solid color(border);
+    &:focus {
+        border-color: color(border-focus);
+    }
+}

ts/components/TitledContainer.svelte

@@ -5,11 +5,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { pageTheme } from "../sveltelib/theme";
 
+    export let id: string | undefined = undefined;
+    let className: string = "";
+    export { className as class };
+
     export let title: string;
 </script>
 
 <div
-    class="container"
+    {id}
+    class="container {className}"
     class:light={!$pageTheme.isDark}
     class:dark={$pageTheme.isDark}
     style:--gutter-block="2px"

ts/deck-options/Addons.svelte

@@ -3,8 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import TitledContainer from "../components/TitledContainer.svelte";
     import type { DeckOptionsState } from "./lib";
-    import TitledContainer from "./TitledContainer.svelte";
 
     export let state: DeckOptionsState;
 

ts/deck-options/AdvancedOptions.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import CardStateCustomizer from "./CardStateCustomizer.svelte";
     import HelpModal from "./HelpModal.svelte";
@@ -15,7 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import SettingTitle from "./SettingTitle.svelte";
     import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
 
     export let state: DeckOptionsState;

ts/deck-options/AudioOptions.svelte

@@ -8,12 +8,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import HelpModal from "./HelpModal.svelte";
     import type { DeckOptionsState } from "./lib";
     import SettingTitle from "./SettingTitle.svelte";
     import SwitchRow from "./SwitchRow.svelte";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
 
     export let state: DeckOptionsState;

ts/deck-options/BuryOptions.svelte

@@ -8,12 +8,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import HelpModal from "./HelpModal.svelte";
     import type { DeckOptionsState } from "./lib";
     import SettingTitle from "./SettingTitle.svelte";
     import SwitchRow from "./SwitchRow.svelte";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
 
     export let state: DeckOptionsState;

ts/deck-options/DailyLimits.svelte

@@ -8,6 +8,7 @@
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import HelpModal from "./HelpModal.svelte";
     import type { DeckOptionsState } from "./lib";
@@ -15,7 +16,6 @@
     import SettingTitle from "./SettingTitle.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import TabbedValue from "./TabbedValue.svelte";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
     import Warning from "./Warning.svelte";
 

ts/deck-options/DisplayOrder.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import { DeckConfig } from "../lib/proto";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
@@ -15,7 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { DeckOptionsState } from "./lib";
     import SettingTitle from "./SettingTitle.svelte";
     import { reviewMixChoices } from "./strings";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
 
     export let state: DeckOptionsState;

ts/deck-options/LapseOptions.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
     import HelpModal from "./HelpModal.svelte";
@@ -15,7 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import SettingTitle from "./SettingTitle.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
     import Warning from "./Warning.svelte";
 

ts/deck-options/NewOptions.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import { DeckConfig } from "../lib/proto";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
@@ -16,7 +17,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import SettingTitle from "./SettingTitle.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
     import Warning from "./Warning.svelte";
 

ts/deck-options/TimerOptions.svelte

@@ -8,13 +8,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import TitledContainer from "../components/TitledContainer.svelte";
     import * as tr from "../lib/ftl";
     import HelpModal from "./HelpModal.svelte";
     import type { DeckOptionsState } from "./lib";
     import SettingTitle from "./SettingTitle.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import SwitchRow from "./SwitchRow.svelte";
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOption } from "./types";
     import Warning from "./Warning.svelte";
 

ts/deck-options/index.ts

@@ -45,11 +45,11 @@ export async function setupDeckOptions(did: number): Promise<DeckOptionsPage> {
     });
 }
 
+import TitledContainer from "../components/TitledContainer.svelte";
 import EnumSelectorRow from "./EnumSelectorRow.svelte";
 import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
 import SpinBoxRow from "./SpinBoxRow.svelte";
 import SwitchRow from "./SwitchRow.svelte";
-import TitledContainer from "./TitledContainer.svelte";
 
 export const components = {
     TitledContainer,

ts/graphs/BUILD.bazel

@@ -14,12 +14,14 @@ compile_sass(
     visibility = ["//visibility:public"],
     deps = [
         "//sass:base_lib",
+        "//sass:button_mixins_lib",
         "//sass:scrollbar_lib",
     ],
 )
 
 _ts_deps = [
     "//ts/lib",
+    "//ts/components",
     "//ts/sveltelib",
     "@npm//@fluent",
     "@npm//@types/d3",
@@ -68,6 +70,7 @@ svelte_check(
         "*.ts",
         "*.svelte",
     ]) + [
+        "//sass:button_mixins_lib",
         "//ts/lib",
         "//ts/sveltelib",
     ],

ts/graphs/Graph.svelte

@@ -3,25 +3,24 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import TitledContainer from "../components/TitledContainer.svelte";
+
     export let title: string;
     export let subtitle: string | null = null;
 </script>
 
-<div class="graph" tabindex="-1">
-    <h1>{title}</h1>
-
+<TitledContainer {title}>
+    <div class="graph">
         {#if subtitle}
             <div class="subtitle">{subtitle}</div>
         {/if}
-
         <slot />
     </div>
+</TitledContainer>
 
 <style lang="scss">
+    @use "sass/elevation" as *;
     .graph {
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 60em;
         page-break-inside: avoid;
 
         /* See graph-styles.ts for constants referencing global styles */
@@ -63,13 +62,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    h1 {
-        text-align: center;
-        margin-bottom: 0.25em;
-        margin-top: 1.5em;
-        font-weight: bold;
-    }
-
     .subtitle {
         text-align: center;
         margin-bottom: 1em;

ts/graphs/GraphsPage.svelte

@@ -24,7 +24,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<div>
 <WithGraphData
     {search}
     {days}
@@ -37,6 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <svelte:component this={controller} {search} {days} {loading} />
     {/if}
 
+    <div class="graphs-container">
         {#if sourceData && preferences && revlogRange}
             {#each graphs as graph}
                 <svelte:component
@@ -49,13 +49,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 />
             {/each}
         {/if}
-    </WithGraphData>
     </div>
+    <div class="spacer" />
+</WithGraphData>
 
 <style lang="scss">
-    div {
+    .graphs-container {
+        display: grid;
+        gap: 1.5em;
+        grid-template-columns: 50% 50%;
+
+        @media only screen and (max-width: 1200px) {
+            grid-template-columns: 100%;
+        }
         @media only screen and (max-width: 600px) {
             font-size: 12px;
         }
     }
+
+    .spacer {
+        height: 1.5em;
+    }
 </style>

ts/graphs/RangeBox.svelte

@@ -113,13 +113,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     .range-box {
-        position: fixed;
+        position: sticky;
         z-index: 1;
         top: 0;
-        width: 100%;
+        width: 100vw;
         color: var(--fg);
         background: var(--canvas);
         padding: 0.5em;
+        border-bottom: 1px solid var(--border);
 
         @media print {
             position: absolute;
@@ -152,6 +153,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .range-box-pad {
-        height: 2em;
+        height: 1.5em;
     }
 </style>

ts/graphs/graphs-base.scss

@@ -1,12 +1,10 @@
 @use "root-vars";
-@use "sass/button-mixins" as button;
+@import "sass/base";
 
-label,
-input[type="radio"],
-input[type="checkbox"] {
-    cursor: pointer;
+body {
+    padding: 0 1em 1em 1em;
 }
 
 button {
-    @include button.base;
+    margin-bottom: 5px;
 }

ts/graphs/tsconfig.json

@@ -1,5 +1,9 @@
 {
     "extends": "../tsconfig.json",
     "include": ["*"],
-    "references": [{ "path": "../lib" }, { "path": "../sveltelib" }]
+    "references": [
+        { "path": "../lib" },
+        { "path": "../components" },
+        { "path": "../sveltelib" }
+    ]
 }