root
/
threadr.lostcave.ddnss.de
3
1
Fork 2
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

UI: Add breadcrumb navigation to chat page 

- Breadcrumb bar above chat header (Home › Boards › Chat Name)
- Styled to match chat container with themed colors
- Includes dark mode support
jocadbz
Joca 2026-01-15 22:50:58 -03:00
parent f7b8055062
commit d36d0d46fd
Signed by: jocadbz
GPG Key ID: B1836DCE2F50BDF7
1 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
templates/pages/chat.html
View File

@ -4,6 +4,7 @@
<head> <head>
<title>{{.Title}}</title> <title>{{.Title}}</title>
<link rel="stylesheet" href="{{.StaticPath}}/style.css"> <link rel="stylesheet" href="{{.StaticPath}}/style.css">
<script src="{{.StaticPath}}/app.js" defer></script>
<style> <style>
body { body {
margin: 0; margin: 0;
@ -34,6 +35,25 @@
text-align: center; text-align: center;
border-bottom: 1px solid #001858; border-bottom: 1px solid #001858;
} }
.chat-breadcrumb {
background-color: #f3d2c1;
padding: 8px 12px;
border-bottom: 1px solid #001858;
font-size: 0.85em;
text-align: left;
}
.chat-breadcrumb a {
color: #001858;
text-decoration: none;
}
.chat-breadcrumb a:hover {
color: #f582ae;
text-decoration: underline;
}
.chat-breadcrumb-separator {
margin: 0 6px;
opacity: 0.6;
}
.chat-messages { .chat-messages {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@ -195,6 +215,12 @@
.chat-container { .chat-container {
background-color: #444; background-color: #444;
} }
.chat-breadcrumb {
background-color: #555;
}
.chat-breadcrumb a {
color: #fef6e4;
}
.chat-header { .chat-header {
border-color: #fef6e4; border-color: #fef6e4;
} }
@ -259,6 +285,13 @@
{{template "navbar" .}} {{template "navbar" .}}
<main> <main>
<div class="chat-container"> <div class="chat-container">
<div class="chat-breadcrumb">
<a href="{{.BasePath}}/">Home</a>
<span class="chat-breadcrumb-separator">›</span>
<a href="{{.BasePath}}/boards/">Boards</a>
<span class="chat-breadcrumb-separator">›</span>
<span>{{.Board.Name}}</span>
</div>
<header class="chat-header"> <header class="chat-header">
<h2>{{.Board.Name}}</h2> <h2>{{.Board.Name}}</h2>
<p>{{.Board.Description}}</p> <p>{{.Board.Description}}</p>