commit 99b5c77ac1f365339cdbc8f4b6dabcef394c38b8
parent feeb15d3c05cfe5c86cb8047071d99addcc7cc06
Author: breadcat <breadcat@users.noreply.github.com>
Date: Wed, 24 Sep 2025 17:35:04 +0100
Convert lists into galleries and style them
Diffstat:
4 files changed, 54 insertions(+), 52 deletions(-)
diff --git a/templates/_header.html b/templates/_header.html
@@ -6,7 +6,7 @@
<title>{{if .Title}}{{.Title}} - Taggart{{else}}Taggart{{end}}</title>
<style>
/* main body styling */
-body {background: #1a1a1a; color: #cfcfcf; font-family: sans-serif; margin: 0}
+body, div#search-container form input {background: #1a1a1a; color: #cfcfcf; font-family: sans-serif; margin: 0}
a {color: lightblue; text-decoration: none}
a:hover {text-decoration: underline}
@@ -16,6 +16,16 @@ nav ul {flex: 1 1 auto; list-style: none; margin: 0; padding: 0}
nav ul li {display: inline-block; margin: 0; padding: 0; border-right: 1px solid gray}
nav ul li a, nav ul li strong {padding: 15px; display: block}
+/* search bar */
+div#search-container form input {border: 1px solid gray; padding: 8px; margin-top: 7px}
+span#searchToggle {cursor: pointer; color: lightblue; padding: 8px}
+div#searchToggleContainer {display: none; background-color: #2a2a2a}
+
+/* gallery styling */
+div.gallery {}
+div.gallery-item {display: inline-block; width: 250px}
+div.gallery-item a {display: inline-block; overflow: hidden; text-overflow:ellipsis; width: 250px}
+
/* cascading menu */
ul.tag-menu,ul.tag-menu ul{list-style:none;margin:0;padding:0}
ul.tag-menu li{position:relative}
@@ -26,9 +36,6 @@ ul.tag-menu li ul li,ul.tag-menu li:hover>ul{display:block}
ul.tag-menu li ul li ul{left:100%;top:0}
ul.tag-menu li ul li a{background:#f9f9f9}
ul.tag-menu li ul li a:hover{background:#ddd}
-
-div#searchToggleContainer {display: none; background-color: #2a2a2a}
-span#searchToggle {cursor: pointer; color: lightblue}
</style>
</head>
<body>
@@ -43,7 +50,7 @@ span#searchToggle {cursor: pointer; color: lightblue}
<li><a href="/settings">Settings</a></li>
</ul>
<div id="search-container">
-<form method="get" action="/search"><input type="text" name="q" value="{{.Query}}" placeholder="Search..." style="width: 400px; padding: 8px; font-size: 16px;"><span id="searchToggle">[?]</span>
+<form method="get" action="/search"><input type="text" name="q" value="{{.Query}}" placeholder="Search..."><span id="searchToggle">[?]</span>
</form>
</div>
</nav>
diff --git a/templates/list.html b/templates/list.html
@@ -3,42 +3,37 @@
{{if .Data.Tagged}}
<h2>Tagged Files</h2>
-<ul>
+
+<div class="gallery">
{{range .Data.Tagged}}
- <li>
- <a href="/file/{{.ID}}">{{.Filename}}</a><br>
- {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}
- <img src="/uploads/{{.EscapedFilename}}" style="max-width:150px">
- {{else if hasAnySuffix .Filename ".mp4" ".webm" ".mov"}}
- <video width="150" controls>
- <source src="/uploads/{{.EscapedFilename}}">
- </video>
+ <div class="gallery-item">
+ <a href="/file/{{.ID}}" title="{{.Filename}}">
+ {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}<img src="/uploads/{{.EscapedFilename}}" style="max-width:150px"><br />
+ {{else if hasAnySuffix .Filename ".mp4" ".webm" ".mov"}}<video width="150" controls><source src="/uploads/{{.EscapedFilename}}"></video><br />
{{end}}
- </li>
+ {{.Filename}}</a>
+ </div>
{{else}}
- <li>No tagged files yet.</li>
+ <p>No tagged files yet.</p>
{{end}}
-</ul>
+</div>
{{end}}
{{if .Data.Untagged}}
<h2>Untagged Files</h2>
-<ul>
+<div class="gallery">
{{range .Data.Untagged}}
- <li>
- <a href="/file/{{.ID}}">{{.Filename}}</a><br>
- {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}
- <img src="/uploads/{{.EscapedFilename}}" style="max-width:150px">
- {{else if hasAnySuffix .Filename ".mp4" ".webm" ".mov"}}
- <video width="150" controls>
- <source src="/uploads/{{.EscapedFilename}}">
- </video>
+ <div class="gallery-item">
+ <a href="/file/{{.ID}}" title="{{.Filename}}">
+ {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}<img src="/uploads/{{.EscapedFilename}}" style="max-width:150px">
+ {{else if hasAnySuffix .Filename ".mp4" ".webm" ".mov"}}<video width="150" controls><source src="/uploads/{{.EscapedFilename}}"></video>
{{end}}
- </li>
+ {{.Filename}}</a>
+ </div>
{{else}}
<li>No untagged files.</li>
{{end}}
-</ul>
+</div>
{{end}}
{{template "_footer"}}
diff --git a/templates/search.html b/templates/search.html
@@ -2,20 +2,23 @@
<h1>Search Files</h1>
{{if .Files}}
- <h2>Found {{len .Files}} file{{if ne (len .Files) 1}}s{{end}}</h2>
- <div class="file-grid">
- {{range .Files}}
- <div class="file-item">
- <a href="/file/{{.ID}}">{{.Filename}}</a>
- {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}
- <br><img src="/uploads/{{.EscapedFilename}}" style="max-width: 100%; height: auto;" />
- {{end}}
- </div>
- {{end}}
+
+<h2>Found {{len .Files}} file{{if ne (len .Files) 1}}s{{end}}</h2>
+<div class="gallery">
+ {{range .Files}}
+ <div class="gallery-item">
+ <a href="/file/{{.ID}}" title="{{.Filename}}">
+ {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}<img src="/uploads/{{.EscapedFilename}}" style="max-width:150px"><br />
+ {{else if hasAnySuffix .Filename ".mp4" ".webm" ".mov"}}<video width="150" controls><source src="/uploads/{{.EscapedFilename}}"></video><br />
+ {{end}}
+ {{.Filename}}</a>
</div>
+ {{end}}
+</div>
+
{{else if .Query}}
- <p>No files found matching "<strong>{{.Query}}</strong>"</p>
- <p>Try using wildcards like <code>*{{.Query}}*</code> for broader results.</p>
+<p>No files found matching "<strong>{{.Query}}</strong>"</p>
+<p>Try using wildcards like <code>*{{.Query}}*</code> for broader results.</p>
{{end}}
{{template "_footer"}}
\ No newline at end of file
diff --git a/templates/untagged.html b/templates/untagged.html
@@ -1,20 +1,17 @@
{{template "_header" .}}
<h1>Untagged Files</h1>
-<ul>
+<div class="gallery">
{{range .Data}}
- <li>
- <a href="/file/{{.ID}}">{{.Filename}}</a><br>
- {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}
- <img src="/uploads/{{.EscapedFilename}}" style="max-width:150px">
- {{else if hasAnySuffix .Filename ".mp4" ".webm" ".mov"}}
- <video width="150" controls muted>
- <source src="/uploads/{{.EscapedFilename}}">
- </video>
+<div class="gallery-item">
+ <a href="/file/{{.ID}}" title="{{.Filename}}">
+ {{if hasAnySuffix .Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}}<img src="/uploads/{{.EscapedFilename}}" style="max-width:150px"><br />
+ {{else if hasAnySuffix .Filename ".mp4" ".webm" ".mov"}}<video width="150" controls muted><source src="/uploads/{{.EscapedFilename}}"></video><br />
{{end}}
- </li>
+ {{.Filename}}</a>
+</div>
{{else}}
- <li>No untagged files.</li>
+<p>No untagged files.</p>
{{end}}
-</ul>
+</div>
{{template "_footer"}}
