Improve alerts and conversation (#1062)
* add role="alert" * improve conversation styling * replace alert with card for conversation
This commit is contained in:
parent
01373cb192
commit
d18185f49e
|
@ -100,7 +100,7 @@ function alert($class, $msg, $immediately = false)
|
|||
}
|
||||
|
||||
if ($immediately) {
|
||||
return '<div class="alert alert-' . $class . '">' . $msg . '</div>';
|
||||
return '<div class="alert alert-' . $class . '" role="alert">' . $msg . '</div>';
|
||||
}
|
||||
|
||||
$session = session();
|
||||
|
|
|
@ -357,14 +357,14 @@ code {
|
|||
}
|
||||
|
||||
.conversation {
|
||||
align-content: flex-start;
|
||||
height: 55vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
.alert {
|
||||
max-width: 75%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the arrow up/down buttons rendered by the browser in the input field */
|
||||
|
|
|
@ -3,5 +3,5 @@
|
|||
{% block title %}{{ __("Authentication expired") }}{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
{% block content %}
|
||||
<div class="container">
|
||||
{% block content_container %}
|
||||
<div class="alert alert-info">
|
||||
<div class="alert alert-info" role="alert">
|
||||
|
||||
{% block content_headline %}
|
||||
<h2>{% block content_headline_text %}Error {{ status }}{% endblock %}</h2>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
{% endmacro %}
|
||||
|
||||
{% 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) -%}
|
||||
{{ message|raw }}
|
||||
{%- else -%}
|
||||
|
|
|
@ -13,19 +13,21 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<div class="row conversation">
|
||||
<div class="col-12 col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
|
||||
<div class="row conversation mb-2">
|
||||
{% for msg in messages %}
|
||||
{% set own_message = msg.user_id == user.id %}
|
||||
<div class="col-12"{% if loop.last %} id="newest"{% 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 %}">
|
||||
<p>{{ msg.text | nl2br }}</p>
|
||||
<div class="text-end">
|
||||
<div class="card {% if own_message %}text-bg-primary{% else %}text-bg-secondary{% endif %} mb-3">
|
||||
<div class="card-body">
|
||||
<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>
|
||||
{% if own_message %}
|
||||
<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() }}
|
||||
{{ f.submit(m.icon('trash'), {'btn_type': 'primary', 'size': 'sm'}) }}
|
||||
|
|
Loading…
Reference in New Issue