CSS for error msgs

Org form and project details form Remove duplicate error message Project title change Organization form errors Removed new url error css Form url error change Form url error Add project details More form error css Login form Project add and edit Account pages Account pages Org forms Misc form pages Fixes #342 -- Adapts "All data" label Fixes #309 -- Adds error message to location form CSS for error msgs Org form and project details form Remove duplicate error message Project title change Organization form errors Removed new url error css Form url error change Form url error Add project details More form error css Login form Project add and edit Account pages Account pages Org forms Misc form pages Fixes #342 -- Adapts "All data" label Fixes #309 -- Adds error message to location form fixed functional tests
Cadasta · Jul 9, 2016 · 2a72d7d · 2a72d7d
1 parent cb1c783
commit 2a72d7d
Show file tree

Hide file tree

Showing 35 changed files with 151 additions and 172 deletions.
diff --git a/cadasta/core/static/css/main.css b/cadasta/core/static/css/main.css
diff --git a/cadasta/core/static/css/main.css.map b/cadasta/core/static/css/main.css.map
diff --git a/cadasta/core/static/css/main.scss b/cadasta/core/static/css/main.scss
@@ -1007,10 +1007,6 @@ img.org-logo, img#org-logo {
 }
 
 button#add-contact { // below contacts table
-  background: transparent;
-  border: 0;
-  float: left !important;
-  color: $link-color !important;
   padding: 0;
 }
 
@@ -1081,6 +1077,10 @@ button#add-contact { // below contacts table
   z-index: 999;
 }
 
+.alert-error { // same as alert-danger
+  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+}
+
 /* =Modals
 -------------------------------------------------------------- */
 
@@ -1095,11 +1095,15 @@ button#add-contact { // below contacts table
   .modal-body {
     max-height: calc(100vh - 200px);
     overflow-y: auto;
+    padding-left: 30px;
+    padding-right: 30px;
   }
   .modal-footer {
     background: $body-bg;
     border-bottom-left-radius: 6px;
     border-bottom-right-radius: 6px;
+    padding-left: 30px;
+    padding-right: 30px;
     .btn {
       min-width: 100px;
     }
@@ -1113,21 +1117,21 @@ button#add-contact { // below contacts table
   }
 }
 
-/* =Chrome fix for fonts
+/* =Error messaging for forms
 -------------------------------------------------------------- */
 
-@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
-  body {
-    -webkit-animation-delay: 0.1s;
-    -webkit-animation-name: fontfix;
-    -webkit-animation-duration: 0.1s;
-    -webkit-animation-iteration-count: 1;
-    -webkit-animation-timing-function: linear;
-  }
-
-  @-webkit-keyframes fontfix {
-    from { opacity: 1; }
-    to   { opacity: 1; }
-  }
-
+.form-group.has-error {
+  background-color: $alert-warning-bg;
+  padding: 10px;
 }
+
+ul.errorlist {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none !important;
+  li {
+    background-color: $alert-warning-bg;
+    color: $alert-danger-text;
+    padding: 2px 8px;
+  }
+}
diff --git a/cadasta/organization/tests/test_widgets.py b/cadasta/organization/tests/test_widgets.py
@@ -208,7 +208,7 @@ def test_render_with_formset(self):
                 '    <tr>'
                 '      <td colspan="4">'
                 '        <button data-prefix="contacts" type="button" '
-                '                class="btn btn-primary pull-right" '
+                '                class="btn btn-link" '
                 '                id="add-contact">Add contact</button>'
                 '      </td>'
                 '    </tr>'

diff --git a/cadasta/organization/widgets.py b/cadasta/organization/widgets.py
@@ -94,7 +94,7 @@ class ContactsWidget(Widget):
         '    <tr>'
         '      <td colspan="4">'
         '        <button data-prefix="{prefix}" type="button" '
-        '                class="btn btn-primary pull-right" '
+        '                class="btn btn-link" '
         '                id="add-contact">{add_contact}</button>'
         '      </td>'
         '    </tr>'

diff --git a/cadasta/templates/accounts/profile.html b/cadasta/templates/accounts/profile.html
@@ -10,27 +10,26 @@
 {% block content %}
 
 <form class="profile-form form-narrow" method="POST"
