From e96bc1c0abc33cd85bf82f4ff7d6b21b3accd31e Mon Sep 17 00:00:00 2001
From: Henri Koski <henri.t.koski@gmail.com>
Date: Wed, 27 Mar 2024 19:13:15 +0200
Subject: [PATCH] Responsive footer and header

---
 api/assets/style.css         | 206 ++++++++++++++++++++++++++++++-----
 api/templates/index.templ    |  73 ++++++++-----
 api/templates/index_templ.go |  24 ++--
 store/mock/store.go          |   2 +-
 4 files changed, 236 insertions(+), 69 deletions(-)

diff --git a/api/assets/style.css b/api/assets/style.css
index 37e9121..e1c49b0 100644
--- a/api/assets/style.css
+++ b/api/assets/style.css
@@ -80,33 +80,34 @@ body.dark {
 }
 
 #header {
-  display: flex;
-  flex-grow: 0;
-  flex-shrink: 0;
+  display: inline-block;
   height: 22px;
   margin-top: 10px;
   font-size: 15px;
   font-weight: 700;
   line-height: 18px;
   letter-spacing: 0em;
-  align-items: center;
+}
+
+#header-left {
+  display: inline-block;
+  width: 75%;
+}
+
+#header-right {
+  display: inline-block;
+  width: 25%;
 }
 
 #logo {
-  text-align: left;
-  flex-grow: 2;
-  flex-shrink: 1;
-  flex-basis: 0px;
-  min-width: 0px;
+  display: inline-block;
+  width: 34%;
 }
 
 #search {
-  margin: 0 10px;
+  display: inline-block;
   text-align: center;
-  flex-grow: 4;
-  flex-shrink: 1;
-  flex-basis: 0px;
-  min-width: 0px;
+  width: 65%;
 }
 
 #search > input {
@@ -161,11 +162,8 @@ input::-moz-placeholder {
 }
 
 #mode {
-  text-align: center;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0px;
-  min-width: 0px;
+  display: inline-block;
+  width: 70%;
 }
 
 #mode > span {
@@ -173,12 +171,9 @@ input::-moz-placeholder {
 }
 
 #live {
+  display: inline-block;
+  width: 30%;
   text-align: right;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0px;
-  min-width: 0px;
-  margin-left: 4px;
 }
 
 #live > #dot {
@@ -224,6 +219,14 @@ input::-moz-placeholder {
   padding: 20px;
 }
 
+#left-stats > .number-block:first-child {
+  margin-left: 0px;
+}
+
+#right-stats > .number-block:last-child {
+  margin-right: 0px;
+}
+
 body.dark .number-block {
   background: #333333;
 }
@@ -284,6 +287,10 @@ body.dark .tbody {
   border: 1px solid #333333;
 }
 
+.mobile-label {
+  display: none;
+}
+
 .left,
 .right {
   display: flex;
@@ -310,6 +317,22 @@ body.dark .tr:nth-child(even) {
   background: #333333;
 }
 
+.left > .td:nth-child(1) {
+  order: 1;
+}
+
+.left > .td:nth-child(2) {
+  order: 2;
+}
+
+.right > .td:nth-child(1) {
+  order: 1;
+}
+
+.right > .td:nth-child(2) {
+  order: 2;
+}
+
 .left > .th:nth-child(1),
 .left > .td:nth-child(1) {
   min-width: 106px;
@@ -338,11 +361,6 @@ body.dark .tr:nth-child(even) {
   min-width: 164px;
 }
 
-.th:nth-child(3),
-.td:nth-child(3) {
-  min-width: 12px;
-}
-
 .tag {
   border-radius: 40px;
   border-style: solid;
@@ -394,6 +412,10 @@ body.dark .tag {
   justify-content: space-between;
 }
 
+#copyright {
+  font-weight: 700;
+}
+
 #links > a {
   color: black;
   text-decoration: none;
@@ -401,6 +423,10 @@ body.dark .tag {
   padding: 0 10px;
 }
 
+#links > a:first-child {
+  padding-left: 0px;
+}
+
 body.dark #links > a {
   color: white;
 }
@@ -484,27 +510,149 @@ input:checked + .slider:before {
   #stats {
     height: 246px;
   }
