Header and home page improvements
This commit is contained in:
parent
e3321edf9b
commit
247124c7a7
11 changed files with 41 additions and 16 deletions
|
@ -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"
|
||||
|
|
|
@ -11,6 +11,11 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.tabs {
|
||||
display: none;
|
||||
|
|
|
@ -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 >
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -27,7 +27,7 @@ function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
|
|||
<GeistProvider themeType={themeType} >
|
||||
<CssBaseline />
|
||||
<Component {...pageProps} theme={themeType} changeTheme={changeTheme} />
|
||||
</ GeistProvider>
|
||||
</GeistProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue