sigh
This commit is contained in:
parent
31728966c5
commit
cb5340da17
6 changed files with 49 additions and 27 deletions
|
@ -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;
|
||||
}
|
||||
}
|
17
src/App.tsx
17
src/App.tsx
|
@ -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} />
|
||||
);
|
||||
}
|
||||
})}
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -11,4 +11,4 @@ body {
|
|||
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue