Parcourir la source

Style service detail with Semantic UI

Jocelyn Delande il y a 9 ans
Parent
commit
e68f4b4d61
2 fichiers modifiés avec 128 ajouts et 45 suppressions
  1. 47 10
      costs/templates/costs/base.html
  2. 81 35
      costs/templates/costs/service_detail.html

+ 47 - 10
costs/templates/costs/base.html

@@ -1,19 +1,56 @@
+{% load staticfiles %}
+<!doctype html>
 
-<h1>{% block title %}Transparency!{% endblock %}</h1>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
 
-<nav>
-  <ul>
+  <title>Transparency!</title>
+  <meta name="description"
+        content="Détail des coûts des services">
+  <meta name="author" content="Jocelyn Delalande">
+
+  <link rel="stylesheet" href="css/styles.css?v=1.0">
+
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/reset.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/site.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/breadcrumb.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/container.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/divider.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/grid.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/header.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/icon.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/table.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/grid.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/segment.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/label.css" %}" >
+  <link rel="stylesheet" type="text/css" href="{% static "costs/3rd/semantic/components/rail.css" %}" >
+</head>
+
+<body>
+  <div class="ui eight column padded grid">
+    <div class="row ui text container">
+      <h1>{% block title %}Transparency!{% endblock %}</h1>
+    </div>
+
+    <div class="row ui text container">
+      <nav class="ui large breadcrumb">
 {% for title, url in breadcrumbs %}
-    <li>
-  {% if url %}<a href="{{ url }}" >{% endif %}
+  {% if url %}<a class="section{% if forloop.last %} active {% endif %}" href="{{ url }}" >{% endif %}
       {{ title }}
   {% if url %}</a>{% endif %}
-    </li>
+  {% if not forloop.last %}
+      <i class="right chevron icon divider"></i>
+  {% endif %}
 {% endfor %}
+      </nav>
+    </div>
 
-  </ul>
-</nav>
-
+    <div class="row ui text container">
 {% block content %}
 
-{% endblock %}
+{% endblock %}
+    </div>
+  </div>
+</body>
+</html>

+ 81 - 35
costs/templates/costs/service_detail.html

@@ -4,66 +4,112 @@
 
 {% block title %}Service {{ service.name }}{% endblock %}
 
+  <div class="ui tag labels">
+    <div class="ui label blue">
+      {{ service.subscriptions_count }}
+      <div class="detail">abonnements</div>
+
+    </div>
+    <br>
+  {% if document.type == document.TYPE_PLAN %}
+  <a class="ui label orange" title="Ce document se base sur des estimations">
+    {{ document.get_type_display }}
+  </a>
+  {% else %}
+  <span class="ui label">
+    {{ document.get_type_display }}
+    <div class="ui detail">{{ document.date|date:"b Y" }}</div>
+  </span>
+  {% endif %}
+  </div>
+
+  <div class="ui segment" style="width: 100%">
+  <p>
+    <a class="ui ribbon left label">Notes</a>
+{{ service.description|linebreaks }}
+  </p>
+  </div>
+{% endblock %}
 
-{% block content %}
-<p><em>({{ service.document }}, {{ service.subscriptions_count }} abonnements)</em></p>
 
-<h2>Coût récurent (mensuel, par abonnement)</h2>
-<table>
+{% 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>
   {% for usage in goods_uses %}
-  <tr>
-    <td>amortissement</td>
-    <td>
+    <tr>
+      {% if forloop.first %}
+      <td rowspan="{{ goods_uses|length }}">Amortissement</td>
+      {% endif %}
+      <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>{{ 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>
-    <td>récurent</td>
-    <td>
+    <tr>
+      {% if forloop.first %}
+      <td rowspan="{{ costs_uses|length }}">Récurent</td>
+      {% endif %}
+      <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>{{ usage.unit_cost_share|price }}</td>
-  </tr>
+        </span>
+      </td>
+      <td class="right aligned">{{ usage.unit_cost_share|price }}</td>
+    </tr>
   {% endfor %}
-  <tr>
-    <td colspan="2"><strong>Coût de revient par abonnement</strong>
-    </td>
-    <td><strong>{{ unit_costs_price|price }}</strong></td>
-  </tr>
+  </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>
 
 <h2>Coût de mise en place (FAS)</h2>
-<table>
+<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 %}
-  <tr>
-    <td colspan="2"><strong>Coût de mise en place par nouvel abonnement</strong></td>
-    <td><strong>{{ unit_goods_value_share|price }}</strong></td>
-  </tr>
+  </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>
 
-<p>
+
 La mise en place lissée sur 12 mois, elle équivaut à
 {{ monthly_fas|price }}/mois.
 </p>