Header and home page improvements

This commit is contained in:
Max Leiter 2022-03-07 18:36:36 -08:00
parent e3321edf9b
commit 247124c7a7
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
11 changed files with 41 additions and 16 deletions

View file

@ -30,7 +30,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
} }
return ( return (
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'}> <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
<div className={styles.fileNameContainer}> <div className={styles.fileNameContainer}>
<Input <Input
placeholder="MyFile.md" placeholder="MyFile.md"

View file

@ -11,6 +11,11 @@
display: none; display: none;
} }
.mobile {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 650px) { @media only screen and (max-width: 650px) {
.tabs { .tabs {
display: none; display: none;

View file

@ -1,4 +1,4 @@
import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, useTheme, Tabs, Loading } from "@geist-ui/core"; import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, useTheme, Tabs, Loading, Spacer } from "@geist-ui/core";
import { Moon, Sun, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon } from "@geist-ui/icons"; import { Moon, Sun, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon } from "@geist-ui/icons";
import { DriftProps } from "../../pages/_app"; import { DriftProps } from "../../pages/_app";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
@ -7,7 +7,7 @@ import { useRouter } from "next/router";
import useSignedIn from "../../lib/hooks/use-signed-in"; import useSignedIn from "../../lib/hooks/use-signed-in";
import Mobile from "./controls"; import Mobile from "./controls";
import Controls from "./controls"; import Controls from "./controls";
import NextLink from 'next/link'
const Header = ({ changeTheme, theme }: DriftProps) => { const Header = ({ changeTheme, theme }: DriftProps) => {
const router = useRouter(); const router = useRouter();
@ -91,8 +91,8 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
} }
return ( return (
<Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"} > <Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"}>
<div className={styles.tabs}> {!isMobile && <div className={styles.tabs}>
<Tabs <Tabs
value={selectedTab} value={selectedTab}
leftSpace={0} leftSpace={0}
@ -119,7 +119,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
else return null else return null
})} })}
</Tabs> </Tabs>
</div> </div>}
<div className="controls"> <div className="controls">
{isMobile && ( {isMobile && (
<Button <Button
@ -131,6 +131,28 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
</Button> </Button>
)} )}
</div> </div>
{isMobile && expanded && (<div className={styles.mobile}>
<ButtonGroup vertical>
{pages.map((tab, index) => {
if (tab.condition)
return <Button
key={`${tab.name}-${index}`}
onClick={() => {
const nameMatch = pages.find(page => page.name === tab.name)
if (nameMatch?.action) {
nameMatch.action()
} else {
router.push(`${tab.href}`)
}
}}
icon={tab.icon}
>
{tab.name}
</Button>
})}
</ButtonGroup>
</div>)}
</Page.Header > </Page.Header >
) )
} }

View file

@ -1,7 +1,5 @@
.markdownPreview { .markdownPreview {
position: relative; position: relative;
padding: var(--gap);
padding-top: 0;
overflow-y: auto; overflow-y: auto;
} }
@ -47,7 +45,6 @@
content: ""; content: "";
} }
/* circles for sublists */
.markdownPreview ul ul { .markdownPreview ul ul {
list-style: circle; list-style: circle;
} }

View file

@ -27,7 +27,7 @@ function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
<GeistProvider themeType={themeType} > <GeistProvider themeType={themeType} >
<CssBaseline /> <CssBaseline />
<Component {...pageProps} theme={themeType} changeTheme={changeTheme} /> <Component {...pageProps} theme={themeType} changeTheme={changeTheme} />
</ GeistProvider> </GeistProvider>
) )
} }

View file

@ -7,7 +7,7 @@ import { ThemeProps } from './_app'
import Document from '../components/document' import Document from '../components/document'
const Home = ({ theme, changeTheme }: ThemeProps) => { const Home = ({ theme, changeTheme }: ThemeProps) => {
return ( return (
<Page className={styles.container}> <Page className={styles.container} width="100%">
<Head> <Head>
<title>Drift</title> <title>Drift</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" /> <meta name="description" content="A self-hostable clone of GitHub Gist" />

View file

@ -11,7 +11,7 @@ const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: ()
const { isLoading, isSignedIn } = useSignedIn({ redirectIfNotAuthed: true }) const { isLoading, isSignedIn } = useSignedIn({ redirectIfNotAuthed: true })
return ( return (
<Page className={styles.container}> <Page className={styles.container} width="100%">
<Head> <Head>
<title>Drift</title> <title>Drift</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" /> <meta name="description" content="A self-hostable clone of GitHub Gist" />

View file

@ -14,7 +14,7 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
router.push("/signin") router.push("/signin")
} }
return ( return (
<Page className={styles.container}> <Page className={styles.container} width="100%">
<Head> <Head>
<title>Drift</title> <title>Drift</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" /> <meta name="description" content="A self-hostable clone of GitHub Gist" />

View file

@ -1,4 +1,5 @@
import { Loading, Page, Text } from "@geist-ui/core"; import { Loading, Text } from "@geist-ui/core";
import Page from '../../components/page/Page'
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import Document from '../../components/document' import Document from '../../components/document'

View file

@ -4,7 +4,7 @@ import Header from "../components/header";
import { ThemeProps } from "./_app"; import { ThemeProps } from "./_app";
const SignIn = ({ theme, changeTheme }: ThemeProps) => ( const SignIn = ({ theme, changeTheme }: ThemeProps) => (
<Page> <Page width={"100%"}>
<Page.Header> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>

View file

@ -4,7 +4,7 @@ import Header from "../components/header";
import { ThemeProps } from "./_app"; import { ThemeProps } from "./_app";
const SignUp = ({ theme, changeTheme }: ThemeProps) => ( const SignUp = ({ theme, changeTheme }: ThemeProps) => (
<Page> <Page width="100%">
<Page.Header> <Page.Header>
<Header theme={theme} changeTheme={changeTheme} /> <Header theme={theme} changeTheme={changeTheme} />
</Page.Header> </Page.Header>