Use a grid and sections inside the pages content.

costs/templates/costs/base.html

@@ -50,10 +50,12 @@
       <aside class="ui right rail sticky" style="width: 250px">
         {% block rail %}{% endblock %}
       </aside>
-
+      <article class="ui padded grid">
 {% block content %}
 
+
 {% endblock %}
+      </article>
     </div>
   </div>
 </body>

costs/templates/costs/document_detail.html

@@ -2,8 +2,6 @@
 
 {% load costs %}
 
-{% block title %}{{ document.name }}{% endblock %}
-
 
 {% block rail %}
 
@@ -22,7 +20,8 @@
 
 {% block content %}
 
-<h2 class="ui header sixteen wide column">Services proposés</h2>
+<section class="ui row">
+<h2>Services proposés aux adhérents</h2>
 <ul>
 {% for service in document.service_set.all %}
   <li>
@@ -34,7 +33,10 @@
 {% endfor %}
 </ul>
 
-<h2 class="ui header sixteen wide column">Coûts</h2>
+</section>
+
+<section class="ui row">
+<h2>Coûts récurents</h2>
 
 <table class="ui structured table">
   <thead>
@@ -68,9 +70,11 @@
 {% empty %}
   <tr><td>Pas de coût pour l'instant.</td></tr>
 {% endfor %}
-    <tbody>
+  </tbody>
 </table>
+</section>
 
+<section class="ui row">
 <h2>Matériel et frais d'accès</h2>
 <table class="ui structured table">
   <thead>
@@ -111,4 +115,5 @@
   <tr><td>Pas de matériel pour l'instant.</td></tr>
 {% endfor %}
 </table>
-{% endblock %}
+</section>
+{% endblock %}

costs/templates/costs/documents_list.html

@@ -22,24 +22,49 @@ des <span class="ui label small orange">scénarios/estimations</span>
 
 {% block content %}
 {% if documents.count > 0 %}
-<ul>
+<section class="ui row">
+  <ul>
 {% for doc in documents %}
-  <li>
-    <a href="{{ doc.get_absolute_url }}">{{ doc.name }}</a>
+    <li>
+      <a href="{{ doc.get_absolute_url }}">{{ doc.name }}</a>
     ({{ doc.date|date:"M Y" }}, {{ doc.service_set.count }} service{{ doc.service_set.count|pluralize }})
-    <span class="ui label
-         {% if doc.type == doc.TYPE_PLAN %} orange {% endif %}">
+      <span class="ui label
+            {% if doc.type == doc.TYPE_PLAN %} orange {% endif %}">
       {{ doc.get_type_display }}
-    </span>
-  </li>
+      </span>
+    </li>
 
 {% endfor %}
-</ul>
+  </ul>
 
 
 {% else %}
-<p>
+  <p>
 Pas de documents pour l'heure.
-</p>
+  </p>
 {% endif %}
-{% endblock %}
+
+<div class="ui segment">
+
+    <p>
+L'association FAImaison pratique le <strong>prix libre</strong> pour une partie
+de ses services.
+
+    </p>
+    <p>
+
+Afin que tout un chacun puisse <strong>choisir son prix d'abonnement de manière
+éclairée</strong>, il est nécessaire de pratiquer une
+      <strong>transparence</strong> sur le coût réel des services.
+
+    </p>
+    <p>
+
+Cette interface présente les coûts détaillés pour chaque service,
+qu'ils soient déjà proposés ou au stade de projet.
+
+    </p>
+
+</div>
+</section>
+  {% endblock %}

costs/templates/costs/service_detail.html

@@ -33,84 +33,89 @@
 
 
 {% block content %}
-<h2 class="ui header sixteen wide column">Coût récurent mensuel</h2>
-<table class="ui celled structured table">
-  <thead>
-    <tr>
-      <th>Type</th><th>Nom</th><th class="right aligned">Coût mensuel <br> (par abonnement)</th>
-    </tr>
-  </thead>
-  <tbody>
+<section class="ui row">
+  <h2>Coût récurent mensuel</h2>
+  <table class="ui celled structured table">
+    <thead>
+      <tr>
+        <th>Type</th><th>Nom</th><th class="right aligned">Coût mensuel <br> (par abonnement)</th>
+      </tr>
+    </thead>
+    <tbody>
   {% for usage in goods_uses %}
