CSS : Pagination

src/project/static/css/style.css

@@ -441,10 +441,48 @@ span.time_remaining {
     display : flex;
     justify-content : center;
     list-style : none;
-    padding : 0;
+    padding : var(--half-space) 0;
     margin : 0;
 }
 
 .pagination > li {
-    margin : 0 var(--half-space);
+  margin : 0 var(--half-space);
+}
+
+.pagination > li:first-child {
+  margin-right : var(--double-space);
+}
+
+.pagination > li:last-child {
+  margin-left : var(--double-space);
+}
+
+.pagination .page-item {
+  border : 1px solid var(--fade);  
+  padding : var(--quarter-space) var(--half-space);
+  border-radius : var(--half-space);
+  background : var(--light-dust);
+  font-size : 0.78em;
+}
+
+.pagination .page-link {
+  padding : var(--half-space);
+  color : var(--twilight);
+}
+
+.pagination .page-item.active {
+  background : var(--twilight);
+}
+
+.pagination .page-item.active .page-link {
+  color : var(--light-dust);  
+  font-weight : bold;
+}
+
+.pagination .page-item.disabled {
+  opacity : 0.6;
+}
+
+.pagination .page-item.disabled .page-link {
+  cursor : default;
 }

src/project/templates/account/email.html

@@ -17,10 +17,10 @@
                 {% csrf_token %}
                 <fieldset class="blockLabels">
                     <div class="buttonHolder">
-                        <button class="btn small btn-success" type="submit" name="action_primary" style="float:right">+ Add Email</button>
-                        <button class="btn small btn-success" disabled type="submit" name="action_primary">Make Primary</button>
-                        <button class="btn small btn-primary" type="submit" name="action_send">Re-send Verification</button>
-                        <button class="btn small btn-danger" type="submit" name="action_remove">Remove</button>
+                        <button class="small" type="submit" name="action_primary" style="float:right">+ Add Email</button>
+                        <button class="small" disabled type="submit" id="action_primary" name="action_primary">Make Primary</button>
+                        <button class="small" type="submit" name="action_send">Re-send Verification</button>
+                        <button class="small" type="submit" name="action_remove">Remove</button>
                     </div>
                     <table class="table" id="user_email_table">
                         <thead>
@@ -45,6 +45,7 @@
                                                 {% if emailaddress.primary or user.emailaddress_set.count == 1 %}
                                                 checked="checked"
                                                 {% endif %}
+                                                class="{% if emailaddress.primary %}primary_email{% endif %}"
                                             />
                                         </td>
                                         <td>
@@ -104,6 +105,15 @@
                     }
                 });
             }
+
+            let radio_actions = document.getElementsByName('email');
+            if (radio_actions.length) {
+                for (radio of radio_actions) {
+                    radio.addEventListener("change", function (e) {
+                        document.getElementById('action_primary').disabled = e.target.classList.contains('primary_email')
+                    });
+                }
+            }
         })();
     </script>