From ee9af871b756733bd9586a24c2c025cb0334fa7d Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 2 Nov 2022 09:23:08 +0100
Subject: [PATCH] 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                                | 15 +++++++
 .../TitledContainer.svelte                    |  7 +++-
 ts/deck-options/Addons.svelte                 |  2 +-
 ts/deck-options/AdvancedOptions.svelte        |  2 +-
 ts/deck-options/AudioOptions.svelte           |  2 +-
 ts/deck-options/BuryOptions.svelte            |  2 +-
 ts/deck-options/DailyLimits.svelte            |  2 +-
 ts/deck-options/DisplayOrder.svelte           |  2 +-
 ts/deck-options/LapseOptions.svelte           |  2 +-
 ts/deck-options/NewOptions.svelte             |  2 +-
 ts/deck-options/TimerOptions.svelte           |  2 +-
 ts/deck-options/index.ts                      |  2 +-
 ts/graphs/BUILD.bazel                         |  3 ++
 ts/graphs/Graph.svelte                        | 30 +++++--------
 ts/graphs/GraphsPage.svelte                   | 42 ++++++++++++-------
 ts/graphs/RangeBox.svelte                     |  7 ++--
 ts/graphs/graphs-base.scss                    | 10 ++---
 ts/graphs/tsconfig.json                       |  6 ++-
 18 files changed, 85 insertions(+), 55 deletions(-)
 rename ts/{deck-options => components}/TitledContainer.svelte (89%)

diff --git a/sass/base.scss b/sass/base.scss
index f5cbf4275..9001bcdfa 100644
--- a/sass/base.scss
+++ b/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);
+    }
+}
diff --git a/ts/deck-options/TitledContainer.svelte b/ts/components/TitledContainer.svelte
similarity index 89%
rename from ts/deck-options/TitledContainer.svelte
rename to ts/components/TitledContainer.svelte
index 00e189a35..68eaa7edf 100644
--- a/ts/deck-options/TitledContainer.svelte
+++ b/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"
diff --git a/ts/deck-options/Addons.svelte b/ts/deck-options/Addons.svelte
index 5315d95c7..d9516335c 100644
--- a/ts/deck-options/Addons.svelte
+++ b/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;
 
diff --git a/ts/deck-options/AdvancedOptions.svelte b/ts/deck-options/AdvancedOptions.svelte
index 3407c235a..bc01e4621 100644
--- a/ts/deck-options/AdvancedOptions.svelte
+++ b/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;
diff --git a/ts/deck-options/AudioOptions.svelte b/ts/deck-options/AudioOptions.svelte
index a1e2a59d8..a687b7833 100644
--- a/ts/deck-options/AudioOptions.svelte
+++ b/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;
diff --git a/ts/deck-options/BuryOptions.svelte b/ts/deck-options/BuryOptions.svelte
index ad46d8d0f..e573b8c27 100644
--- a/ts/deck-options/BuryOptions.svelte
+++ b/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;
diff --git a/ts/deck-options/DailyLimits.svelte b/ts/deck-options/DailyLimits.svelte
index 92755937a..08a2a8437 100644
--- a/ts/deck-options/DailyLimits.svelte
+++ b/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";
 
diff --git a/ts/deck-options/DisplayOrder.svelte b/ts/deck-options/DisplayOrder.svelte
index 2087d491d..8c51c1dbc 100644
--- a/ts/deck-options/DisplayOrder.svelte
+++ b/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;
diff --git a/ts/deck-options/LapseOptions.svelte b/ts/deck-options/LapseOptions.svelte
index f09642bc4..c6c1e6a5e 100644
--- a/ts/deck-options/LapseOptions.svelte
+++ b/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";
 
diff --git a/ts/deck-options/NewOptions.svelte b/ts/deck-options/NewOptions.svelte
index 48b4515f8..7d7241a1e 100644
--- a/ts/deck-options/NewOptions.svelte
+++ b/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";
 
diff --git a/ts/deck-options/TimerOptions.svelte b/ts/deck-options/TimerOptions.svelte
index a5bf8cbee..d708c9516 100644
--- a/ts/deck-options/TimerOptions.svelte
+++ b/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";
 
diff --git a/ts/deck-options/index.ts b/ts/deck-options/index.ts
index 6c378fa4d..4ec275f55 100644
--- a/ts/deck-options/index.ts
+++ b/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,
diff --git a/ts/graphs/BUILD.bazel b/ts/graphs/BUILD.bazel
index 778111148..cd21feb23 100644
--- a/ts/graphs/BUILD.bazel
+++ b/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",
     ],
diff --git a/ts/graphs/Graph.svelte b/ts/graphs/Graph.svelte
index 09ab4a050..4a86c39fc 100644
--- a/ts/graphs/Graph.svelte
+++ b/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>
-
-    {#if subtitle}
-        <div class="subtitle">{subtitle}</div>
-    {/if}
-
-    <slot />
-</div>
+<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;
diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 2296604bd..c82c9544e 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -24,19 +24,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<div>
-    <WithGraphData
-        {search}
-        {days}
-        let:loading
-        let:sourceData
-        let:preferences
-        let:revlogRange
-    >
-        {#if controller}
-            <svelte:component this={controller} {search} {days} {loading} />
-        {/if}
+<WithGraphData
+    {search}
+    {days}
+    let:loading
+    let:sourceData
+    let:preferences
+    let:revlogRange
+>
+    {#if controller}
+        <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>
+    <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>
diff --git a/ts/graphs/RangeBox.svelte b/ts/graphs/RangeBox.svelte
index b70b8c1a6..c07760312 100644
--- a/ts/graphs/RangeBox.svelte
+++ b/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>
diff --git a/ts/graphs/graphs-base.scss b/ts/graphs/graphs-base.scss
index ce9379e02..a6756ba7a 100644
--- a/ts/graphs/graphs-base.scss
+++ b/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;
 }
diff --git a/ts/graphs/tsconfig.json b/ts/graphs/tsconfig.json
index 6ef6ea47c..550aecf3c 100644
--- a/ts/graphs/tsconfig.json
+++ b/ts/graphs/tsconfig.json
@@ -1,5 +1,9 @@
 {
     "extends": "../tsconfig.json",
     "include": ["*"],
-    "references": [{ "path": "../lib" }, { "path": "../sveltelib" }]
+    "references": [
+        { "path": "../lib" },
+        { "path": "../components" },
+        { "path": "../sveltelib" }
+    ]
 }