From a10646888f14acc3a87669d9ba583a3fce67bb62 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Tue, 3 Aug 2021 17:07:02 +0200
Subject: [PATCH] Finished cleaning up User Settings CSS
---
src/pages/settings/Settings.module.scss | 139 ++++++++----------------
src/pages/settings/Settings.tsx | 62 +++++------
2 files changed, 75 insertions(+), 126 deletions(-)
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index 67bb891..5f546ec 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -1,79 +1,56 @@
+/* Settings animations */
@keyframes open {
- 0% {
- transform: scale(1.2);
- }
- 100% {
- transform: scale(1);
- }
+ 0% { transform: scale(1.2); opacity: 0; }
+ 100% { transform: scale(1); opacity: 1; }
}
@keyframes close {
- 0% {
- transform: scale(1);
- opacity: 1;
- }
- 100% {
- transform: scale(1.2);
- opacity: 0;
- }
+ 0% { transform: scale(1); opacity: 1; }
+ 100% { transform: scale(1.2); opacity: 0; }
}
@keyframes opacity {
- 0% {
- opacity: 0;
- }
- 20% {
- opacity: 0.5;
- }
- 50% {
- opacity: 1;
- }
+ 0% { opacity: 0; }
+ 20% { opacity: 0.5; }
+ 50% { opacity: 1; }
}
+/* Settings CSS */
.settings[data-mobile="true"] {
flex-direction: column;
background: var(--primary-header);
- .scrollbox { //TOFIX: need to put this into a media query later
- visibility: visible !important;
- overflow-y: auto;
-
+ .sidebar, .content { background: var(--primary-background); }
+
+ .scrollbox {
&::-webkit-scrollbar-thumb {
border-top: none;
}
}
- .sidebar,
- .content {
- background: var(--primary-background);
- }
-
+ /* Sidebar */
.sidebar {
- justify-content: flex-start;
-
-
+ overflow-y: auto;
.container {
padding: 20px 8px calc(var(--bottom-navigation-height) + 30px);
min-width: 218px;
- width: 100%;
}
- > div {
- width: 100%;
- }
-
- .version {
- place-items: center;
- }
+ .scrollbox { width: 100%; }
+ .version { place-items: center; }
}
+ /* Content */
.content {
padding: 0;
- }
- .contentcontainer {
- padding: 10px 12px var(--bottom-navigation-height) !important;
+ .scrollbox { overflow: auto; }
+
+ .contentcontainer {
+ max-width: unset !important;
+ padding: 10px 12px var(--bottom-navigation-height) !important;
+ }
}
}
@@ -86,9 +63,7 @@
position: fixed;
animation: open 0.18s ease-out, opacity 0.18s;
- &.closing {
- animation: close 0.18s ease-in;
- }
+ &.closing { animation: close 0.18s ease-in; }
}
.settings {
@@ -133,21 +108,14 @@
flex-direction: column;
}
- .divider {
- height: 30px;
- }
+ .divider { height: 30px; }
- .donate {
- color: goldenrod !important;
- }
-
- .logOut {
- color: var(--error) !important;
- }
+ .donate { color: goldenrod !important; }
+ .logOut {color: var(--error) !important; }
.version {
margin: 1rem 12px 0;
- font-size: 10px;
+ font-size: .625rem;
color: var(--secondary-foreground);
font-family: var(--monospace-font), monospace;
user-select: text;
@@ -159,7 +127,7 @@
flex-direction: column;
}
- .revision a:hover {
+ a:hover {
text-decoration: underline;
}
}
@@ -180,7 +148,7 @@
gap: 13px;
height: fit-content;
max-width: 740px;
- padding: 80px 2em;
+ padding: 80px 32px;
width: 100%;
flex-direction: column;
}
@@ -191,13 +159,13 @@
h1 {
margin: 0;
- line-height: 1em;
- font-size: 1.2em;
+ line-height: 1rem;
+ font-size: 1.2rem;
font-weight: 600;
}
h3 {
- font-size: 13px;
+ font-size: .8125rem;
text-transform: uppercase;
color: var(--secondary-foreground);
@@ -208,15 +176,14 @@
h4 {
margin: 4px 2px;
- font-size: 13px;
-
+ font-size: .8125rem;
color: var(--tertiary-foreground);
text-transform: uppercase;
}
h5 {
margin-top: 0;
- font-size: 12px;
+ font-size: .75rem;
font-weight: 400;
}
@@ -224,7 +191,7 @@
border-top: 1px solid;
margin: 0;
padding-top: 5px;
- font-size: 14px;
+ font-size: .875rem;
color: var(--secondary-foreground);
}
}
@@ -240,14 +207,10 @@
content: "ESC";
margin-top: 4px;
display: flex;
- text-align: center;
- align-content: center;
justify-content: center;
- position: relative;
- color: var(--foreground);
width: 40px;
- opacity: 0.5;
- font-size: 0.75em;
+ opacity: .5;
+ font-size: .75rem;
}
.closeButton {
@@ -259,29 +222,17 @@
width: 40px;
border: 3px solid var(--tertiary-background);
cursor: pointer;
- visibility: visible;
- svg {
- color: var(--secondary-foreground);
- }
-
- &:hover {
- background: var(--secondary-header);
- }
-
- &:active {
- transform: translateY(2px);
- }
+ svg { color: var(--secondary-foreground); }
+ &:hover { background: var(--secondary-header); }
+ &:active { transform: translateY(2px); }
}
}
-
- section {
- margin-bottom: 1em;
- }
}
-.loader {
- > div {
- margin: auto;
+@media (pointer: coarse) {
+ .scrollbox {
+ visibility: visible !important;
+ overflow-y: auto;
}
}
\ No newline at end of file
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index 01c6e50..2c66d06 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -185,38 +185,36 @@ export default function Settings() {
<Text id="app.settings.pages.logOut" />
</ButtonItem>,
<div className={styles.version}>
- <div>
- <span className={styles.revision}>
- <a
- href={`${REPO_URL}/${GIT_REVISION}`}
- target="_blank"
- rel="noreferrer">
- {GIT_REVISION.substr(0, 7)}
- </a>
- {` `}
- <a
- href={
- GIT_BRANCH !== "DETACHED"
- ? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
- : undefined
- }
- target="_blank"
- rel="noreferrer">
- ({GIT_BRANCH})
- </a>
- </span>
- <span>
- {GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "}
- {APP_VERSION}
- </span>
- {window.isNative && (
- <span>Native: {window.nativeVersion}</span>
- )}
- <span>
- API: {client.configuration?.revolt ?? "N/A"}
- </span>
- <span>revolt.js: {LIBRARY_VERSION}</span>
- </div>
+ <span className={styles.revision}>
+ <a
+ href={`${REPO_URL}/${GIT_REVISION}`}
+ target="_blank"
+ rel="noreferrer">
+ {GIT_REVISION.substr(0, 7)}
+ </a>
+ {` `}
+ <a
+ href={
+ GIT_BRANCH !== "DETACHED"
+ ? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
+ : undefined
+ }
+ target="_blank"
+ rel="noreferrer">
+ ({GIT_BRANCH})
+ </a>
+ </span>
+ <span>
+ {GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "}
+ {APP_VERSION}
+ </span>
+ {window.isNative && (
+ <span>Native: {window.nativeVersion}</span>
+ )}
+ <span>
+ API: {client.configuration?.revolt ?? "N/A"}
+ </span>
+ <span>revolt.js: {LIBRARY_VERSION}</span>
</div>,
]}
/>
--
GitLab