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

feature: blurbs

Browse source 
refactor: style updates and fixes
This commit is contained in:
Andy Burke 2025-09-23 17:13:51 -07:00
parent 591fd38088
commit cbd58071b8
9 changed files with 101 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

61
public/tabs/blurbs/blurbs.html
View file

@ -1,6 +1,8 @@
<style>
.blurbs-container {
#blurbs-container {
padding: 1rem;
max-width: 40rem;
margin: 0 auto;
}
.blurb-container {
@ -9,12 +11,11 @@
grid-template-rows: auto auto auto auto 1fr;
grid-template-columns: auto auto 1fr;
grid-template-areas:
"expander preview info"
"expander preview subject"
". . content"
". . newblurb"
". . replies";
max-height: 6rem;
"preview"
"info"
"content"
"newblurb"
"replies";
padding: 1rem;
border: 1px solid var(--border-subtle);
overflow-y: hidden;
@ -60,9 +61,7 @@
.blurb-container .media-preview-container {
grid-area: preview;
width: 6rem;
height: 4rem;
margin-right: 1rem;
max-height: 600px;
}
.blurb-container .media-preview-container img {
@ -80,52 +79,48 @@
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 16%;
border-radius: 20%;
overflow: hidden;
}
.blurb-container .info-container .avatar-container img {
width: 100%;
min-width: 100%;
min-height: 100%;
}
.blurb-container .info-container .username-container {
display: block;
margin: 0 0.5rem;
font-weight: bold;
align-content: center;
}
.blurb-container .info-container .datetime-container {
display: block;
margin: 0 0.5rem;
align-content: center;
}
.blurb-container .info-container .datetime-container .long {
font-size: x-small;
text-transform: uppercase;
visibility: hidden;
display: none;
}
.blurb-container .info-container .datetime-container .short {
font-size: xx-small;
}
.blurb-container .subject-container {
grid-area: subject;
padding-left: 5rem;
margin-top: -2.5rem;
font-size: larger;
font-weight: bold;
visibility: hidden;
display: none;
}
.blurb-container .content-container {
grid-area: content;
padding-left: 5rem;
margin-top: 2rem;
padding-left: 1rem;
margin: 1rem 0;
}
.blurb-container .new-blurb-container {
grid-area: newblurb;
display: none;
}
.blurb-container .replies-container {
@ -145,10 +140,10 @@
><div class="icon blurb"></div>
<div class="label">Blurbs</div>
</label>
<div class="tab-content blurbs-container">
<!-- #include file="./README.md" -->
<div class="tab-content">
<div id="blurbs-container" class="container">
<!-- #include file="./README.md" -->
<div id="blurbs" class="container">
<div id="blurbs-list"></div>
<script>
const blurbs_list = document.getElementById("blurbs-list");
@ -161,14 +156,8 @@
const blurb_datetime = datetime_to_local(blurb.timestamps.created);
const html_content = `<div class="blurb-container" data-creator_id="${creator.id}" data-blurb_id="${blurb.id}">
<div class="expand-toggle-container">
<label>
<input type="checkbox" name="expanded"/><i class="icon plus"></i><i class="icon minus"></i>
</label>
</div>
<div class="media-preview-container">
<img src="/images/placeholders/${String(blurb_datetime.ms % 10).padStart(2, "0")}.svg" />
${blurb.data?.media?.length ? blurb.data.media.map((url) => `<img src="${url}" />`).join("\n") : ""}
</div>
<div class="info-container">
@ -306,8 +295,8 @@
document.addEventListener("topic_changed", load_active_topic_for_blurbs);
document.addEventListener("user_logged_in", load_active_topic_for_blurbs);
</script>
</div>
<!-- #include file="./new_blurb.html" -->
<!-- #include file="./new_blurb.html" -->
</div>
</div>
</div>