WIP: February 2026 event improvements and calendar refactor #1
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user