From e6593d4b140be8a1159615868748a3c7e4a58c6f Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom@hubrecht.ovh>
Date: Wed, 16 Sep 2020 00:53:44 +0200
Subject: [PATCH] Nouvelle page de vue de fiche d'annuaire

---
 fiches/templates/fiches/fiche.html | 136 +++++++++++++++--------------
 1 file changed, 70 insertions(+), 66 deletions(-)

diff --git a/fiches/templates/fiches/fiche.html b/fiches/templates/fiches/fiche.html
index 27dc3a7..b33c96e 100644
--- a/fiches/templates/fiches/fiche.html
+++ b/fiches/templates/fiches/fiche.html
@@ -1,73 +1,77 @@
 {% extends "fiches/base.html" %}
-{% block content %}
-  <div>
-    <div style="width:200px;height:200px;overflow:hidden;" >
-      {% if profile.picture %}
-      <img src="{{ profile.picture.url }}" width="200px" height="auto"/>
-      {% endif %}
-    </div>
-    <div>
-      <h3>{{ profile.full_name }}
-        ({{ profile.promotion }})
-        {% if profile.nickname %}
-        (<em>alias:</em>{{ profile.nickname }})</h3>
-        {% endif %}
-      <p>
-        {% if profile.pronoun %}
-        <em>Pronom(s) utilisé(s) :</em>{{ profile.pronoun }}
-        {% endif %}
-      </p>
-      <p>
-        {% if profile.department.exists %}
-        <em>Département{{ profile.department.count|pluralize}} :</em>
-        {% endif %}
-        {% for dep in profile.department.all %}
-          {{ dep }}
-          {% if not forloop.last %}
-            , 
-          {% endif %}
-        {% endfor %}
-        {% if profile.birth_date %}
-      </p>
-      <p>
-        {% if profile.phone_set.exists %}
-        <em>Téléphone{{ profile.phone_set.count|pluralize}} :</em>
-        {% endif %}
-        {% for ph in profile.phone_set.all %}
-          {{ ph }}
-          {% if not forloop.last %}
-            ,<br/> 
-          {% endif %}
-        {% endfor %}
-      </p>
-      <p>
-        {% if profile.social_set.exists %}
-        <em>{{ profile.social_set.count|pluralize:"Réseau social,Réseaux sociaux"}} :</em>
-        {% endif %}
-        {% for ph in profile.social_set.all %}
-          {{ ph }}
-          {% if not forloop.last %}
-            ,<br/> 
-          {% endif %}
-        {% endfor %}
-      </p>
-      <p>
-        <em>Date de naissance :</em> {{ profile.birth_date }}
-      </p>
-        {% endif %}
+{% load i18n %}
 
-        {% if profile.thurne %}
-      <p>
-        <em>Thurne :</em> {{ profile.thurne }}
-      </p>
-        {% endif %}
-    </div>
+{% block content %}
+
+
+<div class="content" id="content-view-profile">
+  <div class="content-header">
+    {% if profile.picture %}
+    <a href="{{ profile.picture.url }}">
+      <img class="photo" src="{{ profile.picture.url }}">
+    </a>
+    {% endif %}
+    <h2 class="name">
+      {{ profile.full_name }} ({{ profile.promotion }})
+      {% if profile.nickname %}
+      <span class="alias">(<em>alias :</em> {{ profile.nickname }})</span>
+      {% endif %}
+    </h2>
   </div>
-  <div>
-    {% if profile.text_field %}
-    <p>
-      <b>Champ libre :</b> {{ profile.text_field }}
+
+  <div class="infos">
+    {% if profile.pronoun %}
+    <p class="pronouns">
+      <span class="label">{% trans "Pronom(s) utilisé(s)" %}</span>
+      <span class="separator"></span>
+      <span class="value">{{ profile.pronoun }}</span>
+    </p>
+    {% endif %}
+    {% if profile.department.exists %}
+    <p class="department">
+      <span class="label">{% trans "Département" %}{{ profile.department.count|pluralize }}</span>
+      <span class="separator"></span>
+      <span class="value">{% for dep in profile.department.all %}{{ dep }}{% if not forloop.last %}, {% endif %}{% endfor %}</span>
+    </p>
+    {% endif %}
+    {% if profile.birth_date %}
+    <p class="birthdate">
+      <span class="label">{% trans "Date de naissance" %}</span>
+      <span class="separator"></span>
+      <span class="value">{{ profile.birth_date }}</span>
+    </p>
+    {% endif %}
+    {% if profile.thurne %}
+    <p class="room">
+      <span class="label">{% trans "Thurne" %}</span>
+      <span class="separator"></span>
+      <span class="value">{{ profile.thurne }}</span>
+    </p>
+    {% endif %}
+    {% if profile.phone_set.exists %}
+    <p class="phone">
+      <span class="label">{% trans "Téléphone" %}{{ profile.phone_set.count|pluralize }}</span>
+      <span class="separator"></span>
+      <span class="value">{% for p in profile.phone_set.all %}{{ p }}{% if not forloop.last %},<br>{% endif %}{% endfor %}</span>
+    </p>
+    {% endif %}
+    {% if profile.social_set.exists %}
+    <p class="phone">
+      <span class="label">{{ profile.social_set.count|pluralize:_("Réseau social,Réseaux sociaux") }}</span>
+      <span class="separator"></span>
+      <span class="value">{% for p in profile.social_set.all %}{{ p }}{% if not forloop.last %},<br>{% endif %}{% endfor %}</span>
     </p>
     {% endif %}
   </div>
+
+  {% if profile.text_field %}
+  <div class="free-text">
+    <span class="label">Champ libre</span>
+    <p class="value">QJFBsd</p>
+  </div>
+  {% endif %}
+
+</div>
+
+
 {% endblock %}