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

View file

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

View file

@ -1,7 +1,9 @@
.kanji-list {
display: flex;
display: inline-flex;
flex-direction: column;
gap: 2px;
min-height: 0;
}
.kanji-link {
@ -26,4 +28,4 @@
.kanji-link-active {
border-left-color: #09c;
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 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 { Link, useParams } from "react-router-dom";
@ -23,16 +23,14 @@ export default function KanjiPane() {
}
return (
<>
<Grid templateRows="1fr" templateColumns="3fr 5fr">
<GridItem className={styles["kanji-list"]}>
{data && <KanjiList data={data} selectedCharacter={selectedKanji} />}
</GridItem>
<Flex gap={3} className={styles['kanji-pane-container']}>
<Box className={styles["kanji-list"]}>
{data && <KanjiList data={data} selectedCharacter={selectedKanji} />}
</Box>
<GridItem>
{selectedKanji ? <KanjiDisplay kanjiCharacter={selectedKanji} /> : "nothing selected"}
</GridItem>
</Grid>
</>
<Box className={styles['right-side']}>
{selectedKanji ? <KanjiDisplay kanjiCharacter={selectedKanji} /> : "nothing selected"}
</Box>
</Flex>
);
}

View file

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