feat: set up bootstrap, add logo

sgtm-club · Jul 6, 2020 · f2fd928 · f2fd928
1 parent 60f033e
commit f2fd928
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 18 deletions.
diff --git a/pkg/sgtm/driver_server.go b/pkg/sgtm/driver_server.go
@@ -198,10 +198,12 @@ func (svc *Service) httpServer() (*http.Server, error) {
 				Claims   *jwtClaims
 				Duration time.Duration
 				Opts     Opts
+				Lang     string
 			}{
 				Title: "SGTM",
 				Date:  time.Now(),
 				Opts:  svc.opts,
+				Lang:  "en",
 			}
 			if cookie, err := r.Cookie(oauthTokenCookie); err == nil {
 				data.JWTToken = cookie.Value

diff --git a/static/_assets/css/style.css b/static/_assets/css/style.css
@@ -0,0 +1,14 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+.navbar-brand strong {
+  line-height: 2.1rem;
+  font-size: 1.5rem;
+}
+.navbar-brand svg {
+  width: 2.1rem;
+  height: 2.1rem;
+  margin-right: 0.4rem;
+}
diff --git a/static/_assets/img/logo-1x-no-blur.png b/static/_assets/img/logo-1x-no-blur.png
diff --git a/static/_assets/img/logo-1x.png b/static/_assets/img/logo-1x.png
diff --git a/static/_assets/img/logo-no-blur.svg b/static/_assets/img/logo-no-blur.svg
diff --git a/static/_assets/img/logo.svg b/static/_assets/img/logo.svg
diff --git a/static/index.tmpl.html b/static/index.tmpl.html
@@ -1,6 +1,13 @@
-<html>
+<!doctype html>
+<html lang="{{.Lang}}">
   <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
+    <link rel="stylesheet" href="/_assets/css/style.css" />
     <title>{{.Title}}</title>
+    <!--<meta name="description" content="">-->
+    <meta name="author" content="Manfred Touron">
     <link rel="apple-touch-icon" sizes="57x57" href="/_assets/favicon/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="/_assets/favicon/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="/_assets/favicon/apple-icon-72x72.png">
@@ -20,24 +27,103 @@
     <meta name="theme-color" content="#ffffff">
   </head>
   <body>
-    <h1>SGTM</h1>
 
-    {{if .JWTToken}}
-    <hr />
-    <div><a href="/logout">Logout</a></div>
-    {{else}}
-    <div><a href="/login">Login</a></div>
-    {{end}}
+    <header>
+      <!-- FIXME: add search form -->
+      <div class="collapse bg-dark" id="navbarHeader">
+        <div class="container">
+          <div class="row">
+            <div class="col-sm-8 col-md-7 py-4">
+              <h4 class="text-white">About</h4>
+              <p class="text-muted">Lorem Ipsum.</p>
+            </div>
+            <div class="col-sm-4 offset-md-1 py-4">
+              <h4 class="text-white">Menu</h4>
+              <ul class="list-unstyled">
+                <li><a href="#" class="text-white">Profile</a></li>
+                <li><a href="#" class="text-white">Settings</a></li>
+                <li><a href="/logout" class="text-muted">Sign out</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="navbar navbar-light bg-light shadow-sm">
+        <div class="container d-flex justify-content-between">
+          <a href="/" class="navbar-brand d-flex align-items-center">
+            <svg width="2901" height="2901" viewBox="0 0 2901 2901" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 1450.5C0 2251.6 649.421 2901 1450.46 2901C2251.58 2901 2901 2251.6 2901 1450.5C2901 649.401 2251.58 0 1450.46 0C649.421 0 0 649.401 0 1450.5ZM1897.56 2063.62L883.294 1049.39L779.818 945.828L645.488 811.511L829.477 627.455L2081.62 1879.56C2132.4 1930.34 2132.4 2012.76 2081.62 2063.62C2056.19 2089.01 2022.89 2101.74 1989.59 2101.74C1956.3 2101.74 1922.99 2089.01 1897.56 2063.62ZM2032.52 1722.9L1133.84 824.246L1317.9 640.19L1529.04 851.318L2216.59 1538.84C2267.37 1589.7 2267.37 1672.12 2216.59 1722.9C2191.15 1748.29 2157.85 1761.02 2124.55 1761.02C2091.25 1761.02 2057.95 1748.29 2032.52 1722.9ZM2011.62 811.591L2127.04 696.256C2177.9 645.396 2260.24 645.396 2311.1 696.256C2361.88 747.036 2361.88 829.452 2311.1 880.312L1988.31 1203.01L1596.88 811.591C1654.15 868.866 1729.2 897.5 1804.25 897.5C1879.3 897.5 1954.35 868.866 2011.62 811.591ZM1629.88 2271.54L598.64 1240.33L782.701 1056.28L1099.4 1372.97L1813.85 2087.49C1864.72 2138.27 1864.72 2220.68 1813.85 2271.54C1788.47 2296.93 1755.17 2309.67 1721.87 2309.67C1688.57 2309.67 1655.27 2296.93 1629.88 2271.54ZM1319.03 2436.38L551.784 1669.16L735.845 1485.1L1503.09 2252.32C1553.95 2303.18 1553.95 2385.52 1503.09 2436.38C1477.7 2461.76 1444.39 2474.5 1411.09 2474.5C1377.78 2474.5 1344.45 2461.76 1319.03 2436.38Z" fill="#C83128"/></svg>
+            <strong>SGTM</strong>
+            <!-- FIXME: how it works link (when non-logged) -->
+          </a>
+          {{if .JWTToken}}
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
+            <!-- FIXME: Avatar -->
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          {{else}}
+          <ul class="navbar-nav flex-row ml-md-auth d-none d-md-flex">
+            <!-- FIXME: always available search form (icon -> click == expand) -->
+            <li class="nav-item">
+              <!-- FIXME: open login or popup (https://hackernoon.com/how-we-use-a-popup-for-google-and-outlook-oauth-5d8c03652171) -->
+              <a class="btn btn-light" href="/login">Sign in</a>
+            </li>
+            <li class="nav-item ml-2">
+              <!-- FIXME: open join modal -->
+              <a class="btn btn-primary" href="/join">Join SGTM</a>
+            </li>
+          </ul>
+          {{end}}
+        </div>
+      </div>
+    </header>
 
-    {{ if .Opts.DevMode }}
-    <div>
-      <hr />
-      <h2>DevMode</h2>
-      <!--<div>OAuthToken (cookie): {{.JWTToken}}</div>-->
-      <div>JWT Token: <pre><code>{{.Claims | toPrettyJson}}</code></pre></div>
-      <div>Date: {{.Date}}</div>
-      <div>Opts: <pre><code>{{.Opts.Filtered | toPrettyJson}}</code></pre></div>
-    </div>
-    {{ end }}
+    <main role="main">
+      <!-- FIXME: news carousel -->
+      <section class="jumbotron text-center">
+        <div class="container">
+          <h1 class="jumbotron-heading">{{.Title}}</h1>
+          <p class="lead text-muted">Lorem Ipsum</p>
+          <p>
+            <a href="#" class="btn btn-primary my-2">Main call to action</a>
+            <a href="#" class="btn btn-secondary my-2">Secondary action</a>
+          </p>
+        </div>
+      </section>
+    </main>
+
+    <footer class="text-muted">
+      <div class="container">
+        <p class="float-right">
+          <a href="#">Back to top</a>
+        </p>
+        <p>Lorem Ipsum</p>
+        <p>Lorem Ipsum</p>
+        {{ if .Opts.DevMode }}
+        <!-- FIXME: switch to button opening a modal -->
+        <div>
+          <p>
+            <button class="btn" type="button" data-toggle="collapse" data-target="#devtools" aria-expanded="false" aria-controls="devtools">DevMode</button>
+          </p>
+          <div class="row">
+            <div class="col">
+              <div class="collapse" id="devtools">
+                <div class="card card-body">
+                  <!--<div>OAuthToken (cookie): {{.JWTToken}}</div>-->
+                  <div>JWT Token: <pre><code>{{.Claims | toPrettyJson}}</code></pre></div>
+                  <div>Date: {{.Date}}</div>
+                  <div>Opts: <pre><code>{{.Opts.Filtered | toPrettyJson}}</code></pre></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </footer>
+
+    <!-- FIXME: analytics -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
 </html>