Fixing up Modal styles, and close button, need to add more elements
This commit is contained in:
Frank Delaguila
@@ -41,45 +41,65 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({modalOpen, toggleModal, c
|
||||
|
||||
return (
|
||||
<ClientOnlyPortal selector="#modal-root">
|
||||
<div ref={ref}
|
||||
className={`fixed container rounded-t-3xl p-8 modal overflow-y-auto mt-4 ${
|
||||
<div
|
||||
ref={ref}
|
||||
className={`fixed rounded-t-3xl modal overflow-y-auto max-w-screen-lg mt-4 ${
|
||||
modalOpen ? "open" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="w-1/2">
|
||||
{card &&
|
||||
<Image
|
||||
className="w-full"
|
||||
src={card.image_uris?.png}
|
||||
width={100}
|
||||
height={100}
|
||||
alt={`${card.name} Card`}
|
||||
/>}
|
||||
<>
|
||||
<button
|
||||
className="fixed flex justify-center items-center left-1/2 -translate-x-2/4 -translate-y-2/4 top-12 z-50 text-2xl"
|
||||
aria-label="Close the modal"
|
||||
title="Close Modal"
|
||||
onClick={() => {
|
||||
toggleModal(false);
|
||||
document.body.classList.remove("prevent-scroll");
|
||||
}}>
|
||||
<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 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>
|
||||
<p className="italic">{card.flavor_text}</p>
|
||||
<div className="container flex p-8">
|
||||
<div className="w-1/2">
|
||||
<Pie data={data} options={{
|
||||
plugins: {
|
||||
legend: {
|
||||
onClick: e => null
|
||||
}
|
||||
}
|
||||
}} />
|
||||
{card && (
|
||||
<Image
|
||||
className="w-full"
|
||||
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>
|
||||
<button
|
||||
onClick={() => {
|
||||
toggleModal(false);
|
||||
document.body.classList.remove("prevent-scroll");
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
</ClientOnlyPortal>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document';
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<Head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
{/* Here we will mount our modal portal */}
|
||||
|
||||
@@ -67,7 +67,7 @@ export default function Home() {
|
||||
<title>Magic Card Valuator</title>
|
||||
</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}
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,6 @@ export default function Home() {
|
||||
<div className="container text-center">
|
||||
<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} />
|
||||
{error ? <p>{errorMessage}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -92,7 +91,10 @@ export default function Home() {
|
||||
setSelectedCard(card);
|
||||
setModalOpen(true);
|
||||
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>
|
||||
|
||||
@@ -22,13 +22,22 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #1d1d1c;
|
||||
background: #333333;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 100%;
|
||||
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 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user