diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx index 0cda8c4..69540f8 100644 --- a/src/components/Chronology/ChronologyItemComponent.tsx +++ b/src/components/Chronology/ChronologyItemComponent.tsx @@ -1,20 +1,14 @@ import { GetChronologyItemsQuery } from "graphql/operations-types"; -import styles from "styles/Chronology/ChronologyItemComponent.module.css"; export type ChronologyItemComponentProps = { - item: GetChronologyItemsQuery['chronologyItems']['data'][number]; + item: GetChronologyItemsQuery["chronologyItems"]["data"][number]; displayYear: boolean; }; export default function ChronologyItemComponent( props: ChronologyItemComponentProps ): JSX.Element { - function generateAnchor( - year: number, - month: number, - day: number, - event?: number - ): string { + function generateAnchor(year: number, month: number, day: number): string { let result: string = ""; result += year; if (month) result += "-" + month.toString().padStart(2, "0"); @@ -59,7 +53,7 @@ export default function ChronologyItemComponent( return (
{props.displayYear ? ( -

+

{generateYear( props.item.attributes.displayed_date, props.item.attributes.year @@ -77,13 +71,13 @@ export default function ChronologyItemComponent( "" )} -

+

{generateDate(props.item.attributes.month, props.item.attributes.day)}

-
+
{props.item.attributes.events.map((event) => ( -
+
{event.translations.map((translation) => ( <> {translation.title ?

{translation.title}

: ""} @@ -91,7 +85,9 @@ export default function ChronologyItemComponent( {translation.description ? (

1 ? styles.bulletItem : "" + event.translations.length > 1 + ? "before:content-['-'] before:text-dark before:inline-block before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line" + : "whitespace-pre-line" } > {translation.description} @@ -107,7 +103,7 @@ export default function ChronologyItemComponent( ))} -

+

{event.source.data ? "(" + event.source.data.attributes.name + ")" : "(WARNING: NO SOURCE!)"} diff --git a/src/components/Chronology/ChronologyYearComponent.tsx b/src/components/Chronology/ChronologyYearComponent.tsx index cdcf3c5..8136ac0 100644 --- a/src/components/Chronology/ChronologyYearComponent.tsx +++ b/src/components/Chronology/ChronologyYearComponent.tsx @@ -1,4 +1,3 @@ -import styles from "styles/Chronology/ChronologyYearComponent.module.css"; import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent"; import { GetChronologyItemsQuery } from "graphql/operations-types"; @@ -12,7 +11,7 @@ export default function ChronologyYearComponent( ): JSX.Element { return (

1 ? props.year.toString() : undefined} > {props.items.map((item, index) => ( diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx index 18f36a0..279f132 100644 --- a/src/components/Panels/ContentPanel.tsx +++ b/src/components/Panels/ContentPanel.tsx @@ -1,13 +1,22 @@ type ContentPanelProps = { children: React.ReactNode; + autoformat?: boolean; }; export default function ContentPanel(props: ContentPanelProps): JSX.Element { - return ( -
-
- {props.children} -
-
- ); + if (props.autoformat) { + return ( +
+
+ {props.children} +
+
+ ); + } else { + return ( +
+
{props.children}
+
+ ); + } } diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index dc1fff9..aafa4f4 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -1,15 +1,17 @@ import Link from "next/link"; -import styles from "styles/Panels/MainPanel.module.css"; -import panelStyles from "styles/Panels/Panels.module.css"; import NavOption from "components/Panels/NavOption"; export default function MainPanel(): JSX.Element { return ( -
+
-
- -

Accord's Library

+
+ +

Accord's Library

@@ -70,9 +72,21 @@ export default function MainPanel(): JSX.Element {

- - - + + +

@@ -80,12 +94,12 @@ export default function MainPanel(): JSX.Element { ENIX CO. LTD. All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD.

- diff --git a/src/components/Panels/NavOption.tsx b/src/components/Panels/NavOption.tsx index 2bfdf92..af18a9f 100644 --- a/src/components/Panels/NavOption.tsx +++ b/src/components/Panels/NavOption.tsx @@ -1,28 +1,39 @@ import { useRouter } from "next/router"; -import styles from "styles/Panels/NavOption.module.css"; import Link from "next/link"; type NavOptionProps = { url: string; icon?: string; - title: string | null | undefined; + title: string; subtitle?: string; border?: boolean; }; -export default function NavOption(pageProps: NavOptionProps): JSX.Element { +export default function NavOption(props: NavOptionProps): JSX.Element { const router = useRouter(); - let classNames = [styles.menuOption]; - if (router.asPath.startsWith(pageProps.url)) classNames.push(styles.active); - if (pageProps.icon) classNames.push(styles.icon); - if (pageProps.border === true) classNames.push(styles.border); - return ( - -
- {pageProps.icon && } -

{pageProps.title}

- {pageProps.subtitle &&

{pageProps.subtitle}

} -
- - ); + const isActive = router.asPath.startsWith(props.url); + const divActive = "bg-mid" + const border = "border-2 border-mid"; + const divCommon = `gap-x-4 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid transition-colors ${props.border ? border: ""} ${isActive ? divActive : ""}`; + + if (props.icon) { + return ( + +
+ +

{props.title}

+ {props.subtitle &&

{props.subtitle}

} +
+ + ); + } else { + return ( + +
+

{props.title}

+ {props.subtitle &&

{props.subtitle}

} +
+ + ); + } } diff --git a/src/components/Panels/ReturnButton.tsx b/src/components/Panels/ReturnButton.tsx index 72cb202..fcdfd44 100644 --- a/src/components/Panels/ReturnButton.tsx +++ b/src/components/Panels/ReturnButton.tsx @@ -1,4 +1,3 @@ -import styles from "styles/Panels/ReturnButton.module.css"; import Link from "next/link"; type ReturnButtonProps = { diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index 7f737bc..26b3734 100644 --- a/src/components/Panels/SubPanel.tsx +++ b/src/components/Panels/SubPanel.tsx @@ -1,13 +1,10 @@ -import styles from "styles/Panels/SubPanel.module.css"; -import panelStyles from "styles/Panels/Panels.module.css"; - type SubPanelProps = { children: React.ReactNode; }; export default function SubPanel(props: SubPanelProps): JSX.Element { return ( -
+
{props.children}
); diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 604da08..ac0db0d 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -1,7 +1,41 @@ -export type GetErasQueryVariables = { - language_code: string; +export type Exact = T; +export type InputMaybe = T; +export type Scalars = { + ID: string; + String: string; + Boolean: boolean; + Int: number; + Float: number; + JSON: any; + DateTime: any; + Time: any; + Upload: any; + LibraryContentRangeDynamicZoneInput: any; + LibraryItemMetadataDynamicZoneInput: any; + SourceSourceDynamicZoneInput: any; }; +/* + The following is generated using https://www.graphql-code-generator.com/ + With the following codegen.yml: + + generates: + operations-types.ts: + plugins: + - typescript-operations + + And the schema.graphql and operation.graphql files from this folder. + + But to make the type easier to work with, it went through the following transformation: + - Removed ? + - Removed | null + - Removed | undefined +*/ + +export type GetErasQueryVariables = Exact<{ + language_code: InputMaybe; +}>; + export type GetErasQuery = { __typename: "Query"; chronologyEras: { @@ -23,9 +57,9 @@ export type GetErasQuery = { }; }; -export type GetChronologyItemsQueryVariables = { - language_code: string; -}; +export type GetChronologyItemsQueryVariables = Exact<{ + language_code: InputMaybe; +}>; export type GetChronologyItemsQuery = { __typename: "Query"; @@ -66,9 +100,9 @@ export type GetChronologyItemsQuery = { }; }; -export type GetLibraryItemsPreviewQueryVariables = { - language_code: string; -}; +export type GetLibraryItemsPreviewQueryVariables = Exact<{ + language_code: InputMaybe; +}>; export type GetLibraryItemsPreviewQuery = { __typename: "Query"; @@ -133,9 +167,9 @@ export type GetLibraryItemsPreviewQuery = { }; }; -export type GetLibraryItemsSkeletonQueryVariables = { +export type GetLibraryItemsSkeletonQueryVariables = Exact<{ [key: string]: never; -}; +}>; export type GetLibraryItemsSkeletonQuery = { __typename: "Query"; @@ -181,10 +215,10 @@ export type GetLibraryItemsSkeletonQuery = { }; }; -export type GetLibraryItemQueryVariables = { - slug: string; - language_code: string; -}; +export type GetLibraryItemQueryVariables = Exact<{ + slug: InputMaybe; + language_code: InputMaybe; +}>; export type GetLibraryItemQuery = { __typename: "Query"; @@ -213,14 +247,12 @@ export type GetLibraryItemQuery = { }; }; }; - release_date: { __typename: "ComponentBasicsDatepicker"; year: number; month: number; day: number; }; - price: { __typename: "ComponentBasicsPrice"; amount: number; @@ -236,22 +268,16 @@ export type GetLibraryItemQuery = { }; }; }; - size: { __typename: "ComponentBasicsSize"; width: number; height: number; thickness: number; }; - - descriptions: Array< - | { - __typename: "ComponentTranslationsLibraryItems"; - description: string; - } - | undefined - >; - + descriptions: Array<{ + __typename: "ComponentTranslationsLibraryItems"; + description: string; + }>; subitems: { __typename: "LibraryItemRelationResponseCollection"; data: Array<{ @@ -270,13 +296,9 @@ export type GetLibraryItemQuery = { __typename: "UploadFile"; name: string; alternativeText: string; - caption: string; - width: number; - height: number; - url: string; }; }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6a0f51d..3c5af70 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,6 @@ import type { AppProps } from "next/app"; import MainPanel from "components/Panels/MainPanel"; -import "styles/index.css"; +import "tailwind.css"; import "@fontsource/zen-maru-gothic/500.css"; import "@fontsource/vollkorn/700.css"; @@ -17,23 +17,19 @@ export function applyCustomAppProps( } export default function AccordsLibraryApp(appProps: AppProps) { - // Apply a different style depending on the given CustomAppProps - let mainClasses = "grid min-h-screen grid-flow-col"; - if ( - appProps.Component.customAppProps.useSubPanel && - appProps.Component.customAppProps.useContentPanel - ) { - mainClasses += " grid-cols-appUseSubContent"; - } else if (appProps.Component.customAppProps.useSubPanel) { - mainClasses += " grid-cols-appUseSub"; - } else if (appProps.Component.customAppProps.useContentPanel) { - mainClasses += " grid-cols-appUseContent"; - } else { - mainClasses += " grid-cols-appDefault"; - } - return ( -
+
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 0a77d4e..74f0100 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -13,7 +13,7 @@ export default function Home(): JSX.Element { Accord’s Library - Home - +

Discover • Analyse • Translate • Archive

What is this?

diff --git a/src/styles/Chronology/ChronologyItemComponent.module.css b/src/styles/Chronology/ChronologyItemComponent.module.css deleted file mode 100644 index 6f4e16d..0000000 --- a/src/styles/Chronology/ChronologyItemComponent.module.css +++ /dev/null @@ -1,66 +0,0 @@ -.chronologyItem { - display: grid; - grid-template-areas: - "year events" - "date events" - ; - grid-column-gap: 1em; - place-content: start; - grid-template-rows: auto 1fr; - grid-template-columns: 4em; - padding: 1em 2em; -} - -.chronologyItem:target { - background-color: var(--color-main-base); - border-radius: 1em; -} - -.chronologyItem > .year { - grid-area: year; - margin: 0; - font-weight: bold; - font-size: 1.3em; - margin-top: -0.25em; -} - -.chronologyItem > .date { - grid-area: date; - margin: 0; - color: var(--color-main-dark); - font-size: 0.9em; -} - -.chronologyItem > .events { - grid-area: events; -} - -.event > h3 { - margin: 0; -} - -.event > p { - margin: 0; - white-space: break-spaces; -} - -.event > .bulletItem::before { - content: "⁃"; - color: var(--color-main-dark); - display: inline-block; - width: 1em; - margin-left: -1em -} - -.event > .bulletItem { - margin-top: .5em; -} - -.event ~ .event { - margin-top: 1em; -} - -.source { - color: var(--color-main-dark); - font-size: 80%; -} \ No newline at end of file diff --git a/src/styles/Chronology/ChronologyYearComponent.module.css b/src/styles/Chronology/ChronologyYearComponent.module.css deleted file mode 100644 index 4fc5284..0000000 --- a/src/styles/Chronology/ChronologyYearComponent.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.chronologyYear:target { - background-color: var(--color-main-base); - border-radius: 1em; - padding: 1em 2em 1em 1.5em; -} \ No newline at end of file diff --git a/src/styles/Library/LibraryItemComponent.module.css b/src/styles/Library/LibraryItemComponent.module.css deleted file mode 100644 index 2ec8c88..0000000 --- a/src/styles/Library/LibraryItemComponent.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.libraryItem { - cursor: pointer; -} \ No newline at end of file diff --git a/src/styles/Panels/ContentPanel.module.css b/src/styles/Panels/ContentPanel.module.css deleted file mode 100644 index a94b6ac..0000000 --- a/src/styles/Panels/ContentPanel.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.panel { - padding-top: 5rem; - scrollbar-width: thin; - border: none; -} - -.panelInside { - max-width: 50rem; - text-align: justify; - text-justify: inter-word; -} - -.panel::-webkit-scrollbar { - display: unset; -} \ No newline at end of file diff --git a/src/styles/Panels/MainPanel.module.css b/src/styles/Panels/MainPanel.module.css deleted file mode 100644 index 4375dd7..0000000 --- a/src/styles/Panels/MainPanel.module.css +++ /dev/null @@ -1,59 +0,0 @@ -.topLogo { - display: grid; - place-items: center; - cursor: pointer; -} - -.topLogo > h2 { - margin-top: 1rem; -} - -.topLogo > img { - width: 50%; - height: auto; - place-self: start center; -} - -.menuFooter { - text-align: center; -} - -.menuFooterCC { - margin-top: 1rem; - margin-bottom: 2rem; - display: grid; - height: 1rem; - grid-auto-flow: column; - place-content: center; - grid-gap: .2rem; -} - -.menuFooterCC img { - height: 1.5rem; - width: auto; -} - -.menuFooterCC:hover img { - filter: var(--filter-color-main-dark); -} - - -.menuFooterSocials { - margin-top: 3rem; - margin-bottom: 1rem; - display: grid; - height: 1rem; - grid-auto-flow: column; - place-content: center; - grid-gap: 2rem; -} - -.menuFooterSocials img { - height: 2rem; - width: auto; - transition: .1s filter; -} - -.menuFooterSocials img:hover { - filter: var(--filter-color-main-dark); -} \ No newline at end of file diff --git a/src/styles/Panels/NavOption.module.css b/src/styles/Panels/NavOption.module.css deleted file mode 100644 index 7c337cf..0000000 --- a/src/styles/Panels/NavOption.module.css +++ /dev/null @@ -1,46 +0,0 @@ -.menuOption { - display: grid; - grid-template-areas: 'title' 'subtitle'; - align-items: center; - border-radius: 1em; - grid-column-gap: 1em; - cursor: pointer; - padding: 0.6em 1.2em; - width: 100%; - transition: .1s background-color; - text-align: center; -} - -.menuOption.icon { - grid-template-areas: 'icon title' '. subtitle'; - grid-template-columns: auto 1fr; - text-align: start; -} - -.menuOption.border { - border: 1px solid var(--color-main-base); -} - - -.menuOption:hover, .menuOption.active { - background-color: var(--color-main-base); -} - -.menuOption > * { - margin: 0; -} - -.menuOption > img { - width: 1.2em; - height: auto; - grid-area: icon; -} - -.menuOption > h3 { - grid-area: title; - font-size: 150%; -} - -.menuOption > p { - grid-area: subtitle; -} \ No newline at end of file diff --git a/src/styles/Panels/Panels.module.css b/src/styles/Panels/Panels.module.css deleted file mode 100644 index 3bc2c70..0000000 --- a/src/styles/Panels/Panels.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.panel { - display: grid; - border-right: 1px solid black; - height: 100%; - max-height: 100vh; - justify-items: center; - padding: 2rem; - overflow-y: auto; - grid-row-gap: 0.5em; - place-content: start center; - scrollbar-width: none; - scroll-behavior: smooth; -} - -.panel::-webkit-scrollbar { - display: none; -} - -.panel > hr { - height: 0; - width: 100%; - border: none; - border-top: 0.3rem dotted black; - margin: 2rem; -} \ No newline at end of file diff --git a/src/styles/Panels/ReturnButton.module.css b/src/styles/Panels/ReturnButton.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/Panels/SubPanel.module.css b/src/styles/Panels/SubPanel.module.css deleted file mode 100644 index 2d24be8..0000000 --- a/src/styles/Panels/SubPanel.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.panel { - width: 20rem; -} \ No newline at end of file diff --git a/src/styles/index.css b/src/tailwind.css similarity index 86% rename from src/styles/index.css rename to src/tailwind.css index bc35c24..634a864 100644 --- a/src/styles/index.css +++ b/src/tailwind.css @@ -11,6 +11,16 @@ color: var(--color-main-black); } + /* HORIZONTAL LINE */ + + hr { + height: 0; + width: 100%; + border: none; + border-top: 0.3rem dotted black; + margin: 2rem; + } + /* BUTTONS */ button { @@ -66,6 +76,7 @@ * { scrollbar-color: theme("colors.dark") transparent; scrollbar-width: thin; + scroll-behavior: smooth; } *::selection { @@ -91,4 +102,6 @@ border-radius: 100vmax; /* roundness of the scroll thumb */ border: 3px solid theme("colors.light"); /* creates padding around scroll thumb */ } -} + + +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index c6a8cf6..d75fa9f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,22 +1,23 @@ +const plugin = require('tailwindcss/plugin'); + module.exports = { content: ["./src/**/*.{tsx,ts}"], theme: { colors: { light: "#ffedd8", - base: "#e6ccb2", + mid: "#e6ccb2", dark: "#9c6644", black: "#1B1811", }, - extend: { - gridTemplateColumns: { - appDefault: "20rem", - appUseSub: "20rem 20rem", - appUseContent: "20rem 1fr", - appUseSubContent: "20rem 20rem 1fr", - }, - }, }, plugins: [ require("@tailwindcss/typography"), + plugin(function({ addVariant, e }) { + addVariant('webkit-scrollbar', ({ modifySelectors, separator }) => { + modifySelectors(({ className }) => { + return `.${e(`webkit-scrollbar${separator}${className}`)}::-webkit-scrollbar` + }) + }) + }) ], };