[FIX] Fixes supplémentaires pour la màj de mars (#622)

- Les photos de l'onglet de la page utilisateur utilise désormais leur version thumbnail au lieu de leur version HD
- Une des classes du CSS du SAS a été renommée car elle empiétait sur une class de la navbar
- Le profil utilisateur a été revu pour ajouter plus d'espacement entre le tableau des cotisations et le numéro de cotisants
- Les images de forum & blouse sont de nouveau cliquable pour les afficher en grands
- Sur mobile, lorsqu'on cliquait sur le premier élément de la navbar, ce dernier avait un overlay avec des angles arrondis
- Sur mobile, les utilisateurs avec des images de profils non carrées dépassait dans l'onglet Famille
This commit is contained in:
Julien Constant 2023-04-08 20:58:55 +02:00 committed by Julien Constant
parent 06253f029c
commit c1022642a2
7 changed files with 97 additions and 101 deletions

View File

@ -59,10 +59,6 @@ nav.navbar {
height: auto; height: auto;
justify-content: flex-start; justify-content: flex-start;
&:first-child {
border-radius: .6em .6em 0 0;
}
&:last-child { &:last-child {
border-radius: 0 0 .6em .6em; border-radius: 0 0 .6em .6em;

View File

@ -3,7 +3,7 @@ main {
padding: 10px; padding: 10px;
} }
.navbar { .album-navbar {
margin-top: 10px; margin-top: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

View File

@ -180,6 +180,7 @@ main {
max-height: calc(100% / 3); max-height: calc(100% / 3);
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
cursor: pointer;
@media (max-width: 960px) { @media (max-width: 960px) {
max-height: 100%; max-height: 100%;

View File

@ -69,7 +69,7 @@
@media (max-width: 375px) { @media (max-width: 375px) {
max-width: 100%; max-width: 100%;
max-height: 80px; max-height: 65px;
} }
} }
} }

View File

@ -99,7 +99,7 @@
</div> </div>
<!-- Pictures --> <!-- Pictures -->
<div class="user_profile_pictures"> <div class="user_profile_pictures">
<div class="user_profile_pictures_bigone"> <div class="user_profile_pictures_bigone" id="big_picture">
{% if profile.profile_pict %} {% if profile.profile_pict %}
<img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" <img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" /> title="{% trans %}Profile{% endtrans %}" />
@ -108,7 +108,7 @@
title="{% trans %}Profile{% endtrans %}" /> title="{% trans %}Profile{% endtrans %}" />
{% endif %} {% endif %}
</div> </div>
<div class="user_profile_pictures_thumbnails"> <div class="user_profile_pictures_thumbnails" id="small_pictures">
{% if profile.profile_pict %} {% if profile.profile_pict %}
<img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" <img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" /> title="{% trans %}Profile{% endtrans %}" />
@ -136,104 +136,103 @@
</div> </div>
</div> </div>
</main> </main>
{% if user.memberships.filter(end_date=None).exists() or user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) or user == {% if user.memberships.filter(end_date=None).exists() or user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) or user == profile or user.is_in_group(settings.SITH_BAR_MANAGER_BOARD_GROUP) %}
profile or user.is_in_group(settings.SITH_BAR_MANAGER_BOARD_GROUP) %} {# if the user is member of a club, he can view the subscription state #}
{# if the user is member of a club, he can view the subscription state #} <hr>
<hr> {% if profile.is_subscribed %}
{% if profile.is_subscribed %} {% if user == profile or user.is_root or user.is_board_member %}
{% if user == profile or user.is_root or user.is_board_member %} <div>
<div> {{ user_subscription(profile) }}
{{ user_subscription(profile) }} </div>
</div> {% endif %}
{% endif %} {% if user == profile or user.is_root or user.is_board_member or user.is_launderette_manager %}
{% if user == profile or user.is_root or user.is_board_member or user.is_launderette_manager %} <div>
<div> {# Shows tokens bought by the user #}
{# Shows tokens bought by the user #} {{ show_tokens(profile) }}
{{ show_tokens(profile) }} {# Shows slots took by the user #}
{# Shows slots took by the user #} {{ show_slots(profile) }}
{{ show_slots(profile) }} </div>
</div> {% endif %}
{% endif %} {% else %}
{% else %} <div>
<div> {% trans %}Not subscribed{% endtrans %}
{% trans %}Not subscribed{% endtrans %} {% if user.is_board_member %}
{% if user.is_board_member %} <a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">{% trans %}New subscription{% endtrans
<a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">{% trans %}New subscription{% endtrans %}</a>
%}</a> {% endif %}
{% endif %} {% endif %}
{% endif %}
</div>
{% endif %}
{% if profile.was_subscribed and (user == profile or user.can_read_subscription_history)%}
<div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak>
<div class="collapse-header clickable" @click="collapsed = !collapsed">
<span class="collapse-header-text">
{% trans %}Subscription history{% endtrans %}
</span>
<span class="collapse-header-icon" :class="{'reverse': collapsed}">
<i class="fa fa-caret-down"></i>
</span>
</div> </div>
<div class="collapse-body" x-show="collapsed" x-transition.scale.origin.top> {% endif %}
<table> <br>
<thead> {% if profile.was_subscribed and (user == profile or user.can_read_subscription_history)%}
<tr>
<th>{% trans %}Subscription start{% endtrans %}</th>
<th>{% trans %}Subscription end{% endtrans %}</th>
<th>{% trans %}Subscription type{% endtrans %}</th>
<th>{% trans %}Payment method{% endtrans %}</th>
</tr>
</thead>
{% for sub in profile.subscriptions.all() %}
<tr>
<td>{{ sub.subscription_start }}</td>
<td>{{ sub.subscription_end }}</td>
<td>{{ sub.subscription_type }}</td>
<td>{{ sub.get_payment_method_display() }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endif %}
{% if user.is_root or user.is_board_member %}
<hr>
<div>
<form class="form-gifts" action="{{ url('core:user_gift_create', user_id=profile.id) }}" method="post">
{% csrf_token %}
{{ gift_form.label }}
{{ gift_form.user }}
<input type="submit" value="{% trans %}Give gift{% endtrans %}">
</form>
{% if profile.gifts.exists() %}
{% set gifts = profile.gifts.order_by("-date")|list %}
<br>
<div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak> <div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak>
<div class="collapse-header clickable" @click="collapsed = !collapsed"> <div class="collapse-header clickable" @click="collapsed = !collapsed">
<span class="collapse-header-text"> <span class="collapse-header-text">
{% trans %}Last given gift :{% endtrans %} {{ gifts[0] }} {% trans %}Subscription history{% endtrans %}
</span> </span>
<span class="collapse-header-icon" :class="{'reverse': collapsed}"> <span class="collapse-header-icon" :class="{'reverse': collapsed}">
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</span> </span>
</div> </div>
<div class="collapse-body" x-show="collapsed" x-transition.scale.origin.top> <div class="collapse-body" x-show="collapsed" x-transition.scale.origin.top>
<ul> <table>
{% for gift in gifts %} <thead>
<li>{{ gift }} <tr>
<a href="{{ url('core:user_gift_delete', user_id=profile.id, gift_id=gift.id) }}"> <th>{% trans %}Subscription start{% endtrans %}</th>
<i class="fa fa-trash"></i> <th>{% trans %}Subscription end{% endtrans %}</th>
</a> <th>{% trans %}Subscription type{% endtrans %}</th>
</li> <th>{% trans %}Payment method{% endtrans %}</th>
{% endfor %} </tr>
</ul> </thead>
{% for sub in profile.subscriptions.all() %}
<tr>
<td>{{ sub.subscription_start }}</td>
<td>{{ sub.subscription_end }}</td>
<td>{{ sub.subscription_type }}</td>
<td>{{ sub.get_payment_method_display() }}</td>
</tr>
{% endfor %}
</table>
</div>
</div> </div>
</div>
{% else %}
<em>{% trans %}No gift given yet{% endtrans %}</em>
{% endif %} {% endif %}
</div>
<hr>
<div>
{% if user.is_root or user.is_board_member %}
<form class="form-gifts" action="{{ url('core:user_gift_create', user_id=profile.id) }}" method="post">
{% csrf_token %}
{{ gift_form.label }}
{{ gift_form.user }}
<input type="submit" value="{% trans %}Give gift{% endtrans %}">
</form>
{% if profile.gifts.exists() %}
{% set gifts = profile.gifts.order_by("-date")|list %}
<br>
<div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak>
<div class="collapse-header clickable" @click="collapsed = !collapsed">
<span class="collapse-header-text">
{% trans %}Last given gift :{% endtrans %} {{ gifts[0] }}
</span>
<span class="collapse-header-icon" :class="{'reverse': collapsed}">
<i class="fa fa-caret-down"></i>
</span>
</div>
<div class="collapse-body" x-show="collapsed" x-transition.scale.origin.top>
<ul>
{% for gift in gifts %}
<li>{{ gift }}
<a href="{{ url('core:user_gift_delete', user_id=profile.id, gift_id=gift.id) }}">
<i class="fa fa-trash"></i>
</a>
</li>
{% endfor %}
</ul>
</div>
{% else %}
<em>{% trans %}No gift given yet{% endtrans %}</em>
{% endif %}
</div>
{% endif %} {% endif %}
</div> </div>
@ -250,7 +249,7 @@
keys.push(e.keyCode); keys.push(e.keyCode);
if (keys.toString() == pattern) { if (keys.toString() == pattern) {
keys = []; keys = [];
$("#user_profile_pictures_bigone img").attr("src", "{{ static('core/img/yug.jpg') }}"); $("#big_picture img").attr("src", "{{ static('core/img/yug.jpg') }}");
} }
if (keys.length == 6) { if (keys.length == 6) {
keys.shift(); keys.shift();
@ -258,10 +257,10 @@
}); });
}); });
$(function () { $(function () {
$("#user_profile_pictures_thumbnails img").click(function () { $("#small_pictures img").click(function () {
$("#user_profile_pictures_bigone img").attr("src", $(this)[0].src); $("#big_picture img").attr("src", $(this)[0].src);
$("#user_profile_pictures_bigone img").attr("alt", $(this)[0].alt); $("#big_picture img").attr("alt", $(this)[0].alt);
$("#user_profile_pictures_bigone img").attr("title", $(this)[0].title); $("#big_picture img").attr("title", $(this)[0].title);
}) })
}); });
$(function () { $(function () {

View File

@ -21,7 +21,7 @@
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict"> <a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
<div <div
class="photo{% if not p.is_moderated %} not_moderated{% endif %}" class="photo{% if not p.is_moderated %} not_moderated{% endif %}"
style="background-image: url('{% if p.file %}{{ p.get_download_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');" style="background-image: url('{% if p.file %}{{ p.get_download_thumb_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
> >
{% if not p.is_moderated %} {% if not p.is_moderated %}
<div class="overlay">&nbsp;</div> <div class="overlay">&nbsp;</div>

View File

@ -29,7 +29,7 @@
<form action="" method="post" enctype="multipart/form-data"> <form action="" method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
<div class="navbar"> <div class="album-navbar">
<h3>{{ album.get_display_name() }}</h3> <h3>{{ album.get_display_name() }}</h3>
<div class="toolbar"> <div class="toolbar">