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

refactor: trying to start the move to utility based styling

Browse source
This commit is contained in:
Andy Burke 2026-03-10 20:26:38 -07:00
parent 86fa2b6d4b
commit 4a15f9260b
6 changed files with 411 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

160
public/sidebar/sidebar.html
View file

@ -92,22 +92,6 @@
</script>
<style type="text/css">
#sidebar {
z-index: 100;
background: var(--bg);
position: relative;
width: auto;
left: 0;
max-width: 32rem;
padding-left: 6rem;
transition: all ease-in-out 0.33s;
border-right: 1px solid var(--border-subtle);
}
#sidebar .profile-container {
width: 100%;
max-width: 100%;
}
#sidebar #sidebar-context-menu {
display: none;
@ -298,7 +282,7 @@
}
</style>
<div id="sidebar">
<div id="sidebar" class="z-100 rel left-0 pad-left-8 transition border-right" style="max-width: 32rem;">
<div id="sidebar-context-menu">
<form
data-smart="true"
@ -358,56 +342,12 @@
APP.on( 'load', update_servers_list );
APP.on( 'user_logged_in', update_servers_list );
</script>
<style>
#server-list-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding: 1rem;
width: 6rem;
border-right: 1px solid var(--border-subtle);
overflow-y: auto;
}
.server-list-entry {
width: 100%;
padding: 0.5rem;
margin: 0.5rem auto;
overflow: hidden;
text-align: center;
margin-bottom: 1rem;
}
.server-list-entry a {
text-decoration: none;
}
.server-list-entry img {
width: 3rem;
height: 3rem;
margin: 0 auto 0.75rem;
padding: 0.2rem;
border-radius: var(--border-radius);
object-fit: scale-down;
align-content: center;
border: 1px solid var(--border-subtle);
background: var(--icon-background);
}
.server-list-entry .server-name {
font-size: x-small;
word-wrap: break-word;
font-weight: bold;
max-height: 3rem;
}
</style>
<div id="server-list-container">
<div id="server-list-container" class="abs top-0 left-0 bottom-0 pad-4 border-right scroll-y width-6">
<template id="server-list-entry-template">
<div class="server-list-entry">
<a href="${ server.url }">
<img class="server-icon" src="${ server.icon ?? ( server.url + '/favicon.ico' ) }" alt="${ server.name ?? server.url } icon" style="${ server.icon_background ? `--icon-background: ${ server.icon_background };` : '' }" loading="lazy" />
<div class="server-name">${ server.name ?? server.url }</div>
<div class="server-list-entry width-100 pad-2 margin-top-3 margin-x-auto hideoverflow text-center margin-bottom-4">
<a href="${ server.url }" class="undecorated">
<img class="server-icon box-sm margin-top-0 margin-x-auto margin-bottom-3 pad-1 border border-rounded align-center" style="object-fit: scale-down; background: var(--icon-background);" src="${ server.icon ?? ( server.url + '/favicon.ico' ) }" alt="${ server.name ?? server.url } icon" style="${ server.icon_background ? `--icon-background: ${ server.icon_background };` : '' }" loading="lazy" />
<div class="server-name text-sm text-bold" style="word-wrap: break-work; max-height: 3rem;">${ server.name ?? server.url }</div>
</a>
</div>
</template>
@ -417,14 +357,7 @@
<div id="user-servers-container"></div>
</div>
<style>
#server-info {
position: relative;
height: 100%;
padding: 1rem 2rem;
}
</style>
<div id="server-info">
<div id="server-info" class="rel pad-y-4 pad-x-6 height-100">
<script>
const DEFAULT_AVATAR_URL = `//${window.location.host}/images/default_avatar.gif`;
@ -478,30 +411,7 @@
attributeFilter: ["data-user"],
});
</script>
<style type="text/css">
.profile-container {
max-width: 1024px;
padding: 1rem;
padding-bottom: 0;
}
.profile-container .avatar-container {
position: relative;
width: 100%;
max-width: 200px;
}
.profile-container .avatar-container input[type="file"] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
</style>
<form class="profile-container">
<form class="pad-4 pad-y-0" style="max-width: 1024px;">
<script>
const profile_form = document.currentScript.closest("form");
@ -600,7 +510,7 @@
}
});
</script>
<div class="avatar-container xx-large">
<div class="box-sm rel">
<img
id="user-avatar"
src="/images/default_avatar.gif"
@ -609,49 +519,38 @@
data-user-field-target="src"
data-user-field-default="/images/default_avatar.gif"
/>
<input type="file" accept="image/*" name="meta.avatar" />
<input class="abs top-0 right-0 bottom-0 left-0 transparent pointer" type="file" accept="image/*" name="meta.avatar" />
</div>
<details class="additional-profile">
<details>
<summary>
<div class="username-container">
<div class="text-lg text-bold">
<span class="username" data-bind-to-user-field="username"></span>
</div>
</summary>
<div class="notifications-settings-container">
<button onclick="NOTIFICATIONS.request_permission()">
Enable Notifications
</button>
</div>
<button onclick="NOTIFICATIONS.request_permission()">
Enable Notifications
</button>
<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 class="placeholder" for="user-color-setting-primary">Primary Color</label>
</div>
<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 class="placeholder" for="user-color-setting-primary">Primary Color</label>
</details>
</form>
<button
style="text-transform: uppercase; width: 100%; padding: 1.1rem 0"
onclick="generate_invite(event)"
>
Invite Another Human
</button>
<form
data-smart="true"
data-method="DELETE"
action="/api/auth"
style="position: absolute; left: 1rem; right: 1rem; bottom: 1rem"
style="margin: 1em 0;"
>
<script>
{
@ -669,6 +568,13 @@
<button class="primary">Log Out</button>
</form>
<button
style="text-transform: uppercase; width: 100%; padding: 1.1rem 0"
onclick="generate_invite(event)"
>
Invite Another Human
</button>
<div id="sidebar-dynamic-container">
</div>
</div>