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

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%; width: 100%;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
display: flex; display: grid;
gap: .5rem;
margin-top: .25rem; margin-top: .25rem;
grid-template:
"avatar gap sender" auto
"avatar gap content" auto
/ 40px .25rem 1fr;
> div.sender-avatar { > div.sender-avatar {
grid-area: avatar;
width: 40px; width: 40px;
height: 40px; height: 40px;
padding-top: 2px; margin-top: 2px;
> img { > img {
width: 100%; width: 100%;
@ -19,22 +24,24 @@ div.timeline-event {
} }
} }
> div.sender-and-content { > div.event-sender-and-time {
flex: 1; grid-area: sender;
> div.event-sender-and-time { display: flex;
display: flex; align-items: center;
align-items: center; gap: .5rem;
gap: .5rem;
span.event-sender { span.event-sender {
font-weight: bold; font-weight: bold;
}
span.event-time {
font-size: .8rem;
}
} }
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"> <div className="sender-avatar">
<img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" /> <img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
</div> </div>
<div className="sender-and-content"> <div className="event-sender-and-time">
<div className="event-sender-and-time"> <span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span> <span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span> </div>
</div> <div className="event-content">
<div className="event-content"> <BodyType room={room} event={evt}/>
<BodyType room={room} event={evt}/>
</div>
</div> </div>
</div> </div>
} }