feat: implement screendesign
This commit is contained in:
@@ -1,21 +1,19 @@
|
||||
<div class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
|
||||
<div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('modal', 'close', 'click') }}></div>
|
||||
<div class="absolute inset-0 backdrop-blur-sm" {{ stimulus_action('modal', 'close', 'click') }}></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-2xl">
|
||||
<div class="{{ html_classes('relative py-8 rounded-md', { 'bg-red-50': level == 'error', 'bg-green-50': level == 'success', 'bg-blue-50': level == 'info' }) }}">
|
||||
<div class="{{ html_classes('flex justify-between pb-4 px-8', { 'text-red-800': level == 'error', 'text-green-800': level == 'success', 'text-blue-800': level == 'info' }) }}">
|
||||
<div class="text-2xl font-medium">
|
||||
<div class="{{ html_classes('relative py-4 rounded-md', { 'bg-red-500': level == 'error', 'bg-green-500': level == 'success', 'bg-primary-light': level == 'info' }) }}">
|
||||
<div class="flex justify-between pb-4 px-4">
|
||||
<div class="text-2xl font-medium text-white">
|
||||
{% block title %}{% endblock %}
|
||||
</div>
|
||||
<button type="button"
|
||||
class="inline-block"
|
||||
class="inline-block bg-gray-200 rounded-md p-1"
|
||||
{{ stimulus_action('modal', 'close') }}>
|
||||
{{ icon('close', 'w-6 h-6')}}
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="max-h-96 overflow-y-auto">
|
||||
<div class="{{ html_classes('px-8', { 'text-red-700': level == 'error', 'text-green-700': level == 'success', 'text-blue-700': level == 'info' }) }}">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<div class="px-4 max-h-96 overflow-y-auto">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user