forked from andyburke/autonomous.contact
refactor: rework the frontend to move topics to the top
This commit is contained in:
parent
fac8f409f4
commit
11ecd86bb9
14 changed files with 362 additions and 292 deletions
191
public/sidebar/sidebar.html
Normal file
191
public/sidebar/sidebar.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<script>
|
||||
document.addEventListener("topics_updated", ({ detail: { topics } }) => {
|
||||
const topic_list = document.getElementById("topic-list");
|
||||
topic_list.innerHTML = "";
|
||||
for (const topic of topics) {
|
||||
topic_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="topic-selector-${topic.id}" class="topic"><a href="#/topic/${topic.id}/chat">${topic.name}</a></li>`,
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
main {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
z-index: 100;
|
||||
background: var(--bg);
|
||||
position: relative;
|
||||
width: auto;
|
||||
left: 0;
|
||||
max-width: 32rem;
|
||||
padding: 0.5rem;
|
||||
transition: all ease-in-out 0.33s;
|
||||
border-right: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
#sidebar #sidebar-toggle,
|
||||
#sidebar #sidebar-toggle-icon {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
#sidebar #sidebar-toggle-icon {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
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;
|
||||
}
|
||||
|
||||
#sidebar .icon {
|
||||
transition: all ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
#sidebar:has(#sidebar-toggle:checked) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
|
||||
right: 0;
|
||||
rotate: 180deg;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar .title {
|
||||
text-transform: uppercase;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
#sidebar #topic-creation-container {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#sidebar #topic-creation-container #toggle-topic-creation-form-button {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
#sidebar .topic-list {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#sidebar .topic-list > li.topic a:before {
|
||||
position: absolute;
|
||||
left: -1.75rem;
|
||||
top: 0;
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
content: "#";
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#sidebar .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;
|
||||
}
|
||||
|
||||
#sidebar .topic-list > li.topic.active a {
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="sidebar">
|
||||
<input type="checkbox" id="sidebar-toggle" />
|
||||
<label id="sidebar-toggle-icon" for="sidebar-toggle">
|
||||
<div class="icon right"></div>
|
||||
</label>
|
||||
<div>
|
||||
<span class="title">topics</span>
|
||||
</div>
|
||||
<ul id="topic-list" class="topic-list"></ul>
|
||||
<div id="topic-creation-container" data-requires-permission="topics.create">
|
||||
<button
|
||||
id="toggle-topic-creation-form-button"
|
||||
onclick="((event) => {
|
||||
event.preventDefault();
|
||||
const topic_create_form = document.getElementById( 'topic-create' );
|
||||
topic_create_form.style[ 'height' ] = topic_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
|
||||
})(event)"
|
||||
>
|
||||
<div class="icon plus"></div>
|
||||
</button>
|
||||
<form
|
||||
id="topic-create"
|
||||
data-smart="true"
|
||||
action="/api/topics"
|
||||
method="POST"
|
||||
style="
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
"
|
||||
>
|
||||
<input
|
||||
id="new-topic-name-input"
|
||||
type="text"
|
||||
name="name"
|
||||
value=""
|
||||
placeholder="new topic"
|
||||
/>
|
||||
|
||||
<input type="submit" hidden />
|
||||
<script>
|
||||
{
|
||||
const form = document.currentScript.closest("form");
|
||||
const topic_create_form = document.getElementById("topic-create");
|
||||
const new_topic_name_input = document.getElementById("new-topic-name-input");
|
||||
|
||||
form.on_reply = (new_topic) => {
|
||||
const topic_list = document.getElementById("topic-list");
|
||||
topic_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
|
||||
);
|
||||
|
||||
new_topic_name_input.value = "";
|
||||
window.location.hash = `/topic/${new_topic.id}`;
|
||||
topic_create_form.style["height"] = "0";
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue