client: misc style improvements
This commit is contained in:
parent
bb893fa6ba
commit
12f25c49a7
6 changed files with 34 additions and 22 deletions
|
@ -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}
|
||||||
|
|
|
@ -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 = [
|
||||||
|
|
|
@ -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}>
|
|
||||||
<Text h3 paddingLeft={1 / 2} >
|
|
||||||
<NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
|
<NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
|
||||||
<Link color>{post.title}
|
<Link color marginRight={'var(--gap)'}>
|
||||||
<ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
|
{post.title}
|
||||||
</Link>
|
</Link>
|
||||||
</NextLink>
|
</NextLink>
|
||||||
</Text></Grid>
|
<div style={{ display: 'inline-flex' }}>
|
||||||
<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>
|
<VisibilityBadge visibility={post.visibility} />
|
||||||
</Grid.Container>
|
</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} />
|
<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} />
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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: '/',
|
||||||
|
|
Loading…
Reference in a new issue