Use flexbox to ellipsise city name

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-top: 1.5rem;
-	margin-bottom: 2rem;
+	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-top: 1rem;
-	margin-bottom: 2rem;
+	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-top: 1rem;
-	margin-bottom: 2rem;
+	margin-bottom: 1rem;
 }
 
 d-time {

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"}}

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() {