From c23a11bfdb3fff3522179658bf110365fd2c6783 Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Tue, 13 Oct 2020 02:01:07 +0200
Subject: [PATCH] Fix flow quirks in "order information" section

---
 app/templates/order.html | 85 +++++++++++++++++++++++-----------------
 1 file changed, 49 insertions(+), 36 deletions(-)

diff --git a/app/templates/order.html b/app/templates/order.html
index 6f1d8d2..03d2b67 100644
--- a/app/templates/order.html
+++ b/app/templates/order.html
@@ -135,43 +135,47 @@
 		<div class="box" id="order_info">
 			<h3>Order information</h3>
 			<dl>
-				<dt>Location</dt>
-				<dd>
-					{% if order.location %}
-						<a href="{{ url_for('general_bp.location', location_id=order.location_id) }}">{{ order.location_name }}</a>
-					{% else %}
-						{{ order.location_name }}
-					{% endif %}
-				</dd>
+				<div>
+					<dt>Order opens</dt>
+					<dd>{{ order.starttime.strftime("%Y-%m-%d, %H:%M") }}</dd>
 
-				<dt>Courier</dt>
-				<dd>
-					{% if order.courier == None %}
-						{% if not current_user.is_anonymous() %}
-						<form action="{{ url_for('order_bp.volunteer', order_id=order.id) }}" method="post" style="display:inline">
-							<input type="submit" class="btn btn-primary btn-sm" value="Volunteer"></input>
-						</form>
-						{% else %}No-one{% endif %}
-					{% else %}
-						{{ order.courier.username }}
-					{% endif %}
-				</dd>
+					<dt>Order closes</dt>
+					<dd>
+						{% if order.stoptime %}
+							{% set stoptimefmt = (
+								"%H:%M" if order.stoptime.date() == order.starttime.date()
+								else "%Y-%m-%d, %H:%M"
+							) %}
+							{{ order.stoptime.strftime(stoptimefmt) }} ({{  order.stoptime|countdown }})
+						{% else %}
+							Never
+						{% endif %}
+					</dd>
+				</div>
 
-				<dt>Order opens</dt>
-				<dd>{{ order.starttime.strftime("%Y-%m-%d, %H:%M") }}</dd>
+				<div>
+					<dt>Location</dt>
+					<dd>
+						{% if order.location %}
+							<a href="{{ url_for('general_bp.location', location_id=order.location_id) }}">{{ order.location_name }}</a>
+						{% else %}
+							{{ order.location_name }}
+						{% endif %}
+					</dd>
 
-				<dt>Order closes</dt>
-				<dd>
-					{% if order.stoptime %}
-						{% set stoptimefmt = (
-							"%H:%M" if order.stoptime.date() == order.starttime.date()
-							else "%Y-%m-%d, %H:%M"
-						) %}
-						{{ order.stoptime.strftime(stoptimefmt) }} ({{  order.stoptime|countdown }})
-					{% else %}
-						Never
-					{% endif %}
-				</dd>
+					<dt>Courier</dt>
+					<dd>
+						{% if order.courier == None %}
+							{% if not current_user.is_anonymous() %}
+							<form action="{{ url_for('order_bp.volunteer', order_id=order.id) }}" method="post" style="display:inline">
+								<input type="submit" class="btn btn-primary btn-sm" value="Volunteer"></input>
+							</form>
+							{% else %}No-one{% endif %}
+						{% else %}
+							{{ order.courier.username }}
+						{% endif %}
+					</dd>
+				</div>
 			</dl>
 
 			<div>
@@ -190,16 +194,21 @@
 			<h3>About {{ order.location_name }}</h3>
 			<dl>
 				{% if order.location.telephone %}
+				<div>
 					<dt>Telephone</dt>
 					<dd><a href="tel://{{ order.location.telephone }}">{{ order.location.telephone }}</a></dd>
+				</div>
 				{% endif %}
 
 				{% if order.location.website %}
+				<div>
 					<dt>Website</dt>
 					<dd><a href="{{ order.location.website }}">{{ order.location.website }}</a></dd>
+				</div>
 				{% endif %}
 
 				{% if order.location.address or order.location.osm %}
+				<div>
 					<dt>Location</dt>
 					<dd>
 						{% if order.location.osm %}
@@ -208,6 +217,7 @@
 						{{ order.location.address }}
 						{% endif %}
 					</dd>
+				</div>
 				{% endif %}
 			</dl>
 		</div>
@@ -364,8 +374,11 @@ h3 {
 	margin-bottom: 30px;
 }
 
-#order_info dl {
-	column-width: 150px;
+@media (min-width: 1200px) {
+	#order_info dl {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+	}
 }
 
 #from_favourites ul, #my_items ul, #per_person ul {