Fix #516 -- Prevent gaps in plugin list (#551)

Use flexbox to fix misalignment when column height is imbalanced.
This commit is contained in:
Daniel
2017-07-12 23:30:01 +08:00
committed by Raphael Michel
parent 947b06cd61
commit a3b4a7ef1d
2 changed files with 19 additions and 1 deletions

View File

@@ -11,7 +11,7 @@
{% trans "Your changes have been saved." %}
</div>
{% endif %}
<div class="row">
<div class="row row-plugins">
{% for plugin in plugins %}
<div class="col-md-6 col-sm-12">
<div class="panel panel-{% if plugin.app.compatibility_errors %}warning{% elif plugin.module in plugins_active %}success{% else %}default{% endif %}">

View File

@@ -351,3 +351,21 @@ body.loading #wrapper {
padding: 6px 10px;
color: white !important;
}
@media (min-width: $screen-md-min) {
.row-plugins {
display: flex;
flex-wrap: wrap;
}
.row-plugins > [class*=col] {
display: flex;
flex-direction: column;
}
.row-plugins > [class*=col] > .panel {
height: 100%
}
}