From 4a248ffa5bb66a5d3276ffa47f7dd1b5253d9faa Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 2 Aug 2021 14:09:54 +0200
Subject: [PATCH] Started work on redoing settings structure
---
src/pages/settings/GenericSettings.tsx | 39 +++++++------
src/pages/settings/Settings.module.scss | 77 ++++++++++++++++++++-----
2 files changed, 84 insertions(+), 32 deletions(-)
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index d672a69..78fd4ab 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -155,28 +155,31 @@ export function GenericSettings({
)}
{(!isTouchscreenDevice || typeof page === "string") && (
<div className={styles.content}>
- {/*<div className={styles.scrollbox}>*/}
- {!isTouchscreenDevice &&
- !pages.find((x) => x.id === page && x.hideTitle) && (
- <h1>
- <Text
- id={`app.settings.${category}.${
- page ?? defaultPage
- }.title`}
- />
- </h1>
+ <div className={styles.scrollbox}>
+ <div className={styles.contentcontainer}>
+ {!isTouchscreenDevice &&
+ !pages.find((x) => x.id === page && x.hideTitle) && (
+ <h1>
+ <Text
+ id={`app.settings.${category}.${
+ page ?? defaultPage
+ }.title`}
+ />
+ </h1>
+ )}
+ <Switch>{children}</Switch>
+ </div>
+ {!isTouchscreenDevice && (
+
+ <div onClick={exitSettings} className={styles.closeButton}>
+ <X size={28} />
+ <span className={styles.esc} />
+ </div>
)}
- <Switch>{children}</Switch>
- {/*</div>*/}
- </div>
- )}
- {!isTouchscreenDevice && (
- <div className={styles.action}>
- <div onClick={exitSettings} className={styles.closeButton}>
- <X size={28} />
</div>
</div>
)}
+
</div>
);
}
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 7ca5058..1e5e622 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -80,20 +80,23 @@
display: flex;
user-select: none;
flex-direction: row;
- justify-content: center;
+ /*justify-content: center;*/
background: var(--primary-background);
+ /* Scrollbox hides the scrollbar on the desktop app. */
+ @media (hover: hover) { .scrollbox { visibility: hidden; }}
+
.scrollbox {
- overflow: auto;
+ overflow-y: scroll;
visibility: hidden;
-
- transition: visibility 0.2s;
+ transition: visibility 0.1s;
}
.container,
+ .contentcontainer,
.scrollbox:hover,
.scrollbox:focus {
- visibility: visible;
+ visibility: visible;
}
::-webkit-scrollbar-thumb {
@@ -109,6 +112,11 @@
justify-content: flex-end;
background: var(--secondary-background);
+ display: flex;
+ -webkit-box-flex: 1;
+ -webkit-box-pack: end;
+ justify-content: flex-end;
+
.container {
width: 218px;
padding: 80px 8px;
@@ -137,9 +145,7 @@
color: var(--secondary-foreground);
font-family: var(--monospace-font), monospace;
user-select: text;
-
display: grid;
- //place-items: center;
> div {
gap: 2px;
@@ -156,12 +162,25 @@
}
.content {
- flex: 3;
- max-width: 740px;
- padding: 80px 2em;
- overflow-y: scroll;
+ flex: 1 1 800px;
+ display: flex;
+ overflow-y: auto;
overflow-x: hidden;
+ .scrollbox {
+ display: flex;
+ flex-grow: 1;
+ }
+
+ .contentcontainer {
+ display: flex;
+ max-width: 740px;
+ padding: 80px 2em;
+ visibility: visible;
+ flex-direction: column;
+ flex-grow: 1;
+ }
+
details {
margin: 14px 0;
}
@@ -202,11 +221,40 @@
}
}
- .action {
+ .closeButton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ height: 40px;
+ width: 40px;
+ border: 3px solid var(--tertiary-background);
+ cursor: pointer;
+ visibility: visible;
+ position: sticky;
+ top: 80px;
+
+ svg {
+ color: var(--secondary-foreground);
+ }
+
+ &:hover {
+ background: var(--secondary-header);
+ }
+
+ &:active {
+ transform: translateY(2px);
+ }
+ }
+
+ /*.action {
flex: 1;
flex-shrink: 0;
padding: 80px 8px;
color: var(--tertiary-background);
+ visibility: visible;
+ position: sticky;
+ top: 0;
&:after {
content: "ESC";
@@ -231,6 +279,7 @@
width: 40px;
border: 3px solid var(--tertiary-background);
cursor: pointer;
+ visibility: visible;
svg {
color: var(--secondary-foreground);
@@ -248,7 +297,7 @@
> div {
display: inline;
}
- }
+ }*/
section {
margin-bottom: 1em;
@@ -259,4 +308,4 @@
> div {
margin: auto;
}
-}
+}
\ No newline at end of file
--
GitLab