client: misc style improvements

This commit is contained in:
Max Leiter 2022-03-24 19:25:02 -07:00
parent bb893fa6ba
commit 12f25c49a7
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: A3512F2F2F17EBDA
6 changed files with 34 additions and 22 deletions

View file

@ -129,7 +129,7 @@ const Header = () => {
return ( 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}> <div className={styles.tabs}>
<Tabs <Tabs
value={selectedTab} value={selectedTab}

View file

@ -35,8 +35,6 @@ const allowedFileTypes = [
'text/markdown', '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 = [ const allowedFileNames = [
'Makefile', 'Makefile',
'README', 'README',
@ -53,6 +51,15 @@ const allowedFileNames = [
'.env.staging', '.env.staging',
'.env.development.local', '.env.development.local',
'yarn.lock', 'yarn.lock',
'.bash',
'.bashrc',
'.bash_profile',
'.bash_logout',
'.profile',
'.fish_prompt',
'.zshrc',
'.zsh',
'.zprofile',
] ]
const allowedFileExtensions = [ const allowedFileExtensions = [

View file

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

View file

@ -31,5 +31,4 @@
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: center; justify-content: center;
margin-bottom: var(--gap-double); 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 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 { return {
redirect: { redirect: {
destination: '/', destination: '/',