sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix modal

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-30 11:48:06 -03:00
parent 4dc930786e
commit 142bcf410a
2 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
superpage/src/components/Course/HeaderNav.astro
View File

@@ -43,7 +43,7 @@ const { title } = Astro.props;
</button>
</Container>
<!-- Dropdown Menu -->
{/* Dropdown Menu */}
<div
x-cloak
x-show="open"
@@ -73,7 +73,7 @@ const { title } = Astro.props;
</h6>
<div class="flex max-lg:flex-col gap-0.5 lg:gap-4">
<!-- Search -->
{/* Search */}
<label class="flex gap-1 items-center">
<span class="text-nowrap max-lg:w-2/5 text-right"
>Buscar por</span
@@ -85,7 +85,7 @@ const { title } = Astro.props;
<Icon name="magnifying-glass" class="size-5" />
</div>
</label>
<!-- Search End -->
{/* Search End */}
<!-- Filter -->
<label class="flex gap-1 items-center">
@@ -151,5 +151,5 @@ const { title } = Astro.props;
</div>
</Container>
</div>
<!-- Dropdown Menu End -->
{/* Dropdown Menu End */}
</nav>

23
superpage/src/components/Course/Plans.astro
View File

@@ -1,4 +1,5 @@
---
import { Icon } from "astro-icon/components";
import Container from "~/components/Container.astro";
import Form from "./Contact.jsx";
---
@@ -8,18 +9,29 @@ import Form from "./Contact.jsx";
x-on:keydown.esc.prevent.stop="open = false"
x-effect="document.body.classList.toggle('overflow-hidden', open)"
>
{/* Modal */}
<div style="display: none;" x-show="open">
<div class="fixed inset-0 z-40 overflow-y-auto">
{/* Backdrop */}
<div
x-on:click="open = false"
aria-hidden="true"
class="fixed inset-0 bg-gray-900/20 backdrop-blur backdrop-filter"
>
</div>
<div class="flex justify-center items-center p-2.5">
<div class="flex justify-center items-center lg:h-full p-2.5">
<div
class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow"
class="lg:w-1/4 bg-black p-5 lg:p-12 rounded-2xl border border-white/15 space-y-5 drop-shadow relative"
>
{/* Close button */}
<button
x-on:click="open = false"
class="cursor-pointer absolute top-2.5 right-2.5 lg:top-5 lg:right-5 border border-white rounded-full"
>
<Icon name="x-mark" class="size-4" />
</button>
<h1 class="text-3xl lg:text-4xl font-medium">
Preencha os dados da sua empresa
</h1>
@@ -28,6 +40,7 @@ import Form from "./Contact.jsx";
</div>
</div>
</div>
{/* Modal End */}
<Container {...Astro.props}>
<section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
@@ -57,7 +70,7 @@ import Form from "./Contact.jsx";
</p>
<button
x-on:click="open = true"
class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
>
Saiba mais
</button>
@@ -85,7 +98,7 @@ import Form from "./Contact.jsx";
</p>
<button
x-on:click="open = true"
class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
>
Saiba mais
</button>
@@ -111,7 +124,7 @@ import Form from "./Contact.jsx";
</p>
<button
x-on:click="open = true"
class="font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
class="cursor-pointer font-semibold bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block text-center transition"
>
Saiba mais
</button>