nologcz/headline
2
1
Fork 0
mirror of https://git.nolog.cz/NoLog.cz/headline.git synced 2025-01-31 11:53:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Improve mobile view for article detail

Browse source
This commit is contained in:
Ondřej Nývlt 2023-08-17 22:49:13 +02:00
parent 2a89bbdea0
commit b36cb55b36
2 changed files with 52 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
view/static/main.css
View file

@ -478,22 +478,52 @@ details[open] summary::before {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.article-detail-diffs th, .article-detail-diffs-s .title {
.article-detail-diffs td { margin-bottom: 1rem;
}
.article-detail-diffs-s .diff {
padding: 0.75rem 1rem;
}
.article-detail-diffs-s .diff-before {
margin-bottom: 0.5rem;
}
.article-detail-diffs-s .diff:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
}
.article-detail-diffs-l {
display: none;
}
@media screen and (min-width: 800px) {
.article-detail-diffs-s {
display: none;
}
.article-detail-diffs-l {
display: table;
}
}
.article-detail-diffs-l th,
.article-detail-diffs-l td {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
} }
.article-detail-diffs td:last-child { .article-detail-diffs-l td:last-child {
width: 100%; width: 100%;
} }
.article-detail-diffs th { .article-detail-diffs-l th {
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
color: var(--color-muted); color: var(--color-muted);
font-weight: 500; font-weight: 500;
} }
.article-detail-diffs tr:not(:last-of-type) { .article-detail-diffs-l tr:not(:last-of-type) {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }

18
view/templates/article_detail.html
View file

@ -7,7 +7,23 @@
<a href="{{ article_url }}">{{ article_url|truncate(50) }}</a> <a href="{{ article_url }}">{{ article_url|truncate(50) }}</a>
</h1> </h1>
<div class="card"> <div class="card">
<table class="article-detail-diffs"> <div class="article-detail-diffs-s">
{% for diff in diffs %}
<div class="diff">
<p class="text-caption title">{{ diff.diff_time }}</p>
<div>
<p class="text-caption">Before</p>
<p class="diff-before">{{ diff.diff_html|safe }}</p>
</div>
<div>
<p class="text-caption">After</p>
<p class="diff-after">{{ diff.diff_html|safe }}</p>
</div>
</div>
{% endfor %}
</div>
<table class="article-detail-diffs-l">
{% for diff in diffs %} {% for diff in diffs %}
<tr> <tr>
<th>{{ diff.diff_time }}</th> <th>{{ diff.diff_time }}</th>