drakul/raids/forms.py

@@ -70,9 +70,9 @@ class RaidForm(ModelForm):
         self.helper = FormHelper()
 
         if self.instance.pk is None:
-            submit_button = Submit("submit", "Create", css_class="btn btn-success float-right")
+            submit_button = Submit("submit", "Create", css_class="btn btn-success")
         else:
-            submit_button = Submit("submit", "Update", css_class="btn btn-primary float-right")
+            submit_button = Submit("submit", "Update", css_class="btn btn-primary")
         self.helper.layout = Layout(
             Field("title"),
             Field("description"),

drakul/raids/templates/raids/raid_change.html

@@ -87,15 +87,9 @@
                     </div>
                 </div>
                 <div class="col-md-6">
-                    <div class="alert alert-success d-flex justify-content-around" role="alert">
-                        <div class="font-weight-bolder">Confirmed</div>
-                        <div><span id="total-confirmed-tank" class="font-weight-bold">?</span> Tanks</div>
-                        <div><span id="total-confirmed-healer" class="font-weight-bold">?</span> Healers</div>
-                        <div><span id="total-confirmed-damage" class="font-weight-bold">?</span> Damage</div>
-                    </div>
+                    <input type="submit" name="submit" value="Save" class="btn btn-primary btn-lg btn-block">
                 </div>
             </div>
-            <input class="btn btn-primary float-right" type="submit" name="submit" value="Save">
         </form>
     </div>
 </div>
@@ -109,16 +103,8 @@
     const STAND_BY = 3;
     const CONFIRMED = 4;
 
-    const TANK = 1;
-    const HEALER = 2;
-    const DAMAGE = 3;
-
     const responseForm = document.querySelector(".responses-form");
-
-    function trIsExtra(tr) {
-        let characterSelect = tr.querySelector(".character-select");
-        return characterSelect == null || characterSelect.value === "";  // the "--------" character has value=""
-    }
+    const responseFormSelects = responseForm.querySelectorAll("select");
 
     function updateSelectTotals() {
         let statusTotals = {
@@ -127,26 +113,16 @@
             [STAND_BY]: 0,
             [CONFIRMED]: 0
         };
-        let confirmedTotals = {
-            [TANK]: 0,
-            [HEALER]: 0,
-            [DAMAGE]: 0
-        };
-        responseForm.querySelectorAll("tr").forEach((tr) => {
-            if (trIsExtra(tr)) {
+        responseFormSelects.forEach((select) => {
+            if (!select.value) {
                 return;
             }
-            let status = tr.querySelector(".status-select").value;
-            let role = tr.querySelector(".role-select").value;
-            statusTotals[status] += 1;
-            if (status == CONFIRMED) {
-                confirmedTotals[role] += 1;
+            if (select.classList.contains("status-select")) {
+                statusTotals[select.value] += 1;
+            } else if (select.classList.contains("role-select")) {
+                // TODO ?
             }
         });
-        document.querySelector("#total-confirmed-tank").innerHTML = confirmedTotals[TANK].toString();
-        document.querySelector("#total-confirmed-healer").innerHTML = confirmedTotals[HEALER].toString();
-        document.querySelector("#total-confirmed-damage").innerHTML = confirmedTotals[DAMAGE].toString();
-
         document.querySelector("#total-signed-off").innerHTML = statusTotals[SIGNED_OFF].toString();
         document.querySelector("#total-signed-up").innerHTML = statusTotals[SIGNED_UP].toString();
         document.querySelector("#total-stand-by").innerHTML = statusTotals[STAND_BY].toString();
@@ -154,17 +130,22 @@
     }
 
     updateSelectTotals();
-    responseForm.querySelectorAll("select").forEach((select) => {
+    responseFormSelects.forEach((select) => {
         select.addEventListener("change", updateSelectTotals);
     });
 
+    function trIsExtra(tr) {
+        let characterSelect = tr.querySelector(".character-select");
+        return characterSelect == null || characterSelect.value === "";  // the "--------" character has value=""
+    }
+
     function changeSignupStatus(from, to) {
         responseForm.querySelectorAll("tr").forEach((tr) => {
             if (trIsExtra(tr)) {
                 return;
             }
             let statusSelect = tr.querySelector(".status-select");
-            if (statusSelect.value === from) {
+            if (statusSelect.value == from) {
                 statusSelect.value = to;
             }
         });
@@ -177,11 +158,11 @@
                 return;
             }
             let statusSelect = tr.querySelector(".status-select");
-            if (statusSelect != null && statusSelect.value === status) {
+            if (statusSelect != null && statusSelect.value == status) {
                 tr.querySelector(".attendance-input").value = value;
             }
         });
         updateSelectTotals();
     }
 </script>
-{% endblock scripts %}
+{% endblock scripts %}

drakul/raids/templates/raids/raid_detail.html

@@ -61,14 +61,14 @@
 {% endfor %}
 
 <div id="comments" class="card mt-4 mb-4">
-    <h6 class="card-header">Comments</h6>
+    <h5 class="card-header">Comments</h5>
     <div class="card-body">
         {% for comment in raid.comments.all %}
             <div class="card mb-2">
                 <div class="card-body">
-                    <p class="mb-0">
+                    <h6 class="card-title">
                         <strong>{{ comment.user.main.name }}</strong> <small class="text-muted">&middot; {{ comment.date_created }}</small>
-                    </p>
+                    </h6>
                     <p class="card-text">
                         {{ comment.body }}
                     </p>