Skip to content
GitLab
Commit e98cd9f2 authored by Mat's avatar Mat
Browse files

amélioration de l'ergonomie au niveau de la navigation

parent 352675f7
Hide whitespace changes
Inline Side-by-side
src/PotageBundle/Resources/views/Legume/ajaxDisplay.html.twig
View file @ e98cd9f2
......@@ -399,7 +399,7 @@
{
let insertBtn = document.createElement('button');
insertBtn.setAttribute('title', 'Insérer dans une offre');
insertBtn.innerHTML = '<i class="fas fa-clipboard-check fa-fw"></i> Insérer';
insertBtn.innerHTML = '<i class="fas fa-clipboard-check fa-fw"></i> Insérer <i class="fas fa-chevron-right fa-fw"></i>';
insertBtn.classList.add('btn', 'btn-info', 'btn-sm', 'mb-1', 'mr-1');
insertBtn.dataset.legumeId = jsonRow.id;
insertBtn.dataset.toggle = "modal";
......
src/PotageBundle/Resources/views/Offre/ajaxDisplay.html.twig
View file @ e98cd9f2
......@@ -23,154 +23,162 @@
{% endblock %}
{% block headerContent %}
<div class="row">
<div class="col left hd-1">
<h1>{{ block('title') }}</h1>
</div>
<div class="col right hd-1">
<div style="margin-top: 0.65em;">
{#
<a href="javascript: void(0);" class="btn btn-outline-dark mb-2 btn-sm btn-reload">
<i class="fas fa-sync-alt"></i>
Rafraîchir la liste
</a>
#}
<a href="javascript: void(0);" class="btn btn-dark mb-2 btn-create"
data-toggle="modal" data-target=".form-offre-modal">
<i class="fas fa-plus"></i>
Créer une nouvelle offre
</a>
</div>
</div>
</div>
{% endblock %}
{% block sidebarContent %}
<div class="row">
<aside class="col-3">
<section class="col-9">
{% include '@Potage/Offre/ajaxForm.html.twig' %}
<div class="row">
<div class="col left hd-1">
<h1>{{ block('title') }}</h1>
<div class="card">
<div class="card-body">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-actuel-tab" data-toggle="pill" href="#v-pills-actuel" role="tab"
aria-controls="v-pills-actuel" aria-selected="true">En ce moment</a>
<a class="nav-link" id="v-pills-archives-tab" data-toggle="pill" href="#v-pills-archives" role="tab"
aria-controls="v-pills-archives" aria-selected="false">Archives</a>
</div>
<div class="col right hd-1">
<div style="margin-top: 0.65em;">
{#
<a href="javascript: void(0);" class="btn btn-outline-dark mb-2 btn-sm btn-reload">
<i class="fas fa-sync-alt"></i>
Rafraîchir la liste
</a>
#}
</div>
</div>
</div>
<div class="card-body border-top">
<h3 class="card-title"><i class="fas fa-question-circle fa-fw"></i> Info</h3>
<p class="card-text">Les offres sont d'abord
<span class="badge badge-secondary">1</span> peuplées de légumes, puis
<span class="badge badge-secondary">2</span> mise en publication, puis
<span class="badge badge-secondary">3</span> insérée dans une infolettre à l'attention d'un groupe.</p>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-actuel" role="tabpanel" aria-labelledby="v-pills-actuel-tab">
<h2><i class="fas fa-angle-down fa-fw"></i> En préparation</h2>
<table id="maintab-draft" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<h2><i class="fas fa-angle-down fa-fw"></i> En cours</h2>
<table id="maintab-current" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="v-pills-archives" role="tabpanel" aria-labelledby="v-pills-archives-tab">
<h2><i class="fas fa-angle-down fa-fw"></i> Archives</h2>
<table id="maintab-closed" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span id="t_rows">Nombre total d'offres</span>
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Offres en cours
<span class="badge badge-primary badge-pill">3</span>
</li>
<li class="list-group-item list-group-item-action {#list-group-item-warning#}">
La prochaine offre périme dans :<br>
<span class="badge badge-primary badge-pill">3</span> jours
<span class="badge badge-primary badge-pill">12</span> heures
<span class="badge badge-primary badge-pill">56</span> minutes
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Recevoir une alerte par mail chaque fois qu'une offre expire
</label>
</div>
</li>
<li class="list-group-item">L'heure des clôtures :
<form id="hour_default">
<div class="input-group input-group-sm my-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-clock"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Heure" value="12:00">
</div>
</form>
</li>
</ul>
</div>
</aside>
</section>
{% endblock %}
{% block sectionContent %}
<section class="col-9">
{% include '@Potage/Offre/ajaxForm.html.twig' %}
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-actuel" role="tabpanel" aria-labelledby="v-pills-actuel-tab">
<h2><i class="fas fa-angle-down fa-fw"></i> En préparation</h2>
<table id="maintab-draft" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<h2><i class="fas fa-angle-down fa-fw"></i> En cours</h2>
<table id="maintab-current" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="v-pills-archives" role="tabpanel" aria-labelledby="v-pills-archives-tab">
<h2><i class="fas fa-angle-down fa-fw"></i> Archives</h2>
<table id="maintab-closed" class="table offres table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Offre</th>
<th scope="col">Créée le</th>
<th scope="col">Date de clôture</th>
<th scope="col">Contenu</th>
<th scope="col">Référence</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<aside class="col-3">
<div class="card text-white bg-dark" id="card-button-ajouter">
<div class="card-header">
<a href="javascript: void(0);" class="btn btn-dark btn-block btn-create"
data-toggle="modal" data-target=".form-offre-modal">
<i class="fas fa-plus"></i>
Créer une nouvelle offre
</a>
</div>
</div>
<div style="margin: 1em 0;">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-actuel-tab" data-toggle="pill" href="#v-pills-actuel" role="tab"
aria-controls="v-pills-actuel" aria-selected="true">
<i class="fas fa-caret-right fa-fw"></i> En ce moment</a>
<a class="nav-link" id="v-pills-archives-tab" data-toggle="pill" href="#v-pills-archives" role="tab"
aria-controls="v-pills-archives" aria-selected="false">
<i class="fas fa-caret-right fa-fw"></i> Archives</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h3 class="card-title"><i class="fas fa-question-circle fa-fw"></i> Info</h3>
<p class="card-text">Les offres sont d'abord
<span class="badge badge-secondary">1</span> peuplées de légumes, puis
<span class="badge badge-secondary">2</span> mise en publication, puis
<span class="badge badge-secondary">3</span> insérée dans une infolettre à l'attention d'un groupe.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span id="t_rows">Nombre total d'offres</span>
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Offres en cours
<span class="badge badge-primary badge-pill">3</span>
</li>
<li class="list-group-item list-group-item-action {#list-group-item-warning#}">
La prochaine offre périme dans :<br>
<span class="badge badge-primary badge-pill">3</span> jours
<span class="badge badge-primary badge-pill">12</span> heures
<span class="badge badge-primary badge-pill">56</span> minutes
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Recevoir une alerte par mail chaque fois qu'une offre expire
</label>
</div>
</li>
<li class="list-group-item">L'heure des clôtures :
<form id="hour_default">
<div class="input-group input-group-sm my-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-clock"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Heure" value="12:00">
</div>
</form>
</li>
</ul>
</div>
</section>
</aside>
</div>
{% endblock %}
......
web/css/style.css
View file @ e98cd9f2
......@@ -174,3 +174,16 @@ table#maintab span.details {
font-size: 10pt;
color: #6f6f6f;
}
#card-button-ajouter {
}
#card-button-ajouter .card-header {
margin-bottom: 0;
padding: 0;
}
#card-button-ajouter .card-header a {
padding: 1em;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment