Add catalog action bar with image size selector

web/static/index.css

@@ -53,6 +53,10 @@ body {
     width: 300px;
 }
 
+#boardActionBar {
+    font-size: 12px;
+}
+
 /* THREAD CATALOG */
 
 #catalog {
@@ -65,8 +69,8 @@ body {
     margin: 10px;
     text-align: center;
     padding: 10px;
-    width: 200px;
-    max-height: 192px;
+    width: 250px;
+    max-height: 300px;
     overflow: scroll;
 }
 
@@ -87,12 +91,19 @@ body {
 }
 
 .catalog-preview-img {
-    max-height: 70%;
-    max-width: 80%;
+    max-width: 95%;
     border: 1px solid #B7C5D9;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
 }
 
+.catalog-preview-img-small {
+    max-height: 50%;
+}
+
+.catalog-preview-img-large {
+    max-height: 90%;
+}
+
 .catalog-preview-counts {
     display: block;
     font-size: 12px;
@@ -132,6 +143,7 @@ body {
     width: max-content;
     margin: auto;
     margin-top: 16px;
+    margin-bottom: 20px;
 }
 
 .new-post-form-field th {
@@ -227,6 +239,10 @@ body {
     cursor: pointer;
 }
 
+.post-filename:hover {
+    color: #ff0000;
+}
+
 .reply-link {
     color: #D00;
     text-decoration: underline;
@@ -297,8 +313,7 @@ hr {
     border-top-width: medium;
     border-top-style: none;
     border-top-color: currentcolor;
-    border-top:
-        1px solid #B7C5D9;
+    border-top: 1px solid #B7C5D9;
     height: 0;
     clear: left;
 }

web/static/index.js

@@ -55,3 +55,20 @@ function highlightPost(postId, e, status = true) {
         }
     }
 }
+
+function resizeCatalogPreviewImgs() {
+    const value = $("selectSortBy").value;
+    const postsImages = Array.from(document.querySelectorAll(".catalog-preview img"));
+    for (const postImage of postsImages) {
+        switch (value) {
+            case "small":
+                postImage.classList.remove("catalog-preview-img-large")
+                postImage.classList.add("catalog-preview-img-small")
+                break;
+            case "large":
+                postImage.classList.remove("catalog-preview-img-small")
+                postImage.classList.add("catalog-preview-img-large")
+                break;
+        }
+    }
+}

web/views/board.templ

@@ -68,7 +68,20 @@ templ Board(board database.Board) {
 			<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
 			@NewThreadForm(board)
 		</div>
-		<div hx-get={ fmt.Sprintf("/hx/%s/catalog", board.Slug) } hx-trigger="load, refreshThreads from:body"></div>
+		<hr/>
+		<div id="boardActionBar">
+			<span>Image size: </span>
+			<select onchange="resizeCatalogPreviewImgs()" id="selectSortBy">
+				<option selected value="small">Small</option>
+				<option value="large">Large</option>
+			</select>
+		</div>
+		<hr/>
+		<div
+			hx-get={ fmt.Sprintf("/hx/%s/catalog", board.Slug) }
+			hx-trigger="load, refreshThreads from:body"
+			_="on htmx:afterRequest call resizeCatalogPreviewImgs()"
+		></div>
 	}
 }
 

web/views/thread.templ

@@ -109,7 +109,7 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 	</form>
 </div>
 <hr />
-<div style="margin-left: 25px;" class="link-button-container">
+<div style="margin-left: 25px;">
 	<a href={ templ.URL("/" + thread.BoardSlug) } style="margin-right: 5px;" class="link-button">[Catalog]</a>
 	<a _="on click trigger refreshPosts on body" class="link-button">[Refresh]</a>
 </div>