profil: complétion de la page de profil (#9)

This commit is contained in:
Darks 2020-07-19 21:14:34 +02:00
parent 5f84a64221
commit 4d3e1a14f3
Signed by: Darks
GPG Key ID: F61F10FA138E797C
7 changed files with 156 additions and 58 deletions

View File

@ -3,6 +3,7 @@ from werkzeug.utils import secure_filename
import os.path
from app import app
from app.models.users import Member
from app.models.trophies import Trophy
from app.utils import unicode_names
from app.utils.render import render
from config import V5Config
@ -12,7 +13,8 @@ from config import V5Config
def user(username):
norm = unicode_names.normalize(username)
member = Member.query.filter_by(norm=norm).first_or_404()
return render('account/user.html', member=member)
trophies = Trophy.query.all()
return render('account/user.html', member=member, trophies=trophies)
@app.route('/membre/id/<int:user_id>')

View File

@ -58,45 +58,6 @@ input[type="submit"]:hover,
text-decoration: none;
}
/* Profile summaries */
.profile {
display: flex;
align-items: center;
}
.profile-avatar {
width: 128px;
height: 128px;
margin-right: 16px;
}
.profile-name {
font-weight: bold;
}
.profile-title {
margin-bottom: 8px;
}
.profile-points {
font-size: 11px;
}
.profile-points span {
color: gray;
}
.profile-points-small {
display: none;
}
.profile-xp {
height: 10px;
min-width: 96px;
background: #e0e0e0;
border: 1px solid #c0c0c0;
}
.profile-xp div {
height: 10px;
background: #f85555;
border: 1px solid #d03333;
margin: -1px;
}
@media screen and (max-width: 1499px) {
.profile-avatar {

View File

@ -88,3 +88,10 @@ footer {
--btn-text: #000000;
--btn-bg-active: rgba(0, 0, 0, .15);
}
.profile-xp {
--background: #e0e0e0;
--border: 1px solid #c0c0c0;
--background-xp: #f85555;
--border-xp: 1px solid #d03333;
}

View File

@ -0,0 +1,71 @@
/* Profile summaries */
.profile {
display: flex;
align-items: center;
}
.profile-avatar {
width: 128px;
height: 128px;
margin-right: 16px;
}
.profile-name {
font-weight: bold;
}
.profile-title {
margin-bottom: 8px;
}
.profile-points {
font-size: 11px;
}
.profile-points span {
color: gray;
}
.profile-points-small {
display: none;
}
.profile-xp {
height: 10px;
min-width: 96px;
background: var(--background);
border: var(--border);
}
.profile-xp div {
height: 10px;
background: var(--background-xp);
border: var(--border-xp);
margin: -1px;
}
/* Trophies */
.trophies {
display: flex; flex-wrap: wrap; justify-content: space-between;
}
.trophy {
display: flex; align-items: center;
width: 260px;
margin: 5px; padding: 5px;
border: 1px solid #c5c5c5;
border-left: 5px solid var(--links);
border-radius: 2px;
}
.trophy img {
height: 50px; margin-right: 5px;
}
.trophy div > * {
display: block;
}
.trophy em {
font-style: normal; font-weight: bold;
margin-bottom: 3px;
}
.trophy span {
font-size: 80%;
}
.trophy.disabled {
filter: grayscale(100%);
opacity: .5;
border-left: 1px solid #c5c5c5;
}

View File

@ -7,27 +7,83 @@
{% block content %}
<section>
{{ widget_member.profile(member) }}
<div style="display:flex;flex-wrap:wrap;align-items:center;">
<div>
{{ widget_member.profile(member) }}
{% if current_user.is_authenticated %}
{% if current_user == member %}
<div><a href="{{ url_for('edit_account') }}">Modifier le compte</a></div>
{% elif current_user.priv('access-admin-panel') %}
<div><a href="{{ url_for('adm_edit_account', user_id=member.id) }}">Modifier le compte</a></div>
{% endif %}
{% endif %}
{% if current_user.is_authenticated %}
{% if current_user == member %}
<div><a href="{{ url_for('edit_account') }}">Modifier le compte</a></div>
{% elif current_user.priv('access-admin-panel') %}
<div><a href="{{ url_for('adm_edit_account', user_id=member.id) }}">Modifier le compte</a></div>
{% endif %}
{% endif %}
<!-- <div>Membre depuis le {{ member.register_date|date('%Y-%m-%d') }}</div>
<h2>Trophées</h2>
{% if member.birthday %}
<div>Anniversaire le {{ member.birthday|date('%Y-%M-%d') }}</div>
{% endif %} -->
</div>
<div style="padding:30px;">
<div style="font-size:115%;font-style:italic;margin-bottom:15px;">
{{ member.signature }}
</div>
<div>
Membre depuis le {{ member.register_date|date('%Y-%m-%d') }}
</div>
</div>
</div>
<h2>Présentation</h2>
<div>
{{ member.bio }}
</div>
<h2>Groupes</h2>
<div>
{% if member.trophies %}
<ul>
{% for t in member.trophies %}
<li>{{ t.name }}</li>
{% for g in member.groups %}
<li><a href="{# url_for('group', group=g.name) #}">{{ g.name }}</a></li>
{% endfor %}
</ul>
{% else %}
Aucun trophée.
{% endif %}
</div>
</div>
<h2>Trophées</h2>
<div class="trophies">
{% for t in trophies %}
<div class="trophy {{ '' if t in member.trophies else 'disabled' }}">
<img src="{{ url_for('static', filename='images/fa_124.png') }}">
<div>
<em>{{ t.name }}</em>
<span>Avoir posté 50 messages sur le forum</span>
</div>
</div>
{% endfor %}
</div>
<h2>Programmes</h2>
<div>
Ici y'aura les programmes
</div>
<h2>Topics</h2>
<div>
<table style="width:100%;">
<tr>
<th>Titre</th>
<th>Forum</th>
<th>Création</th>
<th>Commentaires</th>
</tr>
{% for t in member.posts if t.type == "topic" %}
<tr>
<td><a href="{{ url_for('forum_topic', f=t.forum, page=(t, 1)) }}">{{ t.title }}</a></td>
<td><a href="{{ url_for('forum_page', f=t.forum) }}">{{ t.forum.name }}</a></td>
<td>Le {{ t.date_created|date }}</td>
<td>{{ t.thread.comments.count() }}</td>
</tr>
{% endfor %}
</table>
</div>
</section>
{% endblock %}

View File

@ -1,9 +1,9 @@
from app import app
@app.template_filter('date')
def filter_date(date):
def filter_date(date, format="%Y-%m-%d à %H:%M"):
"""
Print a date in a human-readable format.
"""
return date.strftime("%d %b %Y à %H:%M")
return date.strftime(format)

View File

@ -19,6 +19,7 @@ def render(*args, styles=[], scripts=[], **kwargs):
'css/navbar.css',
'css/header.css',
'css/container.css',
'css/widgets.css',
'css/editor.css',
'css/form.css',
'css/footer.css',