improve flex positionning for list exports cards

This commit is contained in:
Mathieu Jaumotte 2022-11-14 12:31:13 +01:00
parent ec9555ec84
commit 1f3dd00d81
2 changed files with 21 additions and 17 deletions

View File

@ -518,8 +518,14 @@ div.v-toast {
z-index: 10000!important;
}
div.grouped {
padding: 1em;
border: 1px solid black;
margin-bottom: 2em;
// export index page
div.exports-list {
div.flex-bloc .item-bloc {
flex-basis: 33%;
@include media-breakpoint-down(lg) { flex-basis: 50%; }
@include media-breakpoint-down(sm) { flex-basis: 100%; }
p:last-child {
margin-top: auto;
}
}
}

View File

@ -25,25 +25,23 @@
{{ include('@ChillMain/Export/_navbar.html.twig', {'current' : 'common'}) }}
<div class="col-md-10">
<div class="col-md-10 exports-list">
<div class="container mt-4">
{% for group, exports in grouped_exports %}{% if group != '_' %}
<h2 class="display-6">{{ group|trans }}</h2>
<div class="row grouped">
<div class="row flex-bloc">
{% for export_alias, export in exports %}
<div class="col-6 col-md-4 mb-3">
<div class="card">
<div class="card-body">
<h2 class="card-title">{{ export.title|trans }}</h2>
<p class="card-text">{{ export.description|trans }}</p>
<p>
<a class="btn btn-action" href="{{ path('chill_main_export_new', { 'alias': export_alias } ) }}">
{{ 'Create an export'|trans }}
</a>
</p>
</div>
<div class="item-bloc">
<div class="item-row card-body">
<h2 class="card-title">{{ export.title|trans }}</h2>
<p class="card-text my-3">{{ export.description|trans }}</p>
<p>
<a class="btn btn-action" href="{{ path('chill_main_export_new', { 'alias': export_alias } ) }}">
{{ 'Create an export'|trans }}
</a>
</p>
</div>
</div>
{% endfor %}