-    <tr>
+      <tr>
       {% if forloop.first %}
-      <td rowspan="{{ goods_uses|length }}">Amortissement</td>
+        <td rowspan="{{ goods_uses|length }}">Amortissement</td>
       {% endif %}
-      <td>
+        <td>
        {{ usage.resource.name }}
-        <span class="bare-info">
+          <span class="bare-info">
        {% if usage.resource.capacity_unit %}
            ({{ usage.unit_share|human_round }} {{ usage.resource.get_capacity_unit_display }})
          {% else %}
            ({{ usage.unit_real_share|percent }})
          {% endif %}
-        </span>
-      </td>
-      <td class="right aligned">{{ usage.unit_monthly_provision_share|price }}</td>
-    </tr>
+          </span>
+        </td>
+        <td class="right aligned">{{ usage.unit_monthly_provision_share|price }}</td>
+      </tr>
   {% endfor %}
   {% for usage in costs_uses %}
-    <tr>
+      <tr>
       {% if forloop.first %}
-      <td rowspan="{{ costs_uses|length }}">Récurent</td>
+        <td rowspan="{{ costs_uses|length }}">Récurent</td>
       {% endif %}
-      <td>
+        <td>
       {{ usage.resource.name }}
-        <span class="bare-info">
+          <span class="bare-info">
                {% if usage.resource.capacity_unit %}
            ({{ usage.unit_share|human_round }} {{ usage.resource.get_capacity_unit_display }})
          {% else %}
            ({{ usage.unit_real_share|percent }})
          {% endif %}
-        </span>
-      </td>
-      <td class="right aligned">{{ usage.unit_cost_share|price }}</td>
-    </tr>
+          </span>
+        </td>
+        <td class="right aligned">{{ usage.unit_cost_share|price }}</td>
+      </tr>
   {% endfor %}
-  </tbody>
-  <tfoot>
-    <tr>
-      <th colspan="2"><strong>Coût de revient par abonnement</strong></th>
-      <th class="right aligned"><strong>{{ unit_costs_price|price }}</strong></th>
-    </tr>
-  </tfoot>
-</table>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th colspan="2"><strong>Coût de revient par abonnement</strong></th>
+        <th class="right aligned"><strong>{{ unit_costs_price|price }}</strong></th>
+      </tr>
+    </tfoot>
+  </table>
+</section>
 
-<h2>Coût de mise en place (FAS)</h2>
-<table class="ui celled structured table">
-  <thead>
-    <tr>
-      <th>Nom</th><th>Coût (par nouvel abonnement)</th>
-    </tr>
-  </thead>
-  <tbody>
+<section class="ui row">
+  <h2>Coût de mise en place (FAS)</h2>
+  <table class="ui celled structured table">
+    <thead>
+      <tr>
+        <th>Nom</th><th>Coût (par nouvel abonnement)</th>
+      </tr>
+    </thead>
+    <tbody>
 {% for good_use in goods_uses %}
-    <tr>
-      <td>{{ good_use.resource.name }}</td>
-      <td>{{ good_use.unit_value_share|price }}</td>
-    </tr>
+      <tr>
+        <td>{{ good_use.resource.name }}</td>
+        <td>{{ good_use.unit_value_share|price }}</td>
+      </tr>
 {% endfor %}
-  </tbody>
-  <tfoot>
-    <tr>
-      <th><strong>Coût de mise en place par nouvel abonnement</strong></th>
-      <th><strong>{{ unit_goods_value_share|price }}</strong></th>
-    </tr>
-  </tfoot>
-</table>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th><strong>Coût de mise en place par nouvel abonnement</strong></th>
+        <th><strong>{{ unit_goods_value_share|price }}</strong></th>
+      </tr>
+    </tfoot>
+  </table>
 
-La mise en place lissée sur 12 mois, elle équivaut à
-{{ monthly_fas|price }}/mois.
-</p>
+  <p>
+Lissée sur 12 mois, la mise en place équivaut à {{ monthly_fas|price }}/mois.
+  </p>
 
-{% endblock %}
+</section>
+
+{% endblock %}