songtianlun
0312383bc8
- Implement Stimulus controller for closing flash messages - Replace inline alerts with a partial for better organization - Enhance styling for user registration and login forms This update introduces a new flash message component that allows for user notifications to be displayed on the screen and closed by the user. The forms also include improved styles for a better user experience.
37 lines
1.8 KiB
Plaintext
37 lines
1.8 KiB
Plaintext
<div class="fixed top-24 right-4 z-40 w-80 space-y-2" data-controller="flash">
|
|
<% if notice %>
|
|
<div class="alert alert-success shadow-lg">
|
|
<div class="flex justify-between w-full">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span><%= notice %></span>
|
|
</div>
|
|
<button class="btn btn-ghost btn-sm btn-circle" data-action="flash#close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if alert %>
|
|
<div class="alert alert-error shadow-lg">
|
|
<div class="flex justify-between w-full">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span><%= alert %></span>
|
|
</div>
|
|
<button class="btn btn-ghost btn-sm btn-circle" data-action="flash#close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div> |