From 2c48e44c040a6bf333f55d7ae5ae02a6b1dbb2b9 Mon Sep 17 00:00:00 2001
From: Ambrose Chua <ambrose@hey.com>
Date: Wed, 11 Nov 2020 00:46:56 +0800
Subject: [PATCH] Use flexbox to ellipsise city name

---
 assets/css/styles.css | 67 +++++++++++++++++++++++++++++--------------
 templates/index.html  | 43 +++++++--------------------
 zone.go               | 13 +++++++++
 3 files changed, 69 insertions(+), 54 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index e8fb853..699bae6 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -63,7 +63,7 @@ main {
 }
 
 footer {
-	padding: 2rem;
+	padding: 1.5rem;
 }
 
 /* Essentials */
@@ -77,7 +77,7 @@ footer {
 }
 .list-inline li:before {
 	content: "\2022";
-	padding: 0 0.25rem;
+	padding: 0 0.25em;
 }
 .list-inline li:first-child:before {
 	content: none;
@@ -95,7 +95,11 @@ footer {
 
 main {
 	margin-top: 1rem;
-	margin-bottom: 1rem;
+	margin-bottom: 1.5rem;
+}
+main > * {
+	margin-left: 1.5rem;
+	margin-right: 1.5rem;
 }
 
 footer {
@@ -156,15 +160,17 @@ body.theme-dark .theme-toggle-system {
 /* Components */
 
 d-zone {
-	margin-left: 2rem;
-	margin-right: 2rem;
-
 	display: flex;
-	flex-wrap: wrap;
 	align-items: center;
+	padding-bottom: 0.5rem;
+	padding-top: 0.5rem;
+
+	position: relative;
 }
 d-zone:not(:last-of-type):after {
 	content: '';
+	position: absolute;
+	bottom: 0;
 	display: block;
 
 	height: 1px;
@@ -185,8 +191,11 @@ d-zoneerror {
 	flex: 1 1 0;
 
 	display: block;
-	margin-top: 2rem;
-	margin-bottom: 2rem;
+	margin-top: 1.5rem;
+	margin-bottom: 1.5rem;
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+
 	text-align: center;
 	color: rgb(255, 127, 127);
 	color: color(display-p3 1.0 0.5 0.5);
@@ -195,32 +204,48 @@ d-zoneerror {
 /* Left container */
 d-zoneinfo {
 	flex: 1 1 0;
+	width: 0px; /* Force sizing from zero */
 
 	display: block;
-	margin-top: 2rem;
-	margin-bottom: 2rem;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
 	margin-right: 0.5rem;
 }
+@media (max-width: 319px) {
+	d-zoneinfo {
+		width: 100%;
+	}
+}
 
 d-zonename {
-	display: inline;
+	display: flex;
+	justify-content: flex-start;
+}
+d-zonename d-zonearea {
+	flex: 0 1 auto;
+
+	display: block;
+
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+d-zonename d-zonecountry {
+	flex: 0 0 auto;
+
+	display: block;
 }
 
 d-zoneoffset {
-	display: inline;
+	display: block;
 
 	white-space: nowrap;
 	opacity: 0.5;
 }
-@media (max-width: 675px) {
-	d-zoneoffset {
-		display: block;
-	}
-}
 
 d-date {
 	display: block;
-	margin-top: 0.25em;
+	margin-top: 0.25rem;
 
 	font-size: 1.2em;
 }
@@ -228,8 +253,8 @@ d-date {
 /* Right container */
 d-zonefigure {
 	display: block;
-	margin-top: 2rem;
-	margin-bottom: 2rem;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
 }
 
 d-time {
diff --git a/templates/index.html b/templates/index.html
index e940e6d..551b5a2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,7 +24,16 @@
 					{{else}}
 						{{$zt := $t.In .Location}}
 						<d-zoneinfo>
-							<d-zonename>{{.Name}}</d-zonename>
+							{{if not .IsOffset}}
+							<d-zonename>
+								<d-zonearea>{{.FirstName}},</d-zonearea>
+								<d-zonecountry>&nbsp;{{.City.Country.Ref}}</d-zonecountry>
+							</d-zonename>
+							{{else}}
+							<d-zonename>
+								{{.Name}}
+							</d-zonename>
+							{{end}}
 							{{if not .IsOffset}}
 								<d-zoneoffset>{{.TimeOffset $t | formatOffset}}</d-zoneoffset>
 							{{end}}
@@ -37,38 +46,6 @@
 				{{end}}
 			</d-zone>
 		{{end}}
-		<!--
-		<d-zone>
-			<d-zoneinfo>
-				<d-zonename>India Standard Time</d-zonename>
-				<d-zoneoffset>+5:30</d-zoneoffset>
-				<d-date date="2020-06-02">2020-06-02</d-date>
-			</d-zoneinfo>
-			<d-zonefigure>
-				<d-time time="14:00">14:00</d-time>
-			</d-zonefigure>
-		</d-zone>
-		<d-zone>
-			<d-zoneinfo>
-				<d-zonename>Singapore Time</d-zonename>
-				<d-zoneoffset>+8:00</d-zoneoffset>
-				<d-date date="2020-06-02">2020-06-02</d-date>
-			</d-zoneinfo>
-			<d-zonefigure>
-				<d-time time="16:30">16:30</d-time>
-			</d-zonefigure>
-		</d-zone>
-		<d-zone>
-			<d-zoneinfo>
-				<d-zonename>New York, USA</d-zonename>
-				<d-zoneoffset>-4:00</d-zoneoffset>
-				<d-date date="2020-06-02">2020-06-02</d-date>
-			</d-zoneinfo>
-			<d-zonefigure>
-				<d-time time="04:30">04:30</d-time>
-			</d-zonefigure>
-		</d-zone>
-		-->
 	</main>
 
 	{{template "footer.html"}}
diff --git a/zone.go b/zone.go
index 74ce7ee..ef36ba7 100644
--- a/zone.go
+++ b/zone.go
@@ -31,6 +31,19 @@ func (z Zone) Name() string {
 	return ""
 }
 
+// FirstName returns the primary name of the zone
+func (z Zone) FirstName() string {
+	if z.IsOffset() {
+		return z.Offset.String()
+	} else if z.City != nil {
+		if len(z.City.Admin1.Name) > 0 {
+			return z.City.Name + ", " + z.City.Admin1.Name
+		}
+		return z.City.Name
+	}
+	return ""
+}
+
 // Location returns the time.Location of the zone. Useful for other functions
 func (z Zone) Location() *time.Location {
 	if z.IsOffset() {