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; 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 input,
form textarea { form textarea {
width: 100%; width: 100%;

53
public/sidebar/sidebar.html
View file

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