WIP: February 2026 event improvements and calendar refactor #1

Draft
andrew wants to merge 28 commits from feb-2026-event-improvements into master
3 changed files with 102 additions and 158 deletions
Showing only changes of commit 6cb4819ec7 - Show all commits

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;
}
}

View File

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

View File

@ -13,7 +13,7 @@
<div class="event-tabs" data-tabs> <div class="event-tabs" data-tabs>
<div class="tab-panels"> <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 --}} {{-- Title --}}
<div class="input-row input-row--1"> <div class="input-row input-row--1">
<div class="input-cell"> <div class="input-cell">
@ -114,9 +114,9 @@
/> />
</div> </div>
</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-row input-row--1">
<div class="input-cell"> <div class="input-cell">
<div class="mt-3"> <div class="mt-3">
@ -225,15 +225,16 @@
</div> </div>
</div> </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-row input-row--1">
<div class="input-cell"> <div class="input-cell">
<p class="text-sm text-gray-600">More to come</p> <p class="text-sm text-gray-600">More to come</p>
</div> </div>
</div> </div>
</section> </div>
</div> </div>
<div class="tab-buttons" role="tablist" aria-orientation="vertical"> <div class="tab-buttons" role="tablist" aria-orientation="vertical">