Header and home page improvements

This commit is contained in:
Max Leiter 2022-03-07 18:36:36 -08:00
parent e3321edf9b
commit 247124c7a7
No known key found for this signature in database
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 (
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'}>
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
<div className={styles.fileNameContainer}>
<Input
placeholder="MyFile.md"

View file

@ -11,6 +11,11 @@
display: none;
}
.mobile {
position: relative;
z-index: 1;
}
@media only screen and (max-width: 650px) {
.tabs {
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 { DriftProps } from "../../pages/_app";
import { useEffect, useMemo, useState } from "react";
@ -7,7 +7,7 @@ import { useRouter } from "next/router";
import useSignedIn from "../../lib/hooks/use-signed-in";
import Mobile from "./controls";
import Controls from "./controls";
import NextLink from 'next/link'
const Header = ({ changeTheme, theme }: DriftProps) => {
const router = useRouter();
@ -91,8 +91,8 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
}
return (
<Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"} >
<div className={styles.tabs}>
<Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"}>
{!isMobile && <div className={styles.tabs}>
<Tabs
value={selectedTab}
leftSpace={0}
@ -119,7 +119,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
else return null
})}
</Tabs>
</div>
</div>}
<div className="controls">
{isMobile && (
<Button
@ -131,6 +131,28 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
</Button>
)}
</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 >
)
}

View file

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

View file

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

View file

@ -7,7 +7,7 @@ import { ThemeProps } from './_app'
import Document from '../components/document'
const Home = ({ theme, changeTheme }: ThemeProps) => {
return (
<Page className={styles.container}>
<Page className={styles.container} width="100%">
<Head>
<title>Drift</title>
<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 })
return (
<Page className={styles.container}>
<Page className={styles.container} width="100%">
<Head>
<title>Drift</title>
<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")
}
return (
<Page className={styles.container}>
<Page className={styles.container} width="100%">
<Head>
<title>Drift</title>
<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 { useCallback, useEffect, useState } from "react";
import Document from '../../components/document'

View file

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

View file

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