From 9fdd1ead6bd54272fcc8a509bded897ac5801a9e Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 3 Jan 2022 03:40:54 +0100 Subject: [PATCH] Library looks much better and panel headers --- README.md | 1 + package-lock.json | 22 ++++ package.json | 2 + .../Chronology/ChronologyItemComponent.tsx | 4 +- .../Library/LibraryItemComponent.tsx | 53 +++++---- .../{Panels => PanelComponents}/NavOption.tsx | 4 +- .../PanelComponents/PanelHeader.tsx | 20 ++++ .../ReturnButton.tsx | 0 src/components/Panels/ContentPanel.tsx | 2 +- src/components/Panels/MainPanel.tsx | 103 +++++++++--------- src/components/Panels/SubPanel.tsx | 2 +- src/components/SVG.tsx | 20 ++++ src/pages/_app.tsx | 1 + src/pages/chronology/index.tsx | 15 ++- src/pages/chronology/overview.tsx | 4 +- src/pages/hubs/index.tsx | 22 ++++ src/pages/library/[...slug].tsx | 29 ++--- src/pages/library/index.tsx | 26 +++-- src/tailwind.css | 11 +- tailwind.config.js | 41 +++++-- 20 files changed, 252 insertions(+), 130 deletions(-) rename src/components/{Panels => PanelComponents}/NavOption.tsx (86%) create mode 100644 src/components/PanelComponents/PanelHeader.tsx rename src/components/{Panels => PanelComponents}/ReturnButton.tsx (100%) create mode 100644 src/components/SVG.tsx create mode 100644 src/pages/hubs/index.tsx diff --git a/README.md b/README.md index d8af858..05a21c7 100644 --- a/README.md +++ b/README.md @@ -17,5 +17,6 @@ - Markdown automatic formatting using [Tailwind/Typography](https://tailwindcss.com/docs/typography-plugin) - Beside the theme declaration no CSS outside of Tailwind CSS - Manually added support for scrollbar styling + - Support for [Material Icons](https://fonts.google.com/icons) - Framework: [Next.js](https://nextjs.org/) (React) - Multilanguage support diff --git a/package-lock.json b/package-lock.json index df2d78d..27b5c53 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,8 @@ "packages": { "": { "dependencies": { + "@fontsource/material-icons": "^4.5.0", + "@fontsource/material-icons-rounded": "^4.5.0", "@fontsource/vollkorn": "^4.5.1", "@fontsource/zen-maru-gothic": "^4.5.3", "next": "^12.0.7", @@ -745,6 +747,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fontsource/material-icons": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/@fontsource/material-icons/-/material-icons-4.5.0.tgz", + "integrity": "sha512-vFMpnkKwbtJLLHbUDI163QWX9Ox28A6i1vALfAKlpBh54yp8D0cu1/YGyrU5whvaXejLSBuyS7lRwr/TdRNmhA==" + }, + "node_modules/@fontsource/material-icons-rounded": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.0.tgz", + "integrity": "sha512-5IqqgYjI2gs3zryb0UTk0US9deA+5J2R1A/G4jMRdlY0eopWoHtmcX9OLlssPkCrITcyj+bwpDbsFm9nrw65JA==" + }, "node_modules/@fontsource/vollkorn": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.1.tgz", @@ -6784,6 +6796,16 @@ } } }, + "@fontsource/material-icons": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/@fontsource/material-icons/-/material-icons-4.5.0.tgz", + "integrity": "sha512-vFMpnkKwbtJLLHbUDI163QWX9Ox28A6i1vALfAKlpBh54yp8D0cu1/YGyrU5whvaXejLSBuyS7lRwr/TdRNmhA==" + }, + "@fontsource/material-icons-rounded": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.0.tgz", + "integrity": "sha512-5IqqgYjI2gs3zryb0UTk0US9deA+5J2R1A/G4jMRdlY0eopWoHtmcX9OLlssPkCrITcyj+bwpDbsFm9nrw65JA==" + }, "@fontsource/vollkorn": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.1.tgz", diff --git a/package.json b/package.json index 7075f7b..18d2cfe 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "lint": "next lint" }, "dependencies": { + "@fontsource/material-icons": "^4.5.0", + "@fontsource/material-icons-rounded": "^4.5.0", "@fontsource/vollkorn": "^4.5.1", "@fontsource/zen-maru-gothic": "^4.5.3", "next": "^12.0.7", diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx index eee6ac6..d0f84c8 100644 --- a/src/components/Chronology/ChronologyItemComponent.tsx +++ b/src/components/Chronology/ChronologyItemComponent.tsx @@ -103,10 +103,10 @@ export default function ChronologyItemComponent( ))} -

+

{event.source.data ? "(" + event.source.data.attributes.name + ")" - : "(WARNING: NO SOURCE!)"} + : <>warningNo sources!}

))} diff --git a/src/components/Library/LibraryItemComponent.tsx b/src/components/Library/LibraryItemComponent.tsx index f5d514d..a020f90 100644 --- a/src/components/Library/LibraryItemComponent.tsx +++ b/src/components/Library/LibraryItemComponent.tsx @@ -1,5 +1,4 @@ import Link from "next/link"; -import Image from "next/image"; import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; import { getAssetURL } from "queries/helpers"; @@ -10,12 +9,6 @@ export type LibraryItemComponentProps = { export default function LibraryItemComponent( props: LibraryItemComponentProps ): JSX.Element { - function prettyTitleSubtitle(title: string, subtitle: string): string { - let result = title; - if (subtitle !== null) result += " - " + subtitle; - return result; - } - function prettyDate( date: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"] ): string { @@ -30,29 +23,43 @@ export default function LibraryItemComponent( return ( -
-

- {prettyTitleSubtitle( - props.item.attributes.title, - props.item.attributes.subtitle - )} -

-

{prettyDate(props.item.attributes.release_date)}

- +
+
{props.item.attributes.thumbnail.data ? ( - { ) : ( - "" +
)} +
+
+

{props.item.attributes.title}

+

{props.item.attributes.subtitle}

+
+
+

+ + event + + {prettyDate(props.item.attributes.release_date)} +

+ {props.item.attributes.price ? ( +

+ + shopping_cart + + {props.item.attributes.price.currency.data.attributes.symbol} + {props.item.attributes.price.amount} +

+ ) : ( + "" + )} +
+
); diff --git a/src/components/Panels/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx similarity index 86% rename from src/components/Panels/NavOption.tsx rename to src/components/PanelComponents/NavOption.tsx index af18a9f..e17177a 100644 --- a/src/components/Panels/NavOption.tsx +++ b/src/components/PanelComponents/NavOption.tsx @@ -14,13 +14,13 @@ export default function NavOption(props: NavOptionProps): JSX.Element { 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 : ""}`; + const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid transition-colors ${props.border ? border: ""} ${isActive ? divActive : ""}`; if (props.icon) { return (
- + {props.icon}

{props.title}

{props.subtitle &&

{props.subtitle}

}
diff --git a/src/components/PanelComponents/PanelHeader.tsx b/src/components/PanelComponents/PanelHeader.tsx new file mode 100644 index 0000000..ffd75c6 --- /dev/null +++ b/src/components/PanelComponents/PanelHeader.tsx @@ -0,0 +1,20 @@ +type NavOptionProps = { + icon?: string; + title: string; + description?: string; +}; + +export default function NavOption(props: NavOptionProps): JSX.Element { + return ( +
+ {props.icon ? ( + {props.icon} + ) : ( + "" + )} +

{props.title}

+ {props.description ?

{props.description}

: ""} +
+
+ ); +} diff --git a/src/components/Panels/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx similarity index 100% rename from src/components/Panels/ReturnButton.tsx rename to src/components/PanelComponents/ReturnButton.tsx diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx index 5385545..53abe85 100644 --- a/src/components/Panels/ContentPanel.tsx +++ b/src/components/Panels/ContentPanel.tsx @@ -15,7 +15,7 @@ export default function ContentPanel(props: ContentPanelProps): JSX.Element { const prose = props.autoformat ? "prose" : ""; return ( -
+
{props.children}
diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index aafa4f4..a3faeb2 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -1,19 +1,23 @@ import Link from "next/link"; -import NavOption from "components/Panels/NavOption"; +import NavOption from "components/PanelComponents/NavOption"; +import SVG from "components/SVG"; export default function MainPanel(): JSX.Element { return ( -
- -
- -

Accord's Library

-
- +
+
+ +
+
+ +
+

Accord's Library

+
+ +
@@ -21,46 +25,32 @@ export default function MainPanel(): JSX.Element {
- - - - - - - + + + + +
@@ -70,22 +60,25 @@ export default function MainPanel(): JSX.Element { CC-BY-SA{" "} unless otherwise noted.

- -
- +
+ - -
@@ -95,11 +88,17 @@ export default function MainPanel(): JSX.Element { SQUARE ENIX CO. LTD.

diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index 26b3734..8bf6a77 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/SVG.tsx b/src/components/SVG.tsx new file mode 100644 index 0000000..bc00dd1 --- /dev/null +++ b/src/components/SVG.tsx @@ -0,0 +1,20 @@ +import Image from "next/image"; + +export type SVGProps = { + src: string; + alt: string; + className?: string; +}; + +export default function SVG(props: SVGProps): JSX.Element { + return ( +
+ {props.src} +
+ ); +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 3c5af70..e1d1cf7 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,6 +3,7 @@ import MainPanel from "components/Panels/MainPanel"; import "tailwind.css"; import "@fontsource/zen-maru-gothic/500.css"; import "@fontsource/vollkorn/700.css"; +import "@fontsource/material-icons"; export type CustomAppProps = { useSubPanel: boolean; diff --git a/src/pages/chronology/index.tsx b/src/pages/chronology/index.tsx index 25a0f0c..7b12763 100644 --- a/src/pages/chronology/index.tsx +++ b/src/pages/chronology/index.tsx @@ -1,6 +1,7 @@ import SubPanel from "components/Panels/SubPanel"; -import NavOption from "components/Panels/NavOption"; +import NavOption from "components/PanelComponents/NavOption"; import { applyCustomAppProps } from "pages/_app"; +import PanelHeader from "components/PanelComponents/PanelHeader"; applyCustomAppProps(Chronology, { useSubPanel: true, @@ -11,13 +12,11 @@ export default function Chronology(): JSX.Element { return ( <> -

Chronology

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate - facilisis blandit. Aliquam blandit neque sem, ac pulvinar leo - ultricies sit amet. -

-
+ + + + + + ); +} diff --git a/src/pages/library/[...slug].tsx b/src/pages/library/[...slug].tsx index 8e0c957..c257b8b 100644 --- a/src/pages/library/[...slug].tsx +++ b/src/pages/library/[...slug].tsx @@ -4,10 +4,7 @@ import Image from "next/image"; import Link from "next/link"; import { GetStaticPaths, GetStaticProps } from "next"; import { applyCustomAppProps } from "pages/_app"; -import { - getLibraryItem, - getLibraryItemsSkeleton, -} from "graphql/operations"; +import { getLibraryItem, getLibraryItemsSkeleton } from "graphql/operations"; import { GetLibraryItemQuery } from "graphql/operations-types"; import { getAssetURL } from "queries/helpers"; @@ -28,14 +25,20 @@ export default function Library(props: Props): JSX.Element {

{libraryItem.attributes.title}

{libraryItem.attributes.subtitle}

- {libraryItem.attributes.thumbnail.data.attributes.alternativeText} + {libraryItem.attributes.thumbnail.data ? ( + { + ) : ( + "" + )} {libraryItem.attributes.subitems.data.map((subitem) => ( { paths, fallback: false, }; -} +}; async function getAllSlugs() { type Path = { diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index d8d0a9d..762f7ee 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -1,10 +1,13 @@ import { GetStaticProps } from "next"; import SubPanel from "components/Panels/SubPanel"; -import ContentPanel, { ContentPanelWidthSizes } from "components/Panels/ContentPanel"; +import ContentPanel, { + ContentPanelWidthSizes, +} from "components/Panels/ContentPanel"; import LibraryItemComponent from "components/Library/LibraryItemComponent"; import { applyCustomAppProps } from "pages/_app"; import { GetLibraryItemsPreviewQuery } from "graphql/operations-types"; import { getLibraryItemsPreview } from "graphql/operations"; +import PanelHeader from "components/PanelComponents/PanelHeader"; type Props = { libraryItems: GetLibraryItemsPreviewQuery; @@ -20,20 +23,19 @@ export default function Library(props: Props): JSX.Element { return ( <> -

Library

-

- A comprehensive list of all Yokoverse’s side materials (books, - novellas, artbooks, stage plays, manga, drama CDs, and comics). For - each, we provide photos and/or scans of the content, information about - what it is, when and how it was released, size, initial price… -

-
+ - {props.libraryItems.libraryItems.data.map((item) => ( - - ))} +
+ {props.libraryItems.libraryItems.data.map((item) => ( + + ))} +
); diff --git a/src/tailwind.css b/src/tailwind.css index 634a864..ab116e6 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -12,15 +12,17 @@ } /* HORIZONTAL LINE */ - + hr { height: 0; width: 100%; border: none; - border-top: 0.3rem dotted black; + border-top: 0.3rem dotted theme("colors.black");; margin: 2rem; } + /* MATERIAL ICONS */ + /* BUTTONS */ button { @@ -82,7 +84,6 @@ *::selection { background-color: theme("colors.dark"); color: theme("colors.light"); - border-radius: 1em; } *:target { @@ -102,6 +103,4 @@ 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 d75fa9f..b9330bb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,23 +1,48 @@ -const plugin = require('tailwindcss/plugin'); +const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{tsx,ts}"], theme: { colors: { light: "#ffedd8", - mid: "#e6ccb2", + mid: "#f0d1b3", dark: "#9c6644", black: "#1B1811", }, }, plugins: [ require("@tailwindcss/typography"), - plugin(function({ addVariant, e }) { - addVariant('webkit-scrollbar', ({ modifySelectors, separator }) => { + + plugin(function ({ addVariant, e }) { + addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { - return `.${e(`webkit-scrollbar${separator}${className}`)}::-webkit-scrollbar` - }) - }) - }) + return `.${e( + `webkit-scrollbar${separator}${className}` + )}::-webkit-scrollbar`; + }); + }); + }), + + // Colorization thanks to https://codepen.io/sosuke/pen/Pjoqqp + plugin(function ({ addUtilities }) { + addUtilities({ + ".colorize-light": { + filter: + "brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(5426%) hue-rotate(303deg) brightness(108%) contrast(100%)", + }, + ".colorize-mid": { + filter: + "brightness(0) saturate(100%) invert(89%) sepia(16%) saturate(829%) hue-rotate(322deg) brightness(103%) contrast(88%)", + }, + ".colorize-dark": { + filter: + "brightness(0) saturate(100%) invert(43%) sepia(5%) saturate(4120%) hue-rotate(339deg) brightness(98%) contrast(90%)", + }, + ".colorize-black": { + filter: + "brightness(0) saturate(100%) invert(7%) sepia(13%) saturate(1156%) hue-rotate(4deg) brightness(103%) contrast(95%)", + }, + }); + }), ], };