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

core: make a nice user profile

Browse Source
This commit is contained in:
Skia
2018-06-05 00:18:07 +02:00
parent 9146251642
commit be1dc62848
3 changed files with 340 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
core/static/core/style.scss
View File

@ -1031,43 +1031,77 @@ u, .underline {
/*-----------------------------USER PROFILE----------------------------*/
#user_profile_container {
width: 80%;
margin: 0px auto;
}
#user_profile {
width: 100%;
margin: 0px auto;
padding: 10px;
overflow: auto;
h4 {
border-bottom: 1px solid $primary-light-color;
max-width: 60%;
}
#left_column {
width: 59%;
}
#right_column {
width: 40%;
float: right;
font-style: italic;
}
#pictures {
max-width: 250px;
max-height: 300px;
margin: 0px auto;
}
#nickname {
font-style: italic;
}
#pictures img {
max-width: 96%;
max-height: 96%;
}
.promo_pict {
height: 45px;
}
#user_profile_page {
#user_profile {
display: flex;
justify-content: center;
margin-top: 2em;
margin-bottom: 4em;
#user_profile_infos {
flex-basis: 30%;
border-right: solid 1px grey;
div {
margin: 0.5em;
}
#user_profile_infos_items {
margin-top: 3em;
}
.user_profile_infos_item, .user_profile_infos_item_value {
vertical-align: top;
display: inline-block;
width: 49%;
}
.user_profile_infos_item {
color: grey;
}
#user_profile_infos_promo {
display: flex;
align-items: center;
img {
margin: 0.5em;
}
}
#user_profile_infos_quote {
text-align: right;
color: grey;
font-style: italic;
&:after, &:before {
content: "\201C";
vertical-align: middle;
}
}
}
#user_profile_pictures {
height: 20em;
flex-basis: 30%;
display: flex;
justify-content: flex-end;
#user_profile_pictures_bigone {
flex-grow: 9;
flex-basis: 20em;
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
#user_profile_pictures_thumbnails {
flex-grow: 1;
flex-basis: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img {
margin: 0.1em;
width: 50px;
}
}
}
}
}
.mini_profile_link {
@ -1107,6 +1141,7 @@ u, .underline {
}
}
/* XXX This seems to be used in the SAS */
#pict {
display: inline-block;
width: 80%;

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

@ -6,97 +6,165 @@
{% endblock %}
{% block content %}
<div id="user_profile_container">
<div id="user_profile_page">
<div id="user_profile">
<div id="right_column">
<div id="pictures">
{% if profile.profile_pict %}
<img src="{{ profile.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" id="picture" />
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}" id="picture" />
{% endif %}
</div>
<p id="quote"><em>{{ profile.quote }}</em></p>
</div>
<div id="left_column">
<!-- Profile -->
<div id="user_profile_infos">
<h4>{{ profile.get_full_name() }}</h4>
{% if profile.nick_name %}
<p id="nickname">&laquo; {{ profile.nick_name }} &raquo;</p>
<div id="user_profile_infos_nick">&laquo; {{ profile.nick_name }} &raquo;</div>
{% endif %}
{% if profile.date_of_birth %}
<p>{% trans %}Born: {% endtrans %}{{ profile.date_of_birth|date("d/m/Y") }}</p>
{% if profile.quote %}
<div id="user_profile_infos_quote">
{{ profile.quote }}
</div>
{% endif %}
{% if profile.department != "NA" %}
<p>{{ profile.department }}{{ profile.semester }}
{% endif %}
{% if profile.dpt_option %}
<br>{% trans %}Option: {% endtrans %}{{ profile.dpt_option }}
{% endif %}
{% if profile.phone %}
<p>
{{ profile.phone }}
</p>
{% endif %}
{% if profile.address %}
<p>
{{ profile.address }}
</p>
{% endif %}
</p>
<div id="user_profile_infos_items">
{% 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 %}
{% 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>
</div>
{% endif %}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
<p><img src="{{ static('core/img/promo_%02d.png' % profile.promo) }}" alt="Promo {{ profile.promo }}" class="promo_pict" />
{% trans %}Promo: {% endtrans %}{{ profile.promo }}</p>
<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 }}
</div>
{% endif %}
</div>
</div>
</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 %}
<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 user.memberships.filter(end_date=None).exists() or user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) or user == profile %}
{# if the user is member of a club, he can view the subscription state #}
<p>
{% if profile.is_subscribed %}
{% if user == profile or user.is_root or user.is_board_member %}
{{ user_subscription(profile) }}
{% endif %}
{% if user == profile or user.is_root or user.is_board_member or user.is_launderette_manager %}
{# Shows tokens bought by the user #}
{{ show_tokens(profile) }}
{# Shows slots took by the user #}
{{ show_slots(profile) }}
{% endif %}
{% else %}
{% trans %}Not subscribed{% endtrans %}
{% if user.is_board_member %}
<a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">{% trans %}New subscription{% endtrans %}</a>
{% endif %}
{% endif %}
</p>
{% endif %}
{% if profile.avatar_pict %}
<img src="{{ profile.avatar_pict.get_download_url() }}" alt="{% trans %}Avatar{% endtrans %}"
title="{% trans %}Avatar{% endtrans %}" />
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Avatar{% endtrans %}"
title="{% trans %}Avatar{% endtrans %}" />
{% endif %}
{% if user.is_root or user.is_board_member %}
<hr>
<form style="margin-left: 0px;" 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() %}
<br>
<div id="drop_gifts">
<h5>{% trans %}Last given gift :{% endtrans %} {{ profile.gifts.order_by('-date').first() }}</h5>
<div>
<ul>
{% for gift in profile.gifts.all().order_by('-date') %}
<li>{{ gift }} <a href="{{ url('core:user_gift_delete', user_id=profile.id, gift_id=gift.id) }}">{% trans %}Delete{% endtrans %}</a></li>
{% endfor %}
</ul>
{% if profile.scrub_pict %}
<img src="{{ profile.scrub_pict.get_download_url() }}" alt="{% trans %}Scrub{% endtrans %}"
title="{% trans %}Scrub{% endtrans %}" />
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Scrub{% endtrans %}"
title="{% trans %}Scrub{% endtrans %}" />
{% endif %}
</div>
</div>
</div>
{% if user.memberships.filter(end_date=None).exists() or user.is_in_group(settings.SITH_MAIN_BOARD_GROUP) or user == profile %}
{# 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 %}
{% else %}
{% trans %}No gift given yet{% endtrans %}
<div>
{% trans %}Not subscribed{% endtrans %}
{% if user.is_board_member %}
<a href="{{ url('subscription:subscription') }}?member={{ profile.id }}">{% trans %}New subscription{% endtrans %}</a>
{% endif %}
{% endif %}
</div>
{% endif %}
{% endif %}
{% if user.is_root or user.is_board_member %}
<div>
<hr>
<form style="margin-left: 0px;" 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() %}
<br>
<div id="drop_gifts">
<h5>{% trans %}Last given gift :{% endtrans %} {{ profile.gifts.order_by('-date').first() }}</h5>
<div>
<ul>
{% for gift in profile.gifts.all().order_by('-date') %}
<li>{{ gift }} <a href="{{ url('core:user_gift_delete', user_id=profile.id, gift_id=gift.id) }}">{% trans %}Delete{% endtrans %}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
{% trans %}No gift given yet{% endtrans %}
{% endif %}
</div>
{% endif %}
</div>
{% endblock %}
@ -118,6 +186,13 @@ $( function() {
}
});
} );
$(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",