From 2f563ef72629bada62999b666af16e5327134a67 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Mon, 2 Aug 2021 16:21:16 +0200
Subject: [PATCH] More work on settings panel
---
src/pages/settings/GenericSettings.tsx | 8 +--
src/pages/settings/Settings.module.scss | 63 ++++++++++------------
src/pages/settings/panes/Panes.module.scss | 2 +
3 files changed, 35 insertions(+), 38 deletions(-)
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index 78fd4ab..f0fe6a5 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -170,10 +170,10 @@ export function GenericSettings({
<Switch>{children}</Switch>
</div>
{!isTouchscreenDevice && (
-
- <div onClick={exitSettings} className={styles.closeButton}>
- <X size={28} />
- <span className={styles.esc} />
+ <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 1e5e622..2e09bd6 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -34,6 +34,15 @@
flex-direction: column;
background: var(--primary-header);
+ .scrollbox { //TOFIX: need to put this into a media query later
+ visibility: visible !important;
+ overflow-y: auto;
+
+ &::-webkit-scrollbar-thumb {
+ border-top: none;
+ }
+ }
+
.sidebar,
.content {
background: var(--primary-background);
@@ -42,9 +51,12 @@
.sidebar {
justify-content: flex-start;
+
+
.container {
- padding: 20px 8px;
+ padding: 20px 8px calc(var(--bottom-navigation-height) + 30px);
min-width: 218px;
+ width: 100%;
}
> div {
@@ -57,7 +69,11 @@
}
.content {
- padding: 10px 12px var(--bottom-navigation-height);
+ padding: 0;
+ }
+
+ .contentcontainer {
+ padding: 10px 12px var(--bottom-navigation-height) !important;
}
}
@@ -80,11 +96,10 @@
display: flex;
user-select: none;
flex-direction: row;
- /*justify-content: center;*/
background: var(--primary-background);
/* Scrollbox hides the scrollbar on the desktop app. */
- @media (hover: hover) { .scrollbox { visibility: hidden; }}
+ /*@media (hover: hover) { .scrollbox { visibility: hidden; }}*/
.scrollbox {
overflow-y: scroll;
@@ -174,11 +189,13 @@
.contentcontainer {
display: flex;
+ gap: 13px;
+ height: max-content;
max-width: 740px;
padding: 80px 2em;
+ width: 100%;
visibility: visible;
flex-direction: column;
- flex-grow: 1;
}
details {
@@ -186,7 +203,7 @@
}
h1 {
- margin-top: 0;
+ margin: 0;
line-height: 1em;
font-size: 1.2em;
font-weight: 600;
@@ -196,6 +213,10 @@
font-size: 13px;
text-transform: uppercase;
color: var(--secondary-foreground);
+
+ &:first-child {
+ margin-top: 0;
+ }
}
h4 {
@@ -221,33 +242,7 @@
}
}
- .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 {
+ .action {
flex: 1;
flex-shrink: 0;
padding: 80px 8px;
@@ -297,7 +292,7 @@
> div {
display: inline;
}
- }*/
+ }
section {
margin-bottom: 1em;
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 0f1464c..9f14cac 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -141,12 +141,14 @@
.themes {
gap: 8px;
display: flex;
+ width: 100%;
img {
cursor: pointer;
border-radius: var(--border-radius);
transition: border 0.3s;
border: 3px solid transparent;
+ width: 100%;
&[data-active="true"] {
cursor: default;
--
GitLab