client: improve responsiveness

This commit is contained in:
Max Leiter 2022-03-20 20:45:37 -07:00
parent c9f84fe69c
commit 9ba17db6f9
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
6 changed files with 32 additions and 18 deletions

View file

@ -114,6 +114,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
label="Filename" label="Filename"
disabled={!editable} disabled={!editable}
width={"100%"} width={"100%"}
id={title}
/> />
{remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />} {remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
</div> </div>

View file

@ -30,17 +30,17 @@ const ListItem = ({ post }: { post: any }) => {
return (<li key={post.id}> return (<li key={post.id}>
<Card style={{ overflowY: 'scroll' }}> <Card style={{ overflowY: 'scroll' }}>
<Spacer height={1 / 2} /> <Spacer height={1 / 2} />
<Grid.Container justify={'space-between'}> <Grid.Container>
<Grid xs={8}> <Grid md={14} xs={14}>
<Text h3 paddingLeft={1 / 2}> <Text h3 paddingLeft={1 / 2} >
<NextLink passHref={true} href={`/post/${post.id}`}> <NextLink passHref={true} href={`/post/${post.id}`}>
<Link color>{post.title} <Link color>{post.title}
<ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy> <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
</Link> </Link>
</NextLink> </NextLink>
</Text></Grid> </Text></Grid>
<Grid xs={7}><Text type="secondary" h5><Tooltip text={formattedTime}>{time}</Tooltip></Text></Grid> <Grid paddingLeft={1 / 2} md={5} xs={9}><Text type="secondary" h5><Tooltip text={formattedTime}>{time}</Tooltip></Text></Grid>
<Grid xs={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid> <Grid paddingLeft={1 / 2} md={5} xs={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid>
</Grid.Container> </Grid.Container>
<Divider h="1px" my={0} /> <Divider h="1px" my={0} />

View file

@ -87,8 +87,6 @@
border-radius: 3px; border-radius: 3px;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
color: initial;
background-color: #f5f5f5;
padding: 2px 4px; padding: 2px 4px;
} }

View file

@ -36,7 +36,7 @@ const ReactMarkdownPreview = ({ content, height }: Props) => {
background: 'transparent' background: 'transparent'
}} }}
codeTagProps={{ codeTagProps={{
style: { background: 'transparent' } style: { background: 'transparent', color: 'inherit' }
}} }}
style={themeType === 'dark' ? dark : light} style={themeType === 'dark' ? dark : light}
showLineNumbers={true} showLineNumbers={true}

View file

@ -8,7 +8,6 @@ import Header from "../../components/header";
import VisibilityBadge from "../../components/visibility-badge"; import VisibilityBadge from "../../components/visibility-badge";
import { ThemeProps } from "../_app"; import { ThemeProps } from "../_app";
import PageSeo from "components/page-seo"; import PageSeo from "components/page-seo";
import Head from "next/head";
import styles from './styles.module.css'; import styles from './styles.module.css';
import Cookies from "js-cookie"; import Cookies from "js-cookie";
@ -80,14 +79,18 @@ const Post = ({ theme, changeTheme }: ThemeProps) => {
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>
<Page.Content width={"var(--main-content-width)"} margin="auto"> <Page.Content width={"var(--main-content-width)"} margin="auto">
{/* {!isLoading && <PostFileExplorer files={post.files} />} */}
{error && <Text type="error">{error}</Text>} {error && <Text type="error">{error}</Text>}
{/* {!error && (isLoading || !post?.files) && <Loading />} */}
{!error && isLoading && <><Text h2><Skeleton width={400} /></Text> {!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
<Document skeleton={true} /> <Document skeleton={true} />
</>} </>}
{!isLoading && post && <> {!isLoading && post && <>
<div className={styles.header}> <div className={styles.header}>
<Text h2>{post.title} <VisibilityBadge visibility={post.visibility} /></Text> <div className={styles.titleAndBadge}>
<Text h2>{post.title}</Text>
<span><VisibilityBadge visibility={post.visibility} /></span>
</div>
<Button auto onClick={download}> <Button auto onClick={download}>
Download as ZIP archive Download as ZIP archive
</Button> </Button>

View file

@ -1,11 +1,23 @@
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
.header .titleAndBadge {
display: flex;
text-align: center;
justify-content: space-between;
align-items: center;
} }
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
.header { .header {
flex-direction: column; flex-direction: column;
} }
}
.header .titleAndBadge {
flex-direction: column;
padding-bottom: var(--gap-double);
}
}