improve responsive design

This commit is contained in:
Simon Vieille 2021-04-20 14:03:36 +02:00
parent 264b111845
commit d01c8ee366
4 changed files with 178 additions and 157 deletions

View file

@ -14,6 +14,16 @@ $pagination-active-bg: #343a40;
@import "~bootstrap/scss/bootstrap.scss"; @import "~bootstrap/scss/bootstrap.scss";
@import "~@fortawesome/fontawesome-free/css/all.css"; @import "~@fortawesome/fontawesome-free/css/all.css";
@for $i from 1 through 100 {
.miw-#{$i*5} {
min-width: $i * 5px;
}
}
body {
overflow-x: hidden;
}
#logo { #logo {
width: 30px; width: 30px;
} }
@ -234,6 +244,11 @@ table.table-fixed, .table-fixed > table {
} }
.table-responsive {
max-width: 100%;
overflow-y: hidden;
}
@media screen and (min-height: 650px) { @media screen and (min-height: 650px) {
table.table-fixed, .table-fixed > table { table.table-fixed, .table-fixed > table {
width: 100%; width: 100%;

View file

@ -24,6 +24,7 @@
{{ knp_pagination_render(pager) }} {{ knp_pagination_render(pager) }}
</div> </div>
<div class="table-responsive">
<table class="table" data-table-fixed> <table class="table" data-table-fixed>
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
@ -84,4 +85,5 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
{% endblock %} {% endblock %}

View file

@ -13,6 +13,7 @@
{{ knp_pagination_render(pager) }} {{ knp_pagination_render(pager) }}
</div> </div>
<div class="table-responsive">
<table class="table" data-table-fixed> <table class="table" data-table-fixed>
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
@ -68,4 +69,5 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
{% endblock %} {% endblock %}

View file

@ -22,11 +22,12 @@
{{ knp_pagination_render(pager) }} {{ knp_pagination_render(pager) }}
</div> </div>
<div class="table-responsive">
<table class="table" data-table-fixed> <table class="table" data-table-fixed>
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
<th class="col-10">{{ 'Username'|trans }}</th> <th class="col-10 miw-200">{{ 'Username'|trans }}</th>
<th class="col-2 text-right">{{ 'Actions'|trans }}</th> <th class="col-2 miw-100 text-right">{{ 'Actions'|trans }}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -35,14 +36,14 @@
{% set show = path('admin_user_show', {entity: item.id}) %} {% set show = path('admin_user_show', {entity: item.id}) %}
<tr data-dblclick="{{ edit }}"> <tr data-dblclick="{{ edit }}">
<td class="col-10"> <td class="col-10 miw-200">
<a href="{{ show }}" class="font-weight-bold text-body d-block"> <a href="{{ show }}" class="font-weight-bold text-body d-block">
{{ item.displayName }} {{ item.displayName }}
</a> </a>
{{ item.email }} {{ item.email }}
</td> </td>
<td class="col-2 text-right"> <td class="col-2 miw-100 text-right">
<a href="{{ edit }}" class="btn btn-sm btn-primary mr-1"> <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
<span class="fa fa-edit"></span> <span class="fa fa-edit"></span>
</a> </a>
@ -70,4 +71,5 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
{% endblock %} {% endblock %}