Added backdrop blur to popup windows
This commit is contained in:
DrMint
parent
f5c661c623
commit
bc4cf2bce0
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
) : (
|
||||
""
|
||||
|
|
|
|||
Loading…
Reference in New Issue