From e99dfda151185bb51717b54c638e1d247b148985 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Wed, 4 Nov 2020 13:05:20 +0100
Subject: [locationinfo] Change header layout

Location name is now first row, event name second row, centered, with
remaining time breaking into third row if necessary.
---
 .../locationinfo/templates/frontend-default.html   | 61 ++++++++++------------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/modules-available/locationinfo/templates/frontend-default.html b/modules-available/locationinfo/templates/frontend-default.html
index ad2917f4..46b1b427 100755
--- a/modules-available/locationinfo/templates/frontend-default.html
+++ b/modules-available/locationinfo/templates/frontend-default.html
@@ -51,12 +51,21 @@ optional:
 			box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
 			margin-bottom: 4px;
 			width: 100%;
-			display: flex;
-			flex-wrap: nowrap;
-			align-items: center;
-			justify-content: space-between;
+			font-size: 25pt;
+			font-size: 1.8vw;
+			font-weight: bold;
 		}
 
+      .count-3 {
+          font-size: 16pt;
+          font-size: 1.2vw;
+      }
+
+      .count-1 {
+          font-size: 30pt;
+          font-size: 2.25vw;
+      }
+
 		.pull-left {
 			float: left;
 		}
@@ -66,15 +75,11 @@ optional:
 		}
 
 		.col {
-			padding: 0 4px;
+			padding: 3px 5px 0;
 			color: white;
 			overflow: hidden;
-			flex: 1 1 auto;
 			text-overflow: ellipsis;
-			position: relative;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
+			 line-height: 106%;
 		}
 
 		.col-square {
@@ -90,6 +95,9 @@ optional:
 			text-align: center;
 			padding: 0;
 			overflow: visible;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
 
 		.count-1 .col-square {
@@ -119,30 +127,19 @@ optional:
 			z-index: 100;
 		}
 
-		.header-font {
-			font-size: 25pt;
-			font-size: 1.8vw;
-			font-weight: bold;
-			padding: 10px;
-		}
-
 		.nowrap {
 			white-space: nowrap;
 			overflow: hidden;
 		}
 
-		.timer {
-			color: #ddd;
+		.location-name {
+			 font-size: 80%;
+			 font-weight: normal;
 		}
 
-		.count-3 .header-font {
-			font-size: 16pt;
-			font-size: 1.2vw;
-		}
-
-		.count-1 .header-font {
-			font-size: 30pt;
-			font-size: 2.25vw;
+		.timer {
+			color: #ddd;
+			font-size: 80%;
 		}
 
 		.seats-counter {
@@ -603,16 +600,16 @@ optional:
 			$("body").append($loc);
 
 			room.$.container = $loc;
-			room.$.locationName = $('<div>').addClass('col').addClass('header-font').addClass('pull-left');
+			room.$.locationName = $('<div>').addClass('col location-name nowrap');
 			room.$.currentEvent = $("<span>").addClass('nowrap');
-			room.$.currentRemain = $("<span>").addClass('nowrap').addClass('timer');
+			room.$.currentRemain = $("<span>").addClass('nowrap timer');
 			room.$.seatsCounter = $('<span>').addClass('seats-counter');
 			room.$.seatsBackground = $('<div>').addClass('col col-square').append(room.$.seatsCounter);
 
-			var $header = $('<div>').addClass('row').addClass('count-' + columns);
-			$header.append(room.$.locationName);
+			var $header = $('<div>').addClass('row count-' + columns);
 			$header.append(room.$.seatsBackground);
-			$header.append($('<div>').addClass('col header-font center').append(room.$.currentEvent).append(' ').append(room.$.currentRemain));
+			$header.append(room.$.locationName);
+			$header.append($('<div>').addClass('col center').append(room.$.currentEvent).append(' ').append(room.$.currentRemain));
 			room.$.header = $header;
 			$loc.append($header);
 			$header.append('<div class="clearfix">');
-- 
cgit v1.2.3-55-g7522