improve responsive design
This commit is contained in:
parent
264b111845
commit
d01c8ee366
|
@ -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%;
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in a new issue