n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: align messages to bottom when the screen isn't full

Browse source
This commit is contained in:
Tulir Asokan 2024-10-10 01:05:11 +03:00
parent 8d669902d9
commit dd6c7b4822
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/ui/timeline/TimelineView.css
View file

@ -1,4 +1,8 @@
div.timeline-view { div.timeline-view {
padding: 1rem; padding: 1rem;
overflow-y: scroll; overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: space-between;
} }

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

@ -62,11 +62,15 @@ const TimelineView = ({ room }: TimelineViewProps) => {
}, [timeline]) }, [timeline])
return <div className="timeline-view" onScroll={handleScroll} ref={timelineViewRef}> return <div className="timeline-view" onScroll={handleScroll} ref={timelineViewRef}>
<button onClick={loadHistory}>Load history</button> <div className="timeline-beginning">
{timeline.map(entry => <TimelineEvent <button onClick={loadHistory}>Load history</button>
key={entry.event_rowid} room={room} eventRowID={entry.event_rowid} </div>
/>)} <div className="timeline-list">
<div ref={bottomRef}/> {timeline.map(entry => <TimelineEvent
key={entry.event_rowid} room={room} eventRowID={entry.event_rowid}
/>)}
<div className="timeline-bottom-ref" ref={bottomRef}/>
</div>
</div> </div>
} }