Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-19 18:13:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

web/timeline: use grid instead of flex for individual events

Browse source
This commit is contained in:
Tulir Asokan 2024-10-10 23:39:05 +03:00
parent e6f0fc593c
commit 2018952151
2 changed files with 29 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
web/src/ui/timeline/TimelineEvent.css
View file

@ -2,14 +2,19 @@ div.timeline-event {
width: 100%;
max-width: 100%;
overflow: hidden;
display: flex;
gap: .5rem;
display: grid;
margin-top: .25rem;
grid-template:
"avatar gap sender" auto
"avatar gap content" auto
/ 40px .25rem 1fr;
> div.sender-avatar {
grid-area: avatar;
width: 40px;
height: 40px;
padding-top: 2px;
margin-top: 2px;
> img {
width: 100%;
@ -19,22 +24,24 @@ div.timeline-event {
}
}
> div.sender-and-content {
flex: 1;
> div.event-sender-and-time {
grid-area: sender;
> div.event-sender-and-time {
display: flex;
align-items: center;
gap: .5rem;
display: flex;
align-items: center;
gap: .5rem;
span.event-sender {
font-weight: bold;
}
span.event-time {
font-size: .8rem;
}
span.event-sender {
font-weight: bold;
}
span.event-time {
font-size: .8rem;
}
}
> div.event-content {
grid-area: content;
}
}

14
web/src/ui/timeline/TimelineEvent.tsx
View file

@ -53,14 +53,12 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
<div className="sender-avatar">
<img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
</div>
<div className="sender-and-content">
<div className="event-sender-and-time">
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
</div>
<div className="event-content">
<BodyType room={room} event={evt}/>
</div>
<div className="event-sender-and-time">
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
</div>
<div className="event-content">
<BodyType room={room} event={evt}/>
</div>
</div>
}