martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-30 05:25:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

setting sticky header for settings and profile

Browse Source
This commit is contained in:
balzack 2024-11-13 00:26:01 -08:00
parent e41d1faad7
commit 67499e1749
9 changed files with 195 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/web/src/App.tsx
View File

@ -19,7 +19,7 @@ const theme = createTheme({
'databag-green': ['#eef6f2', '#cce5d9', '#aad4bf', '#68c4af', '#559e83', '#559e83', '#3c7759', '#2b5540', '#1a3326', '#09110d'],
'dark-surface': ['#000000', '#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'],
'light-surface': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#777777', '#666666'],
'dark-text': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#777777', '#666666'],
'dark-text': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#666666', '#444444', '#222222'],
'light-text': ['#000000', '#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'],
'dark-databag-green': ['#99bb99', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83'],
'light-databag-green': ['#888888', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844'],

2
app/client/web/src/card/Card.module.css
View File

@ -53,7 +53,7 @@
text-overflow: ellipsis;
overflow: hidden;
font-style: italic;
color: var(--mantine-color-text-9);
color: var(--mantine-color-text-7);
}
.handle {

2
app/client/web/src/constants/Strings.ts
View File

@ -1,5 +1,3 @@
import {NativeModules, Platform} from 'react-native';
export const en = {
unknown: 'Unknown',
sealed: 'Sealed',

2
app/client/web/src/contacts/Contacts.module.css
View File

@ -14,7 +14,7 @@
padding-left: 16px;
padding-right: 16px;
padding-bottom: 8px;
border-bottom: 2px solid var(--mantine-color-text-9);
border-bottom: 2px solid var(--mantine-color-text-8);
width: 100%;
.input {

2
app/client/web/src/content/Content.tsx
View File

@ -46,7 +46,7 @@ export function Content({ select }: { select: (focus: Focus) => void }) {
</Button>
)}
</div>
{channels.length === 0 && <div className={classes.none}>{state.strings.noContacts}</div>}
{channels.length === 0 && <div className={classes.none}>{state.strings.noTopics}</div>}
{channels.length !== 0 && <div className={classes.channels}>{channels}</div>}
{state.layout === 'large' && (
<div className={classes.bar}>

15
app/client/web/src/profile/Profile.module.css
View File

@ -1,21 +1,21 @@
.contact {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 4px;
width: 100%;
height: 100%;
.detail {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex-grow: 1;
width: 100%;
overflow: scroll;
padding-left: 16px;
padding-right: 16px;
}
.header {
@ -23,6 +23,11 @@
flex-direction: row;
align-items: center;
width: 100%;
border-bottom: 1px solid var(--mantine-color-text-9);
padding-left: 16px;
padding-right: 16px;
height: 48px;
flex-shrink: 0;
}
.close {

2
app/client/web/src/profile/Profile.tsx
View File

@ -237,12 +237,12 @@ export function Profile({ params, close }: { params: ProfileParams; close?: () =
return (
<div className={classes.contact}>
<div className={classes.detail}>
<div className={classes.header}>
{close && <IconX size={28} className={classes.match} />}
<Text className={classes.label}>{`${state.handle}${state.node ? '/' + state.node : ''}`}</Text>
{close && <IconX size={30} className={classes.close} onClick={close} />}
</div>
<div className={classes.detail}>
<div className={classes.image}>
<Image radius="md" src={state.imageUrl} />
</div>

29
app/client/web/src/settings/Settings.module.css
View File

@ -85,13 +85,10 @@
display: flex;
flex-direction: column;
align-items: center;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
gap: 2px;
height: 100%;
.header {
.headerLabel {
font-size: 22px;
text-align: center;
text-wrap: nowrap;
@ -100,6 +97,28 @@
width: 100%;
}
.header {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 16px;
padding-right: 16px;
width: 100%;
height: 48px;
flex-shrink: 0;
border-bottom: 1px solid var(--mantine-color-text-7);
}
.detail {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
overflow: scroll;
padding-left: 16px;
padding-right: 16px;
width: 100%;
}
.image {
position: relative;
width: 90%;

6
app/client/web/src/settings/Settings.tsx
View File

@ -336,7 +336,10 @@ export function Settings({ showLogout }: { showLogout: boolean }) {
<>
{state.profileSet && (
<div className={classes.settings}>
<Text className={classes.header}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
<div className={classes.header}>
<Text className={classes.headerLabel}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
</div>
<div className={classes.detail}>
<div className={classes.image}>
{state.profile.imageSet && (
<div className={classes.imageSet}>
@ -513,6 +516,7 @@ export function Settings({ showLogout }: { showLogout: boolean }) {
</div>
</div>
</div>
</div>
)}
<Modal title={state.strings.changeLogin} opened={changeOpened} onClose={changeClose} overlayProps={{ backgroundOpacity: 0.55, blur: 3 }} centered>
<div className={classes.change}>