Implement a consistent navigation menu (#65)

- Add menu template partial
- Ensure renderTemplate is passed the user object
- Style improvements for both light/dark themes

Change-Id: I8d24561fe5df8a1622fec01f7dd3ff83c990dab5

Signed-off-by: Ian Meyer <k@imeyer.io>

Author: imeyer

BUILD.bazel

@@ -34,6 +34,7 @@ go_library(
         "tmpl/index-thread-partial.html",
         "tmpl/index.html",
         "tmpl/member.html",
+        "tmpl/menu.html",
         "tmpl/newthread.html",
         "tmpl/thread.html",
         "static/style.css",

server.go

@@ -1122,12 +1122,12 @@ func (s *DiscussService) ListMember(w http.ResponseWriter, r *http.Request) {
 	}
 
 	s.renderTemplate(w, r, "member.html", map[string]interface{}{
-		"Title":            GetBoardTitle(r),
-		"Member":           member,
-		"CurrentUserEmail": user.Email,
-		"Threads":          memberThreadsParsed,
-		"GitSha":           s.gitSha,
-		"Version":          s.version,
+		"Title":   GetBoardTitle(r),
+		"Member":  member,
+		"Threads": memberThreadsParsed,
+		"GitSha":  s.gitSha,
+		"Version": s.version,
+		"User":    user,
 	})
 }
 

static/style.css

@@ -2,18 +2,22 @@
 :root {
     /* Common variables */
     --border: 1px solid #454545;
+    --menu-border: 0.5px solid #454545;
 
     /* Light mode variables */
     --background-color-light: #f0f4f8;
     --content-bg-light: #f9f9f9;
-    --even-row-color-light: #CCC;
-    --odd-row-color-light: #DDD;
+    --even-row-color-light: #8C867D;
+    --odd-row-color-light: #CCB287;
     --form-bg-light: #ddd;
     --header-color-light: #efefef;
     --primary-color-light: #1e6091;
     --text-color-light: #333;
     --text-color-secondary-light: #555;
     --threadpost-bg-light: #fff;
+    --menu-item-bg-light: #C7CACD;
+    --button-text-color-light: #fff;
+
 
     /* Dark mode variables */
     --background-color-dark: #1a2634;
@@ -22,10 +26,12 @@
     --odd-row-color-dark: #333;
     --form-bg-dark: #333;
     --header-color-dark: #2c2c2c;
-    --primary-color-dark: #64b5f6;
+    --primary-color-dark: #b5deff;
     --text-color-dark: #e0e0e0;
     --text-color-secondary-dark: #b0b0b0;
     --threadpost-bg-dark: #333;
+    --menu-item-bg-dark: #6B84A2;
+    --button-text-color-dark: #222;
 
     /* Default to light mode */
     --background-color: var(--background-color-light);
@@ -38,6 +44,8 @@
     --text-color: var(--text-color-light);
     --text-color-secondary: var(--text-color-secondary-light);
     --threadpost-bg: var(--threadpost-bg-light);
+    --menu-item-bg: var(--menu-item-bg-light);
+    --button-text-color: var(--button-text-color-light);
 }
 
 /* Base styles */
@@ -61,17 +69,6 @@ a:hover {
 
 /* Table styles */
 table {
-    border: var(--border);
-    border-collapse: separate;
-    border-radius: 0 0.625rem 0.625rem 0.625rem;
-    border-spacing: 0;
-    margin: 0 auto;
-    overflow: hidden;
-    table-layout: fixed;
-    width: 100%;
-}
-
-.content-container table {
     border: var(--border);
     border-collapse: separate;
     border-radius: 0.625rem;
@@ -159,7 +156,7 @@ tbody>tr:nth-child(odd) {
     background-color: var(--primary-color);
     border: none;
     border-radius: 0.625rem;
-    color: white;
+    color: var(--button-text-color);
     cursor: pointer;
     font-size: 1em;
     padding: 0.625rem;
@@ -168,7 +165,7 @@ tbody>tr:nth-child(odd) {
 
 .edit-profile button:hover,
 .form-group button:hover {
-    background-color: (var(--primary-color) + 20%);
+    background-color: var(--primary-color);
 }
 
 .edit-profile input,
@@ -200,6 +197,11 @@ tbody>tr:nth-child(odd) {
     margin-bottom: 0.3125rem;
 }
 
+.menu {
+    display: flex;
+    flex-direction: row;
+}
+
 .profile-column {
     background-color: var(--primary-color);
     box-sizing: border-box;
@@ -296,13 +298,12 @@ tbody>tr:nth-child(odd) {
 
 .subject {
     display: inline-block;
-
 }
 
 .subject p {
-    font-size: 1.25rem;
+    font-size: 1.20rem;
     font-weight: 600;
-    margin-top: 0.4rem;
+    margin-top: 0rem;
     margin-bottom: 0.4rem;
     margin-left: 0rem;
     margin-right: 0rem;
@@ -315,17 +316,26 @@ tbody>tr:nth-child(odd) {
     padding-bottom: 10px;
 }
 
+hr {
+    border: var(--menu-border);
+    margin-top: 0;
+    margin-bottom: 1.2rem;
+}
+
 .sub-header {
     display: block;
     width: fit-content;
-    border-top-right-radius: 0.625rem;
-    border-top-left-radius: 0.625rem;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-radius: 0.625rem 0.625rem 0 0;
     border: var(--border);
     border-bottom: 0px;
-    margin-bottom: -1px;
+    margin-right: 0.625rem;
     padding: 5px 10px 10px 10px;
+    background-color: var(--menu-item-bg)
+}
+
+.sub-header.admin {
+    margin-left: 1.5rem;
+    border-radius: 0.625rem 0.625rem 0 0;
 }
 
 .board-title {
@@ -412,10 +422,8 @@ svg a:active {
         --text-color: var(--text-color-dark);
         --text-color-secondary: var(--text-color-secondary-dark);
         --threadpost-bg: var(--threadpost-bg-dark);
-    }
-
-    .form-group button:hover {
-        background-color: #ffb8d9;
+        --menu-item-bg: var(--menu-item-bg-dark);
+        --button-text-color: var(--button-text-color-dark);
     }
 }
 

tmpl/admin.html

@@ -1,6 +1,8 @@
 {{ template "header" . }}
 
-<h2>Board statistics</h2>
+{{ template "menu" . }}
+
+<h3>Board statistics</h3>
 
 <div class="board-stats">
     <div class="board-stats-item">
@@ -17,7 +19,7 @@ <h2>Board statistics</h2>
     </div>
 </div>
 
-<h2>Edit board configuration</h2>
+<h3>Board configuration</h3>
 
 <div class="form-container">
     <form action="/admin" method="POST">

tmpl/edit-profile.html

@@ -1,7 +1,9 @@
 {{ template "header" . }}
 
+{{ template "menu" . }}
+
 {{ if .Member }}
-<h2>Editing profile for {{ .CurrentUserEmail }}</h2>
+<h3>Editing profile for {{ .User.Email }}</h3>
 
 <div class="form-container">
     <form action="/member/edit" method="POST">

tmpl/footer.html

@@ -9,9 +9,6 @@
                 d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
         </svg>
     </a>
-    {{ if .User.IsAdmin }}
-    <a href="/admin">Admin</a>
-    {{ end }}
 </div>
 
 </body>

tmpl/header.html

@@ -10,5 +10,5 @@
 </head>
 
 <body>
-    <span class="board-title"><a href="/">{{ .Title }}</a></span>
+    <span class="board-title">{{ .Title }}</span>
     {{end}}

tmpl/index.html

@@ -1,7 +1,7 @@
-    {{ template "header" . }}
+{{ template "header" . }}
 
-    <span class="sub-header"><a href="/thread/new">Create new thread...</a></span>
+{{ template "menu" . }}
 
-    {{ template "index-thread-partial" . }}
+{{ template "index-thread-partial" . }}
 
-    {{ template "footer" . }}
+{{ template "footer" . }}

tmpl/member.html

@@ -1,11 +1,8 @@
 {{ template "header" . }}
 
+{{ template "menu" . }}
+
 {{ if .Member }}
-{{ if eq .CurrentUserEmail .Member.Email }}
-<h2>
-    <a href="/member/edit">Edit Profile</a>
-</h2>
-{{ end }}
 
 <table class="profile-table">
     <tr>

tmpl/menu.html

@@ -0,0 +1,11 @@
+{{ define "menu" }}
+<span class="menu">
+    <span class="sub-header"><a href="/">index</a></span>
+    <span class="sub-header"><a href="/thread/new">new thread</a></span>
+    <span class="sub-header"><a href="/member/edit">edit profile</a></span>
+    {{ if .User.IsAdmin }}
+    <span class="sub-header admin"><a href="/admin">admin</a></span>
+    {{ end }}
+</span>
+<hr />
+{{ end }}