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
Régis Hanol
parent
8d1709f6b9
commit
6f1badc7c9
|
|
@ -23,6 +23,11 @@ export default Ember.Component.extend(CardContentsBase, CleansUp, {
|
|||
viewingTopic: Ember.computed.match("currentPath", /^topic\./),
|
||||
|
||||
showMoreMembers: Ember.computed.gt("moreMembersCount", 0),
|
||||
hasMembersOrIsMember: Ember.computed.or(
|
||||
"group.members",
|
||||
"group.is_group_owner_display",
|
||||
"group.is_group_user"
|
||||
),
|
||||
|
||||
group: null,
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,10 @@ export default Ember.Component.extend(
|
|||
"user.location",
|
||||
"user.website_name"
|
||||
),
|
||||
isSuspendedOrHasBio: Ember.computed.or(
|
||||
"user.suspend_reason",
|
||||
"user.bio_cooked"
|
||||
),
|
||||
showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"),
|
||||
|
||||
user: null,
|
||||
|
|
@ -53,6 +57,12 @@ export default Ember.Component.extend(
|
|||
// If inside a topic
|
||||
topicPostCount: null,
|
||||
|
||||
@computed("user.staff")
|
||||
staff: isStaff => (isStaff ? "staff" : ""),
|
||||
|
||||
@computed("user.trust_level")
|
||||
newUser: trustLevel => (trustLevel === 0 ? "new-user" : ""),
|
||||
|
||||
@computed("user.name")
|
||||
nameFirst(name) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,72 +1,82 @@
|
|||
{{#if visible}}
|
||||
<div class="card-content">
|
||||
<div class="group-card-avatar">
|
||||
<a href={{groupPath}} {{action "showGroup" group}} class="card-huge-avatar">
|
||||
{{avatar-flair
|
||||
|
||||
<div class="card-row first-row">
|
||||
<div class="group-card-avatar">
|
||||
<a href="{{groupPath}}" {{action "showGroup" group}} class="card-huge-avatar">
|
||||
{{avatar-flair
|
||||
flairURL=group.flair_url
|
||||
flairBgColor=group.flair_bg_color
|
||||
flairColor=group.flair_color
|
||||
groupName=group.name}}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="names">
|
||||
<span>
|
||||
<h1 class="{{ group.name }}">
|
||||
<a href={{groupPath}} {{action "showGroup" group}}>{{ group.name }}</a>
|
||||
</h1>
|
||||
{{#if group.full_name}}
|
||||
<h2 class='full-name'>{{group.full_name}}</h2>
|
||||
{{else}}
|
||||
<h2 class='username'>{{group.name}}</h2>
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="usercard-controls group-details-button">
|
||||
{{group-membership-button
|
||||
model=group
|
||||
showLogin=(route-action "showLogin")}}
|
||||
|
||||
{{#if group.messageable}}
|
||||
{{d-button
|
||||
</a>
|
||||
</div>
|
||||
<div class="names">
|
||||
<span>
|
||||
<h1 class="{{group.name}}">
|
||||
<a href="{{groupPath}}" {{action "showGroup"}}>{{group.name}}</a>
|
||||
</h1>
|
||||
{{#if group.full_name}}
|
||||
<h2 class='full-name'>{{group.full_name}}</h2>
|
||||
{{else}}
|
||||
<h2 class='username'>{{group.name}}</h2>
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="usercard-controls group-details-button">
|
||||
{{group-membership-button
|
||||
model=group
|
||||
showLogin=(route-action "showLogin")}}
|
||||
{{#if group.messageable}}
|
||||
{{d-button
|
||||
action=(action "messageGroup")
|
||||
class="btn-primary group-message-button inline"
|
||||
icon="envelope"
|
||||
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}}
|
||||
</h3>
|
||||
</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 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>
|
||||
{{/if}}
|
||||
|
|
@ -1,182 +1,201 @@
|
|||
{{#if visible}}
|
||||
<div class="card-content">
|
||||
<div class="user-card-avatar">
|
||||
<a href={{user.path}} {{action "showUser"}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a>
|
||||
{{#if user.primary_group_name}}
|
||||
{{avatar-flair
|
||||
|
||||
<div class="card-row first-row">
|
||||
<div class="user-card-avatar">
|
||||
<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
|
||||
flairBgColor=user.primary_group_flair_bg_color
|
||||
flairColor=user.primary_group_flair_color
|
||||
groupName=user.primary_group_name}}
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}}
|
||||
</div>
|
||||
|
||||
<div class="names">
|
||||
<span>
|
||||
<h1 class="{{staff}} {{new_user}} {{if nameFirst "full-name" "username"}}">
|
||||
<a href={{user.path}} {{action "showUser"}}>{{if nameFirst user.name (format-username username)}} {{user-status user currentUser=currentUser}}</a>
|
||||
</h1>
|
||||
{{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser")) tagName=''}}
|
||||
|
||||
{{#unless nameFirst}}
|
||||
{{#if user.name}}
|
||||
<h2 class='full-name'>{{user.name}}</h2>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}}
|
||||
</div>
|
||||
<div class="names">
|
||||
<span>
|
||||
<h1 class="{{staff}} {{newUser}} {{if nameFirst "full-name" "username"}}">
|
||||
<a href="{{user.path}}" {{action "showUser"}}>{{if nameFirst user.name (format-username username)}}
|
||||
{{user-status user currentUser=currentUser}}</a>
|
||||
</h1>
|
||||
{{plugin-outlet name="user-card-after-username" args=(hash user=user showUser=(action "showUser")) tagName=''}}
|
||||
{{#unless nameFirst}}
|
||||
{{#if user.name}}
|
||||
<h2 class='full-name'>{{user.name}}</h2>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<h2 class='username'>{{username}}</h2>
|
||||
{{/unless}}
|
||||
{{#if user.title}}
|
||||
<h2>{{user.title}}</h2>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<h2 class='username'>{{username}}</h2>
|
||||
{{/unless}}
|
||||
|
||||
{{#if user.title}}
|
||||
<h2>{{user.title}}</h2>
|
||||
{{/if}}
|
||||
|
||||
{{#if user.staged}}
|
||||
<h2 class="staged">{{i18n 'user.staged'}}</h2>
|
||||
{{/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
|
||||
{{#if user.staged}}
|
||||
<h2 class="staged">{{i18n 'user.staged'}}</h2>
|
||||
{{/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"
|
||||
action=(route-action "composePrivateMessage" user post)
|
||||
icon="envelope"
|
||||
label="user.private_message"}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if showFilter}}
|
||||
<li>
|
||||
{{d-button
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if showFilter}}
|
||||
<li>
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
action=(action "togglePosts" user)
|
||||
icon="filter"
|
||||
translatedLabel=togglePostsLabel}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if hasUserFilters}}
|
||||
<li>
|
||||
{{d-button
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if hasUserFilters}}
|
||||
<li>
|
||||
{{d-button
|
||||
action=(action "cancelFilter")
|
||||
icon="times"
|
||||
label="topic.filters.cancel"}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if showDelete}}
|
||||
<li>
|
||||
{{d-button
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if showDelete}}
|
||||
<li>
|
||||
{{d-button
|
||||
class="btn-danger"
|
||||
action=(action "deleteUser")
|
||||
actionParam=user
|
||||
icon="exclamation-triangle"
|
||||
label="admin.user.delete"}}
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
|
||||
{{plugin-outlet
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
{{plugin-outlet
|
||||
name="user-card-additional-controls"
|
||||
args=(hash user=user close=(action "close"))
|
||||
tagName=""}}
|
||||
</div>
|
||||
|
||||
{{#if user.suspend_reason}}
|
||||
<div class='suspended'>
|
||||
{{d-icon "ban"}}
|
||||
<b>{{i18n 'user.suspended_notice' date=user.suspendedTillDate}}</b><br>
|
||||
<b>{{i18n 'user.suspended_reason'}}</b> {{user.suspend_reason}}
|
||||
{{#if isSuspendedOrHasBio}}
|
||||
<div class="card-row second-row">
|
||||
{{#if user.suspend_reason}}
|
||||
<div class='suspended'>
|
||||
<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>
|
||||
{{else}}
|
||||
{{#if user.bio_cooked}}<div class='bio'>{{text-overflow class="overflow" text=user.bio_excerpt}}</div>{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if hasLocationOrWebsite}}
|
||||
<div class="location-and-website">
|
||||
{{#if user.location}}
|
||||
<span class='location'>{{d-icon "map-marker-alt"}} <span>{{user.location}}</span></span>
|
||||
{{/if}}
|
||||
|
||||
{{#if user.website_name}}
|
||||
<span class='website-name'>
|
||||
{{d-icon "globe"}}
|
||||
{{#if linkWebsite}}
|
||||
<a href={{user.website}} rel={{unless removeNoFollow 'nofollow noopener'}} target="_blank">{{user.website_name}}</a>
|
||||
{{else}}
|
||||
<span title={{user.website}}>{{user.website_name}}</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}}
|
||||
<div class="card-row third-row">
|
||||
<div class="location-and-website">
|
||||
{{#if user.location}}
|
||||
<span class='location'>{{d-icon "map-marker-alt"}}
|
||||
<span>{{user.location}}</span></span>
|
||||
{{/if}}
|
||||
{{#if user.website_name}}
|
||||
<span class='website-name'>
|
||||
{{d-icon "globe"}}
|
||||
{{#if linkWebsite}}
|
||||
<a href="{{user.website}}" rel={{unless removeNoFollow 'nofollow noopener'}}
|
||||
target="_blank">{{user.website_name}}</a>
|
||||
{{else}}
|
||||
<span title={{user.website}}>{{user.website_name}}</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-card-location-and-website" args=(hash user=user)}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if user}}
|
||||
{{#unless user.profile_hidden}}
|
||||
<div class="metadata">
|
||||
{{#if user.last_posted_at}}
|
||||
<h3><span class='desc'>{{i18n 'last_post'}}</span> {{format-date user.last_posted_at leaveAgo="true"}}</h3>
|
||||
{{/if}}
|
||||
<h3><span class='desc'>{{i18n 'joined'}}</span> {{format-date user.created_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>
|
||||
<div class="card-row fourth-row">
|
||||
{{#unless user.profile_hidden}}
|
||||
<div class="metadata">
|
||||
{{#if user.last_posted_at}}
|
||||
<h3><span class='desc'>{{i18n 'last_post'}}</span>
|
||||
{{format-date user.last_posted_at leaveAgo="true"}}</h3>
|
||||
{{/if}}
|
||||
</h3>
|
||||
{{#if showCheckEmail}}
|
||||
<h3 class="email">
|
||||
{{d-icon "far-envelope" title="user.email.title"}}
|
||||
{{#if user.email}}
|
||||
{{user.email}}
|
||||
{{else}}
|
||||
{{d-button action=(action "checkEmail") actionParam=user icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
|
||||
<h3><span class='desc'>{{i18n 'joined'}}</span>
|
||||
{{format-date user.created_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}}
|
||||
</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)}}
|
||||
|
||||
{{#if showCheckEmail}}
|
||||
<h3 class="email">
|
||||
{{d-icon "far-envelope" title="user.email.title"}}
|
||||
{{#if user.email}}
|
||||
{{user.email}}
|
||||
{{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 publicUserFields}}
|
||||
<div class="public-user-fields">
|
||||
{{#each publicUserFields as |uf|}}
|
||||
{{#if uf.value}}
|
||||
<div class="public-user-field {{uf.field.dasherized_name}}">
|
||||
<span class="user-field-name">{{uf.field.name}}:</span>
|
||||
<span class="user-field-value">{{uf.value}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<div class="card-row fifth-row">
|
||||
<div class="public-user-fields">
|
||||
{{#each publicUserFields as |uf|}}
|
||||
{{#if uf.value}}
|
||||
<div class="public-user-field {{uf.field.dasherized_name}}">
|
||||
<span class="user-field-name">{{uf.field.name}}:</span>
|
||||
<span class="user-field-value">{{uf.value}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{plugin-outlet name="user-card-before-badges" args=(hash user=user)}}
|
||||
|
||||
{{#if showBadges}}
|
||||
{{#if user.featured_user_badges}}
|
||||
<div class="badge-section">
|
||||
{{#each user.featured_user_badges as |ub|}}
|
||||
{{user-badge badge=ub.badge user=user}}
|
||||
{{/each}}
|
||||
{{#if showMoreBadges}}
|
||||
{{#link-to 'user.badges' user class="btn more-user-badges"}}
|
||||
{{i18n 'badges.more_badges' count=moreBadgesCount}}
|
||||
{{/link-to}}
|
||||
<div class="card-row sixth-row">
|
||||
{{#if user.featured_user_badges}}
|
||||
<div class="badge-section">
|
||||
{{#each user.featured_user_badges as |ub|}}
|
||||
{{user-badge badge=ub.badge user=user}}
|
||||
{{/each}}
|
||||
{{#if showMoreBadges}}
|
||||
{{#link-to 'user.badges' user class="user-badge more-user-badges"}}
|
||||
{{i18n 'badges.more_badges' count=moreBadgesCount}}
|
||||
{{/link-to}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -1,33 +1,26 @@
|
|||
// styles that apply to the "share" popup when sharing a link to a post or topic
|
||||
// Colors should mostly be absolute here, it will look the same in dark & light themes
|
||||
|
||||
$user_card_primary: $primary;
|
||||
$user_card_background: $secondary;
|
||||
$card_width: 580px;
|
||||
$avatar_width: 120px;
|
||||
$avatar_margin: -50px; // negative margin makes avatars extend above cards
|
||||
|
||||
// shared styles for user and group cards
|
||||
#user-card,
|
||||
#group-card {
|
||||
position: absolute;
|
||||
width: 580px;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
width: $card_width;
|
||||
z-index: z("usercard");
|
||||
box-shadow: shadow("card");
|
||||
margin-top: -2px;
|
||||
color: $user_card_primary;
|
||||
background: $user_card_background center center;
|
||||
color: $primary;
|
||||
background: $secondary center center;
|
||||
background-size: cover;
|
||||
min-height: 175px;
|
||||
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
|
||||
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
|
||||
opacity: 0;
|
||||
@include transform(scale(0.9));
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
@include transform(scale(1));
|
||||
}
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
z-index: z("composer", "content") + 1;
|
||||
|
|
@ -38,290 +31,234 @@ $user_card_background: $secondary;
|
|||
}
|
||||
|
||||
.card-content {
|
||||
padding: 12px 12px 0 12px;
|
||||
background: rgba($user_card_background, 0.85);
|
||||
padding: 12px;
|
||||
background: rgba($secondary, 0.85);
|
||||
margin-top: 80px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
a.card-huge-avatar {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
max-height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&.no-bg {
|
||||
min-height: 50px;
|
||||
|
||||
.card-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
.names {
|
||||
flex: 1 1 auto;
|
||||
margin-left: 0.75em;
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
min-width: 120px;
|
||||
font-size: $font-up-4;
|
||||
margin: 0;
|
||||
line-height: $line-height-medium;
|
||||
display: block;
|
||||
max-width: 250px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
a {
|
||||
color: $user_card_primary;
|
||||
color: $primary;
|
||||
}
|
||||
.d-icon {
|
||||
font-size: $font-down-1;
|
||||
color: $user_card_primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-up-1;
|
||||
line-height: $line-height-large;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
max-width: 250px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
a {
|
||||
color: $user_card_primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
font-size: $font-0;
|
||||
font-weight: normal;
|
||||
margin-top: 0;
|
||||
color: scale-color($user_card_primary, $lightness: 20%);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $primary;
|
||||
.desc,
|
||||
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 {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 0 7px 0;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.usercard-controls {
|
||||
list-style-type: none;
|
||||
float: right;
|
||||
margin: 0;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-user a {
|
||||
color: scale-color($user_card_background, $lightness: 70%);
|
||||
}
|
||||
|
||||
.names {
|
||||
float: left;
|
||||
width: 45%;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 5px;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 185px;
|
||||
}
|
||||
.user-badge {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.5em;
|
||||
background: $primary-very-low;
|
||||
border: 1px solid $primary-low;
|
||||
color: $user_card_primary;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $user_card_background;
|
||||
font-size: $font-0;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-user-badges {
|
||||
@extend .user-badge;
|
||||
padding: 3px 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.suspended {
|
||||
color: $danger;
|
||||
margin-bottom: 5px;
|
||||
clear: left;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.metadata .email .btn {
|
||||
padding: 2px 12px;
|
||||
.card-row:not(.first-row) {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
// styles for user cards
|
||||
#user-card {
|
||||
// avatar - names - controls
|
||||
.first-row {
|
||||
display: flex;
|
||||
.avatar-placeholder {
|
||||
width: $avatar_width;
|
||||
height: $avatar_width;
|
||||
}
|
||||
.user-card-avatar {
|
||||
margin-right: 10px;
|
||||
margin-top: $avatar_margin;
|
||||
}
|
||||
.new-user a {
|
||||
color: $primary-low-mid;
|
||||
}
|
||||
}
|
||||
// user bio - suspension reason
|
||||
.second-row {
|
||||
max-height: 150px;
|
||||
overflow: auto;
|
||||
.bio {
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a.mention {
|
||||
text-decoration: none;
|
||||
}
|
||||
.overflow {
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.suspended {
|
||||
color: $danger;
|
||||
.suspension-reason-title,
|
||||
.suspension-date {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
// location and website
|
||||
.third-row {
|
||||
.location-and-website {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
.location,
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue