devs/PCv5
devs
/
PCv5
7
10
Fork 4
Code Issues 25 Pull Requests Releases Wiki Activity

threads: improve layout and flow of messages 

* When there is enough space, put links and date on the right
* On small screens, compact profile information
* On small screens, leave links and date on the right to maximize
  message width
This commit is contained in:
Lephe 2020-10-31 15:15:44 +01:00
parent 05c16b8fa8
commit c7846c4f8b
Signed by: Lephenixnoir
GPG Key ID: 1BBA026E13FC0495
5 changed files with 64 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/static/css/responsive.css
View File

@ -13,6 +13,10 @@
#menu a {
font-size: 13px;
}
section {
width: 90%;
}
}
@media all and (min-width: 1400px) {
@ -33,10 +37,6 @@
.home-pinned-content article:nth-child(5) {
display: none;
}
section {
width: 90%;
}
}
@media screen and (max-width: 849px) {

35
app/static/css/table.css
View File

@ -70,13 +70,42 @@ table.topiclist tr > td:last-child {
table.thread {
width: 100%;
border-width: 1px 0;
}
table.thread.topcomment {
border: none;
}
table.thread td.author {
width: 20%;
width: 256px;
}
table.thread td {
vertical-align: top;
vertical-align: top;
}
table.thread td:nth-child(2) {
padding-top: 10px;
padding-top: 0;
padding-bottom: 0;
}
table.thread div.info {
float: right;
text-align: right;
opacity: 0.7;
padding-top: 8px;
margin-left: 16px;
}
@media screen and (max-width: 1199px) {
table.thread div.info {
float: none;
display: flex;
flex-direction: row;
margin-left: 0;
}
table.thread div.info > *:not(:last-child):after {
content: '·';
margin: 0 4px;
}
table.thread td.author {
/* Includes padding */
width: 136px;
}
}

19
app/static/css/widgets.css
View File

@ -56,6 +56,25 @@
margin-bottom: 8px;
}
@media screen and (max-width: 1199px) {
table.thread .profile {
flex-direction: column;
width: 128px;
}
table.thread .profile-avatar {
order: 1;
margin-right: 0;
}
table.thread .profile-title,
table.thread .profile-points,
table.thread .profile-xp {
display: none;
}
table.thread .profile-points-small {
display: inline;
}
}
/* Trophies */
.trophies {
display: flex; flex-wrap: wrap; justify-content: space-between;

16
app/templates/widgets/thread.html
View File

@ -8,14 +8,14 @@
{% if c != top_comment %}
<td class="author">{{ widget_user.profile(c.author) }}</td>
<td>
<div>{% if c.date_created != c.date_modified %}
Posté le {{ c.date_created|date }} (Modifié le {{ c.date_modified|date }})
{% else %}
Posté le {{ c.date_created|dyndate }}
{% endif %}
| <a href="{{ request.path }}#{{ c.id }}">#</a>
| <a href="{{ url_for('edit_post', postid=c.id, r=request.path) }}">Modifier</a>
| <a href="{{ url_for('delete_post', postid=c.id, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé')">Supprimer</a>
<div class="info">
<div>Posté le {{ c.date_created|date }}</div>
{% if c.date_created != c.date_modified %}
<div>Modifié le {{ c.date_modified|date }}</div>
{% endif %}
<div><a href="{{ request.path }}#{{ c.id }}">Permalink</a></div>
<div><a href="{{ url_for('edit_post', postid=c.id, r=request.path) }}">Modifier</a></div>
<div><a href="{{ url_for('delete_post', postid=c.id, csrf_token=csrf_token()) }}" onclick="return confirm('Le message sera supprimé')">Supprimer</a></div>
</div>
{{ c.text|md }}

2
app/templates/widgets/user.html
View File

@ -10,7 +10,7 @@
<div class="profile-title">Membre</div>
{% endif %}
<div class="profile-points">Niveau {{ user.level[0] }} <span>({{ user.xp }})</span></div>
<div class="profile-points-small">N{{ user.level[0] }} <span>({{ user.xp }})</span></div>
<div class="profile-points-small">Niv. {{ user.level[0] }}</div>
{% if user.level[0] <= 100 %}
<div class="profile-xp"><div style='width: {{ user.level[0] }}%;'></div></div>
{% else %}