This commit is contained in:
Michael Zhang 2023-06-11 15:08:17 -05:00
parent 31728966c5
commit cb5340da17
6 changed files with 49 additions and 27 deletions

View file

@ -1,9 +1,11 @@
$navLinkAccentColor: #09c; $navLinkAccentColor: #09c;
$navLinkColor: hsl(203, 91%, 91%); $navLinkColor: hsl(203, 91%, 91%);
main.main { .main {
display: flex; min-height: 0;
display: inline-flex;
flex-direction: column; flex-direction: column;
height: 100%;
} }
.header { .header {
@ -19,6 +21,13 @@ main.main {
} }
} }
.body {
min-height: 0;
flex-basis: 0px;
flex-grow: 1;
display: inline-flex;
}
.link { .link {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -41,4 +50,4 @@ main.main {
.link-active { .link-active {
border-top-color: $navLinkAccentColor; border-top-color: $navLinkAccentColor;
background-color: $navLinkColor; background-color: $navLinkColor;
} }

View file

@ -1,7 +1,7 @@
import { Link, RouterProvider, createHashRouter } from "react-router-dom"; import { Link, RouterProvider, createHashRouter } from "react-router-dom";
import KanjiPane from "./panes/KanjiPane"; import KanjiPane from "./panes/KanjiPane";
import classNames from "classnames"; import classNames from "classnames";
import { ChakraProvider } from "@chakra-ui/react"; import { ChakraProvider, Flex } from "@chakra-ui/react";
import { createBrowserRouter } from "react-router-dom"; import { createBrowserRouter } from "react-router-dom";
import { Outlet, Route, createRoutesFromElements, matchPath, useLocation } from "react-router"; import { Outlet, Route, createRoutesFromElements, matchPath, useLocation } from "react-router";
import SrsPane from "./panes/SrsPane"; import SrsPane from "./panes/SrsPane";
@ -16,7 +16,7 @@ function Layout() {
const location = useLocation(); const location = useLocation();
return ( return (
<main className={styles.main}> <Flex className={styles.main} direction="column" alignSelf="start">
<ul className={styles.header}> <ul className={styles.header}>
{navLinks.map((navLink) => { {navLinks.map((navLink) => {
const active = ( const active = (
@ -35,8 +35,10 @@ function Layout() {
})} })}
</ul> </ul>
<Outlet /> <div className={styles.body}>
</main> <Outlet />
</div>
</Flex>
); );
} }
@ -58,12 +60,7 @@ export default function App() {
}); });
} else { } else {
return ( return (
<Route <Route key={`route-${route.key}`} index={idx == 0} path={route.path} element={route.element} />
key={`route-${route.key}`}
index={idx == 0}
path={route.path}
element={route.element}
/>
); );
} }
})} })}

View file

@ -1,7 +1,9 @@
.kanji-list { .kanji-list {
display: flex; display: inline-flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
min-height: 0;
} }
.kanji-link { .kanji-link {
@ -26,4 +28,4 @@
.kanji-link-active { .kanji-link-active {
border-left-color: #09c; border-left-color: #09c;
background-color: hsl(203, 91%, 91%); background-color: hsl(203, 91%, 91%);
} }

View file

@ -0,0 +1,16 @@
.kanji-pane-container {
display: flex;
width: 100%;
}
.kanji-list {
// display: flex;
// flex-direction: column;
min-height: 0;
width: 240px;
}
.right-side {
flex-grow: 5;
}

View file

@ -1,6 +1,6 @@
import { invoke } from "@tauri-apps/api/tauri"; import { invoke } from "@tauri-apps/api/tauri";
import useSWR from "swr"; import useSWR from "swr";
import { Box, Grid, GridItem, LinkBox, Stack } from "@chakra-ui/layout"; import { Box, Flex, Grid, GridItem, LinkBox, Stack } from "@chakra-ui/layout";
import styles from "./KanjiPane.module.scss"; import styles from "./KanjiPane.module.scss";
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
@ -23,16 +23,14 @@ export default function KanjiPane() {
} }
return ( return (
<> <Flex gap={3} className={styles['kanji-pane-container']}>
<Grid templateRows="1fr" templateColumns="3fr 5fr"> <Box className={styles["kanji-list"]}>
<GridItem className={styles["kanji-list"]}> {data && <KanjiList data={data} selectedCharacter={selectedKanji} />}
{data && <KanjiList data={data} selectedCharacter={selectedKanji} />} </Box>
</GridItem>
<GridItem> <Box className={styles['right-side']}>
{selectedKanji ? <KanjiDisplay kanjiCharacter={selectedKanji} /> : "nothing selected"} {selectedKanji ? <KanjiDisplay kanjiCharacter={selectedKanji} /> : "nothing selected"}
</GridItem> </Box>
</Grid> </Flex>
</>
); );
} }

View file

@ -11,4 +11,4 @@ body {
body { body {
overflow: hidden; overflow: hidden;
} }