UI/Style updates (#62)

- Truly, I don't have a sense for visual design so I'm just going with what looks reasonable and functional enough Change-Id: I373111cf70082a6949cbd01590f7cf943a82c135 Signed-off-by: Ian Meyer <[email protected]>
imeyer · Oct 14, 2024 · bfc2a29 · bfc2a29
1 parent 6a7baf4
commit bfc2a29
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 32 deletions.
diff --git a/static/style.css b/static/style.css
@@ -61,6 +61,17 @@ 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;
@@ -147,17 +158,17 @@ tbody>tr:nth-child(odd) {
 .form-group button {
     background-color: var(--primary-color);
     border: none;
-    border-radius: 0.3125rem;
+    border-radius: 0.625rem;
     color: white;
     cursor: pointer;
     font-size: 1em;
     padding: 0.625rem;
-    width: 25%;
+    width: 125px;
 }
 
 .edit-profile button:hover,
 .form-group button:hover {
-    background-color: #b02758;
+    background-color: (var(--primary-color) + 20%);
 }
 
 .edit-profile input,
@@ -196,6 +207,32 @@ tbody>tr:nth-child(odd) {
     width: 12.5rem;
 }
 
+.profile-field {
+    display: flex;
+    border: var(--border);
+    border-radius: 0.625rem;
+    margin: 0.3125rem 0;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.profile-field-label {
+    font-weight: 600;
+    text-align: right;
+    padding: 0.625rem;
+    background-color: var(--background-color);
+    width: 150px;
+    border-radius: 0.625rem 0 0 0.625rem;
+}
+
+.profile-field-value {
+    padding: 0.625rem;
+    text-align: left;
+    background-color: var(--form-bg);
+    width: 100%;
+    border-radius: 0 0.625rem 0.625rem 0;
+}
+
 .profile-photo {
     background-color: var(--primary-color);
     border-radius: 50%;
@@ -211,6 +248,11 @@ tbody>tr:nth-child(odd) {
     width: 100%;
 }
 
+.profile-table {
+    border: var(--border);
+    border-radius: 0.625rem;
+}
+
 .threadpost-bubble {
     background-color: var(--threadpost-bg);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
@@ -267,10 +309,23 @@ tbody>tr:nth-child(odd) {
 }
 
 .board-title,
-.header,
+.header {
+    display: block;
+    width: fit-content;
+    padding-bottom: 10px;
+}
+
 .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: var(--border);
+    border-bottom: 0px;
+    margin-bottom: -1px;
+    padding: 5px 10px 10px 10px;
 }
 
 .board-title {
@@ -292,10 +347,6 @@ tbody>tr:nth-child(odd) {
     font-size: 1.1em;
 }
 
-.sub-header {
-    margin-bottom: 0.375rem;
-}
-
 /* SVG styles */
 svg a {
     cursor: pointer;
@@ -313,6 +364,41 @@ svg a:active {
     outline: dotted 1px var(--primary-color);
 }
 
+.board-stats {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    margin-top: 0.625rem;
+}
+
+.board-stats-item {
+    display: flex;
+    border: var(--border);
+    border-radius: 0.625rem;
+    margin: 0.3125rem 0;
+    width: 200px;
+    justify-content: space-between;
+    align-items: center;
+
+}
+
+.board-stats-label {
+    font-weight: 600;
+    width: 150px;
+    text-align: left;
+    padding: 0.625rem;
+}
+
+.board-stats-value {
+    width: 50px;
+    padding: 0.625rem;
+    text-align: right;
+    background-color: var(--form-bg);
+    border-radius: 0 0.625rem 0.625rem 0;
+}
+
+
+
 /* Media Queries */
 @media (prefers-color-scheme: dark) {
     :root {

diff --git a/tmpl/admin.html b/tmpl/admin.html
@@ -1,25 +1,41 @@
 {{ template "header" . }}
 
-<h2>Editing board configuration</h2>
+<h2>Board statistics</h2>
+
+<div class="board-stats">
+    <div class="board-stats-item">
+        <span class="board-stats-label">Total posts</span>
+        <span class="board-stats-value">{{ .BoardData.TotalThreadPosts.Int32 }}</span>
+    </div>
+    <div class="board-stats-item">
+        <span class="board-stats-label">Total threads</span>
+        <span class="board-stats-value">{{ .BoardData.TotalThreads.Int32 }}</span>
+    </div>
+    <div class="board-stats-item">
+        <span class="board-stats-label">Total users</span>
+        <span class="board-stats-value">{{ .BoardData.TotalMembers.Int32 }}</span>
+    </div>
+</div>
+
+<h2>Edit board configuration</h2>
 
 <div class="form-container">
     <form action="/admin" method="POST">
         <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
         <div class="form-group">
             <label for="board_title">Board Title</label>
-            <input type="text" id="board_title" size="72px" name="board_title" value="{{ .BoardData.Title }}">
+            <input type="text" id="board_title" size="50px" name="board_title" value="{{ .BoardData.Title }}">
         </div>
         <div class="form-group">
             <label for="edit_window">Edit window (in seconds)</label>
-            <input type="text" id="location" size="72px" name="edit_window" value="{{ .BoardData.EditWindow.Int32 }}">
+            <input type="text" id="location" size="50px" name="edit_window" value="{{ .BoardData.EditWindow.Int32 }}">
         </div>
         <div class="form-group">
-            <button type="submit">Update board config</button>
+            <button type="submit">Update config</button>
         </div>
     </form>
 </div>
 
 <a href="/">Back to board</a>
 
-
 {{ template "footer" . }}
diff --git a/tmpl/index-thread-partial.html b/tmpl/index-thread-partial.html
@@ -1,6 +1,6 @@
 {{ define "index-thread-partial" }}
 {{ if .Threads }}
-<table class="table-max-w">
+<table>
     <thead>
         <tr>
             <th class="col-user">user</th>
@@ -13,10 +13,13 @@
         {{ range .Threads }}
         <tr>
             <td class="col-user"><a href="/member/{{ .Lastid.Int64 }}">{{ .Email.String }}</a></td>
-            <td class="col-subject"><a href="/thread/{{ .ThreadID }}">{{ .Subject }}</a> {{ if .CanEdit.Bool }}<a href="/thread/{{ .ThreadID }}/edit"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" role="img" fill="currentColor" viewBox="0 0 16 16">
-                <title>Edit thread</title>
-                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-9.5 9.5a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l9.5-9.5zM11.207 2L3 10.207V13h2.793L14 4.793 11.207 2zm1.586-1.586L14 1.793 12.207 3.586 10.793 2.172l1.586-1.586z"/>
-  </svg></a>{{ end }}</td>
+            <td class="col-subject"><a href="/thread/{{ .ThreadID }}">{{ .Subject }}</a> {{ if .CanEdit.Bool }}<a
+                    href="/thread/{{ .ThreadID }}/edit"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                        role="img" fill="currentColor" viewBox="0 0 16 16">
+                        <title>Edit thread</title>
+                        <path
+                            d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-9.5 9.5a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l9.5-9.5zM11.207 2L3 10.207V13h2.793L14 4.793 11.207 2zm1.586-1.586L14 1.793 12.207 3.586 10.793 2.172l1.586-1.586z" />
+                    </svg></a>{{ end }}</td>
             <td class="col-posts">{{ .Posts.Int32 }}</td>
             <td class="col-date">{{ .DateLastPosted.Time | formatTimestamp }}</td>
         </tr>

diff --git a/tmpl/member.html b/tmpl/member.html
@@ -20,20 +20,33 @@ <h2>
         </td>
         <td class="info-column">
             <div class="content-container">
-                <div class="content-row">
-                    {{ if ne .Member.Location.String "" }}
-                    Location: {{ .Member.Location.String }}<br />
-                    {{ end }}
-                    {{ if ne .Member.Pronouns.String "" }}
-                    Pronouns: {{ .Member.Pronouns.String }}<br />
-                    {{ end }}
-                    {{ if ne .Member.PreferredName.String "" }}
-                    Preferred Name: {{ .Member.PreferredName.String }}<br />
-                    {{ end }}
-                    {{ if ne .Member.Bio.String "" }}
-                    Bio: {{ .Member.Bio.String }}<br />
-                    {{ end }}
-                    Joined on {{ .Member.DateJoined.Time | formatTimestamp }}<br />
+                {{ if ne .Member.Location.String "" }}
+                <div class="profile-field">
+                    <div class="profile-field-label">Location</div>
+                    <div class="profile-field-value">{{ .Member.Location.String }}</div>
+                </div>
+                {{ end }}
+                {{ if ne .Member.Pronouns.String "" }}
+                <div class="profile-field">
+                    <div class="profile-field-label">Pronouns</div>
+                    <div class="profile-field-value">{{ .Member.Pronouns.String }}</div>
+                </div>
+                {{ end }}
+                {{ if ne .Member.PreferredName.String "" }}
+                <div class="profile-field">
+                    <div class="profile-field-label">Preferred Name</div>
+                    <div class="profile-field-value">{{ .Member.PreferredName.String }}</div>
+                </div>
+                {{ end }}
+                {{ if ne .Member.Bio.String "" }}
+                <div class="profile-field">
+                    <div class="profile-field-label">Bio</div>
+                    <div class="profile-field-value">{{ .Member.Bio.String }}</div>
+                </div>
+                {{ end }}
+                <div class="profile-field">
+                    <div class="profile-field-label">Joined on</div>
+                    <div class="profile-field-value">{{ .Member.DateJoined.Time | formatTimestamp }}</div>
                 </div>
                 {{ if .Threads }}
                 <div class="thread-content-row">