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

added paper texture + fixed problem with text always being justified

This commit is contained in:
DrMint 2022-02-18 04:21:28 +01:00
parent 7657962740
commit 910052c372
8 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/paper_white.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

12
src/components/AppLayout.tsx
View File

@ -63,7 +63,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
</Head>
{/* Navbar */}
<div className="fixed bottom-0 left-0 right-0 h-20 bg-light border-t-[1px] border-dark grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden">
<div className="fixed bottom-0 left-0 right-0 h-20 border-t-[1px] border-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]">
<span
id="navbar-main-button"
className="material-icons mt-[.1em] cursor-pointer"
@ -87,14 +87,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Content panel */}
{props.contentPanel ? (
<div
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll ${contentPanelClass}`}
className={`top-0 left-0 right-0 bottom-20 overflow-y-scroll bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm] ${contentPanelClass}`}
>
{props.contentPanel}
</div>
) : (
<div className="top-0 left-0 right-0 bottom-20 overflow-y-scroll fixed desktop:left-[40rem] desktop:top-0 desktop:bottom-0 desktop:right-0 opacity-40">
<div className="top-0 left-0 right-0 bottom-20 overflow-y-scroll fixed desktop:left-[40rem] desktop:top-0 desktop:bottom-0 desktop:right-0 bg-light bg-paper bg-blend-multiply bg-local bg-[length:10cm]">
<div className="grid place-content-center h-full">
<div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9">
<div className="text-dark border-dark border-2 border-dotted rounded-2xl p-8 grid grid-flow-col place-items-center gap-9 opacity-40">
<p className="text-4xl">❮</p>
<p className="text-2xl w-64">
Select one of the options in the sidebar
@ -122,7 +122,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 top-0 bottom-0 right-0 left-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300
className={`${subPanelClass} border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-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 bg-paper bg-blend-multiply bg-local bg-[length:10cm]
${
turnSubIntoContent
? "mobile:translate-x-0 mobile:bottom-20 mobile:left-0 mobile:border-l-0"
@ -139,7 +139,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Main panel */}
<div
className={`${mainPanelClass} border-r-[1px] border-black top-0 bottom-0 left-0 right-12 bg-light overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20
className={`${mainPanelClass} border-r-[1px] border-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 bg-paper bg-blend-multiply bg-local bg-[length:10cm]
${mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
>
<MainPanel langui={props.langui} />

2
src/components/Library/LibraryContentPreview.tsx
View File

@ -33,7 +33,7 @@ export default function LibraryContentPreview(
) : (
<div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
)}
<div className="linearbg-1 fine:drop-shadow-dark-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2 text-left">
<div className="linearbg-1 fine:drop-shadow-dark-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
{item.type ? (
<Chip>

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

@ -48,7 +48,7 @@ export default function LibraryItemsPreview(
<div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
)}
<div className="linearbg-1 fine:drop-shadow-dark-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 text-left">
<div className="linearbg-1 fine:drop-shadow-dark-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">
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>

2
src/components/Markdown/Markdawn.tsx
View File

@ -9,7 +9,7 @@ type ScenBreakProps = {
export default function Markdawn(props: ScenBreakProps): JSX.Element {
return (
<Markdown
className={`prose text-black ${props.className}`}
className={`prose prose-p:text-justify text-black ${props.className}`}
options={{
overrides: {
hr: {

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

@ -13,11 +13,11 @@ export default function ContentPanel(props: ContentPanelProps): JSX.Element {
const width = props.width ? props.width : ContentPanelWidthSizes.default;
const widthCSS =
width === ContentPanelWidthSizes.default ? "max-w-[45rem]" : "w-full";
const prose = props.autoformat ? "prose" : "";
const prose = props.autoformat ? "prose text-justify" : "";
return (
<div className={`grid pt-10 pb-20 px-6 desktop:py-20 desktop:px-10`}>
<main className={`${prose} ${widthCSS} place-self-center text-justify`}>
<main className={`${prose} ${widthCSS} place-self-center`}>
{props.children}
</main>
</div>

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

@ -154,7 +154,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
)}
</div>
{item.descriptions.length > 0 ? (
<p>{item.descriptions[0].description}</p>
<p className="text-justify">{item.descriptions[0].description}</p>
) : (
""
)}
@ -190,7 +190,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<div
id="details"
className="bg-mid w-full grid place-items-center p-8 rounded-2xl"
className="bg-mid w-full grid place-items-center p-8 rounded-2xl text-left"
>
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
<h2 className="text-2xl text-center">
@ -271,12 +271,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<div className="grid grid-cols-2 w-full place-content-between">
{item.metadata[0].__typename === "ComponentMetadataBooks" ? (
<>
<div className="grid place-content-start grid-flow-col gap-4">
<div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.global_pages}:</p>
<p>{item.metadata[0].page_count}</p>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.global_binding}:</p>
<p>
{item.metadata[0].binding_type ===
@ -289,7 +289,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
</p>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.global_page_order}:</p>
<p>
{item.metadata[0].page_order ===
@ -302,7 +302,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
</p>
</div>
<div className="grid place-content-start grid-flow-col gap-4">
<div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.global_languages}:</p>
{item.metadata[0].languages.data.map((lang) => (
<p key={lang.attributes.code}>
@ -323,7 +323,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
) : item.metadata[0].__typename ===
"ComponentMetadataOther" ? (
<>
<div className="grid place-content-start grid-flow-col gap-4">
<div className="flex flex-row place-content-start gap-4">
<p className="font-bold">{langui.global_type}:</p>
<Chip>
{item.metadata[0].subtype.data.attributes.titles
@ -389,11 +389,11 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<div
id={content.attributes.slug}
key={content.id}
className="grid gap-2 px-4 rounded-lg target:bg-mid target:h-auto target:py-3 target:my-2"
className="grid gap-2 px-4 rounded-lg target:bg-mid target:h-auto target:py-3 target:my-2 target:[--displaySubContentMenu:grid] [--displaySubContentMenu:none]"
>
<div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
<a href={`#${content.attributes.slug}`}>
<h3 className="text-left">
<h3>
{content.attributes.content.data &&
content.attributes.content.data.attributes.titles
.length > 0
@ -439,6 +439,36 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
""
)}
</div>
<div className="grid-flow-col place-content-start place-items-center gap-2 [display:var(--displaySubContentMenu)]">
<span className="material-icons text-dark">
subdirectory_arrow_right
</span>
{content.attributes.scan_set.length > 0 ? (
<Button
href={`/library/content/${content.attributes.content.data.attributes.slug}/scans/`}
>
{langui.library_item_view_scans}
</Button>
) : (
""
)}
{content.attributes.content.data ? (
<Button
href={`/library/content/${content.attributes.content.data.attributes.slug}`}
>
{langui.library_item_open_content}
</Button>
) : (
""
)}
{content.attributes.scan_set.length === 0 &&
!content.attributes.content.data
? "The content is not available"
: ""}
</div>
</div>
))}
</div>

3
tailwind.config.js
View File

@ -21,6 +21,9 @@ module.exports = {
coarse: { raw: "(pointer: coarse)" },
fine: { raw: "(pointer: fine)" },
},
backgroundImage: {
paper: "url('/paper_white.webp')",
}
},
plugins: [
require("@tailwindcss/typography"),