client: misc style improvements

This commit is contained in:
Max Leiter 2022-03-24 19:25:02 -07:00
parent bb893fa6ba
commit 12f25c49a7
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
6 changed files with 34 additions and 22 deletions

View file

@ -129,7 +129,7 @@ const Header = () => {
return (
<Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={'var(--gap-double)'} paddingTop={"var(--gap)"}>
<Page.Header height={'var(--page-nav-height)'} marginBottom={2}>
<div className={styles.tabs}>
<Tabs
value={selectedTab}

View file

@ -35,8 +35,6 @@ const allowedFileTypes = [
'text/markdown',
]
// Files with no extension can't be easily detected as plain-text,
// so instead of allowing all of them we'll just allow common ones
const allowedFileNames = [
'Makefile',
'README',
@ -53,6 +51,15 @@ const allowedFileNames = [
'.env.staging',
'.env.development.local',
'yarn.lock',
'.bash',
'.bashrc',
'.bash_profile',
'.bash_logout',
'.profile',
'.fish_prompt',
'.zshrc',
'.zsh',
'.zprofile',
]
const allowedFileExtensions = [

View file

@ -2,10 +2,9 @@
import NextLink from "next/link"
import { useEffect, useMemo, useState } from "react"
import timeAgo from "@lib/time-ago"
import ShiftBy from "../shift-by"
import VisibilityBadge from "../visibility-badge"
import getPostPath from "@lib/get-post-path"
import { Input, Link, Text, Card, Spacer, Grid, Tooltip, Divider } from "@geist-ui/core"
import { Input, Link, Text, Card, Spacer, Grid, Tooltip, Divider, Badge } from "@geist-ui/core"
const FilenameInput = ({ title }: { title: string }) => <Input
value={title || 'No title'}
@ -32,22 +31,29 @@ const ListItem = ({ post }: { post: any }) => {
const formattedTime = `${createdDate.toLocaleDateString()} ${createdDate.toLocaleTimeString()}`
return (<li key={post.id}>
<Card style={{ overflowY: 'scroll' }}>
<Spacer height={1 / 2} />
<Grid.Container>
<Grid md={14} xs={14}>
<Text h3 paddingLeft={1 / 2} >
<NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
<Link color>{post.title}
<ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
</Link>
</NextLink>
</Text></Grid>
<Grid paddingLeft={1 / 2} md={5} xs={9}><Text type="secondary" h5><Tooltip text={formattedTime}>{time}</Tooltip></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>
<Card.Body>
<Text h3>
<NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
<Link color marginRight={'var(--gap)'}>
{post.title}
</Link>
</NextLink>
<div style={{ display: 'inline-flex' }}>
<span>
<VisibilityBadge visibility={post.visibility} />
</span>
<span style={{ marginLeft: 'var(--gap)' }}>
<Badge type="secondary"><Tooltip text={formattedTime}>{time}</Tooltip></Badge>
</span>
<span style={{ marginLeft: 'var(--gap)' }}>
<Badge type="secondary">{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Badge>
</span>
</div>
</Text>
</Card.Body>
<Divider h="1px" my={0} />
<Card.Content>
{post.files.map((file: any) => {
return <FilenameInput key={file.id} title={file.title} />

View file

@ -31,5 +31,4 @@
flex-direction: column-reverse;
justify-content: center;
margin-bottom: var(--gap-double);
margin-top: var(--gap-double);
}

View file

@ -17,7 +17,7 @@ const VisibilityBadge = ({ visibility }: Props) => {
}
}
return (<Badge marginLeft={'var(--gap)'} type={getBadgeType()}>{visibility}</Badge>)
return (<Badge type={getBadgeType()}>{visibility}</Badge>)
}
export default VisibilityBadge

View file

@ -40,7 +40,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req }) => {
}
})
if (!posts.ok || posts.status !== 200) {
if (!posts.ok) {
return {
redirect: {
destination: '/',