-      action="{% url 'account:profile' %}">
+      action="{% url 'account:profile' %}" novalidate>
   <h1>{% trans "Update your profile" %}</h1>
-
   {% csrf_token %}
-
   {{ form.non_field_errors }}
-  <div class="form-group">
-    {{ form.username.errors }}
+
+  <div class="form-group{% if form.username.errors %} has-error{% endif %}">
     <label for="{{ form.username.id_for_label }}">{% trans "Username" %}</label>
+    <label class="pull-right control-label">{{ form.username.errors }}</label>
     {% render_field form.username class+="form-control input-lg" %}
   </div>
 
-  <div class="form-group">
-    {{ form.email.errors }}
+  <div class="form-group{% if form.email.errors %} has-error{% endif %}">
     <label for="{{ form.email.id_for_label }}">{% trans "Email" %}</label>
+    <label class="pull-right control-label">{{ form.email.errors }}</label>
     {% render_field form.email class+="form-control input-lg" %}
   </div>
 
-  <div class="form-group">
-    {{ form.full_name.errors }}
+  <div class="form-group{% if form.full_name.errors %} has-error{% endif %}">
     <label for="{{ form.full_name.id_for_label }}">{% trans "Full name" %}</label>
+    <label class="pull-right control-label">{{ form.full_name.errors }}</label>
     {% render_field form.full_name class+="form-control input-lg" %}
   </div>
 

diff --git a/cadasta/templates/accounts/snippets/registration_form.html b/cadasta/templates/accounts/snippets/registration_form.html
@@ -2,7 +2,7 @@
 
 <h1>{% trans "Register" %}</h1>
 
-<form method="POST" action="/site/account/register/">
+<form method="POST" action="/site/account/register/" novalidate>
     {% csrf_token %}
     {{ form.non_field_errors }}
     <div class="fieldWrapper">

diff --git a/cadasta/templates/allauth/account/email.html b/cadasta/templates/allauth/account/email.html
@@ -9,7 +9,7 @@ <h1>{% trans "E-mail Addresses" %}</h1>
 {% if user.emailaddress_set.all %}
 <p>{% trans 'The following e-mail addresses are associated with your account:' %}</p>
 
-<form action="{% url 'account_email' %}" class="email_list" method="post">
+<form action="{% url 'account_email' %}" class="email_list" method="post" novalidate>
 {% csrf_token %}
 <fieldset class="blockLabels">
 
@@ -47,7 +47,7 @@ <h1>{% trans "E-mail Addresses" %}</h1>
 
     <h2>{% trans "Add E-mail Address" %}</h2>
 
-    <form method="post" action="{% url 'account_email' %}" class="add_email">
+    <form method="post" action="{% url 'account_email' %}" class="add_email" novalidate>
         {% csrf_token %}
         {{ form.as_p}}
         <button name="action_add" type="submit">{% trans "Add E-mail" %}</button>

diff --git a/cadasta/templates/allauth/account/email_confirm.html b/cadasta/templates/allauth/account/email_confirm.html
@@ -15,7 +15,7 @@ <h1>{% trans "Confirm E-mail Address" %}</h1>
 
 <p>{% blocktrans with confirmation.email_address.email as email %}Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an e-mail address for user {{ user_display }}.{% endblocktrans %}</p>
 
-<form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
+<form method="post" action="{% url 'account_confirm_email' confirmation.key %}" novalidate>
 {% csrf_token %}
     <button type="submit">{% trans 'Confirm' %}</button>
 </form>

diff --git a/cadasta/templates/allauth/account/login.html b/cadasta/templates/allauth/account/login.html
@@ -25,29 +25,20 @@
 </div>
 {% endif %}
 
-<form class="login-form form-narrow" method="POST" action="{% url 'account_login' %}">
+<form class="login-form form-narrow" method="POST" action="{% url 'account_login' %}" novalidate>
   <h1>{% trans "Sign in to your account" %}</h1>
 
   {% csrf_token %}
 
   <div class="form-group{% if form.login.errors %} has-error{% endif %}">
-    <label for="id_login" class="control-label">Username</label>
-    <label class="pull-right control-label">
-      {% for error in form.login.errors %}
-      {{ error|escape }}
-      {% endfor %}
-    </label>
+    <label for="id_login">Username</label>
+    <label class="pull-right control-label">{{ form.login.errors }}</label>
     {% render_field form.login class+="form-control input-lg" placeholder="" %}
   </div>
 
   <div class="form-group{% if form.password.errors %} has-error{% endif %}">
