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

refactor: clean the sidebar up a little bit

Browse source
This commit is contained in:
Andy Burke 2025-09-16 19:48:01 -07:00
parent 778d1b3aef
commit c753f1ef65
2 changed files with 60 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

29
public/base.css
View file

@ -96,6 +96,35 @@ select {
font-size: inherit;
}
details > summary {
display: block;
position: relative;
padding-left: 2rem;
cursor: pointer;
user-select: none;
}
details > summary:before {
content: "";
border-width: 0.6rem;
border-style: solid;
border-color: transparent transparent transparent rgba(from var(--border-subtle) r g b / 0.9);
position: absolute;
top: 0.15rem;
left: 0;
transform: rotate(0);
transform-origin: 0.3rem 50%;
transition: 0.25s transform ease;
}
details[open] > summary:before {
transform: rotate(90deg);
}
details > summary::-webkit-details-marker {
display: none;
}
form input,
form textarea {
width: 100%;

53
public/sidebar/sidebar.html
View file

@ -210,9 +210,9 @@
</script>
<style type="text/css">
.profile-container {
margin: 1rem auto;
max-width: 1024px;
padding: 1rem;
padding-bottom: 0;
}
.profile-container .avatar-container {
@ -351,31 +351,40 @@
<input type="file" accept="image/*" name="meta.avatar" />
</div>
<div class="username-container">
<span class="username" data-bind-to-user-field="username"></span>
</div>
<details class="additional-profile">
<summary>
<div class="username-container">
<span class="username" data-bind-to-user-field="username"></span>
</div>
</summary>
<div class="notifications-settings-container">
<button class="mockup" onclick="NOTIFICATIONS.request_permission()">
Enable Notifications
</button>
</div>
<div class="notifications-settings-container">
<button class="mockup" onclick="NOTIFICATIONS.request_permission()">
Enable Notifications
</button>
</div>
<div class="color-settings-container">
<input
type="text"
id="user-color-setting-primary"
name="meta.primary_color"
value=""
data-bind-to-user-field="meta.primary_color"
data-user-field-target="value"
data-user-field-default=""
/>
<label for="user-color-setting-primary">Primary Color</label>
</div>
<div class="color-settings-container">
<input
type="text"
id="user-color-setting-primary"
name="meta.primary_color"
value=""
data-bind-to-user-field="meta.primary_color"
data-user-field-target="value"
data-user-field-default=""
/>
<label for="user-color-setting-primary">Primary Color</label>
</div>
</details>
</form>
<form data-smart="true" data-method="DELETE" action="/api/auth">
<form
data-smart="true"
data-method="DELETE"
action="/api/auth"
style="position: absolute; left: 1rem; right: 1rem; bottom: 1rem"
>
<script>
{
const form = document.currentScript.closest("form");