mirror of
https://github.com/discourse/discourse.git
synced 2026-08-11 02:59:07 +08:00
bd27a6d9bfIn #36331 and #36449, we fixed the scrolling problem of chat-settings/member list by enabling the scroll of the page body. While a recent commit may conflicts with the commit before, making the container unscrollable again. This time we take another approach, since the body element shouldn't be scrolled, the scroll item is now changed to `#main-outlet .c-routes.--channel-info`, and the height of it is set using `chat-height`, such that the container is scrollable again. Also, the legacy code of `overflow: scroll;` in the body is changed back to `hidden`, since it now causes a flicker when scrolling the body. Thanks for @chapoi for style suggestions. Before: https://github.com/user-attachments/assets/98376293-ea25-456a-ab15-d2aa8b72bba6 (The flicker can be see from this attach, though on real iOS/iPadOS devices this is subtle) After: https://github.com/user-attachments/assets/5b2cb60a-ab4e-428d-a6e7-7644c89ba2a3 --- Also, did some fixes to avoid the member list from y-axis overflowing caused by long usernames. Before: <img width="427" height="93" alt="image" src="https://github.com/user-attachments/assets/b670de63-ed41-47ec-b5d6-3abef9fcacb2" /> After: <img width="408" height="78" alt="image" src="https://github.com/user-attachments/assets/c3c4dfac-93e1-48d2-9904-f03e1853ec67" /> --- One more thing: When using the `@mixin chat-height`, the default value is `0` rather than `0px`, which causes invalid expression when directly used, this is also fixed here. Before: <img width="462" height="167" alt="image" src="https://github.com/user-attachments/assets/4a40dd3f-95b3-4c0e-ae37-f3d0425661b7" /> After: <img width="496" height="94" alt="image" src="https://github.com/user-attachments/assets/a7a98dfd-0f8d-4ea1-a897-33b3b73fe9e9" />
91 lines
1.7 KiB
SCSS
Vendored
91 lines
1.7 KiB
SCSS
Vendored
.c-channel-members {
|
|
max-width: 500px;
|
|
width: 100%;
|
|
|
|
&__filter {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
&__list {
|
|
display: flex;
|
|
margin: 0;
|
|
flex-direction: column;
|
|
|
|
&-item {
|
|
display: flex;
|
|
list-style: none;
|
|
border-bottom: 1px solid var(--content-border-color);
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
|
|
.-user-info {
|
|
width: 100%;
|
|
border: 0 none;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.avatar {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--primary-very-low);
|
|
}
|
|
|
|
&.-member {
|
|
.chat-user-avatar {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.chat-user-display-name {
|
|
@include ellipsis;
|
|
|
|
span:not(.-first) {
|
|
color: var(--primary-high);
|
|
font-size: var(--font-down-1);
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.fk-d-tooltip__trigger-container {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.user-status-message {
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-2);
|
|
margin-left: 0.5rem;
|
|
|
|
.emoji {
|
|
height: var(--font-0);
|
|
width: var(--font-0);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
&.-add-member {
|
|
color: var(--tertiary);
|
|
cursor: pointer;
|
|
|
|
.d-icon {
|
|
background: var(--primary-low);
|
|
color: var(--tertiary);
|
|
padding: 5px;
|
|
border-radius: 50%;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
