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
5 changed files with 108 additions and 71 deletions
|
@ -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;
|
||||||
|
|
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">
|
<div class="footer">
|
||||||
Total {{ order.items.count() }} items — {{ total_price|euro }}
|
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>
|
</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 {
|
||||||
|
|
|
@ -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() %}
|
||||||
|
|
|
@ -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:
|
||||||
|
|
Loading…
Reference in a new issue