Merge pull request #2924 from awesomerobot/master
new user profile page
This commit is contained in:
Jeff Atwood
commit
93af6107e7
|
|
@ -6,6 +6,155 @@
|
|||
{{#unless loading}}
|
||||
<div class="container">
|
||||
|
||||
<section class='user-main'>
|
||||
<section {{bind-attr class="collapsedInfo :about profileBackground:has-background:no-background"}}>
|
||||
<div class='staff-counters'>
|
||||
{{#if number_of_flags_given}}
|
||||
<div><span class="helpful-flags">{{number_of_flags_given}}</span> {{i18n user.staff_counters.flags_given}}</div>
|
||||
{{/if}}
|
||||
{{#if number_of_flagged_posts}}
|
||||
<div>
|
||||
{{#link-to 'user.flaggedPosts' this}}
|
||||
<span class="flagged-posts">{{number_of_flagged_posts}}</span> {{i18n user.staff_counters.flagged_posts}}
|
||||
{{/link-to}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if number_of_deleted_posts}}
|
||||
<div>
|
||||
{{#link-to 'user.deletedPosts' this}}
|
||||
<span class="deleted-posts">{{number_of_deleted_posts}}</span> {{i18n user.staff_counters.deleted_posts}}
|
||||
{{/link-to}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if number_of_suspensions}}
|
||||
<div><span class="suspensions">{{number_of_suspensions}}</span> {{i18n user.staff_counters.suspensions}}</div>
|
||||
{{/if}}
|
||||
{{#if number_of_warnings}}
|
||||
<div><span class="warnings-received">{{number_of_warnings}}</span> {{i18n user.staff_counters.warnings_received}}</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class='profile-image' {{bind-attr style="profileBackground"}}>
|
||||
|
||||
</div>
|
||||
<div class='details'>
|
||||
<div class='primary'>
|
||||
|
||||
|
||||
{{bound-avatar model "huge"}}
|
||||
|
||||
<section class='controls'>
|
||||
|
||||
<ul>
|
||||
|
||||
{{#if can_send_private_message_to_user}}
|
||||
<li>
|
||||
<a class='btn btn-primary right' {{action "composePrivateMessage"}}>
|
||||
<i class='fa fa-envelope'></i>
|
||||
{{i18n user.private_message}}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if viewingSelf}}
|
||||
<li>
|
||||
<a {{action "logout"}} class='btn btn-danger right'><i class='fa fa-sign-out'></i>{{i18n user.log_out}}</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if currentUser.staff}}
|
||||
<li>
|
||||
<a {{bind-attr href="adminPath"}} class='btn right'><i class="fa fa-wrench"></i>{{i18n admin.user.show_admin_profile}}</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if can_edit}}
|
||||
<li>
|
||||
{{#link-to 'preferences' class="btn right"}}<i class='fa fa-cog'></i>{{i18n user.preferences}}{{/link-to}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if canInviteToForum}}
|
||||
<li>
|
||||
{{#link-to 'user.invited' class="btn right"}}<i class='fa fa-envelope-o'></i>{{i18n user.invited.title}}{{/link-to}}
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="primary-textual">
|
||||
<h1>{{username}} {{{statusIcon}}}</h1>
|
||||
<h2>{{name}}</h2>
|
||||
<h3>
|
||||
|
||||
{{#if location}}
|
||||
<i class="fa fa-map-marker"></i>
|
||||
{{location}}
|
||||
{{/if}}
|
||||
|
||||
{{#if websiteName}}
|
||||
<i class="fa fa-globe"></i>
|
||||
{{#if linkWebsite}}
|
||||
<a {{bind-attr href="website"}} rel="nofollow" target="_blank">{{websiteName}}</a>
|
||||
{{else}}
|
||||
<span {{bind-attr title="website"}}>{{websiteName}}</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
</h3>
|
||||
|
||||
<div class='bio'>
|
||||
{{#if isSuspended}}
|
||||
<div class='suspended'>
|
||||
<i class='fa fa-ban'></i>
|
||||
<b>{{i18n user.suspended_notice date="suspendedTillDate"}}</b><br/>
|
||||
<b>{{i18n user.suspended_reason}}</b> {{suspend_reason}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{{bio_cooked}}}
|
||||
</div>
|
||||
|
||||
{{plugin-outlet "user-profile-primary"}}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style='clear: both'></div>
|
||||
</div>
|
||||
|
||||
<div class='secondary'>
|
||||
<dl>
|
||||
|
||||
{{#if created_at}}
|
||||
<dt>{{i18n user.created}}</dt><dd>{{bound-date created_at}}</dd>
|
||||
{{/if}}
|
||||
{{#if last_posted_at}}
|
||||
<dt>{{i18n user.last_posted}}</dt><dd>{{bound-date last_posted_at}}</dd>
|
||||
{{/if}}
|
||||
{{#if last_seen_at}}
|
||||
<dt>{{i18n user.last_seen}}</dt><dd>{{bound-date last_seen_at}}</dd>
|
||||
{{/if}}
|
||||
{{#if invited_by}}
|
||||
<dt>{{i18n user.invited_by}}</dt><dd>{{#link-to 'user' invited_by}}{{invited_by.username}}{{/link-to}}</dd>
|
||||
{{/if}}
|
||||
<dt>{{i18n user.trust_level}}</dt><dd>{{trustLevel.name}}</dd>
|
||||
{{#if canCheckEmails}}
|
||||
<dt>{{i18n user.email.title}}</dt>
|
||||
<dd {{bind-attr title="email"}}>
|
||||
{{#if email}}
|
||||
{{email}}
|
||||
{{else}}
|
||||
<button class="btn btn-primary" title="{{i18n admin.users.check_email.title}}" {{action "checkEmail" this}}>{{fa-icon "envelope-o"}} {{i18n admin.users.check_email.text}}</button>
|
||||
{{/if}}
|
||||
</dd>
|
||||
{{/if}}
|
||||
</dl>
|
||||
{{plugin-outlet "user-profile-secondary"}}
|
||||
</div>
|
||||
</section>
|
||||
<section class='user-navigation'>
|
||||
|
||||
<ul class='action-list nav-stacked'>
|
||||
|
|
@ -64,133 +213,10 @@
|
|||
|
||||
</section>
|
||||
|
||||
<section class='user-main'>
|
||||
<section {{bind-attr class="collapsedInfo :about"}} {{bind-attr style="profileBackground"}}>
|
||||
{{outlet userOutlet}}
|
||||
|
||||
<div class='details'>
|
||||
<div class='primary'>
|
||||
<div class='staff-counters'>
|
||||
{{#if number_of_flags_given}}
|
||||
<div><span class="pill helpful-flags">{{number_of_flags_given}}</span> {{i18n user.staff_counters.flags_given}}</div>
|
||||
{{/if}}
|
||||
{{#if number_of_flagged_posts}}
|
||||
<div>
|
||||
{{#link-to 'user.flaggedPosts' this}}
|
||||
<span class="pill flagged-posts">{{number_of_flagged_posts}}</span> {{i18n user.staff_counters.flagged_posts}}
|
||||
{{/link-to}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if number_of_deleted_posts}}
|
||||
<div>
|
||||
{{#link-to 'user.deletedPosts' this}}
|
||||
<span class="pill deleted-posts">{{number_of_deleted_posts}}</span> {{i18n user.staff_counters.deleted_posts}}
|
||||
{{/link-to}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if number_of_suspensions}}
|
||||
<div><span class="pill suspensions">{{number_of_suspensions}}</span> {{i18n user.staff_counters.suspensions}}</div>
|
||||
{{/if}}
|
||||
{{#if number_of_warnings}}
|
||||
<div><span class="pill warnings-received">{{number_of_warnings}}</span> {{i18n user.staff_counters.warnings_received}}</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{bound-avatar model "huge"}}
|
||||
|
||||
<div class="primary-textual">
|
||||
<h1>{{username}} {{{statusIcon}}}</h1>
|
||||
<h2>{{name}}</h2>
|
||||
|
||||
<div class='bio'>{{{bio_cooked}}}</div>
|
||||
|
||||
{{groups-list groups=custom_groups}}
|
||||
|
||||
{{plugin-outlet "user-profile-primary"}}
|
||||
|
||||
{{#if isSuspended}}
|
||||
<div class='suspended'>
|
||||
<i class='fa fa-ban'></i>
|
||||
<b>{{i18n user.suspended_notice date="suspendedTillDate"}}</b><br/>
|
||||
<b>{{i18n user.suspended_reason}}</b> {{suspend_reason}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='secondary'>
|
||||
<dl>
|
||||
{{#if location}}
|
||||
<dd><i class="fa fa-map-marker"></i> {{location}}</dd>
|
||||
{{/if}}
|
||||
{{#if websiteName}}
|
||||
<dt>{{i18n user.website}}</dt>
|
||||
<dd>
|
||||
{{#if linkWebsite}}
|
||||
<a {{bind-attr href="website"}} rel="nofollow" target="_blank">{{websiteName}}</a>
|
||||
{{else}}
|
||||
<span {{bind-attr title="website"}}>{{websiteName}}</span>
|
||||
{{/if}}
|
||||
</dd>
|
||||
{{/if}}
|
||||
{{#if created_at}}
|
||||
<dt>{{i18n user.created}}</dt><dd>{{bound-date created_at}}</dd>
|
||||
{{/if}}
|
||||
{{#if last_posted_at}}
|
||||
<dt>{{i18n user.last_posted}}</dt><dd>{{bound-date last_posted_at}}</dd>
|
||||
{{/if}}
|
||||
{{#if last_seen_at}}
|
||||
<dt>{{i18n user.last_seen}}</dt><dd>{{bound-date last_seen_at}}</dd>
|
||||
{{/if}}
|
||||
{{#if invited_by}}
|
||||
<dt>{{i18n user.invited_by}}</dt><dd>{{#link-to 'user' invited_by}}{{invited_by.username}}{{/link-to}}</dd>
|
||||
{{/if}}
|
||||
{{#if canCheckEmails}}
|
||||
<dt>{{i18n user.email.title}}</dt>
|
||||
<dd {{bind-attr title="email"}}>
|
||||
{{#if email}}
|
||||
{{email}}
|
||||
{{else}}
|
||||
<button class="btn" title="{{i18n admin.users.check_email.title}}" {{action "checkEmail" this}}>{{fa-icon "envelope-o"}} {{i18n admin.users.check_email.text}}</button>
|
||||
{{/if}}
|
||||
</dd>
|
||||
{{/if}}
|
||||
<dt>{{i18n user.trust_level}}</dt><dd>{{trustLevel.name}}</dd>
|
||||
</dl>
|
||||
{{plugin-outlet "user-profile-secondary"}}
|
||||
</div>
|
||||
|
||||
<div style='clear: both'></div>
|
||||
</div>
|
||||
|
||||
<section class='controls'>
|
||||
{{#if can_send_private_message_to_user}}
|
||||
<button class='btn btn-primary' {{action "composePrivateMessage"}}>
|
||||
<i class='fa fa-envelope'></i>
|
||||
{{i18n user.private_message}}
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
{{#if viewingSelf}}
|
||||
<button {{action "logout"}} class='btn btn-danger right'><i class='fa fa-sign-out'></i>{{i18n user.log_out}}</button>
|
||||
{{/if}}
|
||||
|
||||
{{#if currentUser.staff}}
|
||||
<a {{bind-attr href="adminPath"}} class='btn right'><i class="fa fa-wrench"></i>{{i18n admin.user.show_admin_profile}}</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if can_edit}}
|
||||
{{#link-to 'preferences' class="btn right"}}<i class='fa fa-cog'></i>{{i18n user.preferences}}{{/link-to}}
|
||||
{{/if}}
|
||||
|
||||
{{#if canInviteToForum}}
|
||||
{{#link-to 'user.invited' class="btn right"}}<i class='fa fa-envelope-o'></i>{{i18n user.invited.title}}{{/link-to}}
|
||||
{{/if}}
|
||||
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{{outlet userOutlet}}
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
.has-background .details {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.profile-image {
|
||||
height: 250px;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
transition: height .15s linear;
|
||||
}
|
||||
|
||||
|
||||
.no-background {
|
||||
.profile-image {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-preferences {
|
||||
input.category-group {
|
||||
width: 500px;
|
||||
|
|
@ -87,6 +107,7 @@
|
|||
width: 21.62%;
|
||||
margin-right: 1.8018%;
|
||||
float: left;
|
||||
margin-top: 20px;
|
||||
|
||||
h3 {
|
||||
color: $primary;
|
||||
|
|
@ -97,7 +118,7 @@
|
|||
|
||||
.user-main {
|
||||
|
||||
width: 76.5765%;
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 50px;
|
||||
|
||||
|
|
@ -132,6 +153,10 @@
|
|||
background-color: $secondary;
|
||||
border: 1px solid scale-color-diff();
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 75%;
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
|
||||
.btn.right {
|
||||
float: right
|
||||
|
|
@ -159,19 +184,49 @@
|
|||
}
|
||||
|
||||
.about {
|
||||
background-color: dark-light-diff($primary, $secondary, 0%, -75%);
|
||||
background-size: cover;
|
||||
background-size: 1110px 250px;
|
||||
background-position: center center;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
color: $secondary;
|
||||
|
||||
.secondary {
|
||||
background: dark-light-diff($primary, $secondary, 90%, -65%);
|
||||
font-size: 13px;
|
||||
.btn { padding: 3px 12px; }
|
||||
|
||||
dl dd {
|
||||
display: inline;
|
||||
margin: 0 15px 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 10px 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: dark-light-diff($secondary, $primary, 50%, -40%);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
|
||||
padding: 15px 15px 4px 15px;
|
||||
background-color: $primary;
|
||||
transition: margin .15s linear;
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
|
|
@ -179,23 +234,33 @@
|
|||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
margin-top: 10px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: dark-light-diff($secondary, $primary, 75%, -10%);
|
||||
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
i:not(:first-of-type) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.groups {
|
||||
margin-left: 10px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
margin-bottom: 10px;
|
||||
margin: 0 20px 10px 0;
|
||||
float: left;
|
||||
transition: all .1s linear;
|
||||
}
|
||||
|
||||
.suspended {
|
||||
|
|
@ -203,61 +268,48 @@
|
|||
}
|
||||
|
||||
.primary {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 71%;
|
||||
color: dark-light-diff($secondary, $primary, 75%, 0%);
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
|
||||
|
||||
h1, h2 {font-weight: bold;}
|
||||
h1 {font-weight: bold;}
|
||||
|
||||
.primary-textual {
|
||||
padding: 3px;
|
||||
a[href] {
|
||||
color: dark-light-diff($secondary, $primary, 75%, -10%);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
color: dark-light-diff($secondary, $primary, 75%, 0%);
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
max-width: 750px;
|
||||
|
||||
a[href] {
|
||||
color: dark-light-diff($secondary, $primary, 75%, 0%);
|
||||
text-decoration: underline;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.secondary {
|
||||
float: right;
|
||||
background-color: rgba(dark-light-diff($primary, $secondary, 20%, -85%), .9);
|
||||
text-align: right;
|
||||
padding: 0 10px;
|
||||
max-width: 20%;
|
||||
|
||||
dd {
|
||||
margin: 0 0 7px 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: dark-light-diff($secondary, $primary, 75%, -10%);
|
||||
|
||||
}
|
||||
dt {
|
||||
color: dark-light-diff($secondary, $primary, 50%, -40%);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 12px;
|
||||
height: 30px;
|
||||
padding: 0 0 12px 0;
|
||||
float: right;
|
||||
ul {list-style-type: none;}
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
width: 140px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
|
|
@ -269,20 +321,36 @@
|
|||
.about.collapsed-info {
|
||||
.controls {
|
||||
margin-top: 0;
|
||||
ul {
|
||||
li {display: inline;}
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.staff-counters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.secondary { display: none; }
|
||||
|
||||
.profile-image {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
.secondary { display: none; }
|
||||
padding: 12px 15px 2px 15px;
|
||||
margin-top: 0;
|
||||
background: rgba($primary, 1);
|
||||
.bio { display: none; }
|
||||
|
||||
.primary {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
|
|
@ -293,20 +361,24 @@
|
|||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
font-size: 15px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-stream {
|
||||
float: right;
|
||||
width: 75%;
|
||||
.excerpt {
|
||||
margin: 5px 0;
|
||||
font-size: 13px;
|
||||
|
|
@ -401,11 +473,26 @@
|
|||
|
||||
.staff-counters {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
background: $primary;
|
||||
padding: 7px 0;
|
||||
display: inline;
|
||||
> div {
|
||||
margin-bottom: 10px;
|
||||
margin: 0 10px 0 0;
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
&:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
span {
|
||||
padding: 1px 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
a.active {
|
||||
a {
|
||||
color: $secondary;
|
||||
}
|
||||
.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -468,3 +555,22 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.paginated-topics-list {
|
||||
float: right;
|
||||
width: 75%;
|
||||
margin-top: 20px;
|
||||
|
||||
.topic-list > tbody > tr:nth-child(odd) {
|
||||
background-color: darken($secondary, 3%);
|
||||
}
|
||||
|
||||
.topic-list > tbody > tr:nth-child(even) {
|
||||
background-color: $secondary;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,129 +66,296 @@
|
|||
.bio-composer #wmd-quote-post {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pagedown-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {width: 100%;}
|
||||
}
|
||||
|
||||
#about-me {
|
||||
padding: 4px;
|
||||
margin: -4px;
|
||||
display: block;
|
||||
width: 220px;
|
||||
min-height: 200px;
|
||||
background-color: scale-color-diff();
|
||||
color: $primary;
|
||||
word-wrap: break-word;
|
||||
.profile-image {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
.groups {
|
||||
.group-link {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.hasBackground .details {margin-top: 200px;
|
||||
}
|
||||
|
||||
.user-preferences {
|
||||
input.category-group {
|
||||
}
|
||||
|
||||
.autocomplete .badge-category {
|
||||
margin: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.autocomplete .badge-category.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
@include small-width {
|
||||
}
|
||||
}
|
||||
|
||||
.bio-composer #wmd-quote-post {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.static {
|
||||
color: $primary;
|
||||
display: inline-block;
|
||||
}
|
||||
.instructions {
|
||||
color: scale-color($primary, $lightness: 50%);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 80%;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
.avatar {
|
||||
margin-left: 3px;
|
||||
}
|
||||
.instructions a[href] {
|
||||
color: $tertiary;
|
||||
}
|
||||
.warning {
|
||||
background-color: scale-color($danger, $lightness: 30%);
|
||||
padding: 5px 8px;
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-horizontal .control-group.other {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group.category {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.user-navigation {
|
||||
width: 100%;
|
||||
margin-right: 1.8018%;
|
||||
margin-top: 20px;
|
||||
|
||||
h3 {
|
||||
color: scale-color($primary, $lightness: 50%);
|
||||
padding-left: 5px;
|
||||
}
|
||||
.nav-stacked {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
color: $primary;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-main {
|
||||
clear: both;
|
||||
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 50px;
|
||||
|
||||
|
||||
table.group-members {
|
||||
width: 100%;
|
||||
p {
|
||||
max-width: 600px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
th.seen {
|
||||
text-align: right;
|
||||
}
|
||||
td.avatar {
|
||||
width: 60px;
|
||||
}
|
||||
td {
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
span.last-seen-at {
|
||||
float: right;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-content {
|
||||
padding: 10px 8px;
|
||||
background-color: $secondary;
|
||||
border: 1px solid scale-color-diff();
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
|
||||
.btn.right {
|
||||
float: right
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid scale-color-diff();
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid scale-color-diff();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about {
|
||||
background-color: scale-color-diff();
|
||||
background-position: center center;
|
||||
background-color: dark-light-diff($primary, $secondary, 0%, -75%);
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
color: $primary;
|
||||
color: $secondary;
|
||||
|
||||
.secondary {
|
||||
background: dark-light-diff($primary, $secondary, 90%, -65%);
|
||||
font-size: 13px;
|
||||
.btn { padding: 3px 12px; }
|
||||
|
||||
dl dd {
|
||||
display: inline;
|
||||
margin: 0 15px 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 10px 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: dark-light-diff($secondary, $primary, 50%, -40%);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
padding: 15px 15px 4px 15px;
|
||||
background-color: rgba($primary, .9);
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
margin-top: 10px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: $primary;
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
i:not(:first-of-type) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.groups {
|
||||
margin-left: 10px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
border: 3px solid scale-color-diff();
|
||||
margin-bottom: 4px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.suspended {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: $secondary;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
|
||||
max-height: 800px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
float: left;
|
||||
color: dark-light-diff($secondary, $primary, 75%, 0%);
|
||||
|
||||
a[href] {
|
||||
color: $secondary;
|
||||
text-decoration: underline;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
h1 {font-weight: bold;}
|
||||
|
||||
.primary-textual {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 4px;
|
||||
float: left;
|
||||
a[href] {
|
||||
color: dark-light-diff($secondary, $primary, 75%, -10%);
|
||||
|
||||
h1, h2 {
|
||||
margin: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background-color: $primary;
|
||||
text-align: left;
|
||||
padding: 1px 10px;
|
||||
.bio {
|
||||
color: dark-light-diff($secondary, $primary, 75%, 0%);
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
max-width: 700px;
|
||||
|
||||
dd {
|
||||
color: $secondary;
|
||||
margin: 0 0 7px 0;
|
||||
a {
|
||||
color: inherit;
|
||||
a[href] {
|
||||
color: dark-light-diff($secondary, $primary, 75%, 0%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn {
|
||||
float: none;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
dt {
|
||||
color: scale-color($primary, $lightness: 75%);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
background-color: scale-color($primary, $lightness: 75%);
|
||||
margin-top: 0;
|
||||
padding: 10px 10px 0 10px;
|
||||
|
||||
.btn {
|
||||
padding: 0 0 12px 0;
|
||||
float: right;
|
||||
ul {list-style-type: none;}
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
width: 140px;
|
||||
margin-bottom: 10px;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -196,68 +363,84 @@
|
|||
.about.collapsed-info {
|
||||
.controls {
|
||||
margin-top: 0;
|
||||
|
||||
}
|
||||
|
||||
.staff-counters {
|
||||
display: none;
|
||||
}
|
||||
.secondary { display: none; }
|
||||
|
||||
.profile-image {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
.secondary { display: none; }
|
||||
padding: 12px 15px 2px 15px;
|
||||
margin-top: 0;
|
||||
background: rgba($primary, 1);
|
||||
.bio { display: none; }
|
||||
|
||||
.primary {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-top: 4px;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
border: 2px solid $tertiary;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin:0;
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
line-height: 16px;
|
||||
font-size: 15px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-stream {
|
||||
.end-of-stream {
|
||||
width: auto;
|
||||
}
|
||||
.excerpt {
|
||||
margin: 5px 0;
|
||||
font-size: 13px;
|
||||
word-wrap: break-word;
|
||||
color: scale-color($primary, $lightness: 50%);
|
||||
color: $primary;
|
||||
}
|
||||
.item.moderator-action {
|
||||
background-color: scale-color($highlight, $lightness: 50%);
|
||||
background-color: dark-light-diff($highlight, $secondary, 50%, -10%);
|
||||
}
|
||||
.item.deleted {
|
||||
opacity: 0.8;
|
||||
background-color: scale-color($danger, $lightness: 50%);
|
||||
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
|
||||
}
|
||||
.item.hidden {
|
||||
display: block;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.item {
|
||||
padding: 10px 8px;
|
||||
padding: 20px 0 15px 0;
|
||||
background-color: $secondary;
|
||||
border-bottom: 1px solid scale-color-diff();
|
||||
}
|
||||
.type {
|
||||
color: scale-color($primary, $lightness: 50%);
|
||||
color: $primary;
|
||||
}
|
||||
span.name {
|
||||
color: scale-color($primary, $lightness: 50%);
|
||||
color: $primary;
|
||||
}
|
||||
.time, .delete-info {
|
||||
display: block;
|
||||
|
|
@ -271,55 +454,83 @@
|
|||
}
|
||||
.avatar-link {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.title {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
max-width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.name {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
max-width: 400px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.edit-reason {
|
||||
background-color: scale-color($highlight, $lightness: 50%);
|
||||
background-color: scale-color($highlight, $lightness: 25%);
|
||||
padding: 3px 5px 5px 5px;
|
||||
}
|
||||
.remove-bookmark {
|
||||
float: right !important;
|
||||
margin-top: -8px;
|
||||
float: right;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.notification {
|
||||
padding: 0 8px;
|
||||
&.unread {
|
||||
background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
|
||||
}
|
||||
|
||||
li { display: inline-block; }
|
||||
p {
|
||||
display: inline-block;
|
||||
margin: 7px;
|
||||
margin-left: 10px;
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
float: none;
|
||||
}
|
||||
// common/base/header.scss
|
||||
.fa, .icon {
|
||||
color: scale-color($primary, $lightness: 50%);
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.staff-counters {
|
||||
text-align: center;
|
||||
div {
|
||||
padding: 2px 8px;
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
background: $primary;
|
||||
padding: 7px 0;
|
||||
display: inline;
|
||||
> div {
|
||||
margin: 0 10px 0 0;
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
&:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
span {
|
||||
padding: 1px 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
a.active {
|
||||
a {
|
||||
color: $secondary;
|
||||
}
|
||||
.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.pill {
|
||||
border-radius: 15px;
|
||||
display: inline-block;
|
||||
|
|
@ -335,6 +546,9 @@
|
|||
.flagged-posts {
|
||||
background-color: #E49735;
|
||||
}
|
||||
.warnings-received {
|
||||
background-color: #EC441B;
|
||||
}
|
||||
.deleted-posts {
|
||||
background-color: #EC441B;
|
||||
}
|
||||
|
|
@ -342,12 +556,53 @@
|
|||
background-color: #c22020;
|
||||
}
|
||||
|
||||
div#pagedown-editor {
|
||||
width: 100%;
|
||||
.user-field.text {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
textarea#wmd-input {
|
||||
width: 100%;
|
||||
.user-field {
|
||||
label {
|
||||
width: 140px;
|
||||
float: left;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
input[type=text] {
|
||||
width: 530px;
|
||||
}
|
||||
.controls {
|
||||
label {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
float: auto;
|
||||
}
|
||||
p {
|
||||
color: scale-color($primary, $lightness: 50%);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 80%;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
}
|
||||
clear: both;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.paginated-topics-list {
|
||||
margin-top: 20px;
|
||||
|
||||
.topic-list > tbody > tr:nth-child(odd) {
|
||||
background-color: darken($secondary, 3%);
|
||||
}
|
||||
|
||||
.topic-list > tbody > tr:nth-child(even) {
|
||||
background-color: $secondary;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue