Semantic-uize document detail

costs/templates/costs/document_detail.html

@@ -5,25 +5,37 @@
 {% block title %}{{ document.name }}{% endblock %}
 
 
+{% block rail %}
+
+{% if document.comment %}
+<div class="ui segment" style="width: 100%">
+  <p>
+    <a class="ui ribbon left label">Notes</a>
+{{ document.comment|linebreaks }}
+  </p>
+</div>
+{% endif %}
+
+{% endblock %}
+
+
 {% block content %}
-<aside>
-  <p><em>{{ document.date|date:"M Y" }}</em></p>
-</aside>
 
-<h2>Services proposés</h2>
+<h2 class="ui header sixteen wide column">Services proposés</h2>
 <ul>
 {% for service in document.service_set.all %}
   <li>
     <a href="{{ service.get_absolute_url }}">{{ service.name }}</a>
+    ({{ service.subscriptions_count }} abonné·e{{ service.subscriptions_count|pluralize:"·s" }})
   </li>
 {% empty %}
   <li>Pas de service pour l'instant.</li>
 {% endfor %}
 </ul>
 
-<h2>Coûts</h2>
+<h2 class="ui header sixteen wide column">Coûts</h2>
 
-<table>
+<table class="ui structured table">
   <thead>
     <tr>
       <th>Désignation</th><th>Capacité totale</th>
@@ -35,11 +47,16 @@
 {% for cost in document.cost_set.all %}
     <tr>
       <td>
-       {{ cost.name }}<a href="#" title="{{ cost.description }}">ⓘ</a>
+       {{ cost.name }}
+        {% if cost.description %}
+        <a href="#" title="{{ cost.description }}">
+          <i class="info circle icon"></i>
+        </a>
+        {% endif %}
       </td>
       <td>
         {% if cost.capacity_unit %}
-        {{ cost.total_capacity }} {{ cost.get_capacity_unit_display }}
+        {{ cost.total_capacity|human_round }} {{ cost.get_capacity_unit_display }}
         {% else %}
         n/a
         {% endif %}
@@ -54,7 +71,7 @@
 </table>
 
 <h2>Matériel et frais d'accès</h2>
-<table>
+<table class="ui structured table">
   <thead>
     <tr>
       <th>Désignation</th>
@@ -68,11 +85,16 @@
 {% for good in document.good_set.all %}
   <tr>
     <td>
-     {{ good.name }}<a href="#" title="{{ good.description }}">ⓘ</a>
+     {{ good.name }}
+      {% if good.description %}
+      <a href="#" title="{{ good.description }}">
+        <i class="info circle icon"></i>
+      </a>
+      {% endif %}
     </td>
     <td>
         {% if good.capacity_unit %}
-          {{ good.total_capacity }} {{ good.get_capacity_unit_display }}
+          {{ good.total_capacity|human_round }} {{ good.get_capacity_unit_display }}
         {% else %}
           n/a
         {% endif %}