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.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"
)

View file

@ -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>

View file

@ -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>