Fix columns for small-width displays.

This commit is contained in:
Casper V. Kristensen 2020-06-01 18:07:11 +02:00
parent a9d9854844
commit ac33be0a07
Signed by: caspervk
GPG key ID: 289CA03790535054
3 changed files with 12 additions and 14 deletions

View file

@ -23,8 +23,8 @@ class RaidResponseForm(ModelForm):
self.helper = FormHelper() self.helper = FormHelper()
self.helper.layout = Layout( self.helper.layout = Layout(
Row( Row(
Column("character", css_class="col-md-3"), Column("character", css_class="col-12 col-md-3"),
Column("role", css_class="col-md-2"), Column("role", css_class="col-12 col-md-2"),
Column( Column(
StrictButton( StrictButton(
"Sign Up" if not is_signed_up else "Change", "Sign Up" if not is_signed_up else "Change",
@ -33,7 +33,7 @@ class RaidResponseForm(ModelForm):
value=RaidResponse.Status.SIGNED_UP, value=RaidResponse.Status.SIGNED_UP,
css_class=f"btn-block {'btn-success' if not is_signed_up else 'btn-primary'}" 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( Column(
StrictButton( StrictButton(
@ -44,7 +44,7 @@ class RaidResponseForm(ModelForm):
css_class="btn-warning btn-block", css_class="btn-warning btn-block",
disabled=self.instance.pk and self.instance.status == RaidResponse.Status.BACKUP disabled=self.instance.pk and self.instance.status == RaidResponse.Status.BACKUP
), ),
css_class="col-md-2" css_class="form-group col-md-2"
), ),
Column( Column(
StrictButton( StrictButton(
@ -55,7 +55,7 @@ class RaidResponseForm(ModelForm):
css_class="btn-danger btn-block", css_class="btn-danger btn-block",
disabled=self.instance.pk and self.instance.status == RaidResponse.Status.SIGNED_OFF 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" css_class="form-row"
) )

View file

@ -20,7 +20,7 @@
{% crispy raid_response_formset raid_response_formset_helper %} {% crispy raid_response_formset raid_response_formset_helper %}
<hr> <hr>
<div class="row"> <div class="row">
<div class="form-group col-md-6"> <div class="form-group col-lg-6">
<label>Change Status</label> <label>Change Status</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
@ -53,7 +53,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-lg-6">
<label>Give Attendance</label> <label>Give Attendance</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
@ -80,7 +80,7 @@
</div> </div>
<hr> <hr>
<div class="row"> <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 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-signed-off" class="font-weight-bold">?</span> Signed Off</div>
<div><span id="total-backup" class="font-weight-bold">?</span> Backup</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><span id="total-confirmed" class="font-weight-bold">?</span> Confirmed</div>
</div> </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="alert alert-success d-flex justify-content-around" role="alert">
<div class="font-weight-bolder">Confirmed</div> <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-tank" class="font-weight-bold">?</span> Tanks</div>

View file

@ -23,7 +23,7 @@
</div> </div>
{% if response_form %} {% if response_form %}
<div class="card"> <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 %}"> <form class="raid-response-form" method="post" action="{% url 'raid_detail' raid.id %}">
{% crispy response_form %} {% crispy response_form %}
</form> </form>
@ -104,10 +104,8 @@
<div class="card-body"> <div class="card-body">
{% for comment in raid.comments.all %} {% for comment in raid.comments.all %}
<div class="card mb-2"> <div class="card mb-2">
<div class="card-body"> <div class="card-body py-3">
<p class="mb-0"> <h6 class="card-title mb-1"><strong>{{ comment.user.main.name }}</strong> <small class="card-subtitle text-muted">&middot; {{ comment.date_created }}</small></h6>
<strong>{{ comment.user.main.name }}</strong> <small class="text-muted">&middot; {{ comment.date_created }}</small>
</p>
<p class="card-text"> <p class="card-text">
{{ comment.body | linebreaksbr }} {{ comment.body | linebreaksbr }}
</p> </p>