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.

app/static/css/main.css

@@ -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;

app/static/css/shop_view.css

@@ -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;
+}

app/templates/order.html

@@ -256,7 +256,7 @@
 			<div class="footer">
 				Total {{ order.items.count() }} items — {{ total_price|euro }}
 				&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>
@@ -313,9 +313,7 @@
 
 		<div class="footer">
 			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-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;
+	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 {

app/templates/order_items.html

@@ -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('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 %}
 
 {% 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() %}

app/views/order.py

@@ -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: