Add a small 'edit' icon in front of editable fields

coin/static/css/illyse.css

@@ -197,6 +197,46 @@ span.italic {
     content: "⚠ ";
     font-weight: bold;
 }
+
+h3.graphtitle select {
+	display: inline;
+	background-color: transparent;
+	border: 0 none transparent;
+	font-family: inherit;
+	box-shadow: none;
+	font-size: 0.9em;
+	width: auto;
+	margin: 0;
+	padding: 0;
+}
+h3.graphtitle select option {
+	font-size: 0.6em;
+}
+
+a.cfglink:before {
+	content: "⎘ ";
+}
+
+/* Champs éditables */
+
+.flatform:before {
+   content: "Les champs marqués d'un ✎ sont éditables.";
+}
+.flatform .legend {
+	clear: both;
+}
+
+.flatfield label {
+	background-color: #0086A9;
+	color: #F0F0F0;
+	font-size: 0.9em;
+	padding: 0.2em 0.5em;
+}
+.flatfield td+td:before {
+	content: "✎";
+	float: left;
+}
+
 .flatfield input {
 	margin-bottom: 0;
 	border: 0 none transparent;
@@ -205,6 +245,7 @@ span.italic {
 	box-shadow: none;
 	font-size: 1.1em;
 	color: #222222;
+	width: 90%;
 }
 .flatfield input::-moz-placeholder {
 	font-style: italic;
@@ -219,22 +260,3 @@ span.italic {
 	background-color: #FFFFFF;
 	border: 1px solid #C0C0C0;
 }
-
-h3.graphtitle select {
-	display: inline;
-	background-color: transparent;
-	border: 0 none transparent;
-	font-family: inherit;
-	box-shadow: none;
-	font-size: 0.9em;
-	width: auto;
-	margin: 0;
-	padding: 0;
-}
-h3.graphtitle select option {
-	font-size: 0.6em;
-}
-
-a.cfglink:before {
-	content: "⎘ ";
-}

coin/vpn/templates/vpn/vpn.html

@@ -3,11 +3,12 @@
 {% block content %}
 <div class="row">
     <h2>Configuration du VPN</h2>
+    <form class="flatform" action="{{ object.get_absolute_url }}" method="post">{% csrf_token %}
+    <p class="legend">Quand vous aurez terminé vos modifications, cliquez sur <input class="button" type="submit" value="Valider" /></p>
     
     <div class="large-6 columns">
         <div class="panel">
             <h3>Statut</h3>
-            <form action="{{ object.get_absolute_url }}" method="post">{% csrf_token %}
             <table class="full-width">
                 <tr>
                     <td class="center"><span class="label">Identifiant</span></td>
@@ -28,7 +29,6 @@
                         <span>Ce VPN est {{ object.activated|yesno:"activé,désactivé" }}</span>
                     </td>
                 </tr>
-                <tr><td class="center" colspan="2"><input type="submit" value="Valider" /></td></tr>
             </table>
         </div>
     </div>
@@ -52,10 +52,10 @@
                         {% for subnet in object.administrative_subscription.ip_subnet.all %}{{ subnet }}<br/>{% endfor %}
                     </td>
                 </tr>
-              <tr><td class="center" colspan="2"><input type="submit" value="Valider" /></td></tr>
             </table>
         </div>
     </div>
+    <p class="legend">Quand vous aurez terminé vos modifications, cliquez sur <input class="button" type="submit" value="Valider" /></p>
     </form>
 </div>