VPN errors style corrections

coin/static/css/illyse.css

@@ -238,10 +238,11 @@ tr.inactive {
 	color: #F0F0F0;
 	font-size: 0.9em;
 	padding: 0.2em 0.5em;
+	white-space: nowrap;
 }
-.flatfield td+td:before {
-	content: "✎";
-	float: left;
+.flatfield label:before {
+	content: "✎ ";
+	color: #E9E9E9;
 }
 
 .flatfield input {
@@ -249,6 +250,7 @@ tr.inactive {
 	border: 1px solid #E9E9E9;
 	background-color: transparent;
 	text-overflow: ellipsis;
+	padding-left: 1em;
 	box-shadow: none;
 	font-size: 1.1em;
 	color: #222222;
@@ -267,3 +269,23 @@ tr.inactive {
 	background-color: #FFFFFF;
 	border: 2px solid #C0C0C0;
 }
+
+.legend .button, .formcontrol .button {
+	padding: 0.25em 0.5em;
+	border-radius:5px;
+	font-size: 0.9em;
+}
+
+.nogap ul {
+	margin-bottom: 0;
+}
+.nogap ul li {
+	list-style-type: none;
+}
+.errored input {
+	border-color: #FF0000;
+	box-shadow: #FF7777 0 0 5px;
+}
+.formcontrol {
+	text-align: right;
+}

coin/vpn/templates/vpn/vpn.html

@@ -6,6 +6,13 @@
     <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>
     
+    {% if form.non_field_errors or form.ipv4_endpoint.errors or form.ipv6_endpoint.errors %}
+    <div class="alert-box alert nogap">
+      {{ form.non_field_errors }}
+      {{ form.ipv4_endpoint.errors }}
+      {{ form.ipv6_endpoint.errors }}
+    </div>{% endif %}
+    
     <div class="large-6 columns">
         <div class="panel">
             <h3>Statut</h3>
@@ -38,14 +45,13 @@
         <div class="panel">
             <h3>Adresses IP</h3>
             <table class="full-width">
-              {{ form.non_field_errors }}
                 <tr class="flatfield">
                     <td class="center">{{ form.ipv4_endpoint.label_tag }}</td>
-                    <td>{{ form.ipv4_endpoint }} {{ form.ipv4_endpoint.errors }}</td>
+                    <td{% if form.non_field_errors or form.ipv4_endpoint.errors %} class="errored"{% endif %}>{{ form.ipv4_endpoint }}</td>
                 </tr>
                 <tr class="flatfield">
                     <td class="center">{{ form.ipv6_endpoint.label_tag }}</td>
-                    <td>{{ form.ipv6_endpoint }} {{ form.ipv6_endpoint.errors }}</td>
+                    <td{% if form.non_field_errors or form.ipv6_endpoint.errors %} class="errored"{% endif %}>{{ form.ipv6_endpoint }}</td>
                 </tr>
                 <tr>
                     <td class="center"><span class="label">Sous-réseaux</span></td>
@@ -56,7 +62,7 @@
             </table>
         </div>
     </div>
-    <p class="legend">Quand vous aurez terminé vos modifications, cliquez sur <input class="button" type="submit" value="Valider" /></p>
+    <p class="formcontrol"><input class="button" type="submit" value="Valider" /></p>
     </form>
 </div>