added season types and changed new season to be a modal
This commit is contained in:
65
internal/view/seasonsview/new_season_modal.templ
Normal file
65
internal/view/seasonsview/new_season_modal.templ
Normal file
@@ -0,0 +1,65 @@
|
||||
package seasonsview
|
||||
|
||||
// NewSeasonModal renders a modal containing the new season form
|
||||
// This is used on the seasons list page for a better UX
|
||||
templ NewSeasonModal() {
|
||||
<div
|
||||
x-data="{ open: false }"
|
||||
x-show="open"
|
||||
x-cloak
|
||||
@open-new-season-modal.window="open = true"
|
||||
@close-new-season-modal.window="open = false"
|
||||
class="fixed inset-0 z-50 overflow-y-auto"
|
||||
aria-labelledby="modal-title"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<!-- Background overlay -->
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 bg-base/75 transition-opacity"
|
||||
@click="open = false"
|
||||
></div>
|
||||
<!-- Modal panel -->
|
||||
<div class="flex min-h-full items-center justify-center p-4">
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
class="relative transform overflow-hidden rounded-xl bg-mantle border border-surface0 shadow-xl transition-all w-full max-w-lg"
|
||||
@click.stop
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="px-6 py-4 border-b border-surface0">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-xl font-bold text-text" id="modal-title">Create New Season</h3>
|
||||
<button
|
||||
type="button"
|
||||
@click="open = false"
|
||||
class="text-subtext0 hover:text-text transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-subtext0 mt-1">Add a new season to the system. All fields are required.</p>
|
||||
</div>
|
||||
<!-- Form content -->
|
||||
<div class="p-6">
|
||||
@NewFormModal()
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user