Styling

copanier/static/app.css

@@ -363,9 +363,7 @@ thead tr * {
 thead th + th {
   border-left: 1px solid white;
 }
-th, td {
-  padding: 5px !important;
-}
+
 
 tr .producer {
   border-bottom: 1px solid #aaa;
@@ -382,7 +380,7 @@ article.order {
 }
 
 table th.product {
-  min-width: 10rem;
+  min-width: 6rem;
   width: inherit;
   max-width: 15em;
   word-wrap: break-word;
@@ -398,11 +396,17 @@ table.order td.quantity {
 }
 
 td.with-input {
-  padding: 0;
+  padding: 3em;
   text-align: left;
 }
-td.with-input input {
-  text-align: center;
+
+.product_unit {
+    font-size: 0.8em;
+    font-style: italic;
+}
+
+td.with-input > input {
+  width: 100px;
 }
 
 /* Chrome, Safari, Edge, Opera */
@@ -464,7 +468,6 @@ hr {
   text-align: center;
   color: white;
   line-height: 3rem;
-  height: 3rem;
   vertical-align: middle;
   margin: 1rem;
 }
@@ -541,13 +544,14 @@ ul.delivery > li {
   margin: 0;
 }
 ul.delivery-head {
+  padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(10em , 1fr));
   grid-gap: 10px;
 }
 ul.delivery-head li {
   list-style: none;
-  padding: 0;
+  padding: 0.5em;
   margin: 0;
   font-size: 0.8em;
 }

copanier/templates/base.html

@@ -75,15 +75,23 @@
     <script src="{{ url_for('/static/js/flash.min.js') }}"></script>
     <script src="{{ url_for('/static/js/app.js') }}"></script>
 		<script src="{{ url_for('/static/js/menus.js') }}"></script>
-    {% if message %}
 		<script>
+    {% if message %}
     new window.FlashMessage("{{ message[0] }}", "{{ message[1] }}", {
         progress: true,
         interactive: true,
         timeout: 8000,
         theme: "dark"
     });
-    </script>
 		{% endif %}
+
+		// Disable scrolling on inputs, as it make users do weird things.
+		// Taken from https://stackoverflow.com/a/38589039/147077
+		document.addEventListener("wheel", function(event){
+		    if(document.activeElement.type === "number"){
+		        document.activeElement.blur();
+		    }
+		});
+    </script>
 </body>
 </html>

copanier/templates/delivery/place_order.html

@@ -35,16 +35,18 @@
             {% for product in delivery.get_products_by(producer.id) %}
             {% if not product.rupture %}
                 <tr>
-                    <th class="product {% if product.rupture %}rupture{% endif %}">{{ product }} {% if product.rupture %}(RUPTURE !){% endif %}
-                        {% if product.description %}
-                        <br /><small title="{{ product.description }}">{{ product.description }}</small>
+                    <th class="product {% if product.rupture %}rupture{% endif %}"><div {% if product.description %}title="{{ product.description }}"{% endif %}>{{ product }} {% if product.rupture %}(RUPTURE !){% endif %}</div>
+                        {% if product.description and product.description | length > 30 %}
+                        <small title="{{ product.description }}">+ d'infos…</small>
+                        {% else %}
+                        <small title="{{ product.description }}">{{ product.description }}</small>
                         {% endif %}
                     </th>
                     <td>{{ product.price | round(2) }} €</td>
                     {% if producer.has_packing %}
                         <td {% if delivery.status == delivery.ADJUSTMENT and delivery.product_missing(product) %} class="missing" title="Les commandes individuelles ne correspondent pas aux conditionnements"{% endif %}>{{ product.packing or "—" }}{% if delivery.status == delivery.ADJUSTMENT and delivery.product_missing(product) %} (manque {{ delivery.product_missing(product) }}){% endif %}</td>
                     {% endif %}
-                    <td class="with-input"><input {% if not request.user.is_referent(delivery) and delivery.status != delivery.OPEN or product.rupture %}type="text" readonly{% else%}type="number"{% endif%} min=0 name="wanted:{{ product.ref }}" value="{{ order[product].wanted }}">{% if not (delivery.status == delivery.ADJUSTMENT or force_adjustments) %} x {{ product.unit }}{% endif %}</td>
+                    <td class="with-input"><input {% if not request.user.is_referent(delivery) and delivery.status != delivery.OPEN or product.rupture %}type="text" readonly{% else%}type="number"{% endif%} min=0 name="wanted:{{ product.ref }}" value="{{ order[product].wanted }}"><br />{% if not (delivery.status == delivery.ADJUSTMENT or force_adjustments) %}<div class="product_unit"> x {{ product.unit }}</div>{% endif %}</td>
                     {% if delivery.status == delivery.ADJUSTMENT or force_adjustments %}
                     <td class="with-input"><input type="number" name="adjustment:{{ product.ref }}" value="{{ order[product].adjustment }}" min="{{ order[product].wanted * -1 }}" {% if not (delivery.product_missing(product) or force_adjustment) %}readonly{% endif %}> x {{ product.unit }}</td>
                     {% endif %}

copanier/templates/products/list_products.html

@@ -9,7 +9,10 @@
                 <a class="pure-menu-link" href="{{ url_for('create_producer', delivery_id=delivery.id) }}"><i class="icon-heart"></i>&nbsp;Ajouter un⋅e producteur⋅rice</a>
             </li>
             <li class="pure-menu-item">
-                <a class="pure-menu-link" href="{{ url_for('copy_products', id=delivery.id) }}"><i class="icon-hotairballoon"></i>&nbsp;Réutiliser les produits d'une autre distrib</a>
+                <a class="pure-menu-link" href="{{ url_for('copy_products', id=delivery.id) }}"><i class="icon-hotairballoon"></i>&nbsp;Copier une distribution</a>
+            </li>
+            <li class="pure-menu-item">
+                <a class="pure-menu-link" href="{{ url_for('mark_all_prices_as_ok', delivery_id=delivery.id) }}"><i class="icon-megaphone"></i>&nbsp;Valider tous les prix</a>
             </li>
         </ul>
     </div>