Improve design

Remove main CSS from shop view page. Make it theme independent and
maximize contrast.

Improve spacing in "add item" list.

Refactor old term "showcase" to "shop_view" in code.
This commit is contained in:
Midgard 2021-06-21 00:46:29 +02:00
parent 58d270e582
commit 1ff8ceb521
Signed by: midgard
GPG key ID: 511C112F1331BBB4
5 changed files with 108 additions and 71 deletions

View file

@ -60,61 +60,6 @@ body {
width: 100%; width: 100%;
} }
.showcase {
font-size: 16px;
line-height: 1.2;
padding: 0;
max-width: 500px;
margin: 0 auto 70px;
}
.showcase h1 {
font-size: 200%;
margin: 0 ;
padding: 0.4em 0 0.2em;
border-bottom: 1px dashed var(--gray1);
text-align: center;
}
.showcase h2 {
font-size: 110%;
font-weight: bold;
margin-bottom: 0.6em;
}
.showcase .open-order-warning {
font-size: 150%;
text-align: center;
padding: 1em 0.5em;
background-color: rgba(255, 0, 0, 0.1);
}
.showcase .dish {
padding: 0 0.5em;
}
@media (min-width: 500px) {
.showcase .dish {
padding: 0 1em;
}
}
.showcase .quantity {
font-size: 110%;
}
.showcase .comments {
padding-left: 2em;
}
.showcase .comments li {
margin: 0.5em 0 0;
}
.showcase .total {
border-top: 1px dashed var(--gray1);
text-align: center;
padding: 0.5em 0;
margin-top: 1.3em;
}
.time_data{ .time_data{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View file

@ -0,0 +1,93 @@
:root {
--bg: #eee;
--ticketBg: #fff;
--fg: #000;
--dashes: 1px dashed #444;
--fontFamily: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
--fontSize: 16px;
}
html, body {
margin: 0;
padding: 0;
}
body {
background: var(--bg);
color: var(--fg);
font-family: var(--fontFamily);
font-size: var(--fontSize);
line-height: 1.2;
}
.ticket {
background: var(--ticketBg);
font-size: 16px;
padding: 0;
max-width: 500px;
margin: 25px auto;
margin: 7vh auto;
box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.2);
}
@media (max-width: 500px) {
body {
background: var(--ticketBg);
}
.ticket {
margin: 0;
box-shadow: none;
}
}
h1 {
font-size: 200%;
margin: 0 ;
padding: 0.3em 0 0.3em;
border-bottom: var(--dashes);
text-align: center;
}
h2 {
font-size: 110%;
font-weight: bold;
margin-bottom: 0.6em;
}
.open-order-warning {
font-size: 150%;
text-align: center;
padding: 1em 0.5em;
background-color: rgba(255, 0, 0, 0.1);
}
.dish {
padding: 0 0.5em;
}
@media (min-width: 500px) {
.dish {
padding: 0 1em;
}
}
.quantity {
font-size: 110%;
}
.comments {
padding-left: 2em;
}
.comments li {
margin: 0.5em 0 0;
}
.total {
border-top: var(--dashes);
text-align: center;
padding: 0.5em 0;
margin-top: 1.3em;
}
.time_data{
display: flex;
justify-content: space-between;
}

View file

@ -256,7 +256,7 @@
<div class="footer"> <div class="footer">
Total {{ order.items.count() }} items — {{ total_price|euro }} Total {{ order.items.count() }} items — {{ total_price|euro }}
&nbsp; &nbsp;
<a class="btn btn-sm" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}">Shop view</a> <a class="btn btn-sm" href="{{ url_for('order_bp.items_shop_view', order_id=order.id) }}">Shop view</a>
</div> </div>
</div> </div>
</div> </div>
@ -313,9 +313,7 @@
<div class="footer"> <div class="footer">
On selected: On selected:
<button class="btn btn-sm">Mark paid (TODO)</button> <button class="btn btn-sm"><span class="glyphicon glyphicon-ok"></span> Mark paid (TODO)</button>
Request payment for selected:
<button class="btn btn-sm"><span class="glyphicon glyphicon-piggy-bank"></span> Tab (TODO)</button> <button class="btn btn-sm"><span class="glyphicon glyphicon-piggy-bank"></span> Tab (TODO)</button>
<button class="btn btn-sm"><span class="glyphicon glyphicon-qrcode"></span> QR code (TODO)</button> <button class="btn btn-sm"><span class="glyphicon glyphicon-qrcode"></span> QR code (TODO)</button>
</div> </div>
@ -472,7 +470,8 @@ li {
summary { summary {
line-height: 1.2; line-height: 1.2;
margin: 0.6em 0; margin: 0 -10px;
padding: 4px 10px;
} }
summary .dish_name, summary:before { summary .dish_name, summary:before {
align-self: flex-start; align-self: flex-start;
@ -480,14 +479,16 @@ summary .dish_name, summary:before {
details[open] summary .dish_name { details[open] summary .dish_name {
font-weight: bold; font-weight: bold;
} }
details {
margin: 0 -10px;
padding: 0 10px;
}
details[open] { details[open] {
background-color: var(--gray5); background-color: var(--gray5);
margin-left: -10px; padding-bottom: 5px;
margin-right: -10px; }
margin-bottom: 5px; details:not([open]) summary:hover {
padding-left: 10px; background-color: var(--gray5);
padding-right: 10px;
padding-bottom: 10px;
} }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { .select2-container--default .select2-selection--multiple .select2-selection__rendered {

View file

@ -7,9 +7,7 @@ Haldis - Order {{ order.id }}
{% block styles %} {% block styles %}
{{ super() }} {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen"> <link rel="stylesheet" href="{{ url_for('static', filename='css/shop_view.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('general_bp.theme_css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
@ -23,7 +21,7 @@ Haldis - Order {{ order.id }}
{% block content -%} {% block content -%}
{{ utils.flashed_messages(container=True) }} {{ utils.flashed_messages(container=True) }}
<div class="darker showcase" id="items-ordered"> <div class="ticket" id="items-ordered">
<h1>Haldis order {{ order.id }}</h1> <h1>Haldis order {{ order.id }}</h1>
{% if not order.is_closed() %} {% if not order.is_closed() %}

View file

@ -88,7 +88,7 @@ def order_from_id(order_id: int, form: OrderForm = None, dish_id=None) -> str:
@order_bp.route("/<order_id>/items") @order_bp.route("/<order_id>/items")
def items_showcase(order_id: int) -> str: def items_shop_view(order_id: int) -> str:
"Generate order items view from id" "Generate order items view from id"
order = Order.query.filter(Order.id == order_id).first() order = Order.query.filter(Order.id == order_id).first()
if order is None: if order is None: