client: improve responsiveness
This commit is contained in:
parent
c9f84fe69c
commit
9ba17db6f9
6 changed files with 32 additions and 18 deletions
|
@ -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>
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue