mirror of
https://github.com/discourse/discourse.git
synced 2025-02-16 18:24:52 -06:00
Extracted/DRYed user-stream-item component CSS from user.css into own files
- Renamed 'stream-item' component to 'user-stream-item' - Replaced generic 'item' class with clearer 'user-stream-item' class - Retained 'item' class for backward compatibility, marked as 'DEPRECATED' - Extracted CSS pertaining 'user-stream-item' component to component CSS files - Removed unnecessary duplication from 'user-stream-item' CSS - Removed unnecessary nesting from 'user-stream-item' CSS
This commit is contained in:
minusfive
Robin Ward
parent
133ab03c01
commit
cdcc5d6174
@ -2,7 +2,14 @@ import { propertyEqual } from 'discourse/lib/computed';
|
||||
import { actionDescription } from "discourse/widgets/post-small-action";
|
||||
|
||||
export default Ember.Component.extend({
|
||||
classNameBindings: [":item", "item.hidden", "item.deleted:deleted", "moderatorAction"],
|
||||
classNameBindings: [
|
||||
":user-stream-item",
|
||||
":item", // DEPRECATED: 'item' class
|
||||
"item.hidden",
|
||||
"item.deleted:deleted",
|
||||
"moderatorAction"
|
||||
],
|
||||
|
||||
moderatorAction: propertyEqual("item.post_type", "site.post_types.moderator_action"),
|
||||
actionDescription: actionDescription("item.action_code", "item.created_at", "item.username"),
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
<div class='item'>
|
||||
<div class="user-stream-item item">{{!-- DEPRECATED: 'item' class --}}
|
||||
<div class='clearfix info'>
|
||||
<a href="{{unbound post.user.userUrl}}" data-user-card="{{unbound post.user.username}}" class='avatar-link'><div class='avatar-wrapper'>{{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}</div></a>
|
||||
<span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<p class='excerpt' data-topic-id="{{item.topic_id}}" data-post-id="{{item.post_id}}" data-user-id="{{item.user_id}}">{{{item.excerpt}}}</p>
|
||||
|
||||
{{#each item.children as |child|}}
|
||||
<div class='child-actions'>
|
||||
<div class='user-stream-item-actions child-actions'>{{!-- DEPRECATED: 'child-actions' class --}}
|
||||
{{d-icon child.icon class="icon"}}
|
||||
{{#each child.items as |grandChild|}}
|
||||
{{#if grandChild.removableBookmark}}
|
||||
@ -1,3 +1,3 @@
|
||||
{{#each stream.content as |item|}}
|
||||
{{stream-item item=item removeBookmark=(action "removeBookmark")}}
|
||||
{{user-stream-item item=item removeBookmark=(action "removeBookmark")}}
|
||||
{{/each}}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{#load-more selector=".user-stream .item" action=(action "loadMore")}}
|
||||
{{#load-more selector=".user-stream .user-stream-item" action=(action "loadMore")}}
|
||||
<div class='user-stream'>
|
||||
{{#each model as |post|}}
|
||||
{{group-post post=post}}
|
||||
|
||||
@ -1,25 +1,4 @@
|
||||
// styling of bottom section
|
||||
.user-stream .child-actions {
|
||||
margin-top: 8px;
|
||||
.avatar-link {
|
||||
float: none;
|
||||
}
|
||||
.fa {
|
||||
width: 15px;
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
}
|
||||
.avatar-link {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
}
|
||||
.user-stream .item .expand-item {
|
||||
float: right;
|
||||
margin-right: 0.5em;
|
||||
color: lighten($primary, 40%);
|
||||
}
|
||||
|
||||
// Common styles for "/user" section
|
||||
.user-main {
|
||||
.d-icon-heart {
|
||||
color: $love !important;
|
||||
@ -190,10 +169,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-right .list-actions {
|
||||
margin-bottom: 10px;
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
.user-right {
|
||||
.list-actions {
|
||||
margin-bottom: 10px;
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
145
app/assets/stylesheets/common/components/user-stream-item.scss
Normal file
145
app/assets/stylesheets/common/components/user-stream-item.scss
Normal file
@ -0,0 +1,145 @@
|
||||
// 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-color: $secondary;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
|
||||
&.moderator-action {
|
||||
background-color: $highlight-medium;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
opacity: 0.8;
|
||||
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: block;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.type,
|
||||
span.name {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.time,
|
||||
.delete-info {
|
||||
display: block;
|
||||
float: right;
|
||||
color: lighten($primary, 40%);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.delete-info i {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.expand-item {
|
||||
float: right;
|
||||
margin-right: 0.5em;
|
||||
color: lighten($primary, 40%);
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1em;
|
||||
max-width: 400px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.edit-reason {
|
||||
background-color: dark-light-choose(scale-color($highlight, $lightness: 25%), scale-color($highlight, $lightness: -50%));
|
||||
padding: 3px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.remove-bookmark {
|
||||
float: right;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// common/base/header.scss
|
||||
.fa, .icon {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
font-size: 1.714em;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin: 5px 0;
|
||||
font-size: 0.929em;
|
||||
word-wrap: break-word;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.group-member-info {
|
||||
.name {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-stream .child-actions, // DEPRECATED: '.user-stream .child-actions' selector
|
||||
.user-stream-item-actions {
|
||||
margin-top: 8px;
|
||||
|
||||
.avatar-link {
|
||||
float: none;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.fa {
|
||||
width: 15px;
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,9 @@
|
||||
@import "desktop/menu-panel";
|
||||
@import "desktop/group";
|
||||
|
||||
// Import all component-specific files
|
||||
@import "desktop/components/*";
|
||||
|
||||
/* These files doesn't actually exist, they are injected by Stylesheet::Compiler. */
|
||||
|
||||
@import "plugins";
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
// Desktop styles for "user-stream-item" component
|
||||
.user-stream {
|
||||
|
||||
// DEPRECATION:
|
||||
// The ".item" class should be eventually 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 {
|
||||
padding: 20px 8px 15px 8px;
|
||||
}
|
||||
|
||||
.time,
|
||||
.delete-info {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
&.unread {
|
||||
background-color: $tertiary-low;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
// styles that apply to the user page
|
||||
// Desktop styles for "/user" section
|
||||
.groups {
|
||||
.group-link {
|
||||
color: $tertiary;
|
||||
@ -442,107 +442,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-stream {
|
||||
.excerpt {
|
||||
margin: 5px 0;
|
||||
font-size: 0.929em;
|
||||
word-wrap: break-word;
|
||||
color: $primary;
|
||||
}
|
||||
.item.moderator-action {
|
||||
background-color: $highlight-medium;
|
||||
}
|
||||
.item.deleted {
|
||||
opacity: 0.8;
|
||||
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
|
||||
}
|
||||
.item.hidden {
|
||||
display: block;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.item {
|
||||
padding: 20px 8px 15px 8px;
|
||||
background-color: $secondary;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
}
|
||||
.type {
|
||||
color: $primary;
|
||||
}
|
||||
span.name {
|
||||
color: $primary;
|
||||
}
|
||||
.time, .delete-info {
|
||||
display: block;
|
||||
float: right;
|
||||
color: lighten($primary, 40%);
|
||||
margin-right: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.delete-info i {
|
||||
font-size: 1em;
|
||||
}
|
||||
.avatar-link {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
.name {
|
||||
font-size: 1em;
|
||||
max-width: 400px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.edit-reason {
|
||||
background-color: dark-light-choose(scale-color($highlight, $lightness: 25%), scale-color($highlight, $lightness: -50%));
|
||||
padding: 3px 5px 5px 5px;
|
||||
}
|
||||
.remove-bookmark {
|
||||
float: right;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.notification {
|
||||
&.unread {
|
||||
background-color: $tertiary-low;
|
||||
}
|
||||
|
||||
li { display: inline-block; }
|
||||
p {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
float: none;
|
||||
}
|
||||
// common/base/header.scss
|
||||
.fa, .icon {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
font-size: 1.714em;
|
||||
}
|
||||
}
|
||||
.group-member-info {
|
||||
.name {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.staff-counters {
|
||||
text-align: left;
|
||||
background: $primary;
|
||||
@ -638,6 +537,13 @@
|
||||
.user-right {
|
||||
display: table-cell;
|
||||
|
||||
&,
|
||||
> .user-stream {
|
||||
> .alert:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-notification-menu {
|
||||
float: right;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@ -24,6 +24,9 @@
|
||||
@import "mobile/ring";
|
||||
@import "mobile/group";
|
||||
|
||||
// Import all component-specific files
|
||||
@import "mobile/components/*";
|
||||
|
||||
/* These files doesn't actually exist, they are injected by Stylesheet::Compiler. */
|
||||
|
||||
@import "plugins";
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
// Mobile styles for "user-stream-item" component
|
||||
.user-stream {
|
||||
|
||||
// DEPRECATION:
|
||||
// The ".item" class should be eventually 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 {
|
||||
padding: 20px 0 15px 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.notification {
|
||||
&.unread {
|
||||
background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), srgb-scale($tertiary, $secondary, 15%));
|
||||
}
|
||||
}
|
||||
|
||||
.group-member-info {
|
||||
.name {
|
||||
vertical-align: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-statuses {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,12 @@
|
||||
// styles that apply to the user page
|
||||
// Mobile styles for "/user" section
|
||||
.user-right {
|
||||
&,
|
||||
> .user-stream {
|
||||
> .alert:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-preferences {
|
||||
.control-group {
|
||||
@ -378,115 +386,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-stream {
|
||||
padding-top: 20px;
|
||||
|
||||
.excerpt {
|
||||
margin: 5px 0;
|
||||
font-size: 0.929em;
|
||||
word-wrap: break-word;
|
||||
color: $primary;
|
||||
}
|
||||
.item.moderator-action {
|
||||
background-color: $highlight-medium;
|
||||
}
|
||||
.item.deleted {
|
||||
opacity: 0.8;
|
||||
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
|
||||
}
|
||||
.item.hidden {
|
||||
display: block;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.item {
|
||||
padding: 20px 0 15px 0;
|
||||
background-color: $secondary;
|
||||
border-bottom: 1px solid $primary-low;
|
||||
}
|
||||
.type {
|
||||
color: $primary;
|
||||
}
|
||||
span.name {
|
||||
color: $primary;
|
||||
}
|
||||
.time, .delete-info {
|
||||
display: block;
|
||||
float: right;
|
||||
color: lighten($primary, 40%);
|
||||
font-size: 11px;
|
||||
}
|
||||
.delete-info i {
|
||||
font-size: 1em;
|
||||
}
|
||||
.avatar-link {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
.name {
|
||||
font-size: 1em;
|
||||
max-width: 400px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.edit-reason {
|
||||
background-color: scale-color($highlight, $lightness: 25%);
|
||||
padding: 3px 5px 5px 5px;
|
||||
}
|
||||
.remove-bookmark {
|
||||
float: right;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.notification {
|
||||
&.unread {
|
||||
background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), srgb-scale($tertiary, $secondary, 15%));
|
||||
}
|
||||
|
||||
li { display: inline-block; }
|
||||
p {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
float: none;
|
||||
}
|
||||
// common/base/header.scss
|
||||
.fa, .icon {
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
font-size: 1.714em;
|
||||
}
|
||||
}
|
||||
.group-member-info {
|
||||
.name {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
vertical-align: inherit;
|
||||
}
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
|
||||
}
|
||||
}
|
||||
.topic-statuses {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.staff-counters {
|
||||
text-align: left;
|
||||
background: $primary;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user