Joli template ADSL pour l'utilisateur

coin/dsl_ldap/templates/dsl_ldap/dsl.html

@@ -4,29 +4,60 @@
 
 {% block content %}
 <div class="row">
-  <form action="" method="post">{% csrf_token %}
+  <h2>Configuration de l'ADSL</h2>
+  <form class="flatform" action="" method="post">{% csrf_token %}
+  <p class="legend">Quand vous aurez terminé vos modifications, cliquez sur <input class="button" type="submit" value="Valider" /></p>
+
     {% for message in messages %}
     <div class="message{% if message.tags %} {{ message.tags }}{% endif %}">
         {{ message }}
     </div>
     {% endfor %}
-  {{ form.non_field_errors }}
-  <div>Numéro de téléphone : {{ object.phone_number }}</div>
-  <div>Identifiant ADSL : {{ object.full_login }}</div>
-  <div>
-    {{ form.password.errors }}
-    {{ form.password.label_tag }}
-    {{ form.password }}
-    Mettre un mot de passe vide pour en générer un nouveau automatiquement
+
+  {% if form.non_field_errors %}
+  <div class="alert-box alert nogap">
+    {{ form.non_field_errors }}
+  </div>{% endif %}
+
+  <div class="large-7 columns">
+     <div class="panel">
+       <h3>Statut</h3>
+       <table class="full-width">
+         <tr>
+           <td class="center"><span class="label">Numéro de téléphone :</span></td>
+           <td>{{ object.phone_number }}</td>
+         </tr>
+         <tr>
+           <td class="center"><span class="label">Identifiant ADSL :</span></td>
+           <td>{{ object.full_login }}</td>
+        </tr>
+        <tr>
+          <td class="center boolviewer" colspan="2">
+            <input type="checkbox" disabled="disabled"{% if object.activated %} checked="checked"{% endif %} />
+            <span>Cette ligne est {{ object.activated|yesno:"activée,désactivée" }}</span>
+          </td>
+        </tr>
+        <tr class="flatfield">
+          <td class="center">{{ form.password.label_tag }}</td>
+          <td>{{ form.password }}</td>
+        </tr>
+      </table>
+      {{ form.password.errors }}
+      <p class="hint">Indiquez un mot de passe vide pour en générer un nouveau automatiquement.</p>
+    </div>
+  </div>
+
+  <div class="large-5 columns">
+    <div class="panel">
+      <h3>Adresses IP</h3>
+      <div class="faketable">
+        {% for subnet in object.ip_subnet.all %}
+          {{ subnet|prettify }}<br />
+        {% endfor %}
+      </div>
+    </div>
   </div>
-  <div>État : {{ object.activated|yesno:"activé,désactivé" }}</div>
-  <div>Blocs IP :
-    <ul>
-      {% for subnet in object.ip_subnet.all %}
-      <li>{{ subnet|prettify }}</li>
-      {% endfor %}
-    </ul></div>
-  <input type="submit" value="Mettre à jour" />
+  <p class="formcontrol"><input class="button" type="submit" value="Valider" /></p>
 </form>
 </div>
 {% endblock %}

coin/static/css/local.css

@@ -120,6 +120,16 @@ h2 {
 table.full-width {
     width:100%;
 }
+.faketable {
+	font-size: 0.9em;
+	background-color: #FFFFFF;
+	border: 1px solid #E0E0E0;
+	padding: 0.25em;
+}
+.hint {
+	font-size: 0.9em;
+	margin-top: -0.5em;
+}
 
 /* Footer */