Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

REFACTOR: user and group card CSS / template refactor (#6812) 

* Check if user is a member of a group or if the group has members 
this is used in the template to conditionally show the relevant markup

* Check if user is suspended or if they have a bio
this is used in the template to conditionally show the relevant markup

* Simplify group-card template

* Simplify user-card template

* Refactor user and group cards CSS

* Check if user is new or if user is staff

* Style fixes

- round avatar margin 
- use a more standard margin for buttons
- adds lighter font color for new users
- makes some suspension text bold (used to be <b> tags in template)
- ensures images in group bio are responsive

* user card template fixes

- adds quotes to link href attributes
- wraps some strings in tags for more consistent styling

* group card fixes

- adds quotes to link href attributes
- fixes membership button login action
- wraps some strings with tags for consistent styling

* closure action fixes

* closure action fix

* uses core variables instead of new colors and removes unused styles

* Uses better property names
This commit is contained in:
Joe 2019-03-20 17:45:49 +08:00 committed by Régis Hanol
parent 8d1709f6b9
commit 6f1badc7c9
5 changed files with 413 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/components/group-card-contents.js.es6
View File

@ -23,6 +23,11 @@ export default Ember.Component.extend(CardContentsBase, CleansUp, {
viewingTopic: Ember.computed.match("currentPath", /^topic\./), viewingTopic: Ember.computed.match("currentPath", /^topic\./),
showMoreMembers: Ember.computed.gt("moreMembersCount", 0), showMoreMembers: Ember.computed.gt("moreMembersCount", 0),
hasMembersOrIsMember: Ember.computed.or(
"group.members",
"group.is_group_owner_display",
"group.is_group_user"
),
group: null, group: null,

10
app/assets/javascripts/discourse/components/user-card-contents.js.es6
View File

@ -46,6 +46,10 @@ export default Ember.Component.extend(
"user.location", "user.location",
"user.website_name" "user.website_name"
), ),
isSuspendedOrHasBio: Ember.computed.or(
"user.suspend_reason",
"user.bio_cooked"
),
showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"), showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"),
user: null, user: null,
@ -53,6 +57,12 @@ export default Ember.Component.extend(
// If inside a topic // If inside a topic
topicPostCount: null, topicPostCount: null,
@computed("user.staff")
staff: isStaff => (isStaff ? "staff" : ""),
@computed("user.trust_level")
newUser: trustLevel => (trustLevel === 0 ? "new-user" : ""),
@computed("user.name") @computed("user.name")
nameFirst(name) { nameFirst(name) {
return ( return (

126
app/assets/javascripts/discourse/templates/components/group-card-contents.hbs
View File

@ -1,72 +1,82 @@
{{#if visible}} {{#if visible}}
<div class="card-content"> <div class="card-content">
<div class="group-card-avatar">
<a href={{groupPath}} {{action "showGroup" group}} class="card-huge-avatar"> <div class="card-row first-row">
{{avatar-flair <div class="group-card-avatar">
<a href="{{groupPath}}" {{action "showGroup" group}} class="card-huge-avatar">
{{avatar-flair
flairURL=group.flair_url flairURL=group.flair_url
flairBgColor=group.flair_bg_color flairBgColor=group.flair_bg_color
flairColor=group.flair_color flairColor=group.flair_color
groupName=group.name}} groupName=group.name}}
</a> </a>
</div> </div>
<div class="names">
<div class="names"> <span>
<span> <h1 class="{{group.name}}">
<h1 class="{{ group.name }}"> <a href="{{groupPath}}" {{action "showGroup"}}>{{group.name}}</a>
<a href={{groupPath}} {{action "showGroup" group}}>{{ group.name }}</a> </h1>
</h1> {{#if group.full_name}}
{{#if group.full_name}} <h2 class='full-name'>{{group.full_name}}</h2>
<h2 class='full-name'>{{group.full_name}}</h2> {{else}}
{{else}} <h2 class='username'>{{group.name}}</h2>
<h2 class='username'>{{group.name}}</h2> {{/if}}
{{/if}} </span>
</span> </div>
</div> <div class="usercard-controls group-details-button">
{{group-membership-button
<div class="usercard-controls group-details-button"> model=group
{{group-membership-button showLogin=(route-action "showLogin")}}
model=group {{#if group.messageable}}
showLogin=(route-action "showLogin")}} {{d-button
{{#if group.messageable}}
{{d-button
action=(action "messageGroup") action=(action "messageGroup")
class="btn-primary group-message-button inline" class="btn-primary group-message-button inline"
icon="envelope" icon="envelope"
label="groups.message"}} label="groups.message"}}
{{/if}}
</div>
{{#if group.bio_cooked}}<div class='bio'>{{{group.bio_cooked}}}</div>{{/if}}
<div class="metadata">
<h3>
<span class="desc">
{{i18n 'groups.user_count'}}
</span>
{{ group.user_count }}
</h3>
<h3>
{{#if group.is_group_owner_display}}
{{i18n "groups.index.is_group_owner"}}
{{else if group.is_group_user}}
{{i18n "groups.index.is_group_user"}}
{{/if}} {{/if}}
</h3> </div>
</div>
{{#if group.members}}
<div class="members metadata">
<span>
{{#each group.members as |user|}}
<a href={{user.path}} {{action "showUser" user}} class="card-tiny-avatar">{{bound-avatar user "tiny"}}</a>
{{/each}}
{{#if showMoreMembers}}
<a href={{groupPath}} {{action "showGroup" group}}>+{{ moreMembersCount }} {{i18n "more"}}</a>
{{/if}}
</span>
</div> </div>
{{#if group.bio_cooked}}
<div class="card-row second-row">
<div class='bio'>{{{group.bio_cooked}}}</div>
</div>
{{/if}} {{/if}}
{{#if hasMembersOrIsMember}}
<div class="card-row third-row">
<div class="metadata">
<h3>
<span class="desc">
{{i18n 'groups.user_count'}}
</span>
{{group.user_count}}
</h3>
<h3>
{{#if group.is_group_owner_display}}
{{i18n "groups.index.is_group_owner"}}
{{else if group.is_group_user}}
{{i18n "groups.index.is_group_user"}}
{{/if}}
</h3>
</div>
</div>
{{/if}}
{{#if group.members}}
<div class="card-row fourth-row">
<div class="members metadata">
{{#each group.members as |user|}}
<a href="{{user.path}}" {{action "showUser" user}} class="card-tiny-avatar">{{bound-avatar user "tiny"}}</a>
{{/each}}
{{#if showMoreMembers}}
<a href="{{groupPath}}" {{action "showGroup" group}} class="more-members-link"><span
class="more-members-count">+{{moreMembersCount}}
{{i18n "more"}}</span></a>
{{/if}}
</div>
</div>
{{/if}}
</div> </div>
{{/if}} {{/if}}

281
app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
View File

@ -1,182 +1,201 @@
{{#if visible}} {{#if visible}}
<div class="card-content"> <div class="card-content">
<div class="user-card-avatar">
<a href={{user.path}} {{action "showUser"}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a> <div class="card-row first-row">
{{#if user.primary_group_name}} <div class="user-card-avatar">
{{avatar-flair <a href="{{user.path}}" {{action "showUser"}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a>
{{#if user.primary_group_name}}
{{avatar-flair
flairURL=user.primary_group_flair_url flairURL=user.primary_group_flair_url
flairBgColor=user.primary_group_flair_bg_color flairBgColor=user.primary_group_flair_bg_color
flairColor=user.primary_group_flair_color flairColor=user.primary_group_flair_color
groupName=user.primary_group_name}} groupName=user.primary_group_name}}
{{/if}} {{/if}}
{{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}} {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}}
</div> </div>
<div class="names">
<div class="names"> <span>
<span> <h1 class="{{staff}} {{newUser}} {{if nameFirst "full-name" "username"}}">
<h1 class="{{staff}} {{new_user}} {{if nameFirst "full-name" "username"}}"> <a href="{{user.path}}" {{action "showUser"}}>{{if nameFirst user.name (format-username username)}}
<a href={{user.path}} {{action "showUser"}}>{{if nameFirst user.name (format-username username)}} {{user-status user currentUser=currentUser}}</a> {{user-status user currentUser=currentUser}}</a>
</h1> </h1>
{{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser")) tagName=''}} {{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser")) tagName=''}}
{{#unless nameFirst}}
{{#unless nameFirst}} {{#if user.name}}
{{#if user.name}} <h2 class='full-name'>{{user.name}}</h2>
<h2 class='full-name'>{{user.name}}</h2> {{/if}}
{{else}}
<h2 class='username'>{{username}}</h2>
{{/unless}}
{{#if user.title}}
<h2>{{user.title}}</h2>
{{/if}} {{/if}}
{{else}} {{#if user.staged}}
<h2 class='username'>{{username}}</h2> <h2 class="staged">{{i18n 'user.staged'}}</h2>
{{/unless}} {{/if}}
{{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}}
{{#if user.title}} </span>
<h2>{{user.title}}</h2> </div>
{{/if}} <ul class="usercard-controls">
{{#if user.can_send_private_message_to_user}}
{{#if user.staged}} <li class='compose-pm'>
<h2 class="staged">{{i18n 'user.staged'}}</h2> {{d-button
{{/if}}
{{plugin-outlet name="user-card-post-names" args=(hash user=user) tagName='div'}}
</span>
</div>
<ul class="usercard-controls">
{{#if user.can_send_private_message_to_user}}
<li class='compose-pm'>
{{d-button
class="btn-primary" class="btn-primary"
action=(route-action "composePrivateMessage" user post) action=(route-action "composePrivateMessage" user post)
icon="envelope" icon="envelope"
label="user.private_message"}} label="user.private_message"}}
</li> </li>
{{/if}} {{/if}}
{{#if showFilter}}
{{#if showFilter}} <li>
<li> {{d-button
{{d-button
class="btn-default" class="btn-default"
action=(action "togglePosts" user) action=(action "togglePosts" user)
icon="filter" icon="filter"
translatedLabel=togglePostsLabel}} translatedLabel=togglePostsLabel}}
</li> </li>
{{/if}} {{/if}}
{{#if hasUserFilters}}
{{#if hasUserFilters}} <li>
<li> {{d-button
{{d-button
action=(action "cancelFilter") action=(action "cancelFilter")
icon="times" icon="times"
label="topic.filters.cancel"}} label="topic.filters.cancel"}}
</li> </li>
{{/if}} {{/if}}
{{#if showDelete}}
{{#if showDelete}} <li>
<li> {{d-button
{{d-button
class="btn-danger" class="btn-danger"
action=(action "deleteUser") action=(action "deleteUser")
actionParam=user actionParam=user
icon="exclamation-triangle" icon="exclamation-triangle"
label="admin.user.delete"}} label="admin.user.delete"}}
</li> </li>
{{/if}} {{/if}}
</ul> </ul>
{{plugin-outlet
{{plugin-outlet
name="user-card-additional-controls" name="user-card-additional-controls"
args=(hash user=user close=(action "close")) args=(hash user=user close=(action "close"))
tagName=""}} tagName=""}}
</div>
{{#if user.suspend_reason}} {{#if isSuspendedOrHasBio}}
<div class='suspended'> <div class="card-row second-row">
{{d-icon "ban"}} {{#if user.suspend_reason}}
<b>{{i18n 'user.suspended_notice' date=user.suspendedTillDate}}</b><br> <div class='suspended'>
<b>{{i18n 'user.suspended_reason'}}</b> {{user.suspend_reason}} <div class="suspension-date">
{{d-icon "ban"}}
{{i18n 'user.suspended_notice' date=user.suspendedTillDate}}
</div>
<div class='suspension-reason'>
<span class="suspension-reason-title">{{i18n 'user.suspended_reason'}}</span>
<span class="suspension-reason-description">{{user.suspend_reason}}</span>
</div>
</div>
{{else}}
{{#if user.bio_cooked}}
<div class='bio'>{{text-overflow class="overflow" text=user.bio_excerpt}}</div>
{{/if}}
{{/if}}
</div> </div>
{{else}}
{{#if user.bio_cooked}}<div class='bio'>{{text-overflow class="overflow" text=user.bio_excerpt}}</div>{{/if}}
{{/if}} {{/if}}
{{#if hasLocationOrWebsite}} {{#if hasLocationOrWebsite}}
<div class="location-and-website"> <div class="card-row third-row">
{{#if user.location}} <div class="location-and-website">
<span class='location'>{{d-icon "map-marker-alt"}} <span>{{user.location}}</span></span> {{#if user.location}}
{{/if}} <span class='location'>{{d-icon "map-marker-alt"}}
<span>{{user.location}}</span></span>
{{#if user.website_name}} {{/if}}
<span class='website-name'> {{#if user.website_name}}
{{d-icon "globe"}} <span class='website-name'>
{{#if linkWebsite}} {{d-icon "globe"}}
<a href={{user.website}} rel={{unless removeNoFollow 'nofollow noopener'}} target="_blank">{{user.website_name}}</a> {{#if linkWebsite}}
{{else}} <a href="{{user.website}}" rel={{unless removeNoFollow 'nofollow noopener'}}
<span title={{user.website}}>{{user.website_name}}</span> target="_blank">{{user.website_name}}</a>
{{/if}} {{else}}
</span> <span title={{user.website}}>{{user.website_name}}</span>
{{/if}} {{/if}}
</span>
{{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}} {{/if}}
{{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}}
</div>
</div> </div>
{{/if}} {{/if}}
{{#if user}} {{#if user}}
{{#unless user.profile_hidden}} <div class="card-row fourth-row">
<div class="metadata"> {{#unless user.profile_hidden}}
{{#if user.last_posted_at}} <div class="metadata">
<h3><span class='desc'>{{i18n 'last_post'}}</span> {{format-date user.last_posted_at leaveAgo="true"}}</h3> {{#if user.last_posted_at}}
{{/if}} <h3><span class='desc'>{{i18n 'last_post'}}</span>
<h3><span class='desc'>{{i18n 'joined'}}</span> {{format-date user.created_at leaveAgo="true"}}</h3> {{format-date user.last_posted_at leaveAgo="true"}}</h3>
<h3 title="{{timeReadTooltip}}">
<span class='desc'>{{i18n 'time_read'}}</span>
{{format-duration user.time_read}}
{{#if showRecentTimeRead}}
<span>({{i18n 'time_read_recently' time_read=recentTimeRead}})</span>
{{/if}} {{/if}}
</h3> <h3><span class='desc'>{{i18n 'joined'}}</span>
{{#if showCheckEmail}} {{format-date user.created_at leaveAgo="true"}}</h3>
<h3 class="email"> <h3 title="{{timeReadTooltip}}">
{{d-icon "far-envelope" title="user.email.title"}} <span class='desc'>{{i18n 'time_read'}}</span>
{{#if user.email}} {{format-duration user.time_read}}
{{user.email}} {{#if showRecentTimeRead}}
{{else}} <span>({{i18n 'time_read_recently' time_read=recentTimeRead}})</span>
{{d-button action=(action "checkEmail") actionParam=user icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
{{/if}} {{/if}}
</h3> </h3>
{{/if}} {{#if showCheckEmail}}
{{plugin-outlet name="user-card-metadata" args=(hash user=user)}} <h3 class="email">
</div> {{d-icon "far-envelope" title="user.email.title"}}
{{/unless}} {{#if user.email}}
{{user.email}}
{{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}} {{else}}
{{d-button
action=(action "checkEmail")
actionParam=user
icon="far-envelope"
label="admin.users.check_email.text"
class="btn-primary"}}
{{/if}}
</h3>
{{/if}}
{{plugin-outlet name="user-card-metadata" args=(hash user=user)}}
</div>
{{/unless}}
{{plugin-outlet name="user-card-after-metadata" args=(hash user=user)}}
</div>
{{/if}} {{/if}}
{{#if publicUserFields}} {{#if publicUserFields}}
<div class="public-user-fields"> <div class="card-row fifth-row">
{{#each publicUserFields as |uf|}} <div class="public-user-fields">
{{#if uf.value}} {{#each publicUserFields as |uf|}}
<div class="public-user-field {{uf.field.dasherized_name}}"> {{#if uf.value}}
<span class="user-field-name">{{uf.field.name}}:</span> <div class="public-user-field {{uf.field.dasherized_name}}">
<span class="user-field-value">{{uf.value}}</span> <span class="user-field-name">{{uf.field.name}}:</span>
</div> <span class="user-field-value">{{uf.value}}</span>
{{/if}} </div>
{{/each}} {{/if}}
{{/each}}
</div>
</div> </div>
{{/if}} {{/if}}
{{plugin-outlet name="user-card-before-badges" args=(hash user=user)}} {{plugin-outlet name="user-card-before-badges" args=(hash user=user)}}
{{#if showBadges}} {{#if showBadges}}
{{#if user.featured_user_badges}} <div class="card-row sixth-row">
<div class="badge-section"> {{#if user.featured_user_badges}}
{{#each user.featured_user_badges as |ub|}} <div class="badge-section">
{{user-badge badge=ub.badge user=user}} {{#each user.featured_user_badges as |ub|}}
{{/each}} {{user-badge badge=ub.badge user=user}}
{{#if showMoreBadges}} {{/each}}
{{#link-to 'user.badges' user class="btn more-user-badges"}} {{#if showMoreBadges}}
{{i18n 'badges.more_badges' count=moreBadgesCount}} {{#link-to 'user.badges' user class="user-badge more-user-badges"}}
{{/link-to}} {{i18n 'badges.more_badges' count=moreBadgesCount}}
{{/link-to}}
{{/if}}
</div>
{{/if}} {{/if}}
</div> </div>
{{/if}}
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}

423
app/assets/stylesheets/desktop/user-card.scss
View File

@ -1,33 +1,26 @@
// styles that apply to the "share" popup when sharing a link to a post or topic $card_width: 580px;
// Colors should mostly be absolute here, it will look the same in dark & light themes $avatar_width: 120px;
$avatar_margin: -50px; // negative margin makes avatars extend above cards
$user_card_primary: $primary;
$user_card_background: $secondary;
// shared styles for user and group cards
#user-card, #user-card,
#group-card { #group-card {
position: absolute; position: absolute;
width: 580px; width: $card_width;
left: -9999px;
top: -9999px;
z-index: z("usercard"); z-index: z("usercard");
box-shadow: shadow("card"); box-shadow: shadow("card");
margin-top: -2px; color: $primary;
color: $user_card_primary; background: $secondary center center;
background: $user_card_background center center;
background-size: cover; background-size: cover;
min-height: 175px; min-height: 175px;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s;
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
opacity: 0; opacity: 0;
@include transform(scale(0.9)); @include transform(scale(0.9));
&.show { &.show {
opacity: 1; opacity: 1;
@include transform(scale(1)); @include transform(scale(1));
} }
&.fixed { &.fixed {
position: fixed; position: fixed;
z-index: z("composer", "content") + 1; z-index: z("composer", "content") + 1;
@ -38,290 +31,234 @@ $user_card_background: $secondary;
} }
.card-content { .card-content {
padding: 12px 12px 0 12px; padding: 12px;
background: rgba($user_card_background, 0.85); background: rgba($secondary, 0.85);
margin-top: 80px; margin-top: 80px;
&:after { &:after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
a.card-huge-avatar { a.card-huge-avatar {
outline: none; outline: none;
} }
} }
.bio {
max-height: 150px;
overflow: auto;
}
&.no-bg { &.no-bg {
min-height: 50px; min-height: 50px;
.card-content { .card-content {
margin-top: 0; margin-top: 0;
} }
} }
.names {
.avatar-placeholder { flex: 1 1 auto;
width: 120px; margin-left: 0.75em;
height: 120px; span {
float: left; display: block;
padding-right: 10px; }
} }
h1 { h1 {
min-width: 120px; margin: 0;
font-size: $font-up-4;
line-height: $line-height-medium; line-height: $line-height-medium;
display: block;
max-width: 250px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: $user_card_primary; color: $primary;
} }
.d-icon { .d-icon {
font-size: $font-down-1; font-size: $font-down-1;
color: $user_card_primary; color: $primary;
} }
} }
h2 { h2 {
font-size: $font-up-1; font-size: $font-up-1;
line-height: $line-height-large;
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
display: block;
max-width: 250px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: $user_card_primary; color: $primary;
} }
} }
h3 { h3 {
display: inline;
margin-right: 0.5em;
font-size: $font-0; font-size: $font-0;
font-weight: normal; font-weight: normal;
margin-top: 0; color: $primary;
color: scale-color($user_card_primary, $lightness: 20%); .desc,
overflow: hidden;
text-overflow: ellipsis;
a { a {
color: scale-color($user_card_background, $lightness: 50%); color: $primary-high;
} }
} }
.groups {
font-size: $font-down-1;
font-weight: normal;
margin-top: 0;
color: $user_card_background;
.group-link {
color: $user_card_background;
}
}
.metadata {
width: 100%;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
h3 {
display: inline;
margin-right: 5px;
.desc,
a {
color: scale-color($user_card_primary, $lightness: 35%);
}
}
div {
display: inline;
color: scale-color($user_card_background, $lightness: 50%);
.group-link {
color: scale-color($user_card_background, $lightness: 50%);
}
}
}
.bottom {
clear: both;
padding-top: 10px;
}
.bio {
margin-top: 80px;
clear: left;
a {
color: $user_card_primary;
text-decoration: underline;
}
img {
max-width: 100%;
}
a.mention {
text-decoration: none;
}
.overflow {
max-height: 60px;
overflow: hidden;
}
}
.location-and-website {
display: flex;
width: 100%;
align-items: center;
padding-top: 5px;
.location,
.website-name {
display: flex;
max-width: 90%;
overflow: hidden;
align-items: baseline;
.d-icon {
margin-right: 0.25em;
}
}
.website-name a,
.location span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $user_card_primary;
}
.location {
margin-right: 0.5em;
}
.website-name a {
text-decoration: underline;
}
}
.user-card-avatar,
.group-card-avatar {
float: left;
margin-right: 10px;
margin-top: -53px;
}
.group-card-avatar {
$size: 120px;
width: $size;
height: $size;
.avatar-flair {
width: $size;
height: $size;
display: flex;
align-items: center;
background-repeat: no-repeat;
background-position: center;
background-size: $size;
color: $primary;
.d-icon {
margin: auto;
font-size: $size / 1.5 !important;
}
&.rounded {
border-radius: 50%;
}
}
}
.members {
padding: 0 0 10px 0;
a {
color: lighten($primary, 40%);
&:hover {
color: $primary;
}
}
}
p { p {
margin: 0 0 5px 0; margin: 0 0 5px 0;
} }
.btn { .btn {
margin: 0 0 7px 0; margin-bottom: 5px;
box-sizing: border-box;
} }
.usercard-controls { .usercard-controls {
list-style-type: none; list-style-type: none;
float: right;
margin: 0; margin: 0;
button { button {
width: 100%; width: 100%;
min-width: 150px; min-width: 150px;
} }
} }
.card-row:not(.first-row) {
.new-user a { margin-top: 0.5em;
color: scale-color($user_card_background, $lightness: 70%); }
} }
.names { // styles for user cards
float: left; #user-card {
width: 45%; // avatar - names - controls
.first-row {
span { display: flex;
display: block; .avatar-placeholder {
width: 250px; width: $avatar_width;
} height: $avatar_width;
} }
.user-card-avatar {
.badge-section { margin-right: 10px;
display: flex; margin-top: $avatar_margin;
align-items: flex-start; }
padding-bottom: 10px; .new-user a {
margin-top: 5px; color: $primary-low-mid;
span { }
overflow: hidden; }
text-overflow: ellipsis; // user bio - suspension reason
max-width: 185px; .second-row {
} max-height: 150px;
.user-badge { overflow: auto;
display: flex; .bio {
white-space: nowrap; a {
margin-right: 0.5em; color: $primary;
background: $primary-very-low; text-decoration: underline;
border: 1px solid $primary-low; }
color: $user_card_primary; a.mention {
} text-decoration: none;
}
h3 { .overflow {
color: $user_card_background; max-height: 60px;
font-size: $font-0; overflow: hidden;
margin-bottom: -8px; }
} }
} .suspended {
color: $danger;
.more-user-badges { .suspension-reason-title,
@extend .user-badge; .suspension-date {
padding: 3px 8px; font-weight: bold;
white-space: nowrap; }
} }
}
.suspended { // location and website
color: $danger; .third-row {
margin-bottom: 5px; .location-and-website {
clear: left; display: flex;
padding-top: 15px; flex-wrap: wrap;
} width: 100%;
align-items: center;
.metadata .email .btn { .location,
padding: 2px 12px; .website-name {
display: flex;
overflow: hidden;
align-items: center;
.d-icon {
margin-right: 0.25em;
}
}
.website-name a,
.location span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $primary;
}
.location {
margin-right: 0.5em;
}
.website-name a {
text-decoration: underline;
}
}
}
// custom user fields
.fifth-row {
.public-user-fields {
margin: 0;
}
}
// badges
.sixth-row {
.badge-section {
display: flex;
align-items: flex-start;
.user-badge {
display: flex;
white-space: nowrap;
margin: 0 0.5em 0 0;
background: $primary-very-low;
border: 1px solid $primary-low;
color: $primary;
}
.badge-display-name {
overflow: hidden;
text-overflow: ellipsis;
max-width: 185px;
}
.more-user-badges {
overflow: hidden;
}
}
}
}
// styles for group cards
#group-card {
// avatar - names and controls
.first-row {
display: flex;
.group-card-avatar {
margin-top: $avatar_margin;
}
.group-card-avatar {
.avatar-flair {
width: $avatar_width;
height: $avatar_width;
display: flex;
color: $primary;
.d-icon {
margin: auto;
font-size: $avatar_width / 1.5;
}
&.rounded {
border-radius: 50%;
}
}
}
}
// group bio
.second-row {
max-height: 150px;
overflow: auto;
.bio {
a {
color: $primary;
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
}
a.mention {
text-decoration: none;
}
.overflow {
max-height: 60px;
overflow: hidden;
}
}
} }
} }