abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Small update for desktop app

Browse Source
This commit is contained in:
nizune
2021-08-02 12:22:39 +02:00
parent 1ded8ed4fc
commit 6f08a70d15
3 changed files with 66 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/settings/GenericSettings.tsx
View File

@@ -122,37 +122,40 @@ export function GenericSettings({
)}
{(!isTouchscreenDevice || typeof page === "undefined") && (
<div className={styles.sidebar}>
<div className={styles.container}>
{pages.map((entry, i) =>
entry.hidden ? undefined : (
<>
{entry.category && (
<Category
variant="uniform"
text={entry.category}
/>
)}
<ButtonItem
active={
page === entry.id ||
(i === 0 &&
!isTouchscreenDevice &&
typeof page === "undefined")
}
onClick={() => switchPage(entry.id)}
compact>
{entry.icon} {entry.title}
</ButtonItem>
{entry.divider && <LineDivider />}
</>
),
)}
{custom}
<div className={styles.scrollbox}>
<div className={styles.container}>
{pages.map((entry, i) =>
entry.hidden ? undefined : (
<>
{entry.category && (
<Category
variant="uniform"
text={entry.category}
/>
)}
<ButtonItem
active={
page === entry.id ||
(i === 0 &&
!isTouchscreenDevice &&
typeof page === "undefined")
}
onClick={() => switchPage(entry.id)}
compact>
{entry.icon} {entry.title}
</ButtonItem>
{entry.divider && <LineDivider />}
</>
),
)}
{custom}
</div>
</div>
</div>
)}
{(!isTouchscreenDevice || typeof page === "string") && (
<div className={styles.content}>
{/*<div className={styles.scrollbox}>*/}
{!isTouchscreenDevice &&
!pages.find((x) => x.id === page && x.hideTitle) && (
<h1>
@@ -164,6 +167,7 @@ export function GenericSettings({
</h1>
)}
<Switch>{children}</Switch>
{/*</div>*/}
</div>
)}
{!isTouchscreenDevice && (

25
src/pages/settings/Settings.module.scss
View File

@@ -83,6 +83,24 @@
justify-content: center;
background: var(--primary-background);
.scrollbox {
overflow: auto;
visibility: hidden;
transition: visibility 0.2s;
}
.container,
.scrollbox:hover,
.scrollbox:focus {
visibility: visible;
}
::-webkit-scrollbar-thumb {
background-clip: content-box;
border-top: 80px solid transparent;
}
.sidebar {
flex: 1 0 218px;
display: flex;
@@ -93,11 +111,12 @@
.container {
width: 218px;
padding: 60px 8px;
padding: 80px 8px;
height: fit-content;
display: flex;
gap: 2px;
flex-direction: column;
visibility: visible;
}
.divider {
@@ -139,7 +158,7 @@
.content {
flex: 3;
max-width: 740px;
padding: 60px 2em;
padding: 80px 2em;
overflow-y: scroll;
overflow-x: hidden;
@@ -186,7 +205,7 @@
.action {
flex: 1;
flex-shrink: 0;
padding: 60px 8px;
padding: 80px 8px;
color: var(--tertiary-background);
&:after {