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

Added texture the dark mode bg + show subitem types

This commit is contained in:
DrMint 2022-02-24 00:57:43 +01:00
parent 42d2bd4fd5
commit 6d1bbc6ecb
12 changed files with 230 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/paper-dots-dark.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/paper-dots.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
public/paper.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 500 KiB

BIN
public/paper_dark.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

8
src/components/AppLayout.tsx
View File

@ -81,7 +81,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
</Head>
{/* Navbar */}
<div className="fixed bottom-0 left-0 right-0 h-20 border-t-[1px] border-black dark:border-dark-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]">
<div className="fixed inset-0 top-auto h-20 border-t-[1px] border-black dark:border-dark-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light dark:bg-dark-light texture-paper-dots">
<span
className="material-icons mt-[.1em] cursor-pointer"
onClick={() => appLayout.setMainPanelOpen(true)}
@ -103,7 +103,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Content panel */}
<div
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm] ${contentPanelClass}`}
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light dark:bg-dark-light texture-paper-dots ${contentPanelClass}`}
>
{props.contentPanel ? (
props.contentPanel
@ -137,7 +137,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Sub panel */}
{props.subPanel ? (
<div
className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]
className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light dark:bg-dark-light texture-paper-dots
${
turnSubIntoContent
? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
@ -154,7 +154,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Main panel */}
<div
className={`${mainPanelClass} border-r-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light dark:bg-dark-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]
className={`${mainPanelClass} border-r-[1px] border-black dark:border-dark-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light dark:bg-dark-light texture-paper-dots
${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
>
<MainPanel langui={props.langui} />

3
src/components/Library/LibraryItemsPreview.tsx
View File

@ -39,6 +39,9 @@ export default function LibraryItemsPreview(
<div className="linearbg-obi dark:linearbg-dark-obi fine:drop-shadow-shade-lg dark:fine:drop-shadow-dark-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
{item.metadata && item.metadata.length > 0 ? (
<div className="flex flex-row gap-1">
{item.metadata[0].__typename === "ComponentMetadataOther"
? console.log(item.slug)
: ""}
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
</div>
) : (

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

@ -22,7 +22,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
return (
<div
className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${
appLayout.mainPanelReduced && "px-4"
appLayout.mainPanelReduced && isDesktop && "px-4"
}`}
>
<div>
@ -49,7 +49,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
<div
className={`flex ${
appLayout.mainPanelReduced && isDesktop ? "flex-col" : "flex-row"
appLayout.mainPanelReduced && isDesktop ? "mt-4 flex-col gap-3" : "flex-row"
} flex-wrap gap-2`}
>
<Button

95
src/graphql/operation.graphql
View File

@ -335,7 +335,6 @@ query getLibraryItem($slug: String, $language_code: String) {
subtype {
data {
attributes {
slug
titles(
filters: { language: { code: { eq: $language_code } } }
) {
@ -421,9 +420,9 @@ query getLibraryItem($slug: String, $language_code: String) {
data {
id
attributes {
slug
title
subtitle
slug
thumbnail {
data {
attributes {
@ -436,6 +435,98 @@ query getLibraryItem($slug: String, $language_code: String) {
}
}
}
release_date {
year
month
day
}
price {
amount
currency {
data {
attributes {
symbol
code
}
}
}
}
metadata {
__typename
... on ComponentMetadataBooks {
subtype {
data {
attributes {
slug
titles(
filters: {
language: { code: { eq: $language_code } }
}
) {
title
}
}
}
}
}
... on ComponentMetadataGame {
platform {
data {
attributes {
short
}
}
}
}
... on ComponentMetadataVideo {
subtype {
data {
attributes {
slug
titles(
filters: {
language: { code: { eq: $language_code } }
}
) {
title
}
}
}
}
}
... on ComponentMetadataAudio {
subtype {
data {
attributes {
slug
titles(
filters: {
language: { code: { eq: $language_code } }
}
) {
title
}
}
}
}
}
... on ComponentMetadataOther {
subtype {
data {
attributes {
slug
titles(
filters: {
language: { code: { eq: $language_code } }
}
) {
title
}
}
}
}
}
}
}
}
}

108
src/graphql/operations-types.ts
View File

@ -487,7 +487,6 @@ export type GetLibraryItemQuery = {
__typename: "VideoSubtypeEntity";
attributes: {
__typename: "VideoSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
@ -598,9 +597,9 @@ export type GetLibraryItemQuery = {
id: string;
attributes: {
__typename: "LibraryItem";
slug: string;
title: string;
subtitle: string;
slug: string;
thumbnail: {
__typename: "UploadFileEntityResponse";
data: {
@ -616,6 +615,111 @@ export type GetLibraryItemQuery = {
};
};
};
release_date: {
__typename: "ComponentBasicsDatepicker";
year: number;
month: number;
day: number;
};
price: {
__typename: "ComponentBasicsPrice";
amount: number;
currency: {
__typename: "CurrencyEntityResponse";
data: {
__typename: "CurrencyEntity";
attributes: {
__typename: "Currency";
symbol: string;
code: string;
};
};
};
};
metadata: Array<
| {
__typename: "ComponentMetadataBooks";
subtype: {
__typename: "TextualSubtypeEntityResponse";
data: {
__typename: "TextualSubtypeEntity";
attributes: {
__typename: "TextualSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
}
| {
__typename: "ComponentMetadataVideo";
subtype: {
__typename: "VideoSubtypeEntityResponse";
data: {
__typename: "VideoSubtypeEntity";
attributes: {
__typename: "VideoSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
}
| {
__typename: "ComponentMetadataGame";
platform: {
__typename: "GamePlatformEntityResponse";
data: {
__typename: "GamePlatformEntity";
attributes: {
__typename: "GamePlatform";
short: string;
};
};
};
}
| {
__typename: "ComponentMetadataAudio";
subtype: {
__typename: "AudioSubtypeEntityResponse";
data: {
__typename: "AudioSubtypeEntity";
attributes: {
__typename: "AudioSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
}
| {
__typename: "ComponentMetadataOther";
subtype: {
__typename: "OtherSubtypeEntityResponse";
data: {
__typename: "OtherSubtypeEntity";
attributes: {
__typename: "OtherSubtype";
slug: string;
titles: Array<{
__typename: "ComponentTranslationsSimpleTitle";
title: string;
}>;
};
};
};
}
| { __typename: "Error" }
>;
};
}>;
};

2
src/pages/index.tsx
View File

@ -13,7 +13,7 @@ export default function Home(props: HomeProps): JSX.Element {
const contentPanel = (
<ContentPanel autoformat>
<div className="grid place-items-center place-content-center w-full gap-5 text-center">
<div className="grid place-items-center place-content-center w-full gap-5 text-center colorize-black dark:colorize-dark-black">
<SVG
className="w-32 mobile:w-1/2"
src={"/icons/accords.svg"}

20
src/tailwind.css
View File

@ -3,7 +3,6 @@
@tailwind utilities;
@layer base {
* {
@apply box-border font-body font-medium scroll-smooth scroll-m-8;
}
@ -45,6 +44,19 @@
/* CHANGE PROSE DEFAULTS */
.prose,
.prose p,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose a,
.prose strong {
@apply text-black dark:text-dark-black;
}
.prose a {
@apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark dark:decoration-dark-dark hover:text-dark dark:hover:text-dark-dark;
}
@ -61,3 +73,9 @@
@apply bg-mid dark:bg-dark-mid shadow-inner-sm shadow-shade dark:shadow-dark-shade;
}
}
@layer components {
.texture-paper-dots {
@apply bg-paper-dots dark:bg-dark-paper-dots bg-blend-multiply dark:bg-blend-overlay bg-local bg-[length:10cm];
}
}

4
tailwind.config.js
View File

@ -52,8 +52,8 @@ module.exports = {
fine: { raw: "(pointer: fine)" },
},
backgroundImage: {
paper: "url('/paper.webp')",
"dark-paper": "url('/paper.webp')",
"paper-dots": "url('/paper-dots.webp')",
"dark-paper-dots": "url('/paper-dots-dark.webp')",
},
extend: {
boxShadow: {