mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 23:19:55 +08:00
7b76d25946
Recently we introduced a new `PostList` component (d886c55f63). In this update, we make broader adoption of this component. In particular, these areas include using the new component in the user activity stream pages, user's deleted posts, and pending posts page. This update also takes the existing `posts` route and adds a barebones front-end for it to view posts all in one page.
---------
Co-authored-by: David Taylor <david@taylorhq.com>
197 lines
3.4 KiB
SCSS
197 lines
3.4 KiB
SCSS
// Common styles for "user-stream-item" component
|
|
.user-stream {
|
|
// DEPRECATED:
|
|
// The ".item" class should be removed because it's too generic.
|
|
// Once ".item" has been removed, ".user-stream-item" can replace
|
|
// ".user-stream" as the top-level selector on this file as all other
|
|
// selectors below are its children
|
|
.item,
|
|
.user-stream-item {
|
|
background: var(--d-content-background, var(--secondary));
|
|
border-bottom: 1px solid var(--primary-low);
|
|
padding: 1em 0.53em;
|
|
list-style: none;
|
|
|
|
&.moderator-action {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
|
|
&.deleted {
|
|
background-color: var(--danger-low-mid);
|
|
}
|
|
|
|
&.hidden {
|
|
display: block;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.user-stream-item__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.user-stream-item__details {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
|
|
.badge-category__wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.stream-topic-title {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.user-stream-item__metadata {
|
|
align-items: end;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.type,
|
|
span.name {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.relative-date,
|
|
.delete-info,
|
|
.draft-type {
|
|
line-height: var(--line-height-small);
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-2);
|
|
padding-top: 6px;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.delete-info {
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
.d-icon {
|
|
font-size: var(--font-0);
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.avatar {
|
|
margin-right: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.user-notifications-list {
|
|
padding-top: 0;
|
|
|
|
li.notification {
|
|
padding: 0.25em 0;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
a {
|
|
align-items: center;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.relative-date {
|
|
margin-left: auto;
|
|
padding-top: 0;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
&:not(.show-avatars) {
|
|
li.notification {
|
|
padding: 0.75em 0;
|
|
|
|
.d-icon {
|
|
padding-top: 0;
|
|
font-size: var(--font-up-2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.expand-item,
|
|
.collapse-item {
|
|
margin-right: 0.5em;
|
|
margin-left: 0.25em;
|
|
line-height: var(--line-height-small);
|
|
padding-top: 3px;
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.avatar-link {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.name {
|
|
font-size: var(--font-0);
|
|
max-width: 400px;
|
|
@include ellipsis;
|
|
}
|
|
|
|
.edit-reason {
|
|
background-color: var(--highlight-bg);
|
|
padding: 3px 5px 5px 5px;
|
|
}
|
|
|
|
.remove-draft {
|
|
float: right;
|
|
}
|
|
|
|
.excerpt {
|
|
margin: 1em 0 0 0;
|
|
font-size: var(--font-0);
|
|
word-wrap: break-word;
|
|
color: var(--primary);
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
|
|
details.disabled {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.emoji.only-emoji {
|
|
// oversized emoji break excerpt layout
|
|
// so we match inline emoji size
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.group-member-info {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.user-stream .child-actions, /* DEPRECATED: '.user-stream .child-actions' selector*/
|
|
.user-stream-item-actions,
|
|
.user-stream-item-draft-actions {
|
|
margin-top: 8px;
|
|
|
|
.avatar-link {
|
|
float: none;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.fa {
|
|
width: 15px;
|
|
display: inline-block;
|
|
color: var(--primary);
|
|
|
|
&.d-icon-heart {
|
|
color: var(--love);
|
|
}
|
|
|
|
&.d-icon-trash-can {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
}
|