almet/copanier
1
0
Fork 0
mirror of https://github.com/almet/copanier.git synced 2025-04-28 19:42:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

CSS again and again

Browse source
This commit is contained in:
Yohan Boniface 2019-03-23 19:10:43 +01:00
parent 12719d003c
commit 8bb0dce145
5 changed files with 51 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
kaba/static/app.css
View file

@ -92,7 +92,7 @@
font-family: inherit; font-family: inherit;
} }
*, ::after, ::before { *, ::after, ::before {
box-sizing: inherit; box-sizing: border-box;
} }
html { html {
font-size: 20px; font-size: 20px;
@ -104,6 +104,8 @@ body {
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
background-color: var(--secondary-background-color); background-color: var(--secondary-background-color);
padding: 0;
margin: 0;
} }
h1, h1,
h2, h2,
@ -136,9 +138,9 @@ a:hover {
header { header {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding: 20px; padding: 0 20px 20px 20px;
} }
header section { header section.menu {
display: grid; display: grid;
grid-template-columns: 2fr auto; grid-template-columns: 2fr auto;
} }
@ -151,20 +153,12 @@ header h1 small {
font-weight: 300; font-weight: 300;
color: #666; color: #666;
} }
nav {
main a { display: flex;
padding: 0 .1rem; align-items: center;
color: inherit;
text-decoration: none;
background-color: transparent;
border-bottom: 1px solid var(--primary-color);
transition: all .3s;
} }
main a:hover { main {
padding-bottom: 1px; padding: 1rem;
color: var(--primary-color);
background-color: #e2eaf1;
border-bottom: 0;
} }
button, button,
@ -295,6 +289,7 @@ td + td {
border-left: 1px solid white; border-left: 1px solid white;
} }
th + td, th + td,
th + th,
td + th { td + th {
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
} }
@ -317,6 +312,9 @@ th.price {
th.amount { th.amount {
width: 5rem; width: 5rem;
} }
th.ref {
width: 5rem;
}
td.total, td.total,
th.total { th.total {
background-color: #bbb; background-color: #bbb;
@ -372,12 +370,16 @@ hr {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #f1f1f1; color: #f1f1f1;
line-height: : 3rem; line-height: 3rem;
height: 3rem;
vertical-align: middle; vertical-align: middle;
} }
.notification.success { .notification.success {
background-color: #0f8796; background-color: #0f8796;
} }
.notification i {
font-size: 2rem;
}
.toggle { .toggle {
display: none; display: none;
} }
@ -387,7 +389,7 @@ hr {
} }
.toggle-container { .toggle-container {
display: none; display: none;
position: absolute; position: fixed;
top: calc(50% - 200px); top: calc(50% - 200px);
left: calc(50% - 200px); left: calc(50% - 200px);
height: 400px; height: 400px;
@ -395,12 +397,29 @@ hr {
border: 1px solid #999; border: 1px solid #999;
background: white; background: white;
padding: 5px; 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 { .toggle:checked ~ .toggle-container {
display: block; display: block;
} }
ul.delivery { ul.delivery {
padding: 10px padding: 10px;
} }
ul.delivery > li { ul.delivery > li {
list-style: none; list-style: none;

6
kaba/templates/base.html
View file

@ -14,16 +14,18 @@
<body> <body>
<header> <header>
{% if message %} {% if message %}
<section class="notification {{ message[1] }}">{{ message[0] }}</section> <section class="notification {{ message[1] }}"><i class="icon-megaphone"></i> {{ message[0] }}</section>
{% endif %} {% endif %}
<section> <section class="menu">
<h1><a href="/">Panio</a> <small>Les paniers piano d'Épinamap</small></h1> <h1><a href="/">Panio</a> <small>Les paniers piano d'Épinamap</small></h1>
<nav> <nav>
<a href="/livraison/new">Nouvelle livraison</a> <a href="/livraison/new">Nouvelle livraison</a>
</nav> </nav>
</section> </section>
</header> </header>
<main>
{% block body %} {% block body %}
{% endblock body %} {% endblock body %}
</main>
</body> </body>
</html> </html>

6
kaba/templates/delivery.html
View file

@ -6,6 +6,7 @@
<table class="delivery"> <table class="delivery">
<tbody> <tbody>
<tr> <tr>
<th class="ref">Référence</th>
<th class="product">Produit</th> <th class="product">Produit</th>
<th class="price">Prix</th> <th class="price">Prix</th>
{% for email, order in delivery.orders.items() %} {% for email, order in delivery.orders.items() %}
@ -15,6 +16,7 @@
</tr> </tr>
{% for product in delivery.products %} {% for product in delivery.products %}
<tr> <tr>
<th class="product">{{ product.ref }}</th>
<th class="product">{{ product.name }}</th> <th class="product">{{ product.name }}</th>
<td>{{ product.price }} €</td> <td>{{ product.price }} €</td>
{% for email, order in delivery.orders.items() %} {% for email, order in delivery.orders.items() %}
@ -27,7 +29,7 @@
<th>{{ delivery.product_wanted(product) }}</th> <th>{{ delivery.product_wanted(product) }}</th>
</tr> </tr>
{% endfor %} {% 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() %} {% for email, order in delivery.orders.items() %}
<td>{{ order.total(delivery.products) }} €</td> <td>{{ order.total(delivery.products) }} €</td>
{% endfor %} {% endfor %}
@ -47,7 +49,7 @@
<a href="/livraison/{{ delivery.id }}/rapport-complet.xlsx"><i class="icon-grid"></i> Rapport complet</a> <a href="/livraison/{{ delivery.id }}/rapport-complet.xlsx"><i class="icon-grid"></i> Rapport complet</a>
</li> </li>
<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>
<li> <li>
<label for="import-command" class="toggle-label"><i class="icon-paperclip"></i> Importer une commande</label> <label for="import-command" class="toggle-label"><i class="icon-paperclip"></i> Importer une commande</label>

4
kaba/templates/includes/delivery_head.html
View file

@ -1,6 +1,6 @@
<ul class="delivery-head"> <ul class="delivery-head">
<li><i class="icon-basket"></i> {{ delivery.description }}</li> <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-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-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> {{ delivery.order_before.date() }}{% else %}<strong>Fermée</strong>{% endif %}</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> </ul>

5
kaba/templates/place_order.html
View file

@ -10,17 +10,18 @@
{% for product in delivery.products %} {% for product in delivery.products %}
<tr> <tr>
<th class="product">{{ product.name }} <th class="product">{{ product.name }}
{% if product.description or product.img %}
<label for="toggleControl{{ loop.index }}" class="toggle-label">(Détails)</label> <label for="toggleControl{{ loop.index }}" class="toggle-label">(Détails)</label>
<input type="checkbox" id="toggleControl{{ loop.index }}" class="toggle"> <input type="checkbox" id="toggleControl{{ loop.index }}" class="toggle">
<label for="toggleControl{{ loop.index }}" class="toggle-background"></label>
<div class="toggle-container"> <div class="toggle-container">
<p>{{ product.description }}</p> <p>{{ product.description }}</p>
<p>{% if product.img %} <p>{% if product.img %}
<img src="{{ product.img }}"> <img src="{{ product.img }}">
{% else %}
<img src="/static/img/default_product.svg">
{% endif %}</p> {% endif %}</p>
<label for="toggleControl{{ loop.index }}" class="toggle-label">Fermer</label> <label for="toggleControl{{ loop.index }}" class="toggle-label">Fermer</label>
</div> </div>
{% endif %}</p>
</th> </th>
<td>{{ product.price }} €</td><td class="with-input"><input type="number" name="{{ product.ref }}" value="{{ order.get_quantity(product) }}"></td></tr> <td>{{ product.price }} €</td><td class="with-input"><input type="number" name="{{ product.ref }}" value="{{ order.get_quantity(product) }}"></td></tr>
{% endfor %} {% endfor %}