mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-08-03 01:34:34 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Toasts now work with turbo

Browse source
This commit is contained in:
Jan Böhmer 2022-07-24 14:20:20 +02:00
parent 3df6e18a83
commit 390deca544
6 changed files with 57 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

31
templates/_flash.html.twig
View file

@ -1,31 +0,0 @@
{# The container to show the flash messages #}
<div class="toast-container" id="message-container" style="min-width: 20%;">
{% for label, messages in app.flashes() %}
{% for message in messages %}
{% set flash_title = label|replace({'success': 'flash.success', 'error': 'flash.error'
, 'warning': 'flash.warning', 'notice': 'flash.notice', 'info': 'flash.info'}) %}
{% set flash_symbol = label|replace({'success': 'fa-check-circle', 'error': 'fa-exclamation-triangle'
, 'warning': 'fa-exclamation-circle', 'notice': 'fa-flag', 'info': 'fa-flag'}) %}
{% set flash_bg = label|replace({'success': 'bg-success text-white',
'error': 'bg-danger text-white', 'warning': 'bg-warning text-white',
'notice': 'bg-info text-white', 'info': 'bg-light'})%}
<div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header {{ flash_bg }}">
{# <img src="..." class="rounded mr-2" alt="...">#}
<i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
<strong class="mr-auto">{{ flash_title|trans }}</strong>
<small class="{% if "text-white" in flash_bg %}text-white{% else %}text-muted{% endif %}">{{ "now" | format_datetime("short", "short") }}</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body {{ flash_bg }}">
{{ message | trans }}
</div>
</div>
{% endfor %}
{% endfor %}
</div>

23
templates/_toast.html.twig Normal file
View file

@ -0,0 +1,23 @@
{% set flash_title = label|replace({'success': 'flash.success', 'error': 'flash.error'
, 'warning': 'flash.warning', 'notice': 'flash.notice', 'info': 'flash.info'}) %}
{% set flash_symbol = label|replace({'success': 'fa-check-circle', 'error': 'fa-exclamation-triangle'
, 'warning': 'fa-exclamation-circle', 'notice': 'fa-flag', 'info': 'fa-flag'}) %}
{% set flash_bg = label|replace({'success': 'bg-success text-white',
'error': 'bg-danger text-white', 'warning': 'bg-warning text-white',
'notice': 'bg-info text-white', 'info': 'bg-light'})%}
<div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000" {{ stimulus_controller('common/toast') }}>
<div class="toast-header {{ flash_bg }}">
{# <img src="..." class="rounded mr-2" alt="...">#}
<i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
<strong class="mr-auto">{{ flash_title|trans }}</strong>
<small class="{% if "text-white" in flash_bg %}text-white{% else %}text-muted{% endif %}">{{ "now" | format_datetime("short", "short") }}</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body {{ flash_bg }}">
{{ message | trans }}
</div>
</div>

4
templates/_toast_container.html.twig Normal file
View file

@ -0,0 +1,4 @@
{# The container to show the flash messages #}
<div class="toast-container" id="toast-container" style="min-width: 20%;">
</div>

18
templates/base.html.twig
View file

@ -55,20 +55,19 @@
</head>
<body data-base-url="{{ url('homepage', {'_locale': app.request.locale}) }}">
{% block body %}
<header>
<turbo-frame id="navbar-frame" target="content" data-turbo-action="advance">
{% include "_navbar.html.twig" %}
</turbo-frame>
{% include "_flash.html.twig" %}
</header>
<main>
<div class="container-fluid">
<div class="row">
{% include "_toast_container.html.twig" %}
<div class="collapse d-md-block bg-light" id="sidebar-container">
<nav class="fixed-sidebar col-md-3 col-lg-2 " id="fixed-sidebar">
<turbo-frame id="sidebar" target="content" data-turbo-action="advance">
@ -89,6 +88,16 @@
{% block content %}
{% endblock %}
<div class="toasts-global d-none">
{% for label, messages in app.flashes() %}
{% for message in messages %}
{{ include('_toast.html.twig', {
'label': label,
'message': message
}) }}
{% endfor %}
{% endfor %}
</div>
</turbo-frame>
{% block scripts %}
@ -108,7 +117,6 @@
<i class="fas fa-angle-up fa-fw"></i>
</a>
{% endblock %}
</body>