web: make post.html layout more compact

axum-login-upgrade
Manos Pitsidianakis 2023-05-10 09:37:24 +03:00
parent 828bbfe071
commit 28156fdb75
Signed by: Manos Pitsidianakis
GPG Key ID: 7729C7707F7E09D0
2 changed files with 40 additions and 58 deletions

View File

@ -664,11 +664,11 @@
}
table.headers {
margin-left: -3vw;
padding: .5rem 0 .5rem 1rem;
}
table.headers tr>th {
text-align: right;
text-align: left;
color: var(--text-faded);
}
@ -686,24 +686,25 @@
width: 50ch;
}
div.post-body {
margin: 1rem 0px;
}
div.post-body>pre {
border-top: 1px solid;
overflow-wrap: break-word;
white-space: pre-line;
hyphens: auto;
background-color: var(--background-secondary);
outline: 1rem solid var(--background-secondary);
margin: 2rem 0;
line-height: 1.333;
line-height: 1.1;
padding: 1rem;
}
div.post-body:not(:last-child) {
padding-bottom: .5rem;
div.post {
border-top: 1px solid var(--horizontal-rule);
border-right: 1px solid var(--horizontal-rule);
border-left: 1px solid var(--horizontal-rule);
border-bottom: 1px solid var(--horizontal-rule);
}
div.post:not(:first-child) {
border-top: none;
}
td.message-id,
span.message-id{
@ -738,12 +739,11 @@
span.faded:is(:focus, :hover, :focus-visible, :focus-within) {
color: revert;
}
details.reply-details button {
padding: 0.3rem;
font-size: medium;
min-width: 0;
margin-block-start: 0.2rem;
display: inline-block;
tr>td>details.reply-details ~ tr {
display: none;
}
tr>td>details.reply-details[open] ~ tr {
display: revert;
}
ul.lists {

View File

@ -1,46 +1,28 @@
<table class="headers" title="E-mail headers">
<caption class="screen-reader-only">E-mail headers</caption>
{% if is_root %}
<div class="post">
<table class="headers" title="E-mail headers">
<caption class="screen-reader-only">E-mail headers</caption>
<tr>
<th scope="row">List:</th>
<td class="faded">{{ list.id }}</td>
<th scope="row">From:</th>
<td>{{ post.address }}</td>
</tr>
{% endif %}
<tr>
<th scope="row">From:</th>
<td>{{ post.address }}</td>
</tr>
<tr>
{% if is_root %}
<tr>
<th scope="row">To:</th>
<td class="faded">{{ post.to }}</td>
</tr>
<tr>
<th scope="row">Subject:</th>
<td>{{ trimmed_subject }}</td>
</tr>
{% endif %}
<th scope="row">Date:</th>
<td class="faded">{{ post.datetime }}</td>
</tr>
<tr>
{% if is_root %}
{% if in_reply_to %}
<tr>
<th scope="row">In-Reply-To:</th>
<td class="faded message-id"><a href="{{ list_post_path(list.id, in_reply_to) }}">{{ in_reply_to }}</a></td>
</tr>
{% endif %}
{% if references %}
<tr>
<th scope="row">References:</th>
<td>{% for r in references %}<span class="faded message-id"><a href="{{ list_post_path(list.id, r) }}">{{ r }}</a></span>{% endfor %}</td>
</tr>
{% endif %}
{% else %}
<tr>
<th scope="row">Date:</th>
<td class="faded">{{ post.datetime }}</td>
</tr>
<tr>
<th scope="row">Message-ID:</th>
<td class="faded message-id"><a href="{{ list_post_path(list.id, post.message_id) }}">{{ strip_carets(post.message_id) }}</a></td>
</tr>
{% if in_reply_to %}
<tr>
<th scope="row">In-Reply-To:</th>
<td class="faded message-id"><a href="{{ list_post_path(list.id, in_reply_to) }}">{{ in_reply_to }}</a></td>
</tr>
{% endif %}
{% if references %}
<tr>
<th scope="row">References:</th>
<td>{% for r in references %}<span class="faded message-id"><a href="{{ list_post_path(list.id, r) }}">{{ r }}</a></span>{% endfor %}</td>
</tr>
{% endif %}
<tr>
@ -48,6 +30,6 @@
</tr>
</table>
<div class="post-body">
<pre {% if odd %}style="--background-secondary: var(--background-critical);" {% endif %}title="E-mail text content">{{ body }}</pre>
<pre {% if odd %}style="--background-secondary: var(--background-critical);" {% endif %}title="E-mail text content">{{ body|trim }}</pre>
</div>
</div>