mirror of
https://github.com/discourse/discourse.git
synced 2024-12-04 04:06:28 +08:00
cfd72fa65c
On mobile, when viewing the My Threads area, each thread will show: - The avatar of the last responder in the thread, overlaid with the chat thread symbol to visually distinguish this area from DMs. - Either the thread title, where applicable, or the first message of the thread, truncated to fit on one line. - The channel where the thread originated. - The last message sent in the thread, truncated to fit on one line. - When the last message was sent in the thread. --------- Co-authored-by: David Battersby <info@davidbattersby.com>
68 lines
1.4 KiB
SCSS
68 lines
1.4 KiB
SCSS
.c-user-thread {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"avatar category timestamp"
|
|
"avatar title indicator"
|
|
"avatar excerpt excerpt";
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-column-gap: 0.75em;
|
|
margin-inline: 0;
|
|
padding: 0.5rem 1.5rem;
|
|
|
|
.chat-channel-icon {
|
|
grid-area: avatar;
|
|
position: relative;
|
|
|
|
.avatar {
|
|
margin-top: 4px;
|
|
width: var(--channel-list-avatar-size);
|
|
height: var(--channel-list-avatar-size);
|
|
}
|
|
}
|
|
|
|
.avatar-flair.--threads {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -3px;
|
|
background: var(--primary-low);
|
|
border-radius: 50%;
|
|
padding: 0.2em;
|
|
line-height: var(--line-height-small);
|
|
border: 2px solid var(--secondary-very-high);
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.chat__thread-title-container {
|
|
@include ellipsis;
|
|
grid-area: title;
|
|
.chat__thread-title {
|
|
&__name {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-title {
|
|
grid-area: category;
|
|
}
|
|
|
|
.chat-message-thread-indicator__last-reply-timestamp {
|
|
grid-area: timestamp;
|
|
font-size: var(--font-down-2-rem);
|
|
align-self: center;
|
|
}
|
|
|
|
.c-user-thread__excerpt {
|
|
@include ellipsis;
|
|
grid-area: excerpt;
|
|
display: flex;
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.c-user-thread__excerpt-text {
|
|
margin-left: 0.25em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|