From f4e4181785f741dfae1b837a80b6099cbcbb3270 Mon Sep 17 00:00:00 2001
From: Joao P Dubas <joao.dubas+gitea@gmail.com>
Date: Sat, 10 Aug 2024 12:40:08 +0000
Subject: [PATCH] feat: improve result presentation

---
 go/static/css/index.css             | 118 ++++++++++++++--------------
 go/templates/fragments/results.html |  32 ++++----
 go/templates/index.html             |  46 +++++------
 3 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/go/static/css/index.css b/go/static/css/index.css
index 3d50d69..f7a1249 100644
--- a/go/static/css/index.css
+++ b/go/static/css/index.css
@@ -1,100 +1,100 @@
 :root {
-    --bg-color: #131415;
-    --primary-color: #9575CD;
-    --margin: 40px;
-    --margin-sm: 20px;
-    --radius: 6px;
-    --text-color: #FFF;
-    --header-height: 100px;
+  --bg-color: #131415;
+  --primary-color: #9575CD;
+  --margin: 40px;
+  --margin-sm: 20px;
+  --radius: 6px;
+  --text-color: #FFF;
+  --header-height: 100px;
 }
 
 body {
-    margin: 0;
-    background: var(--bg-color);
-    color: var(--text-color);
-    font-family: Arial, sans-serif;
+  margin: 0;
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-family: Arial, sans-serif;
 }
 
 ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
 }
 
 header {
-    background: #24292d;
-    height: var(--header-height);
+  background: #24292d;
+  height: var(--header-height);
 }
 
 header ul {
-    display: flex;
+  display: flex;
 }
 
 header ul li {
-    height: var(--header-height);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0 var(--margin-sm);
+  height: var(--header-height);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--margin-sm);
 }
 
 header ul li h5 {
-    font-size: 24px;
-    font-weight: 400;
-    margin: 0;
+  font-size: 24px;
+  font-weight: 400;
+  margin: 0;
 }
 
 header ul li h6 {
-    font-size: 14px;
-    font-weight: 100;
-    margin: 5px 0 0;
+  font-size: 14px;
+  font-weight: 100;
+  margin: 5px 0 0;
 }
 
 header ul li h5 strong {
-    color: #81c784;
+  color: #81c784;
 }
 
 section {
-    height: calc(100vh - var(--header-height));
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  height: calc(100vh - var(--header-height));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 section input {
-    height: 60px;
-    line-height: 60px;
-    background: transparent;
-    border: 2px solid var(--primary-color);
-    border-radius: var(--radius);
-    color: var(--text-color);
-    font-size: 20px;
-    outline: none !important;
-    padding: 0 20px;
-    width: 300px;
-    margin-top: var(--margin);
+  height: 60px;
+  line-height: 60px;
+  background: transparent;
+  border: 2px solid var(--primary-color);
+  border-radius: var(--radius);
+  color: var(--text-color);
+  font-size: 20px;
+  outline: none !important;
+  padding: 0 20px;
+  width: 300px;
+  margin-top: var(--margin);
 }
 
 #search-results ul li {
-    color: #FFF;
-    display: flex;
+  color: #FFF;
+  display: flex;
 }
 
 #search-results ul li button {
-    align-self: center;
-    height: 34px;
-    padding: 0 15px;
-    border: 0;
-    border-radius: var( --radius);
-    margin-left: var(--margin-sm);
-    background: var(--primary-color);
-    color: #FFF;
-    font-weight: bold;
-    text-transform: uppercase;
-    cursor: pointer;
+  align-self: center;
+  height: 34px;
+  padding: 0 15px;
+  border: 0;
+  border-radius: var( --radius);
+  margin-left: var(--margin-sm);
+  background: var(--primary-color);
+  color: #FFF;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
 }
 
 #spinner {
-    display: none;
+  display: none;
 }
diff --git a/go/templates/fragments/results.html b/go/templates/fragments/results.html
index 4e3215b..4ef29d5 100644
--- a/go/templates/fragments/results.html
+++ b/go/templates/fragments/results.html
@@ -1,18 +1,18 @@
 <dl>
-	<dt>Logradouro</dt>
-	<dd>{{ .Result.Road }}</dd>
-	<dt>N&uacute;mero</dt>
-	<dd>{{ .Result.HouseNumber }}</dd>
-	<dt>Unidade</dt>
-	<dd>{{ .Result.Unit }}</dd>
-	<dt>Torre</dt>
-	<dd>{{ .Result.House }}</dd>
-	<dt>Bairro</dt>
-	<dd>{{ .Result.Neighborhood }}</dd>
-	<dt>Cidade</dt>
-	<dd>{{ .Result.City }}</dd>
-	<dt>Estado</dt>
-	<dd>{{ .Result.Estado }}</dd>
-	<dt><abbr title="C&oacute; de Endere&ccedil;amento Postal">CEP</abbr></dt>
-	<dd>{{ .Result.PostalCode }}</dd>
+  <dt>Logradouro</dt>
+  <dd>{{ .Result.Road }}</dd>
+  <dt>N&uacute;mero</dt>
+  <dd>{{ .Result.HouseNumber }}</dd>
+  <dt>Unidade</dt>
+  <dd>{{ .Result.Unit }}</dd>
+  <dt>Torre</dt>
+  <dd>{{ .Result.House }}</dd>
+  <dt>Bairro</dt>
+  <dd>{{ .Result.Neighborhood }}</dd>
+  <dt>Cidade</dt>
+  <dd>{{ .Result.City }}</dd>
+  <dt>Estado</dt>
+  <dd>{{ .Result.State }}</dd>
+  <dt><abbr title="C&oacute;digo de Endere&ccedil;amento Postal">CEP</abbr></dt>
+  <dd>{{ .Result.PostalCode }}</dd>
 </dl>
diff --git a/go/templates/index.html b/go/templates/index.html
index b82a643..6240e1c 100644
--- a/go/templates/index.html
+++ b/go/templates/index.html
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Parser de Endere&ccedil;o</title>
-		<script src="https://unpkg.com/htmx.org@1.9.10"></script>
-		<link rel="stylesheet" href="/static/index.css"/>
-	</head>
-	<body>
-		<main>
-			<section>
-				<div>
-					<input
-						type="search"
-						name="address"
-						placeholder="Endereço: Rua, Número, Complement. Bairro - Cidade/Estado. CEP"
-						hx-get="/parse"
-						hx-trigger="keyup changed delay:500ms"
-						hx-target="#address" />
-				</div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parser de Endere&ccedil;o</title>
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <link rel="stylesheet" href="/static/css/index.css"/>
+  </head>
+  <body>
+    <main>
+      <section>
+        <div>
+          <input
+            type="search"
+            name="address"
+            placeholder="Endereço: Rua, Número, Complement. Bairro - Cidade/Estado. CEP"
+            hx-get="/parse"
+            hx-trigger="keyup changed delay:500ms"
+            hx-target="#address" />
+        </div>
 
-				<div id="address"></div>
-			</section>
-		</main>
-	</body>
+        <div id="address"></div>
+      </section>
+    </main>
+  </body>
 </html>