-    <label for="id_password" class="control-label">Password</label>
-    <label class="pull-right control-label">
-      {% for error in form.password.errors %}
-      {{ error|escape }}
-      {% endfor %}
-    </label>
-
+    <label for="id_password">Password</label>
+    <label class="pull-right control-label">{{ form.password.errors }}</label>
     {% render_field form.password class+="form-control input-lg" placeholder="" %}
   </div>
 

diff --git a/cadasta/templates/allauth/account/password_change.html b/cadasta/templates/allauth/account/password_change.html
@@ -8,24 +8,27 @@
 {% block content %}
 
 <form method="POST" action="{% url 'account_change_password' %}"
-      class="login-form form-narrow">
+      class="login-form form-narrow" novalidate>
 
   <h1>{% trans "Change your password" %}</h1>
 
   {% csrf_token %}
 
-  <div class="form-group">
+  <div class="form-group{% if form.oldpassword.errors %} has-error{% endif %}">
     <label for="id_oldpassword">{% trans "Current password" %}</label>
+    <label class="pull-right control-label">{{ form.oldpassword.errors }}</label>
     {% render_field form.oldpassword class+="form-control input-lg" placeholder="" %}
   </div>
 
-  <div class="form-group">
+  <div class="form-group{% if form.password1.errors %} has-error{% endif %}">
     <label for="id_password1">{% trans "Enter a new password" %}</label>
+    <label class="pull-right control-label">{{ form.password1.errors }}</label>
     {% render_field form.password1 class+="form-control input-lg" placeholder="" %}
   </div>
 
-  <div class="form-group">
+  <div class="form-group{% if form.password2.errors %} has-error{% endif %}">
     <label for="id_password2">{% trans "Confirm the new password" %}</label>
+    <label class="pull-right control-label">{{ form.password2.errors }}</label>
     {% render_field form.password2 class+="form-control input-lg" placeholder="" %}
   </div>
 

diff --git a/cadasta/templates/allauth/account/password_reset.html b/cadasta/templates/allauth/account/password_reset.html
@@ -9,7 +9,7 @@
 {% block content %}
 
 <form method="POST" action="{% url 'account_reset_password' %}"
-      class="login-form form-narrow">
+      class="login-form form-narrow" novalidate>
   <h1>{% trans "Reset your password" %}</h1>
 
   {% if user.is_authenticated %}
@@ -18,8 +18,9 @@ <h1>{% trans "Reset your password" %}</h1>
 
   {% csrf_token %}
 
-  <div class="form-group">
+  <div class="form-group{% if form.email.errors %} has-error{% endif %}">
     <label for="id_email">{% trans "Enter email" %}</label>
+    <label class="pull-right control-label">{{ form.email.errors }}</label>
     {% render_field form.email class+="form-control input-lg" placeholder="" %}
   </div>
 

diff --git a/cadasta/templates/allauth/account/password_reset_from_key.html b/cadasta/templates/allauth/account/password_reset_from_key.html
@@ -11,7 +11,7 @@ <h1>{% if token_fail %}{% trans "Bad Token" %}{% else %}{% trans "Change Passwor
         <p>{% blocktrans %}The password reset link was invalid, possibly because it has already been used.  Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}</p>
     {% else %}
         {% if form %}
-            <form method="POST" action=".">
+            <form method="POST" action="." novalidate>
                 {% csrf_token %}
                 {{ form.as_p }}
                 <input type="submit" name="action" value="{% trans 'change password' %}"/>

diff --git a/cadasta/templates/allauth/account/password_set.html b/cadasta/templates/allauth/account/password_set.html
@@ -7,7 +7,7 @@
 {% block content %}
     <h1>{% trans "Set Password" %}</h1>
 
-    <form method="POST" action="{% url 'account_set_password' %}" class="password_set">
+    <form method="POST" action="{% url 'account_set_password' %}" class="password_set" novalidate>
         {% csrf_token %}
         {{ form.as_p }}
         <input type="submit" name="action" value="{% trans 'Set Password' %}"/>