diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 5806fe2..4d43c9d 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -54,27 +54,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { }, }); - const mainPanelClass = `fixed desktop:left-0 desktop:top-0 desktop:bottom-0 ${ - appLayout.mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]" - }`; - const subPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:w-[20rem] ${ - appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]" - }`; - let contentPanelClass = ""; - if (subPanel) { - contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ - appLayout.mainPanelReduced - ? "desktop:left-[26rem]" - : "desktop:left-[40rem]" - }`; - } else if (contentPanel) { - contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ - appLayout.mainPanelReduced - ? "desktop:left-[6rem]" - : "desktop:left-[20rem]" - }`; - } - const turnSubIntoContent = subPanel && !contentPanel; const titlePrefix = "Accord’s Library"; @@ -115,6 +94,21 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { // eslint-disable-next-line react-hooks/exhaustive-deps }, [currencySelect]); + let gridCol = ""; + if (props.subPanel) { + if (appLayout.mainPanelReduced) { + gridCol = "grid-cols-[6rem_20rem_1fr]"; + } else { + gridCol = "grid-cols-[20rem_20rem_1fr]"; + } + } else { + if (appLayout.mainPanelReduced) { + gridCol = "grid-cols-[6rem_0px_1fr]"; + } else { + gridCol = "grid-cols-[20rem_0px_1fr]"; + } + } + return (
{`${titlePrefix} - ${ogTitle}`} @@ -157,9 +151,32 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { + {/* Background when navbar is opened */} +
+
{ + appLayout.setMainPanelOpen(false); + appLayout.setSubPanelOpen(false); + }} + >
+
+ {/* Content panel */}
{contentPanel ? ( contentPanel @@ -173,38 +190,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { )}
- {/* Background when navbar is opened */} -
-
{ - appLayout.setMainPanelOpen(false); - appLayout.setSubPanelOpen(false); - }} - >
-
- {/* Sub panel */} {subPanel && (
@@ -214,28 +208,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { {/* Main panel */}
- {/* Main panel minimize button*/} -
- appLayout.setMainPanelReduced(!appLayout.mainPanelReduced) - } - > - -
- {/* Navbar */} -
+
{ diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index b7bc9e1..2c41af4 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,12 +1,18 @@ +import { MouseEventHandler } from "react"; + type ChipProps = { className?: string; children: React.ReactNode; + onMouseEnter?: MouseEventHandler; + onMouseLeave?: MouseEventHandler; }; export default function Chip(props: ChipProps): JSX.Element { return (
{props.children}
diff --git a/src/components/Library/LibraryItemsPreview.tsx b/src/components/Library/LibraryItemsPreview.tsx index 85afd83..ed21e81 100644 --- a/src/components/Library/LibraryItemsPreview.tsx +++ b/src/components/Library/LibraryItemsPreview.tsx @@ -55,7 +55,7 @@ export default function LibraryItemsPreview(

{item.subtitle}

-
+
{item.categories.data.map((category) => ( {category.attributes.short} diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 54feaf5..cd75fdf 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -22,10 +22,18 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { slugify: slugify, overrides: { h2: { - component: (props: { id: string; children: React.ReactNode }) => { + component: (props: { + id: string; + style: React.CSSProperties; + children: React.ReactNode; + }) => { return ( -
-

{props.children}

+

+ {props.children} -

+ ); }, }, diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx index 5a72763..4d9660f 100644 --- a/src/components/PanelComponents/NavOption.tsx +++ b/src/components/PanelComponents/NavOption.tsx @@ -1,6 +1,7 @@ import { useRouter } from "next/router"; import Link from "next/link"; -import { MouseEventHandler } from "react"; +import { MouseEventHandler, useState } from "react"; +import ToolTip from "components/ToolTip"; type NavOptionProps = { url: string; @@ -22,11 +23,15 @@ export default function NavOption(props: NavOptionProps): JSX.Element { props.border ? border : "" } ${isActive ? divActive : ""}`; + const [hovered, setHovered] = useState(false); + return (
props.reduced && setHovered(true)} + onMouseLeave={() => setHovered(false)} + className={`relative grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${ props.icon ? "text-left" : "text-center" } ${divCommon}`} > @@ -40,6 +45,11 @@ export default function NavOption(props: NavOptionProps): JSX.Element { {props.subtitle &&

{props.subtitle}

}
)} + + +

{props.title}

+ {props.subtitle &&

{props.subtitle}

} +
); diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index f585633..81cb786 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -24,6 +24,20 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.mainPanelReduced && isDesktop && "px-4" }`} > + {/* Reduce/expand main menu */} +
+ appLayout.setMainPanelReduced(!appLayout.mainPanelReduced) + } + > + +
+
diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index 89f2584..f1fcde4 100644 --- a/src/components/Panels/SubPanel.tsx +++ b/src/components/Panels/SubPanel.tsx @@ -4,7 +4,7 @@ type SubPanelProps = { export default function SubPanel(props: SubPanelProps): JSX.Element { return ( -
+
{props.children}
); diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx index 6f84bd7..257d5c5 100644 --- a/src/components/RecorderChip.tsx +++ b/src/components/RecorderChip.tsx @@ -3,6 +3,9 @@ import { GetContentTextQuery, GetWebsiteInterfaceQuery, } from "graphql/operations-types"; +import { useState } from "react"; +import Img, { ImageQuality } from "./Img"; +import ToolTip from "./ToolTip"; type RecorderChipProps = { className?: string; @@ -13,11 +16,59 @@ type RecorderChipProps = { export default function RecorderChip(props: RecorderChipProps): JSX.Element { const recorder = props.recorder; const langui = props.langui; + + const [hovered, setHovered] = useState(false); + return ( - + setHovered(true)} + onMouseLeave={() => setHovered(false)} + > {recorder.attributes.anonymize ? `Recorder#${recorder.attributes.anonymous_code}` : recorder.attributes.username} + + +
+
+ {recorder.attributes.avatar.data && ( + + )} +

{recorder.attributes.username}

+
+ {recorder.attributes.languages.data.length > 0 && ( +
+

{langui.languages}:

+ {recorder.attributes.languages.data.map((language) => ( + + {language.attributes.code.toUpperCase()} + + ))} +
+ )} + {recorder.attributes.pronouns && ( +
+

{langui.pronouns}:

+ {recorder.attributes.pronouns} +
+ )} +

+ {recorder.attributes.bio.length > 0 && + recorder.attributes.bio[0].bio} +

+
+ ); } diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx new file mode 100644 index 0000000..db41220 --- /dev/null +++ b/src/components/ToolTip.tsx @@ -0,0 +1,80 @@ +import { useEffect, useState } from "react"; + +type ToolTipProps = { + hovered: boolean; + children: React.ReactNode; + delayShow?: number; + direction: "right" | "bottom" | "top" | "left"; + offset: string; +}; + +export default function ToolTip(props: ToolTipProps): JSX.Element { + const { children, hovered, direction, offset } = props; + let { delayShow } = props; + if (delayShow === undefined) delayShow = 500; + + const [show, setShow] = useState(false); + + useEffect(() => { + let timeout = setTimeout(() => {}); + if (hovered) { + timeout = setTimeout(() => hovered && setShow(true), delayShow); + } else { + setShow(false); + } + return () => clearTimeout(timeout); + }, [delayShow, hovered]); + + let tooltipCSS = ""; + let transformCSS = ""; + let arrowParentCSS = ""; + let arrowCSS = ""; + + switch (direction) { + case "left": + tooltipCSS = "[justify-self:end] [align-self:center]"; + transformCSS = `translateX(-${offset})`; + arrowParentCSS = "w-4 -right-4 top-0 bottom-0"; + arrowCSS = "border-l-light"; + break; + + case "right": + tooltipCSS = "[justify-self:start] [align-self:center]"; + transformCSS = `translateX(${offset})`; + arrowParentCSS = "w-4 -left-4 top-0 bottom-0"; + arrowCSS = "border-r-light"; + break; + + case "top": + tooltipCSS = "[align-self:end]"; + transformCSS = `translateY(-${offset})`; + arrowParentCSS = "h-4 -bottom-4 left-0 right-0"; + arrowCSS = "border-t-light"; + break; + + case "bottom": + tooltipCSS = "[align-self:start]"; + transformCSS = `translateY(${offset})`; + arrowParentCSS = "h-4 -top-4 left-0 right-0"; + arrowCSS = "border-b-light"; + break; + } + + return ( +
+
+
+
+
{children}
+
+ ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5bdd564..818ea03 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -15,6 +15,11 @@ export default function Home(props: HomeProps): JSX.Element { const { post } = props; const contentPanel = ( +
+
+

Accord’s Library

+

Discover • Analyse • Translate • Archive

+
{post.translations.length > 0 && ( )}