Applications/comfychan
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 3 Activity

Mobile improvements

Browse Source
This commit is contained in:
Dominic Ferrando
2025-04-25 21:55:19 -04:00
parent c35f2b63b5
commit 45b89c5cfd
3 changed files with 66 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/index.css
+36 -7
View File
@@ -87,23 +87,35 @@ body {
width: 300px; width: 300px;
} }
#boardActionBar { .action-bar {
font-size: 12px; 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 */ /* THREAD CATALOG */
#catalog { #catalog {
display: flex; display: grid;
margin: 2rem; gap: 10px;
flex-wrap: wrap; margin: 1rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
} }
.catalog-preview { .catalog-preview {
margin: 10px; margin: 10px;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
width: 250px;
max-height: 300px; max-height: 300px;
overflow: hidden; overflow: hidden;
} }
@@ -153,7 +165,7 @@ body {
right: 100%; right: 100%;
margin-right: 6px; margin-right: 6px;
top: 50%; top: 50%;
left: 22%; left: 5%;
transform: translateY(-50%); transform: translateY(-50%);
display: flex; display: flex;
} }
@@ -472,3 +484,20 @@ footer {
display: block; display: block;
margin: auto; 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;
}
}
web/views/board.templ
+25 -9
View File
@@ -31,19 +31,35 @@ templ Board(board database.Board, isAdmin bool) {
@shared.NewPostForm(board, fmt.Sprintf("/%s/threads", board.Slug), true) @shared.NewPostForm(board, fmt.Sprintf("/%s/threads", board.Slug), true)
</div> </div>
<hr/> <hr/>
<div id="boardActionBar"> <div id="boardActionBar" class="action-bar">
<span>Image size: </span> <div class="action-item">
<select onchange="resizeCatalogPreviewImgs()" id="selectResize"> <label for="selectResize">Image size:</label>
<option selected value="small">Small</option> <select id="selectResize" onchange="resizeCatalogPreviewImgs()">
<option value="small" selected>Small</option>
<option value="large">Large</option> <option value="large">Large</option>
</select> </select>
<span>Sort by: </span> </div>
<select onchange="applyCatalogSort()" id="selectSortBy"> <div class="action-item">
<option selected value="bumpedat">Bump order</option> <label for="selectSortBy">Sort by:</label>
<select id="selectSortBy" onchange="applyCatalogSort()">
<option value="bumpedat" selected>Bump order</option>
<option value="replycount">Reply count</option> <option value="replycount">Reply count</option>
</select> </select>
<input style="margin-left: 10px;" oninput="applyCatalogSearch()" id="catalogSearch" placeholder="Search"/> </div>
<a style _="on click trigger refreshPosts on body" class="link-button">[Refresh]</a> <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> </div>
<hr/> <hr/>
<div <div
web/views/shared/layout.templ
+1
View File
@@ -5,6 +5,7 @@ templ Layout() {
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Comfychan</title> <title>Comfychan</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.14"></script> <script src="https://unpkg.com/hyperscript.org@0.9.14"></script>