mirror of
https://github.com/tulir/gomuks.git
synced 2025-04-20 18:43:41 -05:00
web/roomview: render room topic in header
Signed-off-by: Sumner Evans <sumner.evans@automattic.com>
This commit is contained in:
parent
838a9ce106
commit
455c82a2c4
3 changed files with 27 additions and 8 deletions
|
@ -5,7 +5,7 @@ div.room-view {
|
|||
display: grid;
|
||||
outline: none;
|
||||
grid-template:
|
||||
"header" 3rem
|
||||
"header" 3.5rem
|
||||
"messageview" 1fr
|
||||
"autocomplete" 0
|
||||
"input" auto
|
||||
|
|
|
@ -6,12 +6,26 @@ div.room-header {
|
|||
border-bottom: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
|
||||
> div.room-name {
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-wrap: nowrap;
|
||||
> div.room-name-and-topic {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
> div.room-name, > div.room-topic {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
> div.room-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> div.room-topic {
|
||||
font-size: 0.85rem;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
> button.back {
|
||||
|
|
|
@ -52,8 +52,13 @@ const RoomViewHeader = ({ room }: RoomViewHeaderProps) => {
|
|||
onClick={use(LightboxContext)}
|
||||
alt=""
|
||||
/>
|
||||
<div className="room-name">
|
||||
{roomMeta.name ?? roomMeta.room_id}
|
||||
<div className="room-name-and-topic">
|
||||
<div className="room-name">
|
||||
{roomMeta.name ?? roomMeta.room_id}
|
||||
</div>
|
||||
{roomMeta.topic && <div className="room-topic">
|
||||
{roomMeta.topic}
|
||||
</div>}
|
||||
</div>
|
||||
<div className="right-buttons">
|
||||
<button
|
||||
|
|
Loading…
Add table
Reference in a new issue