skorotkiewicz/yosup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made shared events more obvious.

Browse source
This commit is contained in:
Thomas Mathews 2023-01-25 14:13:53 -08:00
parent c498349c35
commit 84a6cf6c96
3 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
css/styles.css
View file

@ -231,8 +231,6 @@ button.nav > img.icon {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.event { .event {
display: flex;
flex-direction: row;
padding: 15px; padding: 15px;
transition: background-color 0.2s linear; transition: background-color 0.2s linear;
} }
@ -328,7 +326,12 @@ button.nav > img.icon {
border-top: 1px solid var(--clrBorder); border-top: 1px solid var(--clrBorder);
} }
.timestamp, .replying-to, .shared-by { .shared-by {
font-size: var(--fsReduced);
color: var(--clrTextLight);
margin-bottom: 15px;
}
.timestamp, .replying-to {
font-size: var(--fsSmall); font-size: var(--fsSmall);
color: var(--clrTextLight); color: var(--clrTextLight);
} }
@ -586,6 +589,7 @@ code {
} }
.event.dm { .event.dm {
padding-bottom: 0; padding-bottom: 0;
display: flex;
} }
.event.dm:hover { .event.dm:hover {
background: transparent; background: transparent;

6
css/utils.css
View file

@ -1,3 +1,6 @@
.flex {
display: flex;
}
.flex-fill { .flex-fill {
flex: auto; flex: auto;
} }
@ -80,9 +83,6 @@ img.icon.small {
border-radius: 12px; border-radius: 12px;
color: var(--clrTextEvMsg); color: var(--clrTextEvMsg);
} }
.flex {
display: flex;
}
/* Icon */ /* Icon */

7
js/ui/render.js
View file

@ -67,6 +67,8 @@ function render_event(model, ev, opts={}) {
if (!opts.is_composing) if (!opts.is_composing)
classes += " bottom-border"; classes += " bottom-border";
return html`<div id="ev${ev.id}" class="${classes}"> return html`<div id="ev${ev.id}" class="${classes}">
$${render_shared_by(ev, opts)}
<div class="flex">
<div class="userpic"> <div class="userpic">
$${render_profile_img(profile)}</div> $${render_profile_img(profile)}</div>
<div class="event-content"> <div class="event-content">
@ -78,6 +80,7 @@ function render_event(model, ev, opts={}) {
$${render_event_body(model, ev, opts)} $${render_event_body(model, ev, opts)}
</div> </div>
</div> </div>
</div>
</div>` </div>`
} }
@ -116,6 +119,7 @@ function render_event_nointeract(model, ev, opts={}) {
const profile = model_get_profile(model, ev.pubkey); const profile = model_get_profile(model, ev.pubkey);
const delta = fmt_since_str(new Date().getTime(), ev.created_at*1000) const delta = fmt_since_str(new Date().getTime(), ev.created_at*1000)
return html`<div class="event border-bottom"> return html`<div class="event border-bottom">
<div class="flex">
<div class="userpic"> <div class="userpic">
$${render_profile_img(profile)} $${render_profile_img(profile)}
</div> </div>
@ -128,6 +132,7 @@ function render_event_nointeract(model, ev, opts={}) {
$${render_event_body(model, ev, opts)} $${render_event_body(model, ev, opts)}
</div> </div>
</div> </div>
</div>
</div>` </div>`
} }
@ -143,7 +148,7 @@ function render_event_body(model, ev, opts) {
show_media = model.contacts.friends.has(ev.pubkey); show_media = model.contacts.friends.has(ev.pubkey);
} }
let str = "<div>"; let str = "<div>";
str += shared ? render_shared_by(ev, opts) : render_replying_to(model, ev); str += render_replying_to(model, ev);
str += `</div><p> str += `</div><p>
${format_content(model, ev, show_media)} ${format_content(model, ev, show_media)}
</p>`; </p>`;