klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-13 13:29:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Amélioration des pages utilisateurs pour les petits écrans (#578, #520)

Browse Source 
- Refonte de l'organisation des pages utilisateurs (principalement du front)
  - Page des parrains/fillots
  - Page d'édition du profil
  - Page du profil
  - Page des outils
  - Page des préférences
  - Page des stats utilisateurs

- Refonte du CSS / organisation de la navbar principale (en haut de l'écran)
- Refonte du CSS de la navbar bleu clair (le menu)
- Refonte du CSS du SAS :
  - Page de photo
  - Page d'albums
This commit is contained in:
Julien Constant
2023-03-30 14:38:40 +02:00
committed by GitHub
parent 6c1fa6de0b
commit 28f397574f
41 changed files with 3415 additions and 1406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
core/templates/core/user_detail.jinja
View File

@ -1,6 +1,10 @@
{% extends "core/base.jinja" %}
{% from "core/macros.jinja" import show_slots, show_tokens, user_subscription %}
{%- block additional_css -%}
<link rel="stylesheet" href="{{ scss('user/user_detail.scss') }}">
{%- endblock -%}
{% block title %}
{% trans user_name=profile.get_display_name() %}{{ user_name }}'s profile{% endtrans %}
{% endblock %}
@ -10,144 +14,149 @@
{% endblock %}
{% block content %}
<div id="user_profile_page" x-data>
<div id="user_profile">
<div class="user_profile_page" x-data>
<div class="user_profile">
<!-- Profile -->
<div id="user_profile_infos">
<h4>{{ profile.get_full_name() }}</h4>
<div class="user-name">
<h3>{{ profile.get_full_name() }}</h3>
{% if profile.nick_name %}
<div id="user_profile_infos_nick">&laquo; {{ profile.nick_name }} &raquo;</div>
<div class="user_profile_infos_nick">&laquo; {{ profile.nick_name }} &raquo;</div>
{% endif %}
</div>
{% if profile.quote %}
<div id="user_profile_infos_quote">
<div class="infos-and-picture">
<div class="user_profile_infos">
{% if profile.quote %}
<div class="user_profile_infos_quote">
{{ profile.quote }}
</div>
{% endif %}
{% endif %}
<div id="user_profile_infos_items">
{% if profile.pronouns %}
<div>
<span class="user_profile_infos_item">{% trans %}Pronouns: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.pronouns }}</span>
</div>
{% endif %}
{% if profile.date_of_birth %}
<div class="user_profile_infos_items">
{% if profile.pronouns %}
<div>
<span class="user_profile_infos_item">{% trans %}Pronouns: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.pronouns }}</span>
</div>
{% endif %}
{% if profile.date_of_birth %}
<div>
<span class="user_profile_infos_item">{% trans %}Born: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.date_of_birth|date("d/m/Y") }}</span>
</div>
{% endif %}
{% endif %}
{% if profile.department != "NA" %}
{% if profile.department != "NA" %}
<div>
<span class="user_profile_infos_item">{% trans %}Department: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.department }}{{ profile.semester }}</span>
<span class="user_profile_infos_item_value">{{ profile.department }}{{ profile.semester
}}</span>
</div>
{% endif %}
{% endif %}
{% if profile.dpt_option %}
{% if profile.dpt_option %}
<div>
<span class="user_profile_infos_item">{% trans %}Option: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.dpt_option }}</span>
</div>
{% endif %}
{% endif %}
{% if profile.phone %}
{% if profile.phone %}
<div>
<span class="user_profile_infos_item">{% trans %}Phone: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.phone }}</span>
</div>
{% endif %}
{% endif %}
{% if profile.address %}
{% if profile.address %}
<div>
<span class="user_profile_infos_item">{% trans %}Address: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.address }}</span>
</div>
{% endif %}
{% endif %}
{% if profile.parent_address %}
{% if profile.parent_address %}
<div>
<span class="user_profile_infos_item">{% trans %}Parents address: {% endtrans %}</span>
<span class="user_profile_infos_item_value">{{ profile.parent_address }}</span>
</div>
{% endif %}
</div>
{% if profile.promo %}
<div id="user_profile_infos_promo">
<img src="{{ static('core/img/promo_%02d.png' % profile.promo) }}" alt="Promo {{ profile.promo }}" />
{% trans %}Promo: {% endtrans %}{{ profile.promo }}
{% endif %}
</div>
{% if profile.promo %}
<div class="user_profile_infos_promo">
{% trans %}Promo: {% endtrans %}{{ profile.promo }}
<img src="{{ static('core/img/promo_%02d.png' % profile.promo) }}"
alt="Promo {{ profile.promo }}" />
</div>
{% endif %}
</div>
<!-- Pictures -->
<div id="user_profile_pictures">
<div id="user_profile_pictures_bigone">
{% if profile.profile_pict %}
<img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" />
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" />
{% endif %}
</div>
<div id="user_profile_pictures_thumbnails">
{% if profile.profile_pict %}
<!-- Pictures -->
<div class="user_profile_pictures">
<div class="user_profile_pictures_bigone">
{% if profile.profile_pict %}
<img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" />
{% else %}
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" />
{% endif %}
{% endif %}
</div>
<div class="user_profile_pictures_thumbnails">
{% if profile.profile_pict %}
<img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" />
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}"
title="{% trans %}Profile{% endtrans %}" />
{% endif %}
{% if profile.avatar_pict %}
{% if profile.avatar_pict %}
<img src="{{ profile.avatar_pict.get_download_url() }}" alt="{% trans %}Avatar{% endtrans %}"
title="{% trans %}Avatar{% endtrans %}" />
{% else %}
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Avatar{% endtrans %}"
title="{% trans %}Avatar{% endtrans %}" />
{% endif %}
{% endif %}
{% if profile.scrub_pict %}
{% if profile.scrub_pict %}
<img src="{{ profile.scrub_pict.get_download_url() }}" alt="{% trans %}Scrub{% endtrans %}"
title="{% trans %}Scrub{% endtrans %}" />
{% else %}
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Scrub{% endtrans %}"
title="{% trans %}Scrub{% endtrans %}" />
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% 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) %}
</main>
{% 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) %}
{# if the user is member of a club, he can view the subscription state #}
<hr>
{% if profile.is_subscribed %}
{% if user == profile or user.is_root or user.is_board_member %}
<div>
{{ user_subscription(profile) }}
</div>
{% endif %}
{% if user == profile or user.is_root or user.is_board_member or user.is_launderette_manager %}
<div>
{# Shows tokens bought by the user #}
{{ show_tokens(profile) }}
{# Shows slots took by the user #}
{{ show_slots(profile) }}
</div>
{% endif %}
{% if user == profile or user.is_root or user.is_board_member %}
<div>
{{ user_subscription(profile) }}
</div>
{% endif %}
{% if user == profile or user.is_root or user.is_board_member or user.is_launderette_manager %}
<div>
{# Shows tokens bought by the user #}
{{ show_tokens(profile) }}
{# Shows slots took by the user #}
{{ show_slots(profile) }}
</div>
{% endif %}
{% else %}
<div>
<div>
{% trans %}Not subscribed{% endtrans %}
{% if user.is_board_member %}
<a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">{% trans %}New subscription{% endtrans %}</a>
{% endif %}
<a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">{% trans %}New subscription{% endtrans
%}</a>
{% endif %}
</div>
{% 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>
@ -183,9 +192,9 @@
{% endif %}
{% if user.is_root or user.is_board_member %}
<hr>
<div>
<hr>
<form style="margin-left: 0px;" action="{{ url('core:user_gift_create', user_id=profile.id) }}" method="post">
<form class="form-gifts" action="{{ url('core:user_gift_create', user_id=profile.id) }}" method="post">
{% csrf_token %}
{{ gift_form.label }}
{{ gift_form.user }}
@ -212,11 +221,11 @@
</a>
</li>
{% endfor %}
</ul>
</div>
</ul>
</div>
</div>
{% else %}
{% trans %}No gift given yet{% endtrans %}
<em>{% trans %}No gift given yet{% endtrans %}</em>
{% endif %}
</div>
{% endif %}
@ -228,33 +237,33 @@
{% block script %}
{{ super() }}
<script>
$( function() {
var keys = [];
var pattern = "71,85,89,71,85,89";
$(document).keydown(function (e) {
keys.push(e.keyCode);
if (keys.toString()==pattern) {
$(function () {
var keys = [];
var pattern = "71,85,89,71,85,89";
$(document).keydown(function (e) {
keys.push(e.keyCode);
if (keys.toString() == pattern) {
keys = [];
$("#user_profile_pictures_bigone img").attr("src", "{{ static('core/img/yug.jpg') }}");
}
if (keys.length==6) {
keys.shift();
}
}
if (keys.length == 6) {
keys.shift();
}
});
});
} );
$(function(){
$("#user_profile_pictures_thumbnails img").click(function () {
$("#user_profile_pictures_bigone img").attr("src", $(this)[0].src);
$("#user_profile_pictures_bigone img").attr("alt", $(this)[0].alt);
$("#user_profile_pictures_bigone img").attr("title", $(this)[0].title);
})
});
$(function(){
$("#drop_gifts").accordion({
heightStyle: "content",
collapsible: true,
active: false
$(function () {
$("#user_profile_pictures_thumbnails img").click(function () {
$("#user_profile_pictures_bigone img").attr("src", $(this)[0].src);
$("#user_profile_pictures_bigone img").attr("alt", $(this)[0].alt);
$("#user_profile_pictures_bigone img").attr("title", $(this)[0].title);
})
});
$(function () {
$("#drop_gifts").accordion({
heightStyle: "content",
collapsible: true,
active: false
});
});
});
</script>
{% endblock %}
{% endblock %}