fdel/magic-card-valuator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing up Modal styles, and close button, need to add more elements

Browse Source
This commit is contained in:
Frank Delaguila
2022-11-06 13:55:26 -07:00
parent 1d9a03fe56
commit 66e767414e
4 changed files with 70 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/modal.tsx
View File

@@ -41,45 +41,65 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
return ( return (
<ClientOnlyPortal selector="#modal-root"> <ClientOnlyPortal selector="#modal-root">
<div ref={ref} <div
className={`fixed container rounded-t-3xl p-8 modal overflow-y-auto mt-4 ${ ref={ref}
className={`fixed rounded-t-3xl modal overflow-y-auto max-w-screen-lg mt-4 ${
modalOpen ? "open" : "" modalOpen ? "open" : ""
}`} }`}
> >
<div className="flex"> <>
<div className="w-1/2"> <button
{card && className="fixed flex justify-center items-center left-1/2 -translate-x-2/4 -translate-y-2/4 top-12 z-50 text-2xl"
<Image aria-label="Close the modal"
className="w-full" title="Close Modal"
src={card.image_uris?.png} onClick={() => {
width={100} toggleModal(false);
height={100} document.body.classList.remove("prevent-scroll");
alt={`${card.name} Card`} }}>
/>} <span className="material-symbols-outlined modal-close">cancel</span>
</button>
<div className="flex justify-center items-center relative">
<div
className="bg-cover bg-no-repeat blur-sm rounded-t-3xl w-full h-96"
style={{
backgroundImage: `url(${card.image_uris?.art_crop})`,
backgroundPosition: "center 0",
}}
></div>
<p className="absolute font-bold italic w-1/2 text-center modal-flavor-text">
{card.flavor_text}
</p>
</div> </div>
<div className="w-full pl-4"> <div className="container flex p-8">
<h1 className="text-3xl font-bold mb-4">{card?.name}</h1>
<p className="whitespace-pre-line">{card.oracle_text}</p>
<p className="italic">{card.flavor_text}</p>
<div className="w-1/2"> <div className="w-1/2">
<Pie data={data} options={{ {card && (
plugins: { <Image
legend: { className="w-full"
onClick: e => null src={card.image_uris?.png}
} width={100}
} height={100}
}} /> alt={`${card.name} Card`}
/>
)}
</div>
<div className="w-full pl-4">
<h1 className="text-3xl font-bold mb-4">{card?.name}</h1>
<p className="whitespace-pre-line">{card.oracle_text}</p>
<div className="w-1/2">
<Pie
data={data}
options={{
plugins: {
legend: {
onClick: (e) => null,
},
},
}}
/>
</div>
</div> </div>
</div> </div>
</div> </>
<button
onClick={() => {
toggleModal(false);
document.body.classList.remove("prevent-scroll");
}}
>
Close
</button>
</div> </div>
</ClientOnlyPortal> </ClientOnlyPortal>
); );

4
pages/_document.tsx
View File

@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() { export default function Document() {
return ( return (
<Html> <Html>
<Head /> <Head>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
</Head>
<body> <body>
<Main /> <Main />
{/* Here we will mount our modal portal */} {/* Here we will mount our modal portal */}

8
pages/index.tsx
View File

@@ -67,7 +67,7 @@ export default function Home() {
<title>Magic Card Valuator</title> <title>Magic Card Valuator</title>
</Head> </Head>
<div className="absolute bg-red-800 w-96 bg-red-800 right-0 top-0 rounded-md mr-4 mt-4 p-4"> <div className={`fixed bg-red-800 w-96 bg-red-800 ${ error ? "right-0" : "left-full"} rounded-md mr-4 mt-4 p-8`}>
{errorMessage} {errorMessage}
</div> </div>
@@ -75,7 +75,6 @@ export default function Home() {
<div className="container text-center"> <div className="container text-center">
<label htmlFor="search" className="block mx-auto font-bold mb-2 text-2xl">Search for a Magic Card</label> <label htmlFor="search" className="block mx-auto font-bold mb-2 text-2xl">Search for a Magic Card</label>
<input id="search" name="search" type="text" className={`block w-full md:w-1/2 mx-auto rounded-full py-2 px-4 ${styles.search}`} onChange={debounceSearch} /> <input id="search" name="search" type="text" className={`block w-full md:w-1/2 mx-auto rounded-full py-2 px-4 ${styles.search}`} onChange={debounceSearch} />
{error ? <p>{errorMessage}</p> : null}
</div> </div>
</div> </div>
@@ -92,7 +91,10 @@ export default function Home() {
setSelectedCard(card); setSelectedCard(card);
setModalOpen(true); setModalOpen(true);
document.body.classList.toggle('prevent-scroll'); document.body.classList.toggle('prevent-scroll');
}} className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} /> }}
className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2"
key={card.id}
alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
) )
} }
</section> </section>

11
styles/globals.css
View File

@@ -22,13 +22,22 @@
} }
.modal { .modal {
background: #1d1d1c; background: #333333;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 100%; top: 100%;
transition: top 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: top 150ms cubic-bezier(0.4, 0, 0.2, 1);
} }
.modal-close {
text-shadow: 0 1px 12px #000;
font-size: 36px;
}
.modal-flavor-text {
text-shadow: 0 1px 2px #000;
}
.modal.open { .modal.open {
top: 0; top: 0;
} }