Improve and harmonize user detail template and style.

coin/members/templates/members/detail.html

@@ -9,45 +9,69 @@
 <div class="row">
     <div class="large-6 columns">
         <div class="panel">
-            <h3>Me joindre</h3>
-            <table class="full-width">
+            <h3>Mes coordonnées</h3>
+            <table id="personnal-info" class="full-width no-border no-background">
+            {% if user.type == 'natural_person' %}
+                {% if user.first_name %}
                 <tr>
-                  {% if user.type == 'natural_person' %}
-                    <td class="center"><span class="label">Prénom - Nom</span></td>
-                    <td>{{user.first_name}} {{user.last_name}}
-                      {% if user.nickname %}
-                      ({{ user.nickname }})
-                      {% endif %}
-                    </td>
-                  {% else %}
-                    <td class="center"><span class="label">Nom de la structure</span></td>
+                    <td>Prénom</td>
+                    <td>{{user.first_name}}</td>
+                </tr>
+                {% endif %}
+                {% if user.last_name %}
+                <tr>
+                    <td>Nom</td>
+                    <td>{{user.last_name}}</td>
+                </tr>
+                {% endif %}
+                {% if user.nickname %}
+                <tr>
+                    <td>Pseudo</td>
+                    <td>{{ user.nickname }}</td>
+                </tr>
+                {% endif %}
+            {% else %}
+                <tr>
+                    <td>Nom de la structure</td>
                     <td>{{ user.organization_name }}</td>
-                  {% endif %}
                 </tr>
+            {% endif %}
+
+            {% if user.address %}
                 <tr>
-                    <td class="center"><span class="label">Adresse</span></td>
+                    <td>Adresse</td>
                     <td>{{user.address}}<br />{{user.postal_code}} {{user.city}}</td>
                 </tr>
+            {% endif %}
+
+            {% if user.email %}
                 <tr>
-                    <td class="center"><span class="label">Email</span></td>
+                    <td>Email</td>
                     <td>{{user.email}}</td>
                 </tr>
+            {% endif %}
+
+            {% if user.home_phone_number %}
                 <tr>
-                    <td class="center"><span class="label">Téléphone fixe</span></td>
+                    <td>Téléphone fixe</td>
                     <td>{{user.home_phone_number}}</td>
                 </tr>
+            {% endif %}
+
+            {% if user.mobile_phone_number %}
                 <tr>
-                    <td class="center"><span class="label">Téléphone mobile</span></td>
+                    <td>Téléphone mobile</td>
                     <td>{{user.mobile_phone_number}}</td>
                 </tr>
+            {% endif %}
             </table>
         </div>
     </div>
 
     <div class="large-6 columns">
         <div class="panel">
-            <h3>Je suis membre de l'association {{ branding.shortname|capfirst }}</h3>
-            <p>et ma cotisation est :
+            <h3>Membre de {{ branding.shortname|capfirst }}</h3>
+            <p>Ma cotisation est :
                 {% if user.is_paid_up %}
                     <span class="label success">à jour !</span>
                 {% else %}
@@ -62,13 +86,11 @@
                 {% endif %}
             </p>
 
-            <a href="{{ membership_info_url }}" target="_blank" class="button small radius expand"><i class="fa fa-heart"></i>
- Renouveler ma cotisation</a>
+            <a href="{{ membership_info_url }}" target="_blank" class="button small radius expand">
+                <i class="fa fa-heart"></i> Renouveler ma cotisation
+            </a>
         </div>
-        <!--<div class="pa nel">
-            <h3>Infos additionnelles</h3>
-            <span class="label">Clé ssh</span> coin.pub
-        </div>-->
+
     </div>
 
 </div>

coin/static/css/local.css

@@ -145,6 +145,23 @@ table.no-background tr {
 }
 
 
+/* Specific table: Member personnal info */
+#personnal-info {
+    border-collapse: collapse;
+}
+#personnal-info td {
+    vertical-align: top;
+}
+#personnal-info tr:last-child td {
+    border-bottom: none;
+}
+#personnal-info tr td:first-child {
+    text-align: right;
+    color: #666;
+    font-weight: bold;
+}
+
+
 /* Footer */
 
 #footer {