andrew/kithkin
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Minor changes to event modal

Browse Source
This commit is contained in:
Andrew Gioia 2026-02-16 16:32:25 -05:00
parent 864e0d938a
commit 6cb4819ec7
Signed by: andrew
GPG Key ID: FC09694A000800C8
3 changed files with 102 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
resources/css/lib/modal.css
View File

@ -84,60 +84,3 @@ dialog {
}
}
}
/**
* tabs using <details> and <summary>
*/
dialog:has(.modal-tabs) {
@apply items-start justify-items-center;
#modal {
@apply relative;
max-height: 85dvh;
max-width: 48rem;
top: 10dvh;
}
form.modal {
@apply !block;
}
}
.modal-tab {
> summary {
@apply sticky left-6 w-32 flex flex-row gap-2;
top: 6rem;
&::before {
@apply bg-gray-10;
}
&::after {
@apply hidden;
}
}
&:nth-of-type(2) {
> summary { top: 8.75rem; }
}
&:nth-of-type(3) {
> summary { top: 11.5rem; }
}
&:nth-of-type(4) {
> summary { top: 14.25rem; }
}
&:nth-of-type(5) {
> summary { top: 17rem; }
}
&[open] {
> summary::before {
@apply bg-gray-100;
}
}
div.tab-content {
@apply flex flex-col gap-4 pl-40 pt-4 min-h-48;
}
}

2
resources/views/event/partials/form-modal.blade.php
View File

@ -1,4 +1,4 @@
<x-modal.content class="modal-tabs">
<x-modal.content>
<x-modal.title>
<h2>{{ $event->exists ? __('Edit event details') : __('Create a new event') }}</h2>
</x-modal.title>

13
resources/views/event/partials/form.blade.php
View File

@ -13,7 +13,7 @@
<div class="event-tabs" data-tabs>
<div class="tab-panels">
<section id="tab-details" role="tabpanel" aria-labelledby="tab-btn-details">
<div id="tab-details" role="tabpanel" aria-labelledby="tab-btn-details">
{{-- Title --}}
<div class="input-row input-row--1">
<div class="input-cell">
@ -114,9 +114,9 @@
/>
</div>
</div>
</section>
</div>
<section id="tab-repeat" role="tabpanel" aria-labelledby="tab-btn-repeat" hidden>
<div id="tab-repeat" role="tabpanel" aria-labelledby="tab-btn-repeat" hidden>
<div class="input-row input-row--1">
<div class="input-cell">
<div class="mt-3">
@ -225,15 +225,16 @@
</div>
</div>
</div>
</section>
</div>
<section id="tab-invitees" role="tabpanel" aria-labelledby="tab-btn-invitees" hidden>
<div id="tab-invitees" role="tabpanel" aria-labelledby="tab-btn-invitees" hidden>
<div class="input-row input-row--1">
<div class="input-cell">
<p class="text-sm text-gray-600">More to come</p>
</div>
</div>
</section>
</div>
</div>
<div class="tab-buttons" role="tablist" aria-orientation="vertical">