mirror of
https://github.com/almet/copanier.git
synced 2025-04-28 11:32:38 +02:00
CSS again and again
This commit is contained in:
Yohan Boniface
parent
12719d003c
commit
8bb0dce145
5 changed files with 51 additions and 27 deletions
|
|
@ -92,7 +92,7 @@
|
|||
font-family: inherit;
|
||||
}
|
||||
*, ::after, ::before {
|
||||
box-sizing: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
font-size: 20px;
|
||||
|
|
@ -104,6 +104,8 @@ body {
|
|||
font-family: 'Work Sans', sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
background-color: var(--secondary-background-color);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -136,9 +138,9 @@ a:hover {
|
|||
|
||||
header {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20px;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
header section {
|
||||
header section.menu {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr auto;
|
||||
}
|
||||
|
|
@ -151,20 +153,12 @@ header h1 small {
|
|||
font-weight: 300;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
main a {
|
||||
padding: 0 .1rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
transition: all .3s;
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
main a:hover {
|
||||
padding-bottom: 1px;
|
||||
color: var(--primary-color);
|
||||
background-color: #e2eaf1;
|
||||
border-bottom: 0;
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
@ -295,6 +289,7 @@ td + td {
|
|||
border-left: 1px solid white;
|
||||
}
|
||||
th + td,
|
||||
th + th,
|
||||
td + th {
|
||||
border-left: 1px solid #aaa;
|
||||
}
|
||||
|
|
@ -317,6 +312,9 @@ th.price {
|
|||
th.amount {
|
||||
width: 5rem;
|
||||
}
|
||||
th.ref {
|
||||
width: 5rem;
|
||||
}
|
||||
td.total,
|
||||
th.total {
|
||||
background-color: #bbb;
|
||||
|
|
@ -372,12 +370,16 @@ hr {
|
|||
width: 100%;
|
||||
text-align: center;
|
||||
color: #f1f1f1;
|
||||
line-height: : 3rem;
|
||||
line-height: 3rem;
|
||||
height: 3rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.notification.success {
|
||||
background-color: #0f8796;
|
||||
}
|
||||
.notification i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -387,7 +389,7 @@ hr {
|
|||
}
|
||||
.toggle-container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: calc(50% - 200px);
|
||||
left: calc(50% - 200px);
|
||||
height: 400px;
|
||||
|
|
@ -395,12 +397,29 @@ hr {
|
|||
border: 1px solid #999;
|
||||
background: white;
|
||||
padding: 5px;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
}
|
||||
.toggle-background {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background-color: black;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
.toggle:checked ~ .toggle-background,
|
||||
.toggle:checked ~ .toggle-container {
|
||||
display: block;
|
||||
}
|
||||
ul.delivery {
|
||||
padding: 10px
|
||||
padding: 10px;
|
||||
}
|
||||
ul.delivery > li {
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -14,16 +14,18 @@
|
|||
<body>
|
||||
<header>
|
||||
{% if message %}
|
||||
<section class="notification {{ message[1] }}">{{ message[0] }}</section>
|
||||
<section class="notification {{ message[1] }}"><i class="icon-megaphone"></i> {{ message[0] }}</section>
|
||||
{% endif %}
|
||||
<section>
|
||||
<section class="menu">
|
||||
<h1><a href="/">Panio</a> <small>Les paniers piano d'Épinamap</small></h1>
|
||||
<nav>
|
||||
<a href="/livraison/new">Nouvelle livraison</a>
|
||||
</nav>
|
||||
</section>
|
||||
</header>
|
||||
<main>
|
||||
{% block body %}
|
||||
{% endblock body %}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<table class="delivery">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="ref">Référence</th>
|
||||
<th class="product">Produit</th>
|
||||
<th class="price">Prix</th>
|
||||
{% for email, order in delivery.orders.items() %}
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
</tr>
|
||||
{% for product in delivery.products %}
|
||||
<tr>
|
||||
<th class="product">{{ product.ref }}</th>
|
||||
<th class="product">{{ product.name }}</th>
|
||||
<td>{{ product.price }} €</td>
|
||||
{% for email, order in delivery.orders.items() %}
|
||||
|
|
@ -27,7 +29,7 @@
|
|||
<th>{{ delivery.product_wanted(product) }}</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr><th class="total"><i class="icon-pricetags"></i> Total</th><td>—</td>
|
||||
<tr><th class="total"><i class="icon-pricetags"></i> Total</th><td>—</td><td>—</td>
|
||||
{% for email, order in delivery.orders.items() %}
|
||||
<td>{{ order.total(delivery.products) }} €</td>
|
||||
{% endfor %}
|
||||
|
|
@ -47,7 +49,7 @@
|
|||
<a href="/livraison/{{ delivery.id }}/rapport-complet.xlsx"><i class="icon-grid"></i> Rapport complet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/livraison/{{ delivery.id }}/émargement"><i class="icon-document"></i> Liste d'émargement</a>
|
||||
<a href="/livraison/{{ delivery.id }}/émargement" target="_blank"><i class="icon-document"></i> Liste d'émargement</a>
|
||||
</li>
|
||||
<li>
|
||||
<label for="import-command" class="toggle-label"><i class="icon-paperclip"></i> Importer une commande</label>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<ul class="delivery-head">
|
||||
<li><i class="icon-basket"></i> {{ delivery.description }}</li>
|
||||
<li><i class="icon-map-pin"></i> <strong>Lieu</strong> {{ delivery.where }}</li>
|
||||
<li><i class="icon-clock"></i> <strong>Date de livraison</strong> {{ delivery.when }}</li>
|
||||
<li><i class="icon-hourglass"></i> {% if delivery.is_open %}<strong>Date limite de commande</strong> {{ delivery.order_before.date() }}{% else %}<strong>Fermée</strong>{% endif %}</li>
|
||||
<li><i class="icon-clock"></i> <strong>Date de livraison</strong> <time datetime="{{ delivery.when }}">{{ delivery.when }}</time></li>
|
||||
<li><i class="icon-hourglass"></i> {% if delivery.is_open %}<strong>Date limite de commande</strong> <time datetime="{{ delivery.order_before.date() }}">{{ delivery.order_before.date() }}</time>{% else %}<strong>Fermée</strong>{% endif %}</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,18 @@
|
|||
{% for product in delivery.products %}
|
||||
<tr>
|
||||
<th class="product">{{ product.name }}
|
||||
{% if product.description or product.img %}
|
||||
<label for="toggleControl{{ loop.index }}" class="toggle-label">(Détails)</label>
|
||||
<input type="checkbox" id="toggleControl{{ loop.index }}" class="toggle">
|
||||
<label for="toggleControl{{ loop.index }}" class="toggle-background"></label>
|
||||
<div class="toggle-container">
|
||||
<p>{{ product.description }}</p>
|
||||
<p>{% if product.img %}
|
||||
<img src="{{ product.img }}">
|
||||
{% else %}
|
||||
<img src="/static/img/default_product.svg">
|
||||
{% endif %}</p>
|
||||
<label for="toggleControl{{ loop.index }}" class="toggle-label">Fermer</label>
|
||||
</div>
|
||||
{% endif %}</p>
|
||||
</th>
|
||||
<td>{{ product.price }} €</td><td class="with-input"><input type="number" name="{{ product.ref }}" value="{{ order.get_quantity(product) }}"></td></tr>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue