Mobile improvements

2025-04-25 21:55:19 -04:00
parent c35f2b63b5
commit 45b89c5cfd
3 changed files with 66 additions and 20 deletions
@@ -87,23 +87,35 @@ body {
    width: 300px;
 }

-#boardActionBar {
-    font-size: 12px;
+.action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 12pt;
+}
+
+.action-bar>* {
+    margin: 0;
+}
+
+.action-search {
+    flex: 1 1 150px;
 }

 /* THREAD CATALOG */

 #catalog {
-    display: flex;
-    margin: 2rem;
-    flex-wrap: wrap;
+    display: grid;
+    gap: 10px;
+    margin: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 }

 .catalog-preview {
    margin: 10px;
    text-align: center;
    padding: 10px;
-    width: 250px;
    max-height: 300px;
    overflow: hidden;
 }
@@ -153,7 +165,7 @@ body {
    right: 100%;
    margin-right: 6px;
    top: 50%;
-    left: 22%;
+    left: 5%;
    transform: translateY(-50%);
    display: flex;
 }
@@ -472,3 +484,20 @@ footer {
    display: block;
    margin: auto;
 }
+
+@media (max-width: 600px) {
+    .action-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .action-bar select,
+    .action-bar input,
+    .action-bar .link-button {
+        width: 100%0px;
+    }
+
+    .action-search {
+        flex: 1;
+    }
+}
@@ -31,19 +31,35 @@ templ Board(board database.Board, isAdmin bool) {
 			@shared.NewPostForm(board, fmt.Sprintf("/%s/threads", board.Slug), true)
 		</div>
 		<hr/>
-		<div id="boardActionBar">
-			<span>Image size: </span>
-			<select onchange="resizeCatalogPreviewImgs()" id="selectResize">
-				<option selected value="small">Small</option>
+		<div id="boardActionBar" class="action-bar">
+			<div class="action-item">
+				<label for="selectResize">Image size:</label>
+				<select id="selectResize" onchange="resizeCatalogPreviewImgs()">
+					<option value="small" selected>Small</option>
 					<option value="large">Large</option>
 				</select>
-			<span>Sort by: </span>
-			<select onchange="applyCatalogSort()" id="selectSortBy">
-				<option selected value="bumpedat">Bump order</option>
+			</div>
+			<div class="action-item">
+				<label for="selectSortBy">Sort by:</label>
+				<select id="selectSortBy" onchange="applyCatalogSort()">
+					<option value="bumpedat" selected>Bump order</option>
 					<option value="replycount">Reply count</option>
 				</select>
-			<input style="margin-left: 10px;" oninput="applyCatalogSearch()" id="catalogSearch" placeholder="Search"/>
-			<a style _="on click trigger refreshPosts on body" class="link-button">[Refresh]</a>
+			</div>
+			<div class="action-item action-search">
+				<input
+					type="search"
+					id="catalogSearch"
+					placeholder="Search"
+					oninput="applyCatalogSearch()"
+				/>
+			</div>
+			<div class="action-item">
+				<a
+					class="link-button"
+					_="on click trigger refreshPosts on body"
+				>[Refresh]</a>
+			</div>
 		</div>
 		<hr/>
 		<div
@@ -5,6 +5,7 @@ templ Layout() {
 	<html lang="en">
 		<head>
 			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width,initial-scale=1"/>
 			<title>Comfychan</title>
 			<script src="https://unpkg.com/htmx.org@2.0.4"></script>
 			<script src="https://unpkg.com/hyperscript.org@0.9.14"></script>