+
   .rolling-number {
     font-size: 60px;
   }
 }
 
 @media (max-width: 852px) {
+  #header {
+    display: inline-block;
+    margin-top: 10px;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 18px;
+    letter-spacing: 0em;
+    height: 38px;
+  }
+
+  #header-left {
+    display: inline-block;
+    width: 75%;
+  }
+
+  #header-left > :first-child,
+  #header-right > :first-child {
+    padding-bottom: 12px;
+  }
+
+  #header-right {
+    display: inline-block;
+    width: 25%;
+  }
+
+  #logo {
+    display: inline-block;
+    width: 100%;
+  }
+
+  #search {
+    display: inline-block;
+    text-align: center;
+    width: 99%;
+  }
+
+  #mode {
+    display: inline-block;
+    width: 100%;
+    text-align: right;
+  }
+
+  #live {
+    display: inline-block;
+    width: 100%;
+    text-align: right;
+  }
+
   #stats {
     height: 159px;
   }
+
   .rolling-number {
     font-size: 40px;
     line-height: 48px;
   }
+
+  #footer {
+    flex-direction: column;
+    height: 44px;
+  }
+
+  #footer > #copyright {
+    order: 2;
+  }
+
+  #footer > #links {
+    order: 1;
+  }
 }
 
 @media (max-width: 680px) {
+  #header-left {
+    display: inline-block;
+    width: 50%;
+  }
+
+  #header-left > :first-child,
+  #header-right > :first-child {
+    padding-bottom: 12px;
+  }
+
+  #header-right {
+    display: inline-block;
+    width: 50%;
+  }
+
   #left-stats,
   #right-stats {
     flex-direction: column;
   }
+
   #stats {
     height: 318px;
   }
+
+  #left-stats > .number-block {
+    margin-left: 0px;
+  }
+
+  #right-stats > .number-block {
+    margin-right: 0px;
+  }
+
+  .thead {
+    display: none;
+  }
+
+  .tr {
+    flex-direction: column;
+    height: 120px;
+  }
+
+  .left > .td:nth-child(1) {
+    min-width: 0px;
+  }
+
+  .left > .td:nth-child(1) {
+    order: 2;
+  }
+
+  .left > .td:nth-child(2) {
+    order: 1;
+  }
+
+  .right > .td:nth-child(1) {
+    order: 1;
+  }
+
+  .right > .td:nth-child(2) {
+    order: 3;
+  }
+}
+
+@media (max-width: 544px) {
+  #links > a {
+    padding: 0 1px;
+  }
 }
