stats: show equal height columns

This commit is contained in:
Gerdriaan Mulder
2020-03-28 15:43:02 +01:00
parent 6a549fbd7b
commit 62ba17ef67
3 changed files with 16 additions and 6 deletions

View File

@ -49,3 +49,13 @@ tr.requested_song{
background-color: #f9f9f9; background-color: #f9f9f9;
border-bottom: 2px solid #777777; border-bottom: 2px solid #777777;
} }
/* Bootstrap 3 doesn't support equal height columns, hack via <https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27#892f> */
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}

View File

@ -5,14 +5,14 @@
{% block content %} {% block content %}
<h1>Statistics</h1> <h1>Statistics</h1>
<div class="row"> <div class="row display-flex">
{% if not stats %} {% if not stats %}
<div class="alert alert-danger"> <div class="col-md-12 alert alert-danger">
<strong>Stats unavailable :(</strong> <strong>Stats unavailable :(</strong>
</div> </div>
{% else %} {% else %}
{% if current_age_text %} {% if current_age_text %}
<div class="alert alert-info"> <div class="col-md-12 alert alert-info">
<strong>{{ current_age_text }}</strong> <strong>{{ current_age_text }}</strong>
{% endif %} {% endif %}
</div> </div>

View File

@ -7,14 +7,14 @@
{% block content %} {% block content %}
<h1>User Statistics</h1> <h1>User Statistics</h1>
<div class="row"> <div class="row display-flex">
{% if not stats %} {% if not stats %}
<div class="alert alert-danger"> <div class="col-md-12 alert alert-danger">
<strong>Stats unavailable :(</strong> <strong>Stats unavailable :(</strong>
</div> </div>
{% else %} {% else %}
{% if current_age_text %} {% if current_age_text %}
<div class="alert alert-info"> <div class="col-md-12 alert alert-info">
<strong>{{ current_age_text }}</strong> <strong>{{ current_age_text }}</strong>
{% endif %} {% endif %}
</div> </div>