diff --git a/src/plainui/jinja2/plainui/components/tagbox.html b/src/plainui/jinja2/plainui/components/tagbox.html
index d966409259fe34665793b3fd868b1391efa7bce2..0a167f767761bd3d01b855f081363ccac8bd2bb5 100644
--- a/src/plainui/jinja2/plainui/components/tagbox.html
+++ b/src/plainui/jinja2/plainui/components/tagbox.html
@@ -1,7 +1,7 @@
{% macro tagbox(conf_slug, tags) -%}
<div>
<h4 class="h2 mb-5">{{_("Tags")}}</h4>
- <ul class="border border-tertiary px-6 pt-6 pb-5 list-unstyled mb-0 d-flex flex-row flex-wrap justify-content-center align-items-center">
+ <ul class="border px-6 pt-6 pb-5 list-unstyled mb-0 d-flex flex-row flex-wrap justify-content-center align-items-center">
{%- for tag in tags %}
<li class="pr-2 mb-2">
<a href="{{ url('plainui:tag', conf_slug=conf_slug, tag_slug=tag.tag.slug) }}" class="btn btn-tag-secondary">{{tag.tag.slug}}</a>
diff --git a/src/plainui/jinja2/plainui/personal_message_list.html b/src/plainui/jinja2/plainui/personal_message_list.html
index e59c7980b3c37030cddbd0c73937734a7fbb0889..575584d76652f4269110398241a53921d626a0d7 100644
--- a/src/plainui/jinja2/plainui/personal_message_list.html
+++ b/src/plainui/jinja2/plainui/personal_message_list.html
@@ -23,71 +23,75 @@
<h2 class="text-center bg-info p-3 text-white h3">{% if not sent_mode %}{{ _("Received Messages") }} {% else %}{{ _("Sent Messages") }}{% endif %}</h2>
<form method="POST" action="{{ url('plainui:personal_message_delete', conf_slug=conf.slug) }}">
{{ csrf_input }}
- <table class="table">
- <thead>
- <tr>
- <th scope="col">{% if not sent_mode %}{{ _("messages_from") }} {% else %}{{ _("messages_to") }}{% endif %}</th>
- <th scope="col">{{ _("messages_subject") }}</th>
- <th scope="col">{{ _("messages_date") }}</th>
- <th scope="col"></th>
- </tr>
- </thead>
- <tbody>
+ <p class="my-5 font-headings text-white text-right px-2">
+ {{ msgs | length }} {{ _("messages_x_of_n") }} {{ total }}
+ </p>
+ <ul class="list-unstyled mb-0">
+ {%- for msg in msgs %}
+ <li class="rc3-tile-message card mb-5">
+ <article class="row no-gutters flex-nowrap border border-plattform-dark bg-gradient-plattform-vertical">
+ <figure class="rc3-tile-message__icon-col col mb-0">
+ <a class="rc3-tile-message__icon-container text-white" href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">
+ {% if not sent_mode %}
+ {% if msg.has_responded %}
+ <svg class="rc3-tile-message__icon-flag" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reply-fill" viewBox="0 0 16 16">
+ <title>{{_("messages_was_responded")}}</title>
+ <path transform="translate(16), scale(-1, 1)" d="M9.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L9.079 4.1A.716.716 0 0 0 8 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z"/>
+ </svg>
+ {% endif %}
+ {% if msg.was_read %}
+ <svg class="rc3-tile-message__icon" xmlns="http://www.w3.org/2000/svg" width="3.125rem" height="3.125rem" fill="currentColor" class="bi bi-envelope-open" viewBox="0 0 16 16">
+ <title>{{_("messages_was_read")}}</title>
+ <path d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.818l5.724 3.465L8 8.917l1.276.766L15 6.218V5.4a1 1 0 0 0-.53-.882l-6-3.2zM15 7.388l-4.754 2.877L15 13.117v-5.73zm-.035 6.874L8 10.083l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738zM1 13.117l4.754-2.852L1 7.387v5.73zM7.059.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765l6-3.2z"/>
+ </svg>
+ {% else %}
+ <svg class="rc3-tile-message__icon" xmlns="http://www.w3.org/2000/svg" width="3.125rem" height="3.125rem" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
+ <title>{{_("messages_is_new")}}</title>
+ <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
+ </svg>
+ {% endif %}
+ {% endif %}
+ </a>
+ </figure>
+ <section class="col pt-3 px-2">
+ {% set recipient = msg.sender_name if not sent_mode else msg.recipient_name %}
+ <a class="text-white" href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=recipient) }}">
+ <h3 class="px-2 card-title h4 text-white">
+ {{recipient}}
+ </h3>
+ </a>
- {%- for msg in msgs %}
- <tr>
- <td>
- {% if not sent_mode %}
- {% if msg.was_read %}
- <span class="ml-2" title="{{_("messages_was_read")}}">
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-open" viewBox="0 0 16 16">
- <path d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.818l5.724 3.465L8 8.917l1.276.766L15 6.218V5.4a1 1 0 0 0-.53-.882l-6-3.2zM15 7.388l-4.754 2.877L15 13.117v-5.73zm-.035 6.874L8 10.083l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738zM1 13.117l4.754-2.852L1 7.387v5.73zM7.059.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765l6-3.2z"/>
- </svg>
- </span>
- {% else %}
- <span class="ml-2" title="{{_("messages_is_new")}}">
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
- <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
- </svg>
- </span>
- {% endif %}
- <a href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.sender_name) }}">
- {{msg.sender_name}}
- </a>
- {% else %}
- <a href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.recipient_name) }}">
- {{msg.recipient_name}}
- </a>
- {% endif %}
+ <a class="text-white" href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">
+ <p class="px-2">
+ {{msg.subject}}
+ </p>
+ </a>
- </td>
- <td>
- {% if not sent_mode %}
- {% if msg.has_responded %}
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reply-fill" viewBox="0 0 16 16">
- <path transform="translate(16), scale(-1, 1)" d="M9.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L9.079 4.1A.716.716 0 0 0 8 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z"/>
- </svg>
- {% endif %}
- {% endif %}
- <a href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">{{msg.subject}}</a>
- </td>
- <td>{{msg.timestamp | strftime}}</td>
- <td>
- {# {% not implemented? should color the flag button instead! if msg.flagged_for_abuse %}[{ _("messages_flagged") }]{% endif %} #}
- {% if not sent_mode %}
- {{ fbtns.report(report_url=msg.id, kind="pn", title=_("report this message")) }}
- {% endif %}
- <button class="ml-2 btn-icon-big btn btn-danger" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square-fill" viewBox="0 0 16 16">
- <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
- </svg>
- </button>
- </td>
- </tr>
- {%- endfor %}
- </tbody>
- </table>
- {{ msgs | length }} {{ _("messages_x_of_n") }} {{ total }}
+ <footer class="card-footer d-flex justify-content-between align-items-center bg-transparent text-white font-headings fs-medium">
+ <time datetime="{{ msg.timestamp }}">{{msg.timestamp | strftime}}</time>
+ <div class="d-inline-flex">
+ <a class="ml-2 btn-icon-big btn btn-secondary" title="{{_("read")}}" href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
+ <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
+ </svg>
+ </a>
+ <button class="ml-2 btn-icon-big btn btn-secondary" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+ <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+ <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+ </svg>
+ </button>
+ {% if not sent_mode %}
+ {{ fbtns.report(report_url=msg.id, kind="pn", title=_("report this message")) }}
+ {% endif %}
+ </div>
+ </footer>
+ </section>
+ </article>
+ </li>
+ {%- endfor %}
+ </ul>
</form>
</div>
{% endblock %}
diff --git a/src/plainui/jinja2/plainui/personal_message_send.html b/src/plainui/jinja2/plainui/personal_message_send.html
index 2c1c138dc852309f10d0cf0f85261d45c3531402..3cf00a4efbc1b612eb5aadad00b1d17b19e28e0a 100644
--- a/src/plainui/jinja2/plainui/personal_message_send.html
+++ b/src/plainui/jinja2/plainui/personal_message_send.html
@@ -6,7 +6,7 @@
{{ titleMacro.title(_("Send Personal Message")) }}
<form
method="POST"
- class="border p-6 mx-auto mb-11{% if form.errors %} border-danger{% else %} border-tertiary{% endif %}"
+ class="border p-6 mx-auto mb-11{% if form.errors %} border-danger{% endif %}"
>
<h2 class="text-center bg-info p-3 text-white h3">{{ _("new message") }}</h2>
{{ csrf_input }}
@@ -17,7 +17,7 @@
{{ form_elements.text(form, 'subject') }}
{{ form_elements.textarea(form, 'body') }}
- <ul class="list-unstyled row row-cols-1 row-cols-lg-3 justify-content-end">
+ <ul class="list-unstyled row row-cols-1 row-cols-lg-3 justify-content-end">
<li class="col">
<button type="submit" class="btn btn-xl btn-block btn-primary">{{ _("Send") }}</button>
</li>
diff --git a/src/plainui/jinja2/plainui/personal_message_show.html b/src/plainui/jinja2/plainui/personal_message_show.html
index 91a727451238b580a44af2a8c53a8c69a54a3704..1dc60213490d17b075348fe78ca884fb4a373345 100644
--- a/src/plainui/jinja2/plainui/personal_message_show.html
+++ b/src/plainui/jinja2/plainui/personal_message_show.html
@@ -4,25 +4,29 @@
{% extends "plainui/base.html" %}
{% block title %}{{conf.name}} - {{ _("Personal Message") }}{% endblock %}
{% block content %}
-{{ titleMacro.title(_("Personal Messages"), report_url=msg.id, report_kind="pn") }}
+{{ titleMacro.title( msg.subject, report_url=msg.id, report_kind="pn") }}
+
+<div class="border p-6 text-light mx-0 my-11">
+ <h2 class="text-center bg-info p-3 text-white h3">
+ {{ _("messages_from_short") }} {{ msg.sender.username }} {{ _("messages_to_short") }} {{ msg.recipient.username }}
+ <time datetime="{{msg.timestamp}}" class="d-block font-sans-serif fs-medium">
+ {{ msg.timestamp | strftime }}
+ </time>
+ </h2>
-<div class="border border-tertiary p-6 text-light mx-0">
- <h2 class="w-100 bg bg-info p-2 px-5 h3 text-white text-center">{{ msg.subject }}</h2>
- <h6 class="card-subtitle mb-2 text-muted">{{ _("messages_from_short") }} {{ msg.sender.username }} {{ _("messages_to_short") }} {{ msg.recipient.username }} {{ _("messages_at") }} {{ msg.timestamp | strftime }}</h6>
{{ markdown(msg_body) }}
- <ul class="mt-2 list-unstyled row justify-content-end ">
- <li class="col-1">
+
+ <ul class="row justify-content-end list-unstyled mt-5 mb-0">
+ <li class="col-12 col-md-3 mb-3 mb-lg-0">
<form method="POST" action="{{ url('plainui:personal_message_delete', conf_slug=conf.slug) }}">
- <button class="ml-2 btn-icon-big btn btn-danger" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square-fill" viewBox="0 0 16 16">
- <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
- </svg>
+ <button class="ml-2 btn btn-xl btn-block btn-secondary" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
+ {{ _("Delete") }}
</button>
</form>
</li>
{% if user.id == msg.recipient.id %}
- <li class="col-1">
- <a class="btn btn-primary" href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.sender.username) ~ '?in_reply_to=' ~ msg.id | urlencode ~ '&subject=AW: ' ~ msg.subject | truncate(100) | urlencode }}">
+ <li class="col-12 col-md-3">
+ <a class=" btn btn-xl btn-block btn-primary" href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.sender.username) ~ '?in_reply_to=' ~ msg.id | urlencode ~ '&subject=AW: ' ~ msg.subject | truncate(100) | urlencode }}">
{{_("Reply")}}
</a>
</li>
diff --git a/src/plainui/styles/components/_index.scss b/src/plainui/styles/components/_index.scss
index c4396267c3d62be3292f7927f5f618f1eaa2e1d8..6ff5732fe9841535ec435ad49c336e11c25317c4 100644
--- a/src/plainui/styles/components/_index.scss
+++ b/src/plainui/styles/components/_index.scss
@@ -7,4 +7,5 @@
@import "syntaxhilite";
@import "player";
@import "tile-board";
+@import "tile-message";
@import "slider";
diff --git a/src/plainui/styles/components/_tile-message.scss b/src/plainui/styles/components/_tile-message.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ac48988c09c959b5febba6086187202a05e76c24
--- /dev/null
+++ b/src/plainui/styles/components/_tile-message.scss
@@ -0,0 +1,40 @@
+.rc3-tile-message {
+ &__icon-col {
+ width: 9.375rem;
+ flex: 0 0 9.375rem;
+ }
+
+ &__icon-container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+ justify-content: center;
+
+ margin-bottom: 0;
+ text-decoration: none;
+ }
+
+ &__icon {
+ &-flag {
+ margin-left: 2.5rem;
+ }
+ }
+
+ @include media-breakpoint-down('md') {
+ &__icon-col {
+ width: 5rem;
+ flex: 0 0 5rem;
+ }
+
+ &__icon {
+ max-width: 2.5rem;
+
+ &-flag {
+ margin-left: 1.25rem;
+ }
+ }
+ }
+}