update template

pkg/keyproofs/template.go

@@ -49,7 +49,7 @@ var pageTPL = `
 		}
 		.shade { background-color: {{index .Palette 3}}80; border-radius: .25rem;}
 		.lead { padding:0; margin:0;  }
-
+		.scroll { height: 20em; overflow: scroll; }
 		@media only screen and (max-width: 991px) {
 			.jumbotron h1 { font-size: 2rem; }
 			.jumbotron .lead { font-size: 1.0rem; }
@@ -80,7 +80,11 @@ var pageTPL = `
 			{{template "content" .}}
 
 			<div class="card-footer text-muted text-center">
-			<a href="/">{{.AppName}}</a> | &copy; 2020 Sour.is | <a href="/id/me@sour.is">About me</a> | <a href="https://github.com/sour-is/keyproofs">GitHub</a> | Inspired by <a href="https://keyoxide.org/">keyoxide</a>
+				<a href="/">{{.AppName}}</a>
+				| &copy; 2020 Sour.is
+				| <a href="/id/me@sour.is">About me</a>
+				| <a href="https://github.com/sour-is/keyproofs">GitHub</a>
+				| Inspired by <a href="https://keyoxide.org/">keyoxide</a>
 			</div>
 		</div>
 	</div>
@@ -99,12 +103,18 @@ var homeTPL = `
 			</div>
 		</div>
 	</div>
+</div>
 <br/>
 <div class="card">
 	<div class="card-body">
 		<form method="GET" action="/">
 			<div class="input-group mb-3">
-				<input type="text" name="id" class="form-control" placeholder="Email or Fingerprint..." aria-label="Email or Fingerprint" aria-describedby="button-addon">
+				<input type="text"
+					   name="id"
+					   class="form-control"
+					   placeholder="Email or Fingerprint..."
+					   aria-label="Email or Fingerprint"
+					   aria-describedby="button-addon" />
 				<div class="input-group-append">
 					<button class="btn btn-outline-secondary" type="submit" id="button-addon">GO</button>
 				</div>
@@ -112,7 +122,6 @@ var homeTPL = `
 		</form>
 	</div>
 </div>
-	</div>
 <div class="container"> {{.Markdown | markDown}} </div>
 {{end}}
 `
@@ -122,7 +131,6 @@ var proofTPL = `
 <div class="jumbotron heading">
 	<div class="container">
 		<div class="row shade">
-
 		{{ with .Err }}
 			<div class="col-xs center-md">
 				<i class="fas fa-exclamation-triangle fa-4x fg-color-11"></i>
@@ -139,7 +147,6 @@ var proofTPL = `
 				</div>
 			{{end}}
 
-
 			{{with .Entity}}
 				<div class="col-md center-md">
 					<h1 class="display-8 fg-color-8">{{.Primary.Name}}</h1>
@@ -154,14 +161,14 @@ var proofTPL = `
 					<p class="lead fg-color-11">Reading key from remote service.</p>
 				</div>
 			{{end}}
-
-
 		{{end}}
 		</div>
 	</div>
 </div>
 
 <div class="container">
+	<div class="row">
+		<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
 		{{ with .Entity }}
 			<div class="card">
 				<div class="card-header">Contact</div>
@@ -180,7 +187,6 @@ var proofTPL = `
 					<ul class="list-group list-group-flush">
 						{{range .}}
 						<li class="list-group-item">
-					<div class="d-flex w-100 justify-content-between">
 							<div>
 								<a title="{{.Link}}" class="font-weight-bold" href="{{.Link}}">
 									<i title="{{.Service}}" class="{{.Icon}}"></i>
@@ -199,15 +205,15 @@ var proofTPL = `
 							</div>
 							<div>
 							{{if eq .Service "xmpp"}}
+								<br/>
 								<img src="/qr?s=-2&c={{.Link}}" alt="qrcode" style="width:88px; height:88px">
 							{{end}}
 							</div>
-					</div>
 						</li>
 						{{end}}
 					</ul>
 				</div>
-		<br/>
+			</div>
 		{{else}}
 			<div class="card">
 				<div class="card-header">Proofs</div>
@@ -216,6 +222,15 @@ var proofTPL = `
 			<br/>
 		{{end}}
 		{{end}}
+		<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
+			<div class="card">
+				<div class="card-header">Public Key</div>
+				<div class="card-body scroll">
+					<pre><code>{{.Entity.ArmorText}}</code></pre>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
 {{end}}
 `