andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: rework the frontend to move topics to the top

Browse source
This commit is contained in:
Andy Burke 2025-09-10 19:38:38 -07:00
parent fac8f409f4
commit 11ecd86bb9
14 changed files with 362 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

101
public/tabs/chat/chat.css
View file

@ -1,63 +1,7 @@
#chat .tab-content {
display: grid;
grid-template-columns: auto 1fr;
}
.topic-list {
margin: 1rem 0;
list-style-type: none;
}
.topic-list > li.topic a:before {
position: absolute;
left: -1.75rem;
top: 0;
font-weight: bold;
font-size: x-large;
content: "#";
color: var(--text);
}
.topic-list > li.topic a {
position: relative;
display: block;
width: 100%;
min-height: 1.5rem;
line-height: 1.5rem;
font-weight: bold;
font-size: large;
margin-left: 1.75rem;
text-decoration: none;
}
.topic-list > li.topic.active a {
color: var(--accent);
}
#chat .sidebar {
position: relative;
width: min-content;
min-width: 10rem;
max-width: 32rem;
overflow-x: scroll;
padding: 0.5rem;
}
#chat .sidebar #sidebar-toggle,
#chat .sidebar #sidebar-toggle-icon {
opacity: 0;
display: none;
}
#chat .sidebar .title {
text-transform: uppercase;
font-size: small;
font-weight: bold;
line-height: 2rem;
}
#chat #topic-chat-container {
position: relative;
width: 100%;
height: 100%;
}
#chat #topic-chat-content {
@ -333,46 +277,7 @@
border-style: none;
}
@media screen and (max-width: 768px) {
#chat .sidebar {
z-index: 100;
background: var(--bg);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
left: -100%;
overflow-y: scroll;
overflow: visible;
transition: all ease-in-out 0.33s;
}
#chat .sidebar #sidebar-toggle-icon {
opacity: 1;
display: block;
position: absolute;
top: 1rem;
right: -2.5rem;
cursor: pointer;
transition: all ease-in-out 0.33s;
background: rgba(128, 128, 128, 0.5);
border-radius: 0 1rem 1rem 0;
padding: 0.5rem;
}
#chat .sidebar .icon {
transition: all ease-in-out 0.33s;
}
#chat .sidebar:has(#sidebar-toggle:checked) {
left: 0;
}
#chat .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
right: 0;
rotate: 180deg;
}
@media screen and (max-width: 1200px) {
#chat #topic-chat-container {
position: absolute;
top: 0;