Fix aesthetic issues on address form

Author: sdelquin

apps/members/forms.py

@@ -165,10 +165,10 @@ class Meta:
             'phone',
         ]
 
-    address = forms.CharField(label='Dirección', strip=True)
-    rest_address = forms.CharField(label='', required=False, strip=True)
+    address = forms.CharField(label='Dirección<sup>*</sup>', strip=True)
+    rest_address = forms.CharField(label='(extra)', required=False, strip=True)
     postal_code = forms.CharField(
-        label="Cód. postal", max_length=12, strip=True
+        label="Cód. postal<sup>*</sup>", max_length=12, strip=True
     )
-    city = forms.CharField(label='Ciudad', strip=True)
+    city = forms.CharField(label='Ciudad<sup>*</sup>', strip=True)
     phone = forms.CharField(label='Teléfono', required=False, strip=True)

apps/members/static/members/css/main.scss

@@ -4,3 +4,12 @@
   flex-direction: column;
   align-items: baseline;
 }
+
+.rest-address-label {
+  margin-top: 1rem;
+  font-weight: 100;
+}
+
+.phone-label {
+  font-weight: 100;
+}

apps/members/templates/members/address-change.html

@@ -17,7 +17,10 @@ <h3 class="panel-heading">Dirección postal y teléfono</h3>
         <table class="table">
 
           <tr>
-            <th>{{ form.address.label|safe }}</th>
+            <th>
+              {{ form.address.label|safe }}
+              <div class="rest-address-label">{{ form.rest_address.label|safe }}</div>
+            </th>
             <td>
               <input name="address" class="input" type="text" value="{{ form.address.value }}">
               {% error_list form.address %}
@@ -42,7 +45,7 @@ <h3 class="panel-heading">Dirección postal y teléfono</h3>
           </tr>
 
           <tr>
-            <th>{{ form.phone.label|safe }}</th>
+            <th class="phone-label">{{ form.phone.label|safe }}</th>
             <td>
               <input name="phone" class="input" type="text" value="{{ form.phone.value }}">
               {% error_list form.phone %}