From ac33be0a07d80c9aa8f227ff5f55f7c87ef4cc2a Mon Sep 17 00:00:00 2001
From: "Casper V. Kristensen" <casper@vkristensen.dk>
Date: Mon, 1 Jun 2020 18:07:11 +0200
Subject: [PATCH] Fix columns for small-width displays.

---
 drakul/raids/forms.py                         | 10 +++++-----
 drakul/raids/templates/raids/raid_change.html |  8 ++++----
 drakul/raids/templates/raids/raid_detail.html |  8 +++-----
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/drakul/raids/forms.py b/drakul/raids/forms.py
index 5f6b34b..066d062 100644
--- a/drakul/raids/forms.py
+++ b/drakul/raids/forms.py
@@ -23,8 +23,8 @@ class RaidResponseForm(ModelForm):
         self.helper = FormHelper()
         self.helper.layout = Layout(
             Row(
-                Column("character", css_class="col-md-3"),
-                Column("role", css_class="col-md-2"),
+                Column("character", css_class="col-12 col-md-3"),
+                Column("role", css_class="col-12 col-md-2"),
                 Column(
                     StrictButton(
                         "Sign Up" if not is_signed_up else "Change",
@@ -33,7 +33,7 @@ class RaidResponseForm(ModelForm):
                         value=RaidResponse.Status.SIGNED_UP,
                         css_class=f"btn-block {'btn-success' if not is_signed_up else 'btn-primary'}"
                     ),
-                    css_class="col-md-3"
+                    css_class="form-group col-md-3"
                 ),
                 Column(
                     StrictButton(
@@ -44,7 +44,7 @@ class RaidResponseForm(ModelForm):
                         css_class="btn-warning btn-block",
                         disabled=self.instance.pk and self.instance.status == RaidResponse.Status.BACKUP
                     ),
-                    css_class="col-md-2"
+                    css_class="form-group col-md-2"
                 ),
                 Column(
                     StrictButton(
@@ -55,7 +55,7 @@ class RaidResponseForm(ModelForm):
                         css_class="btn-danger btn-block",
                         disabled=self.instance.pk and self.instance.status == RaidResponse.Status.SIGNED_OFF
                     ),
-                    css_class="col-md-2"
+                    css_class="form-group col-md-2"
                 ),
                 css_class="form-row"
             )
diff --git a/drakul/raids/templates/raids/raid_change.html b/drakul/raids/templates/raids/raid_change.html
index 6784672..23aaa87 100644
--- a/drakul/raids/templates/raids/raid_change.html
+++ b/drakul/raids/templates/raids/raid_change.html
@@ -20,7 +20,7 @@
             {% crispy raid_response_formset raid_response_formset_helper %}
             <hr>
             <div class="row">
-                <div class="form-group col-md-6">
+                <div class="form-group col-lg-6">
                     <label>Change Status</label>
                     <div class="input-group">
                         <div class="input-group-prepend">
@@ -53,7 +53,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group col-md-6">
+                <div class="form-group col-lg-6">
                     <label>Give Attendance</label>
                     <div class="input-group">
                         <div class="input-group-prepend">
@@ -80,7 +80,7 @@
             </div>
             <hr>
             <div class="row">
-                <div class="col-md-7">
+                <div class="col-xl-7">
                     <div class="alert alert-primary d-flex justify-content-around" role="alert">
                         <div><span id="total-signed-off" class="font-weight-bold">?</span> Signed Off</div>
                         <div><span id="total-backup" class="font-weight-bold">?</span> Backup</div>
@@ -89,7 +89,7 @@
                         <div><span id="total-confirmed" class="font-weight-bold">?</span> Confirmed</div>
                     </div>
                 </div>
-                <div class="col-md-5">
+                <div class="col-xl-5">
                     <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>
diff --git a/drakul/raids/templates/raids/raid_detail.html b/drakul/raids/templates/raids/raid_detail.html
index 63fa6b8..bf21283 100644
--- a/drakul/raids/templates/raids/raid_detail.html
+++ b/drakul/raids/templates/raids/raid_detail.html
@@ -23,7 +23,7 @@
 </div>
 {% if response_form %}
     <div class="card">
-        <div class="card-body mb-n3">
+        <div class="card-body pb-0">
             <form class="raid-response-form" method="post" action="{% url 'raid_detail' raid.id %}">
                 {% crispy response_form %}
             </form>
@@ -104,10 +104,8 @@
     <div class="card-body">
         {% for comment in raid.comments.all %}
             <div class="card mb-2">
-                <div class="card-body">
-                    <p class="mb-0">
-                        <strong>{{ comment.user.main.name }}</strong> <small class="text-muted">&middot; {{ comment.date_created }}</small>
-                    </p>
+                <div class="card-body py-3">
+                    <h6 class="card-title mb-1"><strong>{{ comment.user.main.name }}</strong> <small class="card-subtitle text-muted">&middot; {{ comment.date_created }}</small></h6>
                     <p class="card-text">
                         {{ comment.body | linebreaksbr }}
                     </p>