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

Merge branch 'master' of https://gitlab.insrt.uk/revolt/revite

Browse source
This commit is contained in:
Paul 2021-08-02 13:13:12 +01:00
commit 61680fe386
2 changed files with 85 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/pages/settings/GenericSettings.tsx
View file

@ -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>
);
}

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

@ -80,20 +80,23 @@
display: flex;
user-select: none;
flex-direction: row;
justify-content: center;
/*justify-content: center;*/
background: var(--primary-background);
.scrollbox {
overflow: auto;
visibility: hidden;
/* Scrollbox hides the scrollbar on the desktop app. */
@media (hover: hover) { .scrollbox { visibility: hidden; }}
transition: visibility 0.2s;
.scrollbox {
overflow-y: scroll;
visibility: hidden;
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;
}
}
}