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 supportjocadbz
parent
f7b8055062
commit
d36d0d46fd
|
|
@ -4,6 +4,7 @@
|
|||
<head>
|
||||
<title>{{.Title}}</title>
|
||||
<link rel="stylesheet" href="{{.StaticPath}}/style.css">
|
||||
<script src="{{.StaticPath}}/app.js" defer></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -34,6 +35,25 @@
|
|||
text-align: center;
|
||||
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 {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
|
@ -195,6 +215,12 @@
|
|||
.chat-container {
|
||||
background-color: #444;
|
||||
}
|
||||
.chat-breadcrumb {
|
||||
background-color: #555;
|
||||
}
|
||||
.chat-breadcrumb a {
|
||||
color: #fef6e4;
|
||||
}
|
||||
.chat-header {
|
||||
border-color: #fef6e4;
|
||||
}
|
||||
|
|
@ -259,6 +285,13 @@
|
|||
{{template "navbar" .}}
|
||||
<main>
|
||||
<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">
|
||||
<h2>{{.Board.Name}}</h2>
|
||||
<p>{{.Board.Description}}</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue