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

4
pages/_document.tsx
View File

@@ -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 */}

8
pages/index.tsx
View File

@@ -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>