Skip to content

Commit 5a6d495

Browse files
authored
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>
1 parent bfc2a29 commit 5a6d495

File tree

12 files changed

+73
-51
lines changed

12 files changed

+73
-51
lines changed

BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ go_library(
3434
"tmpl/index-thread-partial.html",
3535
"tmpl/index.html",
3636
"tmpl/member.html",
37+
"tmpl/menu.html",
3738
"tmpl/newthread.html",
3839
"tmpl/thread.html",
3940
"static/style.css",

server.go

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1122,12 +1122,12 @@ func (s *DiscussService) ListMember(w http.ResponseWriter, r *http.Request) {
11221122
}
11231123

11241124
s.renderTemplate(w, r, "member.html", map[string]interface{}{
1125-
"Title": GetBoardTitle(r),
1126-
"Member": member,
1127-
"CurrentUserEmail": user.Email,
1128-
"Threads": memberThreadsParsed,
1129-
"GitSha": s.gitSha,
1130-
"Version": s.version,
1125+
"Title": GetBoardTitle(r),
1126+
"Member": member,
1127+
"Threads": memberThreadsParsed,
1128+
"GitSha": s.gitSha,
1129+
"Version": s.version,
1130+
"User": user,
11311131
})
11321132
}
11331133

static/style.css

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,22 @@
22
:root {
33
/* Common variables */
44
--border: 1px solid #454545;
5+
--menu-border: 0.5px solid #454545;
56

67
/* Light mode variables */
78
--background-color-light: #f0f4f8;
89
--content-bg-light: #f9f9f9;
9-
--even-row-color-light: #CCC;
10-
--odd-row-color-light: #DDD;
10+
--even-row-color-light: #8C867D;
11+
--odd-row-color-light: #CCB287;
1112
--form-bg-light: #ddd;
1213
--header-color-light: #efefef;
1314
--primary-color-light: #1e6091;
1415
--text-color-light: #333;
1516
--text-color-secondary-light: #555;
1617
--threadpost-bg-light: #fff;
18+
--menu-item-bg-light: #C7CACD;
19+
--button-text-color-light: #fff;
20+
1721

1822
/* Dark mode variables */
1923
--background-color-dark: #1a2634;
@@ -22,10 +26,12 @@
2226
--odd-row-color-dark: #333;
2327
--form-bg-dark: #333;
2428
--header-color-dark: #2c2c2c;
25-
--primary-color-dark: #64b5f6;
29+
--primary-color-dark: #b5deff;
2630
--text-color-dark: #e0e0e0;
2731
--text-color-secondary-dark: #b0b0b0;
2832
--threadpost-bg-dark: #333;
33+
--menu-item-bg-dark: #6B84A2;
34+
--button-text-color-dark: #222;
2935

3036
/* Default to light mode */
3137
--background-color: var(--background-color-light);
@@ -38,6 +44,8 @@
3844
--text-color: var(--text-color-light);
3945
--text-color-secondary: var(--text-color-secondary-light);
4046
--threadpost-bg: var(--threadpost-bg-light);
47+
--menu-item-bg: var(--menu-item-bg-light);
48+
--button-text-color: var(--button-text-color-light);
4149
}
4250

