Wrapped lines that are too long
This commit is contained in:
DrMint
parent
0591fa22d4
commit
e17dbc14a0
@ -50,6 +50,7 @@ module.exports = {
|
||||
"max-classes-per-file": ["error", 1],
|
||||
// "max-depth": ["warn", 4],
|
||||
// "max-lines": "warn",
|
||||
"max-len": ["warn", { "code": 100 }],
|
||||
// "max-lines-per-function": "warn",
|
||||
// "max-nested-callbacks": "warn",
|
||||
// "max-params": "warn",
|
||||
|
||||
@ -151,7 +151,9 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
>
|
||||
<div
|
||||
{...handlers}
|
||||
className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid [grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr] mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
|
||||
className={`fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black grid
|
||||
[grid-template-areas:'main_sub_content'] ${gridCol} mobile:grid-cols-[1fr]
|
||||
mobile:grid-rows-[1fr_5rem] mobile:[grid-template-areas:'content''navbar']`}
|
||||
>
|
||||
<Head>
|
||||
<title>{`${titlePrefix} - ${ogTitle}`}</title>
|
||||
@ -183,7 +185,8 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
{/* Background when navbar is opened */}
|
||||
<div
|
||||
className={`[grid-area:content] mobile:z-10 absolute inset-0 transition-[backdrop-filter] duration-500 ${
|
||||
className={`[grid-area:content] mobile:z-10 absolute
|
||||
inset-0 transition-[backdrop-filter] duration-500 ${
|
||||
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
|
||||
? "[backdrop-filter:blur(2px)]"
|
||||
: "pointer-events-none touch-none "
|
||||
@ -212,7 +215,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
contentPanel
|
||||
) : (
|
||||
<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 opacity-40">
|
||||
<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">{langui.select_option_sidebar}</p>
|
||||
</div>
|
||||
@ -223,7 +229,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
{/* Sub panel */}
|
||||
{subPanel && (
|
||||
<div
|
||||
className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
||||
className={`[grid-area:sub] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
|
||||
mobile:justify-self-end border-r-[1px] mobile:border-r-0 mobile:border-l-[1px]
|
||||
border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0
|
||||
[scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
||||
${
|
||||
turnSubIntoContent
|
||||
? "mobile:border-l-0 mobile:w-full"
|
||||
@ -236,14 +245,21 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
{/* Main panel */}
|
||||
<div
|
||||
className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%] mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
||||
${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`}
|
||||
className={`[grid-area:main] mobile:[grid-area:content] mobile:z-10 mobile:w-[90%]
|
||||
mobile:justify-self-start border-r-[1px] border-black border-dotted overflow-y-scroll
|
||||
webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light
|
||||
texture-paper-dots ${
|
||||
appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<MainPanel langui={langui} />
|
||||
</div>
|
||||
|
||||
{/* Navbar */}
|
||||
<div className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots">
|
||||
<div
|
||||
className="[grid-area:navbar] border-t-[1px] border-black border-dotted grid
|
||||
grid-cols-[5rem_1fr_5rem] place-items-center desktop:hidden bg-light texture-paper-dots"
|
||||
>
|
||||
<span
|
||||
className="material-icons mt-[.1em] cursor-pointer"
|
||||
onClick={() => {
|
||||
@ -285,7 +301,10 @@ export default function AppLayout(props: Immutable<Props>): JSX.Element {
|
||||
>
|
||||
<h2 className="text-2xl">{langui.settings}</h2>
|
||||
|
||||
<div className="mt-4 grid gap-16 justify-items-center text-center desktop:grid-cols-[auto_auto]">
|
||||
<div
|
||||
className="mt-4 grid gap-16 justify-items-center
|
||||
text-center desktop:grid-cols-[auto_auto]"
|
||||
>
|
||||
{router.locales && (
|
||||
<div>
|
||||
<h3 className="text-xl">{langui.languages}</h3>
|
||||
|
||||
@ -8,7 +8,9 @@ interface Props {
|
||||
export default function Chip(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={`grid place-content-center place-items-center text-xs pb-[0.14rem] whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70 transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
|
||||
className={`grid place-content-center place-items-center text-xs pb-[0.14rem]
|
||||
whitespace-nowrap px-1.5 border-[1px] rounded-full opacity-70
|
||||
transition-[color,_opacity,_border-color] hover:opacity-100 ${props.className}`}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
|
||||
@ -20,7 +20,9 @@ export default function Select(props: Immutable<Props>): JSX.Element {
|
||||
} ${props.className}`}
|
||||
>
|
||||
<div
|
||||
className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center cursor-pointer hover:bg-mid transition-all ${
|
||||
className={`outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]
|
||||
bg-light rounded-[1em] p-1 grid grid-flow-col grid-cols-[1fr_auto_auto] place-items-center
|
||||
cursor-pointer hover:bg-mid transition-all ${
|
||||
opened && "outline-[transparent] rounded-b-none"
|
||||
}`}
|
||||
>
|
||||
@ -48,7 +50,8 @@ export default function Select(props: Immutable<Props>): JSX.Element {
|
||||
<>
|
||||
{index !== props.state && (
|
||||
<div
|
||||
className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]"
|
||||
className="bg-light hover:bg-mid transition-colors
|
||||
cursor-pointer p-1 last-of-type:rounded-b-[1em]"
|
||||
key={index}
|
||||
id={option}
|
||||
onClick={() => {
|
||||
|
||||
@ -10,15 +10,17 @@ interface Props {
|
||||
export default function Switch(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={`h-6 w-12 rounded-full border-2 border-mid grid transition-colors relative cursor-pointer ${
|
||||
props.className
|
||||
} ${props.state ? "bg-mid" : "bg-light"}`}
|
||||
className={`h-6 w-12 rounded-full border-2 border-mid grid
|
||||
transition-colors relative cursor-pointer ${props.className} ${
|
||||
props.state ? "bg-mid" : "bg-light"
|
||||
}`}
|
||||
onClick={() => {
|
||||
props.setState(!props.state);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`bg-dark aspect-square rounded-full absolute top-0 bottom-0 left-0 transition-transform ${
|
||||
className={`bg-dark aspect-square rounded-full absolute
|
||||
top-0 bottom-0 left-0 transition-transform ${
|
||||
props.state && "translate-x-[115%]"
|
||||
}`}
|
||||
></div>
|
||||
|
||||
@ -33,7 +33,8 @@ export default function ContentLine(props: Immutable<Props>): JSX.Element {
|
||||
opened && "bg-mid shadow-inner-sm shadow-shade h-auto py-3 my-2"
|
||||
}`}
|
||||
>
|
||||
<div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
|
||||
<div className="grid gap-4 place-items-center
|
||||
grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
|
||||
<a>
|
||||
<h3 className="cursor-pointer" onClick={() => setOpened(!opened)}>
|
||||
{content.attributes.content?.data?.attributes?.titles?.[0]
|
||||
|
||||
@ -101,7 +101,10 @@ export default function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
<>
|
||||
{selectedScan && (
|
||||
<div>
|
||||
<div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0">
|
||||
<div
|
||||
className="flex flex-row flex-wrap place-items-center
|
||||
gap-6 text-base pt-10 first-of-type:pt-0"
|
||||
>
|
||||
<h2 id={slug} className="text-2xl">
|
||||
{title}
|
||||
</h2>
|
||||
@ -198,11 +201,16 @@ export default function ScanSet(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
|
||||
<div
|
||||
className="grid gap-8 items-end mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
>
|
||||
{selectedScan.pages?.data.map((page, index) => (
|
||||
<div
|
||||
key={page.id}
|
||||
className="drop-shadow-shade-lg hover:scale-[1.02] cursor-pointer transition-transform"
|
||||
className="drop-shadow-shade-lg hover:scale-[1.02]
|
||||
cursor-pointer transition-transform"
|
||||
onClick={() => {
|
||||
const images: string[] = [];
|
||||
selectedScan.pages?.data.map((image) => {
|
||||
|
||||
@ -66,7 +66,10 @@ export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
<>
|
||||
{selectedScan && (
|
||||
<div>
|
||||
<div className="flex flex-row flex-wrap place-items-center gap-6 text-base pt-10 first-of-type:pt-0">
|
||||
<div
|
||||
className="flex flex-row flex-wrap place-items-center
|
||||
gap-6 text-base pt-10 first-of-type:pt-0"
|
||||
>
|
||||
<h2 id={"cover"} className="text-2xl">
|
||||
{"Cover"}
|
||||
</h2>
|
||||
@ -151,11 +154,16 @@ export default function ScanSetCover(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
|
||||
<div
|
||||
className="grid gap-8 items-end mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(10rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
>
|
||||
{coverImages.map((image, index) => (
|
||||
<div
|
||||
key={image.url}
|
||||
className="drop-shadow-shade-lg hover:scale-[1.02] cursor-pointer transition-transform"
|
||||
className="drop-shadow-shade-lg hover:scale-[1.02]
|
||||
cursor-pointer transition-transform"
|
||||
onClick={() => {
|
||||
const imgs: string[] = [];
|
||||
coverImages.map((img) => {
|
||||
|
||||
@ -17,11 +17,15 @@ export default function NavOption(props: Immutable<Props>): JSX.Element {
|
||||
const router = useRouter();
|
||||
const isActive = router.asPath.startsWith(props.url);
|
||||
const divActive = "bg-mid shadow-inner-sm shadow-shade";
|
||||
|
||||
const border =
|
||||
"outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]";
|
||||
const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid hover:shadow-inner-sm hover:shadow-shade hover:active:shadow-inner hover:active:shadow-shade transition-all ${
|
||||
props.border ? border : ""
|
||||
} ${isActive ? divActive : ""}`;
|
||||
|
||||
const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid
|
||||
hover:shadow-inner-sm hover:shadow-shade hover:active:shadow-inner
|
||||
hover:active:shadow-shade transition-all ${props.border ? border : ""} ${
|
||||
isActive ? divActive : ""
|
||||
}`;
|
||||
|
||||
return (
|
||||
<ToolTip
|
||||
|
||||
@ -3,11 +3,11 @@ import Button from "components/Inputs/Button";
|
||||
import NavOption from "components/PanelComponents/NavOption";
|
||||
import ToolTip from "components/ToolTip";
|
||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||
import { AppStaticProps } from "graphql/getAppStaticProps";
|
||||
import { Immutable } from "helpers/types";
|
||||
import { useMediaDesktop } from "hooks/useMediaQuery";
|
||||
import Markdown from "markdown-to-jsx";
|
||||
import Link from "next/link";
|
||||
import { AppStaticProps } from "graphql/getAppStaticProps";
|
||||
import { Immutable } from "helpers/types";
|
||||
|
||||
interface Props {
|
||||
langui: AppStaticProps["langui"];
|
||||
@ -20,7 +20,8 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${
|
||||
className={`flex flex-col justify-center content-start
|
||||
gap-y-2 justify-items-center text-center p-8 ${
|
||||
appLayout.mainPanelReduced && isDesktop && "px-4"
|
||||
}`}
|
||||
>
|
||||
@ -45,7 +46,9 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
className={`${
|
||||
appLayout.mainPanelReduced && isDesktop ? "w-12" : "w-1/2"
|
||||
} aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black hover:bg-dark mb-4`}
|
||||
} aspect-square cursor-pointer transition-colors [mask:url('/icons/accords.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat]
|
||||
![mask-position:center] bg-black hover:bg-dark mb-4`}
|
||||
></div>
|
||||
</Link>
|
||||
|
||||
@ -219,10 +222,22 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
className="transition-[filter] colorize-black hover:colorize-dark"
|
||||
href="https://creativecommons.org/licenses/by-sa/4.0/"
|
||||
>
|
||||
<div className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1 hover:[--theme-color-black:var(--theme-color-dark)]">
|
||||
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
|
||||
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
|
||||
<div className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black" />
|
||||
<div
|
||||
className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1
|
||||
hover:[--theme-color-black:var(--theme-color-dark)]"
|
||||
>
|
||||
<div
|
||||
className="w-6 aspect-square [mask:url('/icons/creative-commons-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
|
||||
/>
|
||||
<div
|
||||
className="w-6 aspect-square [mask:url('/icons/creative-commons-by-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
|
||||
/>
|
||||
<div
|
||||
className="w-6 aspect-square [mask:url('/icons/creative-commons-sa-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] bg-black"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
<p>
|
||||
@ -233,14 +248,18 @@ export default function MainPanel(props: Immutable<Props>): JSX.Element {
|
||||
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
|
||||
<a
|
||||
aria-label="Browse our GitHub repository, which include this website source code"
|
||||
className="transition-colors [mask:url('/icons/github-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark"
|
||||
className="transition-colors [mask:url('/icons/github-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
|
||||
w-10 aspect-square bg-black hover:bg-dark"
|
||||
href="https://github.com/Accords-Library"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
></a>
|
||||
<a
|
||||
aria-label="Join our Discord server!"
|
||||
className="transition-colors [mask:url('/icons/discord-brands.svg')] ![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center] w-10 aspect-square bg-black hover:bg-dark"
|
||||
className="transition-colors [mask:url('/icons/discord-brands.svg')]
|
||||
![mask-size:contain] ![mask-repeat:no-repeat] ![mask-position:center]
|
||||
w-10 aspect-square bg-black hover:bg-dark"
|
||||
href="/discord"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
@ -31,8 +31,9 @@ export default function PreviewLine(props: Immutable<Props>): JSX.Element {
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<div
|
||||
className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer hover:scale-[1.02]
|
||||
transition-transform flex flex-row gap-4 overflow-hidden place-items-center pr-4 w-full h-36"
|
||||
className="drop-shadow-shade-xl rounded-md bg-light cursor-pointer
|
||||
hover:scale-[1.02] transition-transform flex flex-row gap-4
|
||||
overflow-hidden place-items-center pr-4 w-full h-36"
|
||||
>
|
||||
{thumbnail ? (
|
||||
<div className="h-full aspect-[3/2]">
|
||||
|
||||
@ -51,10 +51,7 @@ export default function RecorderChip(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{recorder.bio?.[0] && <Markdawn text={recorder.bio[0].bio ?? ""} />}
|
||||
|
||||
{/* <Button className="cursor-not-allowed">View profile</Button> */}
|
||||
</div>
|
||||
}
|
||||
placement="top"
|
||||
|
||||
@ -74,7 +74,8 @@ export default function ChronologyItemComponent(
|
||||
if (props.item.attributes) {
|
||||
return (
|
||||
<div
|
||||
className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
|
||||
className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em]
|
||||
py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
|
||||
id={generateAnchor(
|
||||
props.item.attributes.year,
|
||||
props.item.attributes.month,
|
||||
@ -103,7 +104,10 @@ export default function ChronologyItemComponent(
|
||||
<>
|
||||
{translation && (
|
||||
<>
|
||||
<div className="place-items-start place-content-start grid grid-flow-col gap-2">
|
||||
<div
|
||||
className="place-items-start
|
||||
place-content-start grid grid-flow-col gap-2"
|
||||
>
|
||||
{translation.status !==
|
||||
Enum_Componenttranslationschronologyitem_Status.Done && (
|
||||
<ToolTip
|
||||
@ -128,7 +132,8 @@ export default function ChronologyItemComponent(
|
||||
className={
|
||||
event.translations &&
|
||||
event.translations.length > 1
|
||||
? "before:content-['-'] before:text-dark before:inline-block before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line"
|
||||
? `before:content-['-'] before:text-dark before:inline-block
|
||||
before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line`
|
||||
: "whitespace-pre-line"
|
||||
}
|
||||
>
|
||||
|
||||
@ -10,8 +10,8 @@ import ContentPanel, {
|
||||
import SubPanel from "components/Panels/SubPanel";
|
||||
import ThumbnailPreview from "components/PreviewCard";
|
||||
import { GetVideoChannelQuery } from "graphql/generated";
|
||||
import { getReadySdk } from "graphql/sdk";
|
||||
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
|
||||
import { getReadySdk } from "graphql/sdk";
|
||||
import { getVideoThumbnailURL } from "helpers/videos";
|
||||
import {
|
||||
GetStaticPathsContext,
|
||||
@ -60,7 +60,11 @@ export default function Channel(props: Props): JSX.Element {
|
||||
<h1 className="text-3xl">{channel?.title}</h1>
|
||||
<p>{channel?.subscribers.toLocaleString()} subscribers</p>
|
||||
</div>
|
||||
<div className="grid gap-8 items-start mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
|
||||
<div
|
||||
className="grid gap-8 items-start mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
>
|
||||
{channel?.videos?.data.map((video) => (
|
||||
<>
|
||||
{video.attributes && (
|
||||
|
||||
@ -11,9 +11,9 @@ import ContentPanel, {
|
||||
import SubPanel from "components/Panels/SubPanel";
|
||||
import ThumbnailPreview from "components/PreviewCard";
|
||||
import { GetVideosPreviewQuery } from "graphql/generated";
|
||||
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
|
||||
import { getReadySdk } from "graphql/sdk";
|
||||
import { prettyDate } from "helpers/formatters";
|
||||
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
|
||||
import { getVideoThumbnailURL } from "helpers/videos";
|
||||
import { GetStaticPropsContext } from "next";
|
||||
import { useState } from "react";
|
||||
@ -80,7 +80,11 @@ export default function Videos(props: Props): JSX.Element {
|
||||
className="mb-12"
|
||||
/>
|
||||
|
||||
<div className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
|
||||
<div
|
||||
className="grid gap-8 items-start thin:grid-cols-1 mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
>
|
||||
{paginatedVideos[page].map((video) => (
|
||||
<>
|
||||
{video.attributes && (
|
||||
|
||||
@ -70,7 +70,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
|
||||
{name && (
|
||||
<h2
|
||||
key={`h2${name}`}
|
||||
className="text-2xl pb-2 pt-10 first-of-type:pt-0 flex flex-row place-items-center gap-2"
|
||||
className="text-2xl pb-2 pt-10 first-of-type:pt-0
|
||||
flex flex-row place-items-center gap-2"
|
||||
>
|
||||
{name}
|
||||
<Chip>{`${items.length} ${
|
||||
@ -82,7 +83,8 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
<div
|
||||
key={`items${name}`}
|
||||
className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
|
||||
className="grid gap-8 items-end grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<>
|
||||
|
||||
@ -41,7 +41,8 @@ export default function CheckupLibraryItems(
|
||||
{testReport.lines.map((line, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr] gap-2 items-center mb-2 justify-items-start"
|
||||
className="grid grid-cols-[2em,3em,2fr,1fr,0.5fr,0.5fr,2fr]
|
||||
gap-2 items-center mb-2 justify-items-start"
|
||||
>
|
||||
<Button
|
||||
href={line.frontendUrl}
|
||||
|
||||
@ -338,7 +338,8 @@ export default function Editor(props: Immutable<Props>): JSX.Element {
|
||||
const textarea = event.target as HTMLTextAreaElement;
|
||||
handleInput(textarea.value);
|
||||
}}
|
||||
className="bg-mid !bg-opacity-40 rounded-xl outline-none p-8 w-full text-black font-monospace h-[70vh]"
|
||||
className="bg-mid !bg-opacity-40 rounded-xl
|
||||
outline-none p-8 w-full text-black font-monospace h-[70vh]"
|
||||
value={markdown}
|
||||
title="Input textarea"
|
||||
/>
|
||||
|
||||
@ -15,7 +15,11 @@ export default function Home(props: Immutable<PostStaticProps>): JSX.Element {
|
||||
post={post}
|
||||
prependBody={
|
||||
<div className="grid place-items-center place-content-center w-full gap-5 text-center">
|
||||
<div className="[mask:url('/icons/accords.svg')] [mask-size:contain] [mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square mobile:w-[50vw] bg-black" />
|
||||
<div
|
||||
className="[mask:url('/icons/accords.svg')] [mask-size:contain]
|
||||
[mask-repeat:no-repeat] [mask-position:center] w-32 aspect-square
|
||||
mobile:w-[50vw] bg-black"
|
||||
/>
|
||||
<h1 className="text-5xl mb-0">Accord’s Library</h1>
|
||||
<h2 className="text-xl -mt-5">
|
||||
Discover • Analyze • Translate • Archive
|
||||
|
||||
@ -153,7 +153,8 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
/>
|
||||
<div className="grid place-items-center gap-12">
|
||||
<div
|
||||
className="drop-shadow-shade-xl w-full h-[50vh] mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
|
||||
className="drop-shadow-shade-xl w-full h-[50vh]
|
||||
mobile:h-[60vh] desktop:mb-16 relative cursor-pointer"
|
||||
onClick={() => {
|
||||
if (item?.thumbnail?.data?.attributes) {
|
||||
setLightboxOpen(true);
|
||||
@ -240,13 +241,17 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
{item?.gallery && item.gallery.data.length > 0 && (
|
||||
<div id="gallery" className="grid place-items-center gap-8 w-full">
|
||||
<h2 className="text-2xl">{langui.gallery}</h2>
|
||||
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
||||
<div
|
||||
className="grid w-full gap-8 items-end
|
||||
grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
|
||||
>
|
||||
{item.gallery.data.map((galleryItem, index) => (
|
||||
<>
|
||||
{galleryItem.attributes && (
|
||||
<div
|
||||
key={galleryItem.id}
|
||||
className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
|
||||
className="relative aspect-square hover:scale-[1.02]
|
||||
transition-transform cursor-pointer"
|
||||
onClick={() => {
|
||||
if (item.gallery?.data) {
|
||||
const images: string[] = [];
|
||||
@ -265,7 +270,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="bg-light absolute inset-0 rounded-lg drop-shadow-shade-md"></div>
|
||||
<div
|
||||
className="bg-light absolute inset-0
|
||||
rounded-lg drop-shadow-shade-md"
|
||||
></div>
|
||||
<Img
|
||||
className="rounded-lg"
|
||||
image={galleryItem.attributes}
|
||||
@ -430,7 +438,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
<p className="flex-shrink-0">{"Always show info"}:</p>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
<div className="grid gap-8 items-end mobile:grid-cols-2 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
|
||||
<div
|
||||
className="grid gap-8 items-end mobile:grid-cols-2
|
||||
grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full"
|
||||
>
|
||||
{item.subitems.data.map((subitem) => (
|
||||
<>
|
||||
{subitem.attributes && (
|
||||
|
||||
@ -12,17 +12,17 @@ import ContentPanel, {
|
||||
import SubPanel from "components/Panels/SubPanel";
|
||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||
import { GetLibraryItemScansQuery } from "graphql/generated";
|
||||
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
|
||||
import { getReadySdk } from "graphql/sdk";
|
||||
import { prettyinlineTitle, prettySlug } from "helpers/formatters";
|
||||
import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
|
||||
import { sortContent } from "helpers/others";
|
||||
import { Immutable } from "helpers/types";
|
||||
import {
|
||||
GetStaticPathsContext,
|
||||
GetStaticPathsResult,
|
||||
GetStaticPropsContext,
|
||||
} from "next";
|
||||
import { useState } from "react";
|
||||
import { Immutable } from "helpers/types";
|
||||
|
||||
interface Props extends AppStaticProps {
|
||||
item: Exclude<
|
||||
@ -63,7 +63,9 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
|
||||
subtitle={
|
||||
content.attributes?.range[0]?.__typename ===
|
||||
"ComponentRangePageRange"
|
||||
? `${content.attributes.range[0].starting_page} → ${content.attributes.range[0].ending_page}`
|
||||
? `${content.attributes.range[0].starting_page}` +
|
||||
`→` +
|
||||
`${content.attributes.range[0].ending_page}`
|
||||
: undefined
|
||||
}
|
||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||
|
||||
@ -143,7 +143,8 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
{name && (
|
||||
<h2
|
||||
key={`h2${name}`}
|
||||
className="text-2xl pb-2 pt-10 first-of-type:pt-0 flex flex-row place-items-center gap-2"
|
||||
className="text-2xl pb-2 pt-10 first-of-type:pt-0
|
||||
flex flex-row place-items-center gap-2"
|
||||
>
|
||||
{name}
|
||||
<Chip>{`${items.length} ${
|
||||
@ -155,7 +156,9 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
)}
|
||||
<div
|
||||
key={`items${name}`}
|
||||
className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
className="grid gap-8 items-end mobile:grid-cols-2
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]
|
||||
pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||
>
|
||||
{items.map((item) => (
|
||||
<>
|
||||
|
||||
@ -41,7 +41,10 @@ export default function News(props: Immutable<Props>): JSX.Element {
|
||||
|
||||
const contentPanel = (
|
||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||
<div className="grid gap-8 items-end grid-cols-1 desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]">
|
||||
<div
|
||||
className="grid gap-8 items-end grid-cols-1
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"
|
||||
>
|
||||
{posts.map((post) => (
|
||||
<>
|
||||
{post.attributes && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user