Minor changes to event modal
This commit is contained in:
parent
864e0d938a
commit
6cb4819ec7
GPG Key ID:
FC09694A000800C8
@ -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>
|
||||
<h2>{{ $event->exists ? __('Edit event details') : __('Create a new event') }}</h2>
|
||||
</x-modal.title>
|
||||
|
||||
@ -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,126 +114,127 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section 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">
|
||||
<x-input.label for="repeat_frequency" :value="__('calendar.event.recurrence.frequency')" />
|
||||
<x-input.select
|
||||
id="repeat_frequency"
|
||||
name="repeat_frequency"
|
||||
:options="$rruleOptions"
|
||||
:selected="$repeatFrequency"
|
||||
:placeholder="__('calendar.event.recurrence.none')"
|
||||
data-recurrence-frequency
|
||||
/>
|
||||
<x-input.error :messages="$errors->get('repeat_frequency')" />
|
||||
<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">
|
||||
<x-input.label for="repeat_frequency" :value="__('calendar.event.recurrence.frequency')" />
|
||||
<x-input.select
|
||||
id="repeat_frequency"
|
||||
name="repeat_frequency"
|
||||
:options="$rruleOptions"
|
||||
:selected="$repeatFrequency"
|
||||
:placeholder="__('calendar.event.recurrence.none')"
|
||||
data-recurrence-frequency
|
||||
/>
|
||||
<x-input.error :messages="$errors->get('repeat_frequency')" />
|
||||
|
||||
<div class="mt-3 {{ $repeatFrequency === '' ? 'hidden' : '' }}" data-recurrence-interval>
|
||||
<x-input.label for="repeat_interval" :value="__('calendar.event.recurrence.every')" />
|
||||
<div class="flex items-center gap-2">
|
||||
<x-input.text
|
||||
id="repeat_interval"
|
||||
name="repeat_interval"
|
||||
type="number"
|
||||
min="1"
|
||||
max="365"
|
||||
: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
|
||||
<div class="mt-3 {{ $repeatFrequency === '' ? 'hidden' : '' }}" data-recurrence-interval>
|
||||
<x-input.label for="repeat_interval" :value="__('calendar.event.recurrence.every')" />
|
||||
<div class="flex items-center gap-2">
|
||||
<x-input.text
|
||||
id="repeat_interval"
|
||||
name="repeat_interval"
|
||||
type="number"
|
||||
min="1"
|
||||
max="365"
|
||||
:value="$repeatInterval"
|
||||
/>
|
||||
<span class="text-sm text-gray-600" data-recurrence-unit></span>
|
||||
</div>
|
||||
</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">
|
||||
<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_month_days[]"
|
||||
value="{{ $day }}"
|
||||
:checked="in_array($day, (array) $repeatMonthDays)"
|
||||
name="repeat_weekdays[]"
|
||||
value="{{ $code }}"
|
||||
:checked="in_array($code, (array) $repeatWeekdays, true)"
|
||||
/>
|
||||
<span>{{ $day }}</span>
|
||||
<span title="{{ $weekdayLong[$code] ?? $code }}">{{ $label }}</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"
|
||||
/>
|
||||
@endforeach
|
||||
</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 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
|
||||
/>
|
||||
</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>
|
||||
</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-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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user