me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: add a little circle and background around the active user's reaccs

Browse Source
This commit is contained in:
Alessio 2024-11-09 18:16:01 -08:00
parent 97888e2b23
commit 5b8d110474
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
internal/webserver/static/styles.css
View File

@ -1429,13 +1429,24 @@ main {
} }
.dm-message__reactions { .dm-message__reactions {
display: flex; display: flex;
padding: 0 4em; font-size: 1.1em;
padding: 0 3.5em;
cursor: default; cursor: default;
.our-message & { .our-message & {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
} }
.dm-message__reacc {
padding: 0.1em 0.2em;
&.dm-message__reacc--ours {
border-radius: 50%;
text-shadow: 0 0 3px black;
outline: 1px solid var(--color-twitter-blue);
background-color: var(--color-twitter-blue-extra-light);
}
}
&.our-message { &.our-message {
align-items: flex-end; align-items: flex-end;

5
internal/webserver/tpl/tweet_page_includes/chat_view.tpl
View File

@ -92,7 +92,10 @@
<div class="dm-message__reactions"> <div class="dm-message__reactions">
{{range .Reactions}} {{range .Reactions}}
{{$sender := (user .SenderID)}} {{$sender := (user .SenderID)}}
<span title="{{$sender.DisplayName}} (@{{$sender.Handle}})">{{.Emoji}}</span> <span
class="dm-message__reacc {{if (eq $sender.ID (active_user).ID)}} dm-message__reacc--ours{{end}}"
title="{{$sender.DisplayName}} (@{{$sender.Handle}})"
>{{.Emoji}}</span>
{{end}} {{end}}
</div> </div>
<div class="sent-at"> <div class="sent-at">