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

Added backdrop blur to popup windows

Browse Source
This commit is contained in:
DrMint 2022-03-06 19:10:38 +01:00
parent f5c661c623
commit bc4cf2bce0
4 changed files with 57 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/AppLayout.tsx
View File

@ -174,18 +174,26 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Background when navbar is opened */}
<div
className={`fixed bg-shade inset-0 transition-opacity duration-500
className={`fixed inset-0 transition-[backdrop-filter] duration-500 ${
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
? "[backdrop-filter:blur(2px)]"
: "pointer-events-none touch-none "
}`}
>
<div
className={`fixed bg-shade inset-0 transition-opacity duration-500
${turnSubIntoContent ? "z-10" : ""}
${
(appLayout.mainPanelOpen || appLayout.subPanelOpen) && isMobile
? "opacity-60"
: "opacity-0 pointer-events-none touch-none"
: "opacity-0"
}`}
onClick={() => {
appLayout.setMainPanelOpen(false);
appLayout.setSubPanelOpen(false);
}}
></div>
onClick={() => {
appLayout.setMainPanelOpen(false);
appLayout.setSubPanelOpen(false);
}}
></div>
</div>
{/* Sub panel */}
{props.subPanel ? (
@ -261,7 +269,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
setState={appLayout.setLanguagePanelOpen}
>
<h2 className="text-2xl">{props.langui.select_language}</h2>
<div className="flex flex-wrap flex-row gap-2">
<div className="flex flex-wrap flex-row gap-2 mobile:flex-col">
{router.locales?.sort().map((locale) => (
<Button
key={locale}

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

@ -77,6 +77,20 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
{router.locale.toUpperCase()}
</Button>
)}
<Button
className={
appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
}
>
<span
className={`material-icons ${
!(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
} `}
>
search
</span>
</Button>
</div>
</div>
</div>

15
src/components/Popup.tsx
View File

@ -1,4 +1,5 @@
import { Dispatch, SetStateAction } from "react";
import Button from "./Button";
export type PopupProps = {
setState: Dispatch<SetStateAction<boolean | undefined>>;
@ -9,23 +10,29 @@ export type PopupProps = {
export default function Popup(props: PopupProps): JSX.Element {
return (
<div
className={`fixed inset-0 z-20 grid place-content-center ${
props.state ? "" : "pointer-events-none touch-none"
className={`fixed inset-0 z-50 grid place-content-center transition-[backdrop-filter] duration-500 ${
props.state ? "[backdrop-filter:blur(2px)]" : "pointer-events-none touch-none"
}`}
>
<div
className={`fixed bg-shade inset-0 transition-all duration-500 ${
props.state ? "bg-opacity-60" : "bg-opacity-0"
props.state ? "bg-opacity-50" : "bg-opacity-0"
}`}
onClick={() => {
props.setState(false);
}}
/>
<div
className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
className={`relative p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
props.state ? "scale-100" : "scale-0"
}`}
>
<Button
className="!p-1 absolute -top-16 bg-light border-light border-4"
onClick={() => props.setState(false)}
>
<span className="material-icons p-1">close</span>
</Button>
{props.children}
</div>
</div>

20
src/pages/library/[slug].tsx
View File

@ -204,7 +204,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
<h2 className="text-2xl text-center">{langui.details}</h2>
<div className="grid grid-flow-col w-full place-content-between">
{item.metadata.length > 0 ? (
<div className="grid place-items-center">
<div className="grid place-items-center place-content-start">
<h3 className="text-xl">{langui.type}</h3>
<div className="grid grid-flow-col gap-1">
<Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
@ -217,7 +217,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
)}
{item.release_date ? (
<div className="grid place-items-center">
<div className="grid place-items-center place-content-start">
<h3 className="text-xl">{langui.release_date}</h3>
<p>{prettyDate(item.release_date)}</p>
</div>
@ -226,11 +226,23 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
)}
{item.price ? (
<div className="grid place-items-center">
<div className="grid place-items-center text-center place-content-start">
<h3 className="text-xl">{langui.price}</h3>
<p>
{prettyPrice(item.price, currencies, appLayout.currency)}
{prettyPrice(
item.price,
currencies,
item.price.currency.data.attributes.code
)}
</p>
{item.price.currency.data.attributes.code !==
appLayout.currency && (
<p>
{prettyPrice(item.price, currencies, appLayout.currency)}{" "}
<br />
(calculated)
</p>
)}
</div>
) : (
""