From 282de2167554219b5e9fad7e5d1dd7ac6bbfe1c4 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 27 May 2021 20:28:23 +0200
Subject: [PATCH] Use Bootstrap containers instead of CSS in base for
 deckoptions

---
 ts/components/ButtonToolbar.svelte   |  2 +-
 ts/components/Section.svelte         |  2 +-
 ts/components/SelectButton.svelte    |  5 +++++
 ts/components/StickyBar.svelte       |  4 ++--
 ts/deckoptions/deckoptions-base.scss | 21 ---------------------
 5 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index d2e387e55..cfa9478a9 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -78,7 +78,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div
     bind:this={buttonToolbarRef}
     {id}
-    class={`btn-toolbar wrap-variable ${className}`}
+    class={`btn-toolbar container wrap-variable ${className}`}
     {style}
     role="toolbar"
 >
diff --git a/ts/components/Section.svelte b/ts/components/Section.svelte
index d3c5ff391..8d722b07a 100644
--- a/ts/components/Section.svelte
+++ b/ts/components/Section.svelte
@@ -55,7 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<div bind:this={sectionRef} {id} class={className}>
+<div bind:this={sectionRef} {id} class={`container mb-1 ${className}`}>
     <slot />
     {#each $dynamicItems as item}
         <SectionItem id={item[0].id} registration={item[1]}>
diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index adfb198e8..801fc0fb5 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -50,6 +50,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         overflow-x: hidden;
     }
 
+    .btn-night {
+        /* override the default down arrow */
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+    }
+
     @include button.btn-day($with-hover: false);
     @include button.btn-night($with-hover: false);
 </style>
diff --git a/ts/components/StickyBar.svelte b/ts/components/StickyBar.svelte
index c6adc0b20..86eda6f6a 100644
--- a/ts/components/StickyBar.svelte
+++ b/ts/components/StickyBar.svelte
@@ -4,11 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     export let id: string | undefined = undefined;
-    let className: string | undefined;
+    let className: string = "";
     export { className as class };
 </script>
 
-<nav {id} class={`pb-1 pt-1 ${className}`}>
+<nav {id} class={`container-fluid pb-1 pt-1 ${className}`}>
     <slot />
 </nav>
 
diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deckoptions/deckoptions-base.scss
index 2bd3e59f5..8e58a4268 100644
--- a/ts/deckoptions/deckoptions-base.scss
+++ b/ts/deckoptions/deckoptions-base.scss
@@ -23,22 +23,6 @@
     -webkit-appearance: none;
 }
 
-body {
-    width: min(100vw, 35em);
-    margin: 0 auto;
-    // leave some space for rounded screens
-    margin-bottom: 2em;
-}
-
-html {
-    overflow-x: hidden;
-}
-
-#main {
-    padding: 0.5em;
-    padding-top: 0;
-}
-
 .tooltip-inner {
     max-width: 300px;
     text-align: left;
@@ -53,8 +37,3 @@ html {
 code {
     color: #ffaaaa;
 }
-
-// override the default down arrow colour in <select> elements
-.night-mode select {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-}