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:
parent
58d270e582
commit
1ff8ceb521
GPG key ID:
511C112F1331BBB4
5 changed files with 108 additions and 71 deletions
|
|
@ -60,61 +60,6 @@ body {
|
|||
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{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
93
app/static/css/shop_view.css
Normal file
93
app/static/css/shop_view.css
Normal 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;
|
||||
}
|
||||
|
|
@ -256,7 +256,7 @@
|
|||
<div class="footer">
|
||||
Total {{ order.items.count() }} items — {{ total_price|euro }}
|
||||
|
||||
<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>
|
||||
|
|
@ -313,9 +313,7 @@
|
|||
|
||||
<div class="footer">
|
||||
On selected:
|
||||
<button class="btn btn-sm">Mark paid (TODO)</button>
|
||||
|
||||
Request payment for selected:
|
||||
<button class="btn btn-sm"><span class="glyphicon glyphicon-ok"></span> Mark paid (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>
|
||||
</div>
|
||||
|
|
@ -472,7 +470,8 @@ li {
|
|||
|
||||
summary {
|
||||
line-height: 1.2;
|
||||
margin: 0.6em 0;
|
||||
margin: 0 -10px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
summary .dish_name, summary:before {
|
||||
align-self: flex-start;
|
||||
|
|
@ -480,14 +479,16 @@ summary .dish_name, summary:before {
|
|||
details[open] summary .dish_name {
|
||||
font-weight: bold;
|
||||
}
|
||||
details {
|
||||
margin: 0 -10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
details[open] {
|
||||
background-color: var(--gray5);
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
details:not([open]) summary:hover {
|
||||
background-color: var(--gray5);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ Haldis - Order {{ order.id }}
|
|||
|
||||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.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">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/shop_view.css') }}" media="screen">
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
|
|
@ -23,7 +21,7 @@ Haldis - Order {{ order.id }}
|
|||
{% block content -%}
|
||||
{{ utils.flashed_messages(container=True) }}
|
||||
|
||||
<div class="darker showcase" id="items-ordered">
|
||||
<div class="ticket" id="items-ordered">
|
||||
<h1>Haldis order {{ order.id }}</h1>
|
||||
|
||||
{% if not order.is_closed() %}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ def order_from_id(order_id: int, form: OrderForm = None, dish_id=None) -> str:
|
|||
|
||||
|
||||
@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"
|
||||
order = Order.query.filter(Order.id == order_id).first()
|
||||
if order is None:
|
||||
|
|
|
|||
Loading…
Reference in a new issue