From d72359e9a599fffcaa10f0bff6fc3bda41ada70e Mon Sep 17 00:00:00 2001
From: Thomas Rupprecht <rupprecht.thomas@gmail.com>
Date: Thu, 5 Jan 2023 00:24:13 +0100
Subject: [PATCH] improve popup styling

---
 src/popup.css | 10 ++++++++--
 src/popup.js  | 52 +++++++++++++++++++++++++++++++++------------------
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/popup.css b/src/popup.css
index 04f869f..f00dc8f 100644
--- a/src/popup.css
+++ b/src/popup.css
@@ -75,8 +75,14 @@ svg {
 	cursor: pointer;
 }
 
-#calendar > div > svg, #state > svg {
-	margin-right: 4px;
+#state > svg, #calendar > .calendar-entry > svg, #calendar > .calendar-entry strong {
+	margin-right: 8px;
+}
+#calendar > .calendar-entry {
+	display: flex;
+}
+#calendar address {
+	display: inline;
 }
 
 #space-api {
diff --git a/src/popup.js b/src/popup.js
index 86bbb11..b1561ad 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -1,21 +1,21 @@
-const calendarSVG = `
-	<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender">
+const calendarSVG =
+	`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender">
 		<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
 		<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-	</svg>
-`;
-const doorClosedSVG = `
-	<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen">
+	</svg>`
+;
+const doorClosedSVG =
+	`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen">
 		<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
 		<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
-	</svg>
-`;
-const doorOpenSVG = `
-	<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen">
+	</svg>`
+;
+const doorOpenSVG =
+	`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen">
 		<path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
 		<path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117zM11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5zM4 1.934V15h6V1.077l-6 .857z"/>
-	</svg>
-`;
+	</svg>`
+;
 
 const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: 'medium', timeStyle: 'short'});
 
@@ -79,6 +79,13 @@ function updateNextEvent(nextEvents) {
 		const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
 
 		nextEventDateEvents.forEach((nextEventDateEvent) => {
+			const calenderEntryElement = document.createElement('div');
+			calenderEntryElement.classList.add('calendar-entry');
+			calenderEntryElement.innerHTML = calendarSVG;
+
+			const containerElement = document.createElement('div');
+			calenderEntryElement.append(containerElement);
+
 			const strongElement = document.createElement('strong');
 			strongElement.textContent = nextEventDateEvent.name;
 
@@ -87,14 +94,23 @@ function updateNextEvent(nextEvents) {
 			timeElement.dateTime = beginDate.toISOString();
 			timeElement.textContent = dateTimeFormat.format(beginDate);
 
-			const divElement = document.createElement('div');
-			divElement.innerHTML = calendarSVG;
-			divElement.append(strongElement, ' ', timeElement);
+			const titleElement = document.createElement('div');
+			titleElement.append(strongElement, timeElement);
+			containerElement.append(titleElement);
+
 			if (nextEventDateEvent.location) {
-				const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`);
-				divElement.append(locationNode);
+				const locationElement = document.createElement('div');
+
+				const addressElement = document.createElement('address');
+				addressElement.textContent = nextEventDateEvent.location;
+
+				const parenthesesOpenNode = document.createTextNode('(');
+				const parenthesesCloseNode = document.createTextNode(')');
+
+				locationElement.append(parenthesesOpenNode, addressElement, parenthesesCloseNode);
+				containerElement.append(locationElement);
 			}
-			calendarElement.append(divElement);
+			calendarElement.append(calenderEntryElement);
 		});
 	}
 }