Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Moved things around as Content is now separate from library

This commit is contained in:
DrMint 2022-02-21 19:08:15 +01:00
parent 044dd5b265
commit 3ce7cd487c
10 changed files with 60 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/AppLayout.tsx
View File

@ -5,7 +5,7 @@ import { useSwipeable } from "react-swipeable";
import { useRouter } from "next/router";
import Button from "components/Button";
import { prettyLanguage } from "queries/helpers";
import { useMediaMobile } from "hooks/useMediaQuery";
import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery";
import { useSelector, useDispatch } from "react-redux";
import {
@ -28,6 +28,9 @@ type AppLayoutProps = {
export default function AppLayout(props: AppLayoutProps): JSX.Element {
const titlePrefix = "Accord’s Library";
const router = useRouter();
const dispatch = useDispatch();
const isMobile = useMediaMobile();
const isCoarse = useMediaCoarse();
const languagePanelOpen = useSelector(
(state: RootState) => state.appLayout.languagePanelOpen
@ -42,9 +45,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
(state: RootState) => state.appLayout.subPanelOpen
);
const dispatch = useDispatch();
const isMobile = useMediaMobile();
const sensibilitySwipe = 1.1;
const handlers = useSwipeable({
@ -225,7 +225,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
effect="solid"
delayShow={300}
delayHide={100}
disable={!mainPanelReduced || isMobile}
disable={!mainPanelReduced || isMobile || isCoarse}
className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left"
/>
</div>

2
src/components/PanelComponents/NavOption.tsx
View File

@ -28,6 +28,7 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
<div
onClick={props.onClick}
data-html
data-multiline
data-tip={`
<div class="px-4 py-3">
<h3 class="text-2xl">${props.title}</h3>
@ -39,7 +40,6 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
</div>
`}
data-for={props.tooltipId}
data-multiline
className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
props.icon ? "text-left" : "text-center"
} ${divCommon}`}

10
src/components/Panels/MainPanel.tsx
View File

@ -91,6 +91,16 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
onClick={() => dispatch(setMainPanelOpen(false))}
/>
<NavOption
url="/contents"
icon="workspaces"
title="Contents"
subtitle="Explore all content and filter by type or category"
tooltipId="MainPanelTooltip"
reduced={mainPanelReduced && isDesktop}
onClick={() => dispatch(setMainPanelOpen(false))}
/>
<NavOption
url="/wiki"
icon="travel_explore"

7
src/hooks/useMediaQuery.ts
View File

@ -45,3 +45,10 @@ export function useMediaDesktop() {
return useMediaQuery("(min-width: 60rem)");
}
export function useMediaCoarse() {
return useMediaQuery("(pointer: coarse)");
}
export function useMediaFine() {
return useMediaQuery("(pointer: fine)");
}

0
src/pages/library/content/[slug]/index.tsx → src/pages/contents/[slug]/index.tsx
View File

0
src/pages/library/content/[slug]/read.tsx → src/pages/contents/[slug]/read.tsx
View File

0
src/pages/library/content/index.tsx → src/pages/contents/index.tsx
View File

0
src/pages/library/items/[slug].tsx → src/pages/library/[slug].tsx
View File

54
src/pages/library/index.tsx
View File

@ -1,12 +1,24 @@
import { GetStaticProps } from "next";
import SubPanel from "components/Panels/SubPanel";
import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
import { getWebsiteInterface } from "graphql/operations";
import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import {
GetLibraryItemsPreviewQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import {
getLibraryItemsPreview,
getWebsiteInterface,
} from "graphql/operations";
import PanelHeader from "components/PanelComponents/PanelHeader";
import AppLayout from "components/AppLayout";
import NavOption from "components/PanelComponents/NavOption";
import ReturnButton from "components/PanelComponents/ReturnButton";
import HorizontalLine from "components/HorizontalLine";
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
type LibraryProps = {
libraryItems: GetLibraryItemsPreviewQuery;
langui: GetWebsiteInterfaceQuery;
};
@ -14,31 +26,34 @@ export default function Library(props: LibraryProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
<SubPanel>
<ReturnButton
href="/library"
title={langui.main_library}
langui={langui}
/>
<HorizontalLine />
<PanelHeader
icon="library_books"
title={langui.main_library}
description={langui.library_description}
/>
<NavOption
url="/library/items"
title={langui.library_items}
subtitle={langui.library_items_description}
border
/>
<NavOption
url="/library/content"
title={langui.library_content}
subtitle={langui.library_content_description}
border
description={langui.library_items_description}
/>
</SubPanel>
);
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]">
{props.libraryItems.libraryItems.data.map((item) => (
<LibraryItemsPreview key={item.id} item={item.attributes} />
))}
</div>
</ContentPanel>
);
return (
<AppLayout
title={langui.main_library}
title={langui.library_items}
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}
/>
);
}
@ -46,6 +61,9 @@ export default function Library(props: LibraryProps): JSX.Element {
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: LibraryProps = {
libraryItems: await getLibraryItemsPreview({
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),

77
src/pages/library/items/index.tsx
View File

@ -1,77 +0,0 @@
import { GetStaticProps } from "next";
import SubPanel from "components/Panels/SubPanel";
import ContentPanel, {
ContentPanelWidthSizes,
} from "components/Panels/ContentPanel";
import {
GetLibraryItemsPreviewQuery,
GetWebsiteInterfaceQuery,
} from "graphql/operations-types";
import {
getLibraryItemsPreview,
getWebsiteInterface,
} from "graphql/operations";
import PanelHeader from "components/PanelComponents/PanelHeader";
import AppLayout from "components/AppLayout";
import ReturnButton from "components/PanelComponents/ReturnButton";
import HorizontalLine from "components/HorizontalLine";
import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
type LibraryProps = {
libraryItems: GetLibraryItemsPreviewQuery;
langui: GetWebsiteInterfaceQuery;
};
export default function Library(props: LibraryProps): JSX.Element {
const langui = props.langui.websiteInterfaces.data[0].attributes;
const subPanel = (
<SubPanel>
<ReturnButton
href="/library"
title={langui.main_library}
langui={langui}
/>
<HorizontalLine />
<PanelHeader
icon="library_books"
title={langui.library_items}
description={langui.library_items_description}
/>
</SubPanel>
);
const contentPanel = (
<ContentPanel width={ContentPanelWidthSizes.large}>
<div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]">
{props.libraryItems.libraryItems.data.map((item) => (
<LibraryItemsPreview key={item.id} item={item.attributes} />
))}
</div>
</ContentPanel>
);
return (
<AppLayout
title={langui.library_items}
langui={langui}
subPanel={subPanel}
contentPanel={contentPanel}
/>
);
}
export const getStaticProps: GetStaticProps = async (context) => {
if (context.locale) {
const props: LibraryProps = {
libraryItems: await getLibraryItemsPreview({
language_code: context.locale,
}),
langui: await getWebsiteInterface({
language_code: context.locale,
}),
};
return {
props: props,
};
} else {
return { props: {} };
}
};