iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve alerts and conversation (#1062) 

* add role="alert"
* improve conversation styling
* replace alert with card for conversation
This commit is contained in:
Thomas Rupprecht 2023-01-17 15:05:47 +01:00 committed by GitHub
parent 01373cb192
commit d18185f49e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
includes/helper/message_helper.php
View File

@ -100,7 +100,7 @@ function alert($class, $msg, $immediately = false)
} }
if ($immediately) { if ($immediately) {
return '<div class="alert alert-' . $class . '">' . $msg . '</div>'; return '<div class="alert alert-' . $class . '" role="alert">' . $msg . '</div>';
} }
$session = session(); $session = session();

6
resources/assets/themes/base.scss
View File

@ -357,14 +357,14 @@ code {
} }
.conversation { .conversation {
align-content: flex-start;
height: 55vh; height: 55vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
}
.message { .alert {
max-width: 75%; max-width: 75%;
display: inline-block; }
} }
/* Hide the arrow up/down buttons rendered by the browser in the input field */ /* Hide the arrow up/down buttons rendered by the browser in the input field */

2
resources/views/errors/419.twig
View File

@ -3,5 +3,5 @@
{% block title %}{{ __("Authentication expired") }}{% endblock %} {% block title %}{{ __("Authentication expired") }}{% endblock %}
{% block content %} {% block content %}
<div class="alert alert-warning">{{ __("The provided CSRF token is invalid or has expired") }}</div> <div class="alert alert-warning" role="alert">{{ __("The provided CSRF token is invalid or has expired") }}</div>
{% endblock %} {% endblock %}

2
resources/views/errors/default.twig
View File

@ -5,7 +5,7 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
{% block content_container %} {% block content_container %}
<div class="alert alert-info"> <div class="alert alert-info" role="alert">
{% block content_headline %} {% block content_headline %}
<h2>{% block content_headline_text %}Error {{ status }}{% endblock %}</h2> <h2>{% block content_headline_text %}Error {{ status }}{% endblock %}</h2>

2
resources/views/macros/base.twig
View File

@ -7,7 +7,7 @@
{% endmacro %} {% endmacro %}
{% macro alert(message, type, raw) %} {% macro alert(message, type, raw) %}
<div class="alert alert-{{ type|default('info') }}"> <div class="alert alert-{{ type|default('info') }}" role="alert">
{%- if raw|default(false) -%} {%- if raw|default(false) -%}
{{ message|raw }} {{ message|raw }}
{%- else -%} {%- else -%}

14
resources/views/pages/messages/conversation.twig
View File

@ -13,19 +13,21 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12 col-lg-8 offset-lg-2"> <div class="col-12 col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
<div class="row conversation"> <div class="row conversation mb-2">
{% for msg in messages %} {% for msg in messages %}
{% set own_message = msg.user_id == user.id %} {% set own_message = msg.user_id == user.id %}
<div class="col-12"{% if loop.last %} id="newest"{% endif %}> <div class="col-12"{% if loop.last %} id="newest"{% endif %}>
<div class="d-flex{% if own_message %} justify-content-end{% endif %}"> <div class="d-flex{% if own_message %} justify-content-end{% endif %}">
<div class="message alert {% if own_message %}alert-primary{% else %}alert-secondary{% endif %}"> <div class="card {% if own_message %}text-bg-primary{% else %}text-bg-secondary{% endif %} mb-3">
<p>{{ msg.text | nl2br }}</p> <div class="card-body">
<div class="text-end"> <p class="card-text">{{ msg.text | nl2br }}</p>
</div>
<div class="card-footer d-flex justify-content-end align-items-center fw-light">
<small class="opacity-75">{{ msg.created_at.format(__('Y-m-d H:i')) }}</small> <small class="opacity-75">{{ msg.created_at.format(__('Y-m-d H:i')) }}</small>
{% if own_message %} {% if own_message %}
<form action="{{ url('/messages/' ~ other_user.id ~ '/' ~ msg.id) }}" <form action="{{ url('/messages/' ~ other_user.id ~ '/' ~ msg.id) }}"
enctype="multipart/form-data" method="post" class="float-end" enctype="multipart/form-data" method="post" class="ms-2"
> >
{{ csrf() }} {{ csrf() }}
{{ f.submit(m.icon('trash'), {'btn_type': 'primary', 'size': 'sm'}) }} {{ f.submit(m.icon('trash'), {'btn_type': 'primary', 'size': 'sm'}) }}