4351
/* Base styles */
@@ -61,17 +69,6 @@ a:hover {
6169

6270
/* Table styles */
6371
table {
64-
border: var(--border);
65-
border-collapse: separate;
66-
border-radius: 0 0.625rem 0.625rem 0.625rem;
67-
border-spacing: 0;
68-
margin: 0 auto;
69-
overflow: hidden;
70-
table-layout: fixed;
71-
width: 100%;
72-
}
73-
74-
.content-container table {
7572
border: var(--border);
7673
border-collapse: separate;
7774
border-radius: 0.625rem;
@@ -159,7 +156,7 @@ tbody>tr:nth-child(odd) {
159156
background-color: var(--primary-color);
160157
border: none;
161158
border-radius: 0.625rem;
162-
color: white;
159+
color: var(--button-text-color);
163160
cursor: pointer;
164161
font-size: 1em;
165162
padding: 0.625rem;
@@ -168,7 +165,7 @@ tbody>tr:nth-child(odd) {
168165

169166
.edit-profile button:hover,
170167
.form-group button:hover {
171-
background-color: (var(--primary-color) + 20%);
168+
background-color: var(--primary-color);
172169
}
173170

174171
.edit-profile input,
@@ -200,6 +197,11 @@ tbody>tr:nth-child(odd) {
200197
margin-bottom: 0.3125rem;
201198
}
202199

200+
.menu {
201+
display: flex;
202+
flex-direction: row;
203+
}
204+
203205
.profile-column {
204206
background-color: var(--primary-color);
205207
box-sizing: border-box;
@@ -296,13 +298,12 @@ tbody>tr:nth-child(odd) {
296298

297299
.subject {
298300
display: inline-block;
299-
300301
}
301302

302303
.subject p {
303-
font-size: 1.25rem;
304+
font-size: 1.20rem;
304305
font-weight: 600;
305-
margin-top: 0.4rem;
306+
margin-top: 0rem;
306307
margin-bottom: 0.4rem;
307308
margin-left: 0rem;
308309
margin-right: 0rem;
@@ -315,17 +316,26 @@ tbody>tr:nth-child(odd) {
315316
padding-bottom: 10px;
316317
}
317318

319+
hr {
320+
border: var(--menu-border);
321+
margin-top: 0;
322+
margin-bottom: 1.2rem;
323+
}
324+
318325
.sub-header {
319326
display: block;
320327
width: fit-content;
321-
border-top-right-radius: 0.625rem;
322-
border-top-left-radius: 0.625rem;
323-
border-bottom-left-radius: 0;
324-
border-bottom-right-radius: 0;
328+
border-radius: 0.625rem 0.625rem 0 0;
325329
border: var(--border);
326330
border-bottom: 0px;
327-
margin-bottom: -1px;
331+
margin-right: 0.625rem;
328332
padding: 5px 10px 10px 10px;
333+
background-color: var(--menu-item-bg)
334+
}
335+
336+
.sub-header.admin {
337+
margin-left: 1.5rem;
338+
border-radius: 0.625rem 0.625rem 0 0;
329339
}
330340

331341
.board-title {
@@ -412,10 +422,8 @@ svg a:active {
412422
--text-color: var(--text-color-dark);
413423
--text-color-secondary: var(--text-color-secondary-dark);
414424
--threadpost-bg: var(--threadpost-bg-dark);
415-
}
416-
417-
.form-group button:hover {
418-
background-color: #ffb8d9;
425+
--menu-item-bg: var(--menu-item-bg-dark);
426+
--button-text-color: var(--button-text-color-dark);
419427
}
420428
}
421429

tmpl/admin.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{{ template "header" . }}
22

3-
<h2>Board statistics</h2>
3+
{{ template "menu" . }}
4+
5+
<h3>Board statistics</h3>
46

57
<div class="board-stats">
68
<div class="board-stats-item">
@@ -17,7 +19,7 @@ <h2>Board statistics</h2>
1719
</div>
1820
</div>
1921

20-
<h2>Edit board configuration</h2>
22+
<h3>Board configuration</h3>
2123

2224
<div class="form-container">
2325
<form action="/admin" method="POST">

tmpl/edit-profile.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
{{ template "header" . }}
22

3+
{{ template "menu" . }}
4+
35
{{ if .Member }}
4-
<h2>Editing profile for {{ .CurrentUserEmail }}</h2>
6+
<h3>Editing profile for {{ .User.Email }}</h3>
57

68
<div class="form-container">
79
<form action="/member/edit" method="POST">

tmpl/footer.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@
99
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" />
1010
</svg>
1111
</a>
12-
{{ if .User.IsAdmin }}
13-
<a href="/admin">Admin</a>
14-
{{ end }}
1512
</div>
1613

1714
</body>

tmpl/header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
</head>
1111

1212
<body>
13-
<span class="board-title"><a href="/">{{ .Title }}</a></span>
13+
<span class="board-title">{{ .Title }}</span>
1414
{{end}}

tmpl/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
{{ template "header" . }}
1+
{{ template "header" . }}
22

3-
<span class="sub-header"><a href="/thread/new">Create new thread...</a></span>
3+
{{ template "menu" . }}
44

5-
{{ template "index-thread-partial" . }}
5+
{{ template "index-thread-partial" . }}
66

7-
{{ template "footer" . }}
7+
{{ template "footer" . }}

tmpl/member.html

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
{{ template "header" . }}
22

3+
{{ template "menu" . }}
4+
35
{{ if .Member }}
4-
{{ if eq .CurrentUserEmail .Member.Email }}
5-
<h2>
6-
<a href="/member/edit">Edit Profile</a>
7-
</h2>
8-
{{ end }}
96

107
<table class="profile-table">
118
<tr>

tmpl/menu.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{{ define "menu" }}
2+
<span class="menu">
3+
<span class="sub-header"><a href="/">index</a></span>
4+
<span class="sub-header"><a href="/thread/new">new thread</a></span>
5+
<span class="sub-header"><a href="/member/edit">edit profile</a></span>
6+
{{ if .User.IsAdmin }}
7+
<span class="sub-header admin"><a href="/admin">admin</a></span>
8+
{{ end }}
9+
</span>
10+
<hr />
11+
{{ end }}

0 commit comments

Comments
 (0)