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

201
resources/views/event/partials/form.blade.php
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,126 +114,127 @@
/> />
</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">
<x-input.label for="repeat_frequency" :value="__('calendar.event.recurrence.frequency')" /> <x-input.label for="repeat_frequency" :value="__('calendar.event.recurrence.frequency')" />
<x-input.select <x-input.select
id="repeat_frequency" id="repeat_frequency"
name="repeat_frequency" name="repeat_frequency"
:options="$rruleOptions" :options="$rruleOptions"
:selected="$repeatFrequency" :selected="$repeatFrequency"
:placeholder="__('calendar.event.recurrence.none')" :placeholder="__('calendar.event.recurrence.none')"
data-recurrence-frequency data-recurrence-frequency
/> />
<x-input.error :messages="$errors->get('repeat_frequency')" /> <x-input.error :messages="$errors->get('repeat_frequency')" />
<div class="mt-3 {{ $repeatFrequency === '' ? 'hidden' : '' }}" data-recurrence-interval> <div class="mt-3 {{ $repeatFrequency === '' ? 'hidden' : '' }}" data-recurrence-interval>
<x-input.label for="repeat_interval" :value="__('calendar.event.recurrence.every')" /> <x-input.label for="repeat_interval" :value="__('calendar.event.recurrence.every')" />
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<x-input.text <x-input.text
id="repeat_interval" id="repeat_interval"
name="repeat_interval" name="repeat_interval"
type="number" type="number"
min="1" min="1"
max="365" max="365"
:value="$repeatInterval" :value="$repeatInterval"
/>
<span class="text-sm text-gray-600" data-recurrence-unit></span>
</div>
</div>
<div class="mt-4 {{ $repeatFrequency !== 'weekly' ? 'hidden' : '' }}" data-recurrence-section="weekly">
<p class="text-sm text-gray-600">{{ __('calendar.event.recurrence.on_days') }}</p>
<div class="flex flex-wrap gap-2 mt-2">
@foreach ($weekdayOptions as $code => $label)
<label class="inline-flex items-center gap-2 text-sm">
<x-input.checkbox
name="repeat_weekdays[]"
value="{{ $code }}"
:checked="in_array($code, (array) $repeatWeekdays, true)"
/>
<span title="{{ $weekdayLong[$code] ?? $code }}">{{ $label }}</span>
</label>
@endforeach
</div>
</div>
<div class="mt-4 {{ $repeatFrequency !== 'monthly' ? 'hidden' : '' }}" data-recurrence-section="monthly">
<div class="flex flex-col gap-3">
<div class="flex items-center gap-4">
<x-input.radio-label
id="repeat_monthly_mode_days"
name="repeat_monthly_mode"
value="days"
label="{{ __('calendar.event.recurrence.on_days') }}"
:checked="$repeatMonthMode === 'days'"
data-monthly-mode
/>
<x-input.radio-label
id="repeat_monthly_mode_weekday"
name="repeat_monthly_mode"
value="weekday"
label="{{ __('calendar.event.recurrence.on_the') }}"
:checked="$repeatMonthMode === 'weekday'"
data-monthly-mode
/> />
<span class="text-sm text-gray-600" data-recurrence-unit></span>
</div> </div>
</div>
<div class="grid grid-cols-7 gap-2 {{ $repeatMonthMode !== 'days' ? 'hidden' : '' }}" data-monthly-days> <div class="mt-4 {{ $repeatFrequency !== 'weekly' ? 'hidden' : '' }}" data-recurrence-section="weekly">
@for ($day = 1; $day <= 31; $day++) <p class="text-sm text-gray-600">{{ __('calendar.event.recurrence.on_days') }}</p>
<label class="inline-flex items-center gap-2 text-xs"> <div class="flex flex-wrap gap-2 mt-2">
@foreach ($weekdayOptions as $code => $label)
<label class="inline-flex items-center gap-2 text-sm">
<x-input.checkbox <x-input.checkbox
name="repeat_month_days[]" name="repeat_weekdays[]"
value="{{ $day }}" value="{{ $code }}"
:checked="in_array($day, (array) $repeatMonthDays)" :checked="in_array($code, (array) $repeatWeekdays, true)"
/> />
<span>{{ $day }}</span> <span title="{{ $weekdayLong[$code] ?? $code }}">{{ $label }}</span>
</label> </label>
@endfor @endforeach
</div>
<div class="flex items-center gap-3 {{ $repeatMonthMode !== 'weekday' ? 'hidden' : '' }}" data-monthly-weekday>
<x-input.select
id="repeat_month_week"
name="repeat_month_week"
:options="[
'first' => __('calendar.event.recurrence.week_order.first'),
'second' => __('calendar.event.recurrence.week_order.second'),
'third' => __('calendar.event.recurrence.week_order.third'),
'fourth' => __('calendar.event.recurrence.week_order.fourth'),
'last' => __('calendar.event.recurrence.week_order.last'),
]"
:selected="$repeatMonthWeek"
/>
<x-input.select
id="repeat_month_weekday"
name="repeat_month_weekday"
:options="$weekdayLong"
:selected="$repeatMonthWeekday"
/>
</div> </div>
</div> </div>
</div>
<div class="mt-4 text-sm text-gray-600 {{ $repeatFrequency !== 'yearly' ? 'hidden' : '' }}" data-recurrence-section="yearly"> <div class="mt-4 {{ $repeatFrequency !== 'monthly' ? 'hidden' : '' }}" data-recurrence-section="monthly">
{{ __('calendar.event.recurrence.yearly_hint') }} <div class="flex flex-col gap-3">
<div class="flex items-center gap-4">
<x-input.radio-label
id="repeat_monthly_mode_days"
name="repeat_monthly_mode"
value="days"
label="{{ __('calendar.event.recurrence.on_days') }}"
:checked="$repeatMonthMode === 'days'"
data-monthly-mode
/>
<x-input.radio-label
id="repeat_monthly_mode_weekday"
name="repeat_monthly_mode"
value="weekday"
label="{{ __('calendar.event.recurrence.on_the') }}"
:checked="$repeatMonthMode === 'weekday'"
data-monthly-mode
/>
</div>
<div class="grid grid-cols-7 gap-2 {{ $repeatMonthMode !== 'days' ? 'hidden' : '' }}" data-monthly-days>
@for ($day = 1; $day <= 31; $day++)
<label class="inline-flex items-center gap-2 text-xs">
<x-input.checkbox
name="repeat_month_days[]"
value="{{ $day }}"
:checked="in_array($day, (array) $repeatMonthDays)"
/>
<span>{{ $day }}</span>
</label>
@endfor
</div>
<div class="flex items-center gap-3 {{ $repeatMonthMode !== 'weekday' ? 'hidden' : '' }}" data-monthly-weekday>
<x-input.select
id="repeat_month_week"
name="repeat_month_week"
:options="[
'first' => __('calendar.event.recurrence.week_order.first'),
'second' => __('calendar.event.recurrence.week_order.second'),
'third' => __('calendar.event.recurrence.week_order.third'),
'fourth' => __('calendar.event.recurrence.week_order.fourth'),
'last' => __('calendar.event.recurrence.week_order.last'),
]"
:selected="$repeatMonthWeek"
/>
<x-input.select
id="repeat_month_weekday"
name="repeat_month_weekday"
:options="$weekdayLong"
:selected="$repeatMonthWeekday"
/>
</div>
</div>
</div>
<div class="mt-4 text-sm text-gray-600 {{ $repeatFrequency !== 'yearly' ? 'hidden' : '' }}" data-recurrence-section="yearly">
{{ __('calendar.event.recurrence.yearly_hint') }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
<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">