Make stats block responsive

gevulotnetwork · Mar 28, 2024 · 457202b · 457202b
1 parent b11dbef
commit 457202b
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 53 deletions.
diff --git a/api/assets/style.css b/api/assets/style.css
@@ -109,7 +109,7 @@ body.dark {
   min-width: 0px;
 }
 
-#search>input {
+#search > input {
   border: 0;
   outline: 0;
   background: transparent;
@@ -123,7 +123,7 @@ body.dark {
   letter-spacing: 0em;
 }
 
-body.dark #search>input {
+body.dark #search > input {
   border-bottom: 1px solid white;
   color: white;
 }
@@ -168,7 +168,7 @@ input::-moz-placeholder {
   min-width: 0px;
 }
 
-#mode>span {
+#mode > span {
   padding-left: 6px;
 }
 
@@ -181,7 +181,7 @@ input::-moz-placeholder {
   margin-left: 4px;
 }
 
-#live>#dot {
+#live > #dot {
   background-color: #fc4f4f;
   min-width: 10px;
   max-width: 10px;
@@ -207,6 +207,13 @@ input::-moz-placeholder {
   margin-top: 20px;
 }
 
+#left-stats,
+#right-stats {
+  flex-direction: row;
+  flex-grow: 1;
+  display: flex;
+}
+
 .number-block {
   flex-grow: 1;
   flex-shrink: 1;
@@ -221,8 +228,8 @@ body.dark .number-block {
   background: #333333;
 }
 
-.number-block+.number-block {
-  margin-left: 10px;
+.number-block {
+  margin: 5px;
 }
 
 .rolling-number {
@@ -303,24 +310,24 @@ body.dark .tr:nth-child(even) {
   background: #333333;
 }
 
-.left>.th:nth-child(1),
-.left>.td:nth-child(1) {
+.left > .th:nth-child(1),
+.left > .td:nth-child(1) {
   min-width: 106px;
 }
 
-.left>.th:nth-child(2),
-.left>.td:nth-child(2),
-.right>.th:nth-child(1),
-.right>.td:nth-child(1) {
+.left > .th:nth-child(2),
+.left > .td:nth-child(2),
+.right > .th:nth-child(1),
+.right > .td:nth-child(1) {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0px;
   min-width: 0px;
   padding: 0 5px;
 }
 
-.left>.td:nth-child(2),
-.right>.td:nth-child(1) {
+.left > .td:nth-child(2),
+.right > .td:nth-child(1) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -387,14 +394,14 @@ body.dark .tag {
   justify-content: space-between;
 }
 
-#links>a {
+#links > a {
   color: black;
   text-decoration: none;
   text-transform: none;
   padding: 0 10px;
 }
 
-body.dark #links>a {
+body.dark #links > a {
   color: white;
 }
 
@@ -442,15 +449,15 @@ body.dark .switch {
   border-radius: 50%;
 }
 
-input:checked+.slider {
+input:checked + .slider {
   background-color: white;
 }
 
-input:focus+.slider {
+input:focus + .slider {
   box-shadow: 0;
 }
 
-input:checked+.slider:before {
+input:checked + .slider:before {
   background-color: black;
   -webkit-transform: translateX(14px);
   -ms-transform: translateX(14px);
@@ -473,7 +480,31 @@ input:checked+.slider:before {
   background: #b556ff;
 }
 
+@media (max-width: 1200px) {
+  #stats {
+    height: 246px;
+  }
+  .rolling-number {
+    font-size: 60px;
+  }
+}
 
-@media (min-width:961px) {
-  /* mobile stuff */
+@media (max-width: 852px) {
+  #stats {
+    height: 159px;
+  }
+  .rolling-number {
+    font-size: 40px;
+    line-height: 48px;
+  }
+}
+
+@media (max-width: 680px) {
+  #left-stats,
+  #right-stats {
+    flex-direction: column;
+  }
+  #stats {
+    height: 318px;
+  }
 }
diff --git a/api/templates/index.templ b/api/templates/index.templ
@@ -27,21 +27,25 @@ templ Index() {
 
 templ Stats(stats model.Stats, interval time.Duration) {
 	<div id="stats" hx-get="/api/v1/stats" hx-trigger={ "every " + interval.String() } hx-swap="outerHTML">
-		<div class="number-block">
-			<div class="rolling-number" id="registered_users">{ format(stats.RegisteredUsers) }</div>
-			<div class="number-title">Registered<br/>Users</div>
-		</div>
-		<div class="number-block">
-			<div class="rolling-number" id="provers_deployed">{ format(stats.ProversDeployed) }</div>
-			<div class="number-title">Provers<br/>Deployed</div>
-		</div>
-		<div class="number-block">
-			<div class="rolling-number" id="proofs_generated">{ format(stats.ProofsGenerated) }</div>
-			<div class="number-title">Proofs<br/>Generated</div>
+		<div id="left-stats">
+			<div class="number-block">
+				<div class="rolling-number" id="registered_users">{ format(stats.RegisteredUsers) }</div>
+				<div class="number-title">Registered<br/>Users</div>
+			</div>
+			<div class="number-block">
+				<div class="rolling-number" id="provers_deployed">{ format(stats.ProversDeployed) }</div>
+				<div class="number-title">Provers<br/>Deployed</div>
+			</div>
 		</div>
-		<div class="number-block">
-			<div class="rolling-number" id="proofs_verified">{ format(stats.ProofsVerified) }</div>
-			<div class="number-title">Proofs<br/>Verified</div>
+		<div id="right-stats">
+			<div class="number-block">
+				<div class="rolling-number" id="proofs_generated">{ format(stats.ProofsGenerated) }</div>
+				<div class="number-title">Proofs<br/>Generated</div>
+			</div>
+			<div class="number-block">
+				<div class="rolling-number" id="proofs_verified">{ format(stats.ProofsVerified) }</div>
+				<div class="number-title">Proofs<br/>Verified</div>
+			</div>
 		</div>
 	</div>
 }

diff --git a/api/templates/index_templ.go b/api/templates/index_templ.go
diff --git a/store/mock/store.go b/store/mock/store.go
@@ -30,11 +30,11 @@ func New() *Store {
 }
 
 func (s *Store) Stats() (model.Stats, error) {
-	s.stats.ProversDeployed += rand.Uint64() % 10
-	s.stats.ProofsGenerated += rand.Uint64() % 10
-	s.stats.ProofsVerified += rand.Uint64() % 10
-	s.stats.RegisteredUsers += rand.Uint64() % 10
-	return s.stats, nil
+	s.stats.ProversDeployed += rand.Uint64() % 9000
+	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
 }
 
 func (s *Store) Run() error {