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,64 +24,66 @@
{{ knp_pagination_render(pager) }} {{ knp_pagination_render(pager) }}
</div> </div>
<table class="table" data-table-fixed> <div class="table-responsive">
<thead class="thead-light"> <table class="table" data-table-fixed>
<tr> <thead class="thead-light">
<th class="col-5">
{{ 'Label'|trans }}
</th>
<th class="col-5">
{{ 'Domain'|trans }}
</th>
<th class="col-2 text-right">
{{ 'Actions'|trans }}
</th>
</tr>
</thead>
<tbody>
{% for item in pager %}
{% set edit = path('admin_site_navigation_edit', {entity: item.id}) %}
{% set show = path('admin_site_navigation_show', {entity: item.id}) %}
<tr data-dblclick="{{ edit }}">
<td class="col-5">
<a href="{{ show }}" class="font-weight-bold text-body d-block">
{{ item.label }}
</a>
{{ item.code }}
</td>
<td class="col-5">
<a href="" class="btn btn-sm btn-light">
{{ item.domain }}
</a>
</td>
<td class="col-2 text-right">
<a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
<span class="fa fa-edit"></span>
</a>
<button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
<span class="fa fa-trash"></span>
</button>
<form method="post" action="{{ path('admin_site_navigation_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
</form>
</td>
</tr>
{% else %}
<tr> <tr>
<td class="col-12 text-center p-4 text-black-50"> <th class="col-5">
<div class="display-1"> {{ 'Label'|trans }}
<span class="fa fa-search"></span> </th>
</div> <th class="col-5">
<div class="display-5 mt-3"> {{ 'Domain'|trans }}
{{ 'No result'|trans }} </th>
</div> <th class="col-2 text-right">
</td> {{ 'Actions'|trans }}
</th>
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for item in pager %}
{% set edit = path('admin_site_navigation_edit', {entity: item.id}) %}
{% set show = path('admin_site_navigation_show', {entity: item.id}) %}
<tr data-dblclick="{{ edit }}">
<td class="col-5">
<a href="{{ show }}" class="font-weight-bold text-body d-block">
{{ item.label }}
</a>
{{ item.code }}
</td>
<td class="col-5">
<a href="" class="btn btn-sm btn-light">
{{ item.domain }}
</a>
</td>
<td class="col-2 text-right">
<a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
<span class="fa fa-edit"></span>
</a>
<button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
<span class="fa fa-trash"></span>
</button>
<form method="post" action="{{ path('admin_site_navigation_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
</form>
</td>
</tr>
{% else %}
<tr>
<td class="col-12 text-center p-4 text-black-50">
<div class="display-1">
<span class="fa fa-search"></span>
</div>
<div class="display-5 mt-3">
{{ 'No result'|trans }}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %} {% endblock %}

View file

@ -13,59 +13,61 @@
{{ knp_pagination_render(pager) }} {{ knp_pagination_render(pager) }}
</div> </div>
<table class="table" data-table-fixed> <div class="table-responsive">
<thead class="thead-light"> <table class="table" data-table-fixed>
<tr> <thead class="thead-light">
<th class="col-10">{{ 'Name'|trans }}</th>
<th class="col-2 text-right">{{ 'Actions'|trans }}</th>
</tr>
</thead>
<tbody>
{% for item in pager %}
{% set edit = path('admin_site_page_edit', {entity: item.id}) %}
<tr data-dblclick="{{ edit }}">
<td class="col-5">
<a href="{{ edit }}" class="font-weight-bold text-body d-block">
{{ item.name }}
</a>
</td>
<td class="col-5">
{% for node in item.nodes %}
<a href="{{ path('admin_site_tree_navigation', {
navigation: node.menu.navigation.id,
'data-modal': path('admin_site_node_edit', {entity: node.id}),
}) }}" class="btn btn-sm btn-light mr-1">
{{ node.label }}
</a>
{% endfor %}
</td>
<td class="col-2 text-right">
<a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
<span class="fa fa-edit"></span>
</a>
<button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
<span class="fa fa-trash"></span>
</button>
<form method="post" action="{{ path('admin_site_page_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
</form>
</td>
</tr>
{% else %}
<tr> <tr>
<td class="col-12 text-center p-4 text-black-50"> <th class="col-10">{{ 'Name'|trans }}</th>
<div class="display-1"> <th class="col-2 text-right">{{ 'Actions'|trans }}</th>
<span class="fa fa-search"></span>
</div>
<div class="display-5 mt-3">
{{ 'No result'|trans }}
</div>
</td>
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for item in pager %}
{% set edit = path('admin_site_page_edit', {entity: item.id}) %}
<tr data-dblclick="{{ edit }}">
<td class="col-5">
<a href="{{ edit }}" class="font-weight-bold text-body d-block">
{{ item.name }}
</a>
</td>
<td class="col-5">
{% for node in item.nodes %}
<a href="{{ path('admin_site_tree_navigation', {
navigation: node.menu.navigation.id,
'data-modal': path('admin_site_node_edit', {entity: node.id}),
}) }}" class="btn btn-sm btn-light mr-1">
{{ node.label }}
</a>
{% endfor %}
</td>
<td class="col-2 text-right">
<a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
<span class="fa fa-edit"></span>
</a>
<button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
<span class="fa fa-trash"></span>
</button>
<form method="post" action="{{ path('admin_site_page_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
</form>
</td>
</tr>
{% else %}
<tr>
<td class="col-12 text-center p-4 text-black-50">
<div class="display-1">
<span class="fa fa-search"></span>
</div>
<div class="display-5 mt-3">
{{ 'No result'|trans }}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %} {% endblock %}

View file

@ -22,52 +22,54 @@
{{ knp_pagination_render(pager) }} {{ knp_pagination_render(pager) }}
</div> </div>
<table class="table" data-table-fixed> <div class="table-responsive">
<thead class="thead-light"> <table class="table" data-table-fixed>
<tr> <thead class="thead-light">
<th class="col-10">{{ 'Username'|trans }}</th>
<th class="col-2 text-right">{{ 'Actions'|trans }}</th>
</tr>
</thead>
<tbody>
{% for item in pager %}
{% set edit = path('admin_user_edit', {entity: item.id}) %}
{% set show = path('admin_user_show', {entity: item.id}) %}
<tr data-dblclick="{{ edit }}">
<td class="col-10">
<a href="{{ show }}" class="font-weight-bold text-body d-block">
{{ item.displayName }}
</a>
{{ item.email }}
</td>
<td class="col-2 text-right">
<a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
<span class="fa fa-edit"></span>
</a>
<button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
<span class="fa fa-trash"></span>
</button>
<form method="post" action="{{ path('admin_user_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
</form>
</td>
</tr>
{% else %}
<tr> <tr>
<td class="col-12 text-center p-4 text-black-50"> <th class="col-10 miw-200">{{ 'Username'|trans }}</th>
<div class="display-1"> <th class="col-2 miw-100 text-right">{{ 'Actions'|trans }}</th>
<span class="fa fa-search"></span>
</div>
<div class="display-5 mt-3">
{{ 'No result'|trans }}
</div>
</td>
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for item in pager %}
{% set edit = path('admin_user_edit', {entity: item.id}) %}
{% set show = path('admin_user_show', {entity: item.id}) %}
<tr data-dblclick="{{ edit }}">
<td class="col-10 miw-200">
<a href="{{ show }}" class="font-weight-bold text-body d-block">
{{ item.displayName }}
</a>
{{ item.email }}
</td>
<td class="col-2 miw-100 text-right">
<a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
<span class="fa fa-edit"></span>
</a>
<button type="submit" form="form-delete-{{ item.id }}" class="btn btn-sm btn-danger">
<span class="fa fa-trash"></span>
</button>
<form method="post" action="{{ path('admin_user_delete', {entity: item.id}) }}" id="form-delete-{{ item.id }}" data-form-confirm>
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
</form>
</td>
</tr>
{% else %}
<tr>
<td class="col-12 text-center p-4 text-black-50">
<div class="display-1">
<span class="fa fa-search"></span>
</div>
<div class="display-5 mt-3">
{{ 'No result'|trans }}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %} {% endblock %}