core: make a nice user profile

core/static/core/style.scss

@@ -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%;

core/templates/core/user_detail.jinja

@@ -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>
-            {% endif %}
-            {% if profile.date_of_birth %}
-            <p>{% trans %}Born: {% endtrans %}{{ profile.date_of_birth|date("d/m/Y") }}</p>
-            {% endif %}
-            {% if profile.department != "NA" %}
-            <p>{{ profile.department }}{{ profile.semester }}
-            {% endif %}
-            {% if profile.dpt_option %}
-            <br>{% trans %}Option: {% endtrans %}{{ profile.dpt_option }}
+                <div id="user_profile_infos_nick">&laquo; {{ profile.nick_name }} &raquo;</div>
             {% endif %}
-            {% if profile.phone %}
-            <p>
-            {{ profile.phone }}
-            </p>
-            {% endif %}
-            {% if profile.address %}
-            <p>
-            {{ profile.address }}
-            </p>
+
+            {% if profile.quote %}
+                <div id="user_profile_infos_quote">
+                    {{ profile.quote }}
+                </div>
             {% 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>
+        <!-- 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 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 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>
-</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 #}
-<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>
+    {% 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 %}
+        <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 %}
-    </p>
-{% 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 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>
-        </div>
-    {% else %}
-        {% trans %}No gift given yet{% endtrans %}
+        {% else %}
+            {% trans %}No gift given yet{% endtrans %}
+        {% endif %}
+    </div>
     {% endif %}
-{% 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",

locale/fr/LC_MESSAGES/django.po

@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2018-02-22 22:25+0100\n"
+"POT-Creation-Date: 2018-06-05 00:14+0200\n"
 "PO-Revision-Date: 2016-07-18\n"
 "Last-Translator: Skia <skia@libskia.so>\n"
 "Language-Team: AE info <ae.info@utbm.fr>\n"
@@ -17,9 +17,9 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
 
 #: accounting/models.py:61 accounting/models.py:110 accounting/models.py:138
-#: accounting/models.py:197 club/models.py:47 com/models.py:195
-#: com/models.py:209 core/templates/core/base.jinja:297 counter/models.py:113
-#: counter/models.py:140 counter/models.py:184 forum/models.py:49
+#: accounting/models.py:197 club/models.py:47 com/models.py:198
+#: com/models.py:212 core/templates/core/base.jinja:297 counter/models.py:113
+#: counter/models.py:140 counter/models.py:184 forum/models.py:54
 #: launderette/models.py:38 launderette/models.py:84 launderette/models.py:110
 #: stock/models.py:38 stock/models.py:54 stock/models.py:77 stock/models.py:97
 msgid "name"
@@ -66,7 +66,7 @@ msgid "account number"
 msgstr "numero de compte"
 
 #: accounting/models.py:113 accounting/models.py:139 club/models.py:227
-#: com/models.py:73 com/models.py:184 com/models.py:211 counter/models.py:149
+#: com/models.py:73 com/models.py:187 com/models.py:214 counter/models.py:149
 #: counter/models.py:185 trombi/models.py:149
 msgid "club"
 msgstr "club"
@@ -127,10 +127,10 @@ msgstr "numéro"
 msgid "journal"
 msgstr "classeur"
 
-#: accounting/models.py:258 core/models.py:657 core/models.py:1058
-#: core/models.py:1102 core/models.py:1129 counter/models.py:301
+#: accounting/models.py:258 core/models.py:657 core/models.py:1117
+#: core/models.py:1161 core/models.py:1188 counter/models.py:301
 #: counter/models.py:351 counter/models.py:484 eboutic/models.py:39
-#: eboutic/models.py:73 forum/models.py:240 forum/models.py:315
+#: eboutic/models.py:73 forum/models.py:248 forum/models.py:323
 #: stock/models.py:76
 msgid "date"
 msgstr "date"
@@ -166,7 +166,7 @@ msgid "accounting type"
 msgstr "type comptable"
 
 #: accounting/models.py:269 accounting/models.py:371 accounting/models.py:398
-#: accounting/models.py:422 core/models.py:1128 counter/models.py:343
+#: accounting/models.py:422 core/models.py:1187 counter/models.py:343
 msgid "label"
 msgstr "étiquette"
 
@@ -364,7 +364,7 @@ msgstr "Compte en banque : "
 #: core/templates/core/group_list.jinja:13 core/templates/core/macros.jinja:87
 #: core/templates/core/macros.jinja:106 core/templates/core/page_prop.jinja:14
 #: core/templates/core/user_account_detail.jinja:38
-#: core/templates/core/user_detail.jinja:91
+#: core/templates/core/user_detail.jinja:157
 #: core/templates/core/user_edit.jinja:19
 #: counter/templates/counter/last_ops.jinja:29
 #: counter/templates/counter/last_ops.jinja:59
@@ -948,7 +948,7 @@ msgstr "rôle"
 
 #: club/models.py:232 core/models.py:66 counter/models.py:114
 #: counter/models.py:141 election/models.py:14 election/models.py:99
-#: election/models.py:155 forum/models.py:50 forum/models.py:186
+#: election/models.py:155 forum/models.py:55 forum/models.py:194
 msgid "description"
 msgstr "description"
 
@@ -973,11 +973,11 @@ msgid "Enter a valid address. Only the root of the address is needed."
 msgstr ""
 "Entrez une adresse valide. Seule la racine de l'adresse est nécessaire."
 
-#: club/models.py:276 com/models.py:75 com/models.py:216 core/models.py:658
+#: club/models.py:276 com/models.py:75 com/models.py:219 core/models.py:658
 msgid "is moderated"
 msgstr "est modéré"
 
-#: club/models.py:277 com/models.py:76 com/models.py:217
+#: club/models.py:277 com/models.py:76 com/models.py:220
 msgid "moderator"
 msgstr "modérateur"
 
@@ -1289,7 +1289,7 @@ msgstr "Vous n'avez pas la permission de faire cela"
 msgid "Begin date"
 msgstr "Date de début"
 
-#: club/views.py:321 com/views.py:66 com/views.py:177 counter/views.py:1098
+#: club/views.py:321 com/views.py:65 com/views.py:177 counter/views.py:1098
 #: election/views.py:135 subscription/views.py:47
 msgid "End date"
 msgstr "Date de fin"
@@ -1331,9 +1331,9 @@ msgstr "Hebdomadaire"
 msgid "Call"
 msgstr "Appel"
 
-#: com/models.py:69 com/models.py:133 com/models.py:181 election/models.py:13
-#: election/models.py:98 election/models.py:134 forum/models.py:190
-#: forum/models.py:238
+#: com/models.py:69 com/models.py:133 com/models.py:184 election/models.py:13
+#: election/models.py:98 election/models.py:134 forum/models.py:198
+#: forum/models.py:246
 msgid "title"
 msgstr "titre"
 
@@ -1341,17 +1341,17 @@ msgstr "titre"
 msgid "summary"
 msgstr "résumé"
 
-#: com/models.py:71 com/models.py:182 trombi/models.py:135
+#: com/models.py:71 com/models.py:185 trombi/models.py:135
 msgid "content"
 msgstr "contenu"
 
-#: com/models.py:72 core/models.py:1101 launderette/models.py:86
+#: com/models.py:72 core/models.py:1160 launderette/models.py:86
 #: launderette/models.py:112 launderette/models.py:149 stock/models.py:59
 #: stock/models.py:98
 msgid "type"
 msgstr "type"
 
-#: com/models.py:74 com/models.py:183 trombi/models.py:133
+#: com/models.py:74 com/models.py:186 trombi/models.py:133
 msgid "author"
 msgstr "auteur"
 
@@ -1387,23 +1387,23 @@ msgstr "conclusion"
 msgid "sent"
 msgstr "envoyé"
 
-#: com/models.py:180
+#: com/models.py:183
 msgid "weekmail"
 msgstr "weekmail"
 
-#: com/models.py:185
+#: com/models.py:188
 msgid "rank"
 msgstr "rang"
 
-#: com/models.py:210 core/models.py:648 core/models.py:664
+#: com/models.py:213 core/models.py:648 core/models.py:664
 msgid "file"
 msgstr "fichier"
 
-#: com/models.py:215
+#: com/models.py:218
 msgid "display time"
 msgstr "temps d'affichage"
 
-#: com/models.py:228
+#: com/models.py:231
 msgid "Begin date should be before end date"
 msgstr "La date de début doit être avant celle de fin"
 
@@ -1492,7 +1492,7 @@ msgstr "Type"
 #: com/templates/com/weekmail.jinja:19 com/templates/com/weekmail.jinja:48
 #: core/templates/core/base.jinja:307 forum/templates/forum/forum.jinja:29
 #: forum/templates/forum/forum.jinja:48 forum/templates/forum/main.jinja:26
-#: forum/views.py:168
+#: forum/views.py:175
 msgid "Title"
 msgstr "Titre"
 
@@ -1810,7 +1810,7 @@ msgstr "Astuce"
 msgid "Final word"
 msgstr "Le mot de la fin"
 
-#: com/views.py:64 com/views.py:176 election/views.py:133
+#: com/views.py:63 com/views.py:176 election/views.py:133
 #: subscription/views.py:44
 msgid "Start date"
 msgstr "Date de début"
@@ -2098,8 +2098,14 @@ msgid "A user with that username already exists"
 msgstr "Un utilisateur de ce nom d'utilisateur existe déjà"
 
 #: core/models.py:494 core/templates/core/macros.jinja:55
-#: core/templates/core/user_detail.jinja:14
-#: core/templates/core/user_detail.jinja:16
+#: core/templates/core/user_detail.jinja:79
+#: core/templates/core/user_detail.jinja:80
+#: core/templates/core/user_detail.jinja:82
+#: core/templates/core/user_detail.jinja:83
+#: core/templates/core/user_detail.jinja:88
+#: core/templates/core/user_detail.jinja:89
+#: core/templates/core/user_detail.jinja:91
+#: core/templates/core/user_detail.jinja:92
 #: core/templates/core/user_edit.jinja:17
 #: election/templates/election/election_detail.jinja:340
 #: forum/templates/forum/macros.jinja:93 forum/templates/forum/macros.jinja:95
@@ -2132,7 +2138,7 @@ msgstr "recevez une notification pour chaque rechargement"
 msgid "file name"
 msgstr "nom du fichier"
 
-#: core/models.py:647 core/models.py:862
+#: core/models.py:647 core/models.py:919
 msgid "parent"
 msgstr "parent"
 
@@ -2148,11 +2154,11 @@ msgstr "miniature"
 msgid "owner"
 msgstr "propriétaire"
 
-#: core/models.py:652 core/models.py:868 core/views/files.py:149
+#: core/models.py:652 core/models.py:927 core/views/files.py:149
 msgid "edit group"
 msgstr "groupe d'édition"
 
-#: core/models.py:653 core/models.py:869 core/views/files.py:150
+#: core/models.py:653 core/models.py:928 core/views/files.py:150
 msgid "view group"
 msgstr "groupe de vue"
 
@@ -2198,19 +2204,19 @@ msgstr "Un fichier de ce nom existe déjà"
 msgid "You must provide a file"
 msgstr "Vous devez fournir un fichier"
 
-#: core/models.py:800
+#: core/models.py:857
 msgid "Folder: "
 msgstr "Dossier : "
 
-#: core/models.py:802
+#: core/models.py:859
 msgid "File: "
 msgstr "Fichier : "
 
-#: core/models.py:854
+#: core/models.py:911
 msgid "page unix name"
 msgstr "nom unix de la page"
 
-#: core/models.py:858
+#: core/models.py:915
 msgid ""
 "Enter a valid page name. This value may contain only unaccented letters, "
 "numbers and ./+/-/_ characters."
@@ -2218,51 +2224,51 @@ msgstr ""
 "Entrez un nom de page correct. Uniquement des lettres non accentuées, "
 "numéros, et ./+/-/_"
 
-#: core/models.py:865
+#: core/models.py:922
 msgid "page name"
 msgstr "nom de la page"
 
-#: core/models.py:866
+#: core/models.py:925