cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-02 20:00:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Finished cleaning up User Settings CSS

Browse source
This commit is contained in:
nizune 2021-08-03 17:07:02 +02:00
parent e1ffefe2ba
commit a10646888f
2 changed files with 75 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
src/pages/settings/Settings.module.scss
View file

@ -1,79 +1,56 @@
/* Settings animations */
@keyframes open { @keyframes open {
0% { 0% { transform: scale(1.2); opacity: 0; }
transform: scale(1.2); 100% { transform: scale(1); opacity: 1; }
}
100% {
transform: scale(1);
}
} }
@keyframes close { @keyframes close {
0% { 0% { transform: scale(1); opacity: 1; }
transform: scale(1); 100% { transform: scale(1.2); opacity: 0; }
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
} }
@keyframes opacity { @keyframes opacity {
0% { 0% { opacity: 0; }
opacity: 0; 20% { opacity: 0.5; }
} 50% { opacity: 1; }
20% {
opacity: 0.5;
}
50% {
opacity: 1;
}
} }
/* Settings CSS */
.settings[data-mobile="true"] { .settings[data-mobile="true"] {
flex-direction: column; flex-direction: column;
background: var(--primary-header); background: var(--primary-header);
.scrollbox { //TOFIX: need to put this into a media query later .sidebar, .content { background: var(--primary-background); }
visibility: visible !important;
overflow-y: auto;
.scrollbox {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-top: none; border-top: none;
} }
} }
.sidebar, /* Sidebar */
.content {
background: var(--primary-background);
}
.sidebar { .sidebar {
justify-content: flex-start; overflow-y: auto;
.container { .container {
padding: 20px 8px calc(var(--bottom-navigation-height) + 30px); padding: 20px 8px calc(var(--bottom-navigation-height) + 30px);
min-width: 218px; min-width: 218px;
width: 100%;
} }
> div { .scrollbox { width: 100%; }
width: 100%; .version { place-items: center; }
}
.version {
place-items: center;
}
} }
/* Content */
.content { .content {
padding: 0; padding: 0;
}
.contentcontainer { .scrollbox { overflow: auto; }
padding: 10px 12px var(--bottom-navigation-height) !important;
.contentcontainer {
max-width: unset !important;
padding: 10px 12px var(--bottom-navigation-height) !important;
}
} }
} }
@ -86,9 +63,7 @@
position: fixed; position: fixed;
animation: open 0.18s ease-out, opacity 0.18s; animation: open 0.18s ease-out, opacity 0.18s;
&.closing { &.closing { animation: close 0.18s ease-in; }
animation: close 0.18s ease-in;
}
} }
.settings { .settings {
@ -133,21 +108,14 @@
flex-direction: column; flex-direction: column;
} }
.divider { .divider { height: 30px; }
height: 30px;
}
.donate { .donate { color: goldenrod !important; }
color: goldenrod !important; .logOut {color: var(--error) !important; }
}
.logOut {
color: var(--error) !important;
}
.version { .version {
margin: 1rem 12px 0; margin: 1rem 12px 0;
font-size: 10px; font-size: .625rem;
color: var(--secondary-foreground); color: var(--secondary-foreground);
font-family: var(--monospace-font), monospace; font-family: var(--monospace-font), monospace;
user-select: text; user-select: text;
@ -159,7 +127,7 @@
flex-direction: column; flex-direction: column;
} }
.revision a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
@ -180,7 +148,7 @@
gap: 13px; gap: 13px;
height: fit-content; height: fit-content;
max-width: 740px; max-width: 740px;
padding: 80px 2em; padding: 80px 32px;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
} }
@ -191,13 +159,13 @@
h1 { h1 {
margin: 0; margin: 0;
line-height: 1em; line-height: 1rem;
font-size: 1.2em; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
} }
h3 { h3 {
font-size: 13px; font-size: .8125rem;
text-transform: uppercase; text-transform: uppercase;
color: var(--secondary-foreground); color: var(--secondary-foreground);
@ -208,15 +176,14 @@
h4 { h4 {
margin: 4px 2px; margin: 4px 2px;
font-size: 13px; font-size: .8125rem;
color: var(--tertiary-foreground); color: var(--tertiary-foreground);
text-transform: uppercase; text-transform: uppercase;
} }
h5 { h5 {
margin-top: 0; margin-top: 0;
font-size: 12px; font-size: .75rem;
font-weight: 400; font-weight: 400;
} }
@ -224,7 +191,7 @@
border-top: 1px solid; border-top: 1px solid;
margin: 0; margin: 0;
padding-top: 5px; padding-top: 5px;
font-size: 14px; font-size: .875rem;
color: var(--secondary-foreground); color: var(--secondary-foreground);
} }
} }
@ -240,14 +207,10 @@
content: "ESC"; content: "ESC";
margin-top: 4px; margin-top: 4px;
display: flex; display: flex;
text-align: center;
align-content: center;
justify-content: center; justify-content: center;
position: relative;
color: var(--foreground);
width: 40px; width: 40px;
opacity: 0.5; opacity: .5;
font-size: 0.75em; font-size: .75rem;
} }
.closeButton { .closeButton {
@ -259,29 +222,17 @@
width: 40px; width: 40px;
border: 3px solid var(--tertiary-background); border: 3px solid var(--tertiary-background);
cursor: pointer; cursor: pointer;
visibility: visible;
svg { svg { color: var(--secondary-foreground); }
color: var(--secondary-foreground); &:hover { background: var(--secondary-header); }
} &:active { transform: translateY(2px); }
&:hover {
background: var(--secondary-header);
}
&:active {
transform: translateY(2px);
}
} }
} }
section {
margin-bottom: 1em;
}
} }
.loader { @media (pointer: coarse) {
> div { .scrollbox {
margin: auto; visibility: visible !important;
overflow-y: auto;
} }
} }

62
src/pages/settings/Settings.tsx
View file

@ -185,38 +185,36 @@ export default function Settings() {
<Text id="app.settings.pages.logOut" /> <Text id="app.settings.pages.logOut" />
</ButtonItem>, </ButtonItem>,
<div className={styles.version}> <div className={styles.version}>
<div> <span className={styles.revision}>
<span className={styles.revision}> <a
<a href={`${REPO_URL}/${GIT_REVISION}`}
href={`${REPO_URL}/${GIT_REVISION}`} target="_blank"
target="_blank" rel="noreferrer">
rel="noreferrer"> {GIT_REVISION.substr(0, 7)}
{GIT_REVISION.substr(0, 7)} </a>
</a> {` `}
{` `} <a
<a href={
href={ GIT_BRANCH !== "DETACHED"
GIT_BRANCH !== "DETACHED" ? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}` : undefined
: undefined }
} target="_blank"
target="_blank" rel="noreferrer">
rel="noreferrer"> ({GIT_BRANCH})
({GIT_BRANCH}) </a>
</a> </span>
</span> <span>
<span> {GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "}
{GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "} {APP_VERSION}
{APP_VERSION} </span>
</span> {window.isNative && (
{window.isNative && ( <span>Native: {window.nativeVersion}</span>
<span>Native: {window.nativeVersion}</span> )}
)} <span>
<span> API: {client.configuration?.revolt ?? "N/A"}
API: {client.configuration?.revolt ?? "N/A"} </span>
</span> <span>revolt.js: {LIBRARY_VERSION}</span>
<span>revolt.js: {LIBRARY_VERSION}</span>
</div>
</div>, </div>,
]} ]}
/> />