mirror/many-notes
1
0
Fork 0
mirror of https://github.com/brufdev/many-notes.git synced 2026-01-25 20:39:21 -06:00
Code Issues Packages Projects Releases Wiki Activity

Finish modal functionality

Browse Source
This commit is contained in:
Bruno
2024-10-03 03:06:59 +01:00
parent 5164b42461
commit e83ea4d07d
3 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/Livewire/Modals/Modal.php Normal file
View File

@@ -0,0 +1,20 @@
<?php
namespace App\Livewire\Modals;
use Livewire\Component;
class Modal extends Component
{
public bool $show = false;
public function openModal(): void
{
$this->show = true;
}
public function closeModal(): void
{
$this->show = false;
}
}

2
resources/views/components/modal/open.blade.php
View File

@@ -1,3 +1,3 @@
<div x-on:click="modalOpen = true" tabindex="-1">
<div x-on:click="modalOpen = true" tabindex="-1" class="flex items-center">
{{ $slot }}
</div>

18
resources/views/components/modal/panel.blade.php
View File

@@ -1,19 +1,15 @@
@props(['top' => false])
@aware(['title'])
<template x-teleport="body">
<div
x-show="modalOpen"
@keydown.escape.window="modalOpen = false"
class="fixed inset-0 overflow-y-auto z-10 text-leftXXX pt-[30%] sm:pt-0 text-light-base-700 dark:text-base-200"
>
<div x-show="modalOpen" @keydown.escape.window="modalOpen = false"
class="fixed inset-0 overflow-y-auto z-50 pt-[30%] sm:pt-0 text-light-base-700 dark:text-base-200">
<div class="fixed inset-0 bg-black/25"></div>
<div class="relative flex items-end justify-center min-h-full p-0 sm:items-center sm:p-4">
<div
@click.outside="modalOpen = false"
x-trap="modalOpen"
class="relative w-full overflow-hidden shadow-lg sm:mx-auto sm:max-w-md bg-light-base-50 dark:bg-base-900 rounded-t-xl sm:rounded-b-xl"
>
<div class="relative flex justify-center min-h-full p-0 sm:p-4{{ $top ? '' : ' items-end sm:items-center' }}">
<div @click.outside="modalOpen = false" x-trap="modalOpen"
class="relative w-full overflow-hidden shadow-lg sm:mx-auto sm:max-w-md bg-light-base-50 dark:bg-base-900 rounded-t-xl sm:rounded-b-xl">
<div class="flex justify-between p-6 pb-0">
<h3 class="text-lg">{{ $title }}</h3>
<x-modal.close class="flex items-center">