frontend: CSS cleanup and more

- Make a partial out of index list to use in profiles later - Remove unused CSS items Change-Id: I674a68b0db25cd5dea1c57163311725a01c568b6 Signed-off-by: Ian Meyer <[email protected]>
imeyer · Sep 19, 2024 · cf42274 · cf42274
1 parent 487f16c
commit cf42274
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 69 deletions.
diff --git a/BUILD.bazel b/BUILD.bazel
@@ -26,6 +26,7 @@ go_library(
         "tmpl/error.html",
         "tmpl/footer.html",
         "tmpl/header.html",
+        "tmpl/index-thread-partial.html",
         "tmpl/index.html",
         "tmpl/member.html",
         "tmpl/newthread.html",

diff --git a/static/style.css b/static/style.css
@@ -111,11 +111,6 @@ tbody>tr:nth-child(odd) {
     background-color: var(--odd-row-color);
 }
 
-/* Column styles */
-.wide {
-    width: 80%;
-}
-
 .col-subject,
 .thread-col-subject {
     width: max(200px, calc(100vw - 680px));
@@ -144,35 +139,11 @@ tbody>tr:nth-child(odd) {
     max-width: 1000px;
 }
 
-.table-max-w .col-200 {
+.table-max-w {
     width: clamp(200px, calc(100vw - 680px), 520px);
 }
 
 /* Profile styles */
-.profile {
-    width: 100%;
-    border: var(--border);
-    border-radius: 10px;
-    margin: 0;
-}
-
-.profile-photo {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    border: 2px solid var(--primary-color);
-    background-color: var(--primary-color);
-    margin: 20px auto;
-}
-
-.profile-photo img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
-}
-
-/* Profile table styles */
 .profile-table {
     width: 100%;
     border-collapse: separate;
@@ -194,6 +165,22 @@ tbody>tr:nth-child(odd) {
     box-sizing: border-box;
 }
 
+.profile-photo {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    border: 2px solid var(--primary-color);
+    background-color: var(--primary-color);
+    margin: 20px auto;
+}
+
+.profile-photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
 .user {
     text-align: right;
     padding-right: 10px;
@@ -308,7 +295,6 @@ tbody>tr:nth-child(odd) {
 
 /* Media queries */
 @media (max-width: 768px) {
-
     .profile-table,
     .profile-table tbody,
     .profile-table tr,
@@ -317,21 +303,52 @@ tbody>tr:nth-child(odd) {
         display: block;
         width: 100%;
     }
-}
 
-@media (max-width: 600px) {
-    .chat-bubble {
-        padding: 8px;
+    /* Hide specific columns */
+    .col-posts,
+    .col-date,
+    .thread-col-user {
+        display: none;
     }
 
-    .chat-header {
-        font-size: 0.8em;
+    /* Adjust remaining columns */
+    .col-user,
+    .col-subject,
+    .thread-col-subject {
+        width: 100%;
     }
 
-    .chat-message {
-        font-size: 0.9em;
+    /* Make table header sticky */
+    thead {
+        position: sticky;
+        top: 0;
+        background-color: var(--header-color);
+        z-index: 2;
+    }
+
+    /* Adjust table layout for mobile */
+    table, tbody, tr, td {
+        display: table;
+    }
+
+    td {
+        text-align: left !important;
+        padding: 10px 5px;
+    }
+
+    td:before {
+        float: left;
+        font-weight: bold;
+        text-transform: uppercase;
     }
 
+    .user {
+        text-align: left;
+        padding-left: 5px;
+    }
+}
+
+@media (max-width: 600px) {
     .form-container {
         padding: 15px;
     }

diff --git a/tmpl/index-thread-partial.html b/tmpl/index-thread-partial.html
@@ -0,0 +1,32 @@
+{{ define "index-thread-partial" }}
+{{ if .Threads }}
+<table class="table-max-w">
+    <colgroup>
+        <col class="col-user" />
+        <col class="col-subject" />
+        <col class="col-posts" />
+        <col class="col-date" />
+    </colgroup>
+    <thead>
+        <tr>
+            <th class="user">user</th>
+            <th>subject</th>
+            <th class="col-posts">posts</th>
+            <th class="col-date">date</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{ range .Threads }}
+        <tr>
+            <td class="user"><a href="/member/{{ .Lastid.Int64 }}">{{ .Email.String }}</a></td>
+            <td><a href="/thread/{{ .ThreadID }}">{{ .Subject }}</a></td>
+            <td class="col-posts">{{ .Posts.Int32 }}</td>
+            <td class="col-date">{{ .DateLastPosted.Time | formatTimestamp }}</td>
+        </tr>
+        {{ end }}
+    </tbody>
+</table>
+{{else}}
+<p>No threads...</p>
+{{ end }}
+{{ end }}
diff --git a/tmpl/index.html b/tmpl/index.html
@@ -1,35 +1,7 @@
     {{ template "header" . }}
 
     <h2><a href="/thread/new">Create new thread...</a></h2>
-    {{ if .Threads }}
-    <table class="table-max-w">
-        <colgroup>
-            <col class="col-user" />
-            <col class="col-subject" />
-            <col class="col-posts" />
-            <col class="col-date" />
-        </colgroup>
-        <thead>
-            <tr>
-                <th class="user">user</th>
-                <th>subject</th>
-                <th>posts</th>
-                <th>date</th>
-            </tr>
-        </thead>
-        <tbody>
-            {{ range .Threads }}
-            <tr>
-                <td class="user"><a href="/member/{{ .Lastid.Int64 }}">{{ .Email.String }}</a></td>
-                <td><a href="/thread/{{ .ThreadID }}">{{ .Subject }}</a></td>
-                <td>{{ .Posts.Int32 }}</td>
-                <td>{{ .DateLastPosted.Time | formatTimestamp }}</td>
-            </tr>
-            {{ end }}
-        </tbody>
-    </table>
-    {{else}}
-    <p>Nothing to see here... <a href="/thread/new">say something!!!</a></p>
-    {{end}}
+
+    {{ template "index-thread-partial" . }}
 
     {{ template "footer" . }}