diff --git a/api/templates/index.templ b/api/templates/index.templ
index c8f0126..42411e6 100644
--- a/api/templates/index.templ
+++ b/api/templates/index.templ
@@ -74,18 +74,33 @@ templ Table(events []model.Event, query url.Values) {
 templ Row(e model.Event) {
 	<div class="tr">
 		<div class="left">
-			<div class="td"><span class={ "tag", e.State }>{ e.State }</span></div>
-			<div class="td">{ e.TxID }</div>
+			<div class="td">
+				<div class="mobile-label">State</div>
+				<div>
+					<span class={ "tag", e.State }>{ e.State }</span>
+				</div>
+			</div>
+			<div class="td">
+				<div class="mobile-label">Transaction ID</div>
+				<div>{ e.TxID }</div>
+			</div>
 		</div>
 		<div class="right">
 			<div class="td">
-				if e.Tag != "" {
-					<span class="provider-tag">#{ e.Tag }</span>
-				}
-				<span>{ e.ProverID }</span>
+				<div class="mobile-label">Prover ID</div>
+				<div>
+					if e.Tag != "" {
+						<span class="provider-tag">#{ e.Tag }</span>
+					}
+					<span>{ e.ProverID }</span>
+				</div>
+			</div>
+			<div class="td">
+				<div class="mobile-label">Time</div>
+				<div>
+					<span class="datetime">{ e.Timestamp.Format("03:04 PM, 02/01/06") }</span>
+				</div>
 			</div>
-			<div class="td"><span class="datetime">{ e.Timestamp.Format("03:04 PM, 02/01/06") }</span></div>
-			<div class="td">→</div>
 		</div>
 	</div>
 }
@@ -122,27 +137,31 @@ templ head() {
 
 templ header() {
 	<div id="header">
-		<div id="logo">Gevulot</div>
-		<div id="search">
-			<input
-				type="text"
-				id="search-input"
-				placeholder="Search"
-				type="text"
-				name="q"
-				hx-get="/api/v1/events"
-				hx-trigger="keyup changed delay:500ms"
-				hx-target="#table"
-			/>
+		<div id="header-left">
+			<div id="logo">Gevulot</div>
+			<div id="search">
+				<input
+					type="text"
+					id="search-input"
+					placeholder="Search"
+					type="text"
+					name="q"
+					hx-get="/api/v1/events"
+					hx-trigger="keyup changed delay:500ms"
+					hx-target="#table"
+				/>
+			</div>
 		</div>
-		<div id="mode">
-			<span>Light</span>
-			<label class="switch">
-				<input type="checkbox" hx-on:click="htmx.toggleClass(htmx.find('body'), 'dark');"/>
-				<span class="slider round"></span>
-			</label><span>Dark</span>
+		<div id="header-right">
+			<div id="mode">
+				<span>Light</span>
+				<label class="switch">
+					<input type="checkbox" hx-on:click="htmx.toggleClass(htmx.find('body'), 'dark');"/>
+					<span class="slider round"></span>
+				</label><span>Dark</span>
+			</div>
+			<div id="live">Live<span id="dot"></span></div>
 		</div>
-		<div id="live">Live<span id="dot"></span></div>
 	</div>
 }
 
diff --git a/api/templates/index_templ.go b/api/templates/index_templ.go
index cf5aa38..357d609 100644
--- a/api/templates/index_templ.go
+++ b/api/templates/index_templ.go
@@ -219,7 +219,7 @@ func Row(e model.Event) templ.Component {
 			templ_7745c5c3_Var8 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"tr\"><div class=\"left\"><div class=\"td\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"tr\"><div class=\"left\"><div class=\"td\"><div class=\"mobile-label\">State</div><div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -243,26 +243,26 @@ func Row(e model.Event) templ.Component {
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(e.State)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 76, Col: 59}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 79, Col: 45}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div><div class=\"td\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div><div class=\"td\"><div class=\"mobile-label\">Transaction ID</div><div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(e.TxID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 77, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 84, Col: 17}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"right\"><div class=\"td\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div><div class=\"right\"><div class=\"td\"><div class=\"mobile-label\">Prover ID</div><div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -274,7 +274,7 @@ func Row(e model.Event) templ.Component {
 			var templ_7745c5c3_Var12 string
 			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(e.Tag)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 82, Col: 40}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 92, Col: 41}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 			if templ_7745c5c3_Err != nil {
@@ -292,26 +292,26 @@ func Row(e model.Event) templ.Component {
 		var templ_7745c5c3_Var13 string
 		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(e.ProverID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 84, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 94, Col: 23}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div><div class=\"td\"><span class=\"datetime\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div><div class=\"td\"><div class=\"mobile-label\">Time</div><div><span class=\"datetime\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var14 string
 		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(e.Timestamp.Format("03:04 PM, 02/01/06"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 86, Col: 84}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 100, Col: 70}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div><div class=\"td\">→</div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -359,7 +359,7 @@ func header() templ.Component {
 			templ_7745c5c3_Var16 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"header\"><div id=\"logo\">Gevulot</div><div id=\"search\"><input type=\"text\" id=\"search-input\" placeholder=\"Search\" type=\"text\" name=\"q\" hx-get=\"/api/v1/events\" hx-trigger=\"keyup changed delay:500ms\" hx-target=\"#table\"></div><div id=\"mode\"><span>Light</span> <label class=\"switch\"><input type=\"checkbox\" hx-on:click=\"htmx.toggleClass(htmx.find(&#39;body&#39;), &#39;dark&#39;);\"> <span class=\"slider round\"></span></label><span>Dark</span></div><div id=\"live\">Live<span id=\"dot\"></span></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"header\"><div id=\"header-left\"><div id=\"logo\">Gevulot</div><div id=\"search\"><input type=\"text\" id=\"search-input\" placeholder=\"Search\" type=\"text\" name=\"q\" hx-get=\"/api/v1/events\" hx-trigger=\"keyup changed delay:500ms\" hx-target=\"#table\"></div></div><div id=\"header-right\"><div id=\"mode\"><span>Light</span> <label class=\"switch\"><input type=\"checkbox\" hx-on:click=\"htmx.toggleClass(htmx.find(&#39;body&#39;), &#39;dark&#39;);\"> <span class=\"slider round\"></span></label><span>Dark</span></div><div id=\"live\">Live<span id=\"dot\"></span></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -390,7 +390,7 @@ func footer() templ.Component {
 		var templ_7745c5c3_Var18 string
 		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(time.Now().Format("2006"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 150, Col: 61}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/index.templ`, Line: 169, Col: 61}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
 		if templ_7745c5c3_Err != nil {
diff --git a/store/mock/store.go b/store/mock/store.go
index 2b92dd7..a195551 100644
--- a/store/mock/store.go
+++ b/store/mock/store.go
@@ -34,7 +34,7 @@ func (s *Store) Stats() (model.Stats, error) {
 	s.stats.ProofsGenerated += rand.Uint64() % 9000
 	s.stats.ProofsVerified += rand.Uint64() % 9000
 	s.stats.RegisteredUsers += rand.Uint64() % 9000
-	return model.Stats{900000, 900000, 900000, 900000}, nil
+	return s.stats, nil
 }
 
 func (s *Store) Run() error {