mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
REFACTOR: More consistent user/group page layouts
This commit is contained in:
Kris
parent
cb70a328f5
commit
df279251b7
@ -1,3 +1,5 @@
|
||||
<section class="user-content">
|
||||
|
||||
<div class="group-members-actions">
|
||||
{{text-field value=filterInput
|
||||
placeholderKey=filterPlaceholder
|
||||
@ -77,3 +79,4 @@
|
||||
|
||||
<div>{{i18n "groups.empty.members"}}</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
@ -53,16 +53,13 @@
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-controls">
|
||||
<div class="user-content-wrapper">
|
||||
<section class="user-primary-navigation">
|
||||
<div class="container">
|
||||
{{group-navigation group=model currentPath=application.currentPath tabs=tabs}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class='user-table'>
|
||||
<div class='wrapper'>
|
||||
{{outlet}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
<section class="user-navigation">
|
||||
<section class="user-secondary-navigation">
|
||||
{{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
|
||||
{{group-activity-filter filter="posts" categoryId=category_id}}
|
||||
{{group-activity-filter filter="topics" categoryId=category_id}}
|
||||
@ -8,7 +8,6 @@
|
||||
{{plugin-outlet name="group-activity-bottom" tagName='' connectorTagName='li'}}
|
||||
{{/mobile-nav}}
|
||||
</section>
|
||||
|
||||
<section class='user-right'>
|
||||
<section class="user-content">
|
||||
{{outlet}}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section class='user-navigation'>
|
||||
<section class='user-secondary-navigation'>
|
||||
{{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
|
||||
{{#each tabs as |tab|}}
|
||||
<li>
|
||||
@ -9,7 +9,6 @@
|
||||
{{/each}}
|
||||
{{/mobile-nav}}
|
||||
</section>
|
||||
|
||||
<section class='user-right'>
|
||||
<section class="user-content">
|
||||
{{outlet}}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section class="user-navigation">
|
||||
<section class="user-secondary-navigation">
|
||||
{{#mobile-nav class='messages-nav' desktopClass='nav-stacked action-list' currentPath=application.currentPath}}
|
||||
|
||||
<li>
|
||||
@ -13,6 +13,6 @@
|
||||
</li>
|
||||
{{/mobile-nav}}
|
||||
</section>
|
||||
<section class='user-right messages'>
|
||||
<section class="user-content">
|
||||
{{outlet}}
|
||||
</section>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<section class="user-content">
|
||||
{{text-field value=filterInput
|
||||
placeholderKey=filterPlaceholder
|
||||
autocomplete="discourse"
|
||||
@ -56,3 +57,4 @@
|
||||
|
||||
<div>{{i18n "groups.empty.members"}}</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{#d-section pageClass="user-preferences" class="user-navigation"}}
|
||||
{{#d-section pageClass="user-preferences" class="user-secondary-navigation"}}
|
||||
{{#mobile-nav class='preferences-nav' desktopClass='preferences-list action-list nav-stacked' currentPath=application.currentPath}}
|
||||
<li class='nav-account'>
|
||||
{{#link-to 'preferences.account'}}
|
||||
@ -53,7 +53,7 @@
|
||||
{{/mobile-nav}}
|
||||
{{/d-section}}
|
||||
|
||||
<section class='user-right user-preferences'>
|
||||
<section class='user-content user-preferences'>
|
||||
{{plugin-outlet name="above-user-preferences"}}
|
||||
|
||||
<form class="form-vertical">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="control-group category-notifications">
|
||||
<label class="control-label">{{i18n 'user.categories_settings'}}</label>
|
||||
|
||||
<div class="controls category-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-watching"}} {{i18n 'user.watched_categories'}}</label>
|
||||
{{category-selector categories=model.watchedCategories blacklist=selectedCategories}}
|
||||
</div>
|
||||
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="controls category-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-tracking"}} {{i18n 'user.tracked_categories'}}</label>
|
||||
{{category-selector categories=model.trackedCategories blacklist=selectedCategories}}
|
||||
</div>
|
||||
@ -23,13 +23,13 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="controls category-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-watching-first"}} {{i18n 'user.watched_first_post_categories'}}</label>
|
||||
{{category-selector categories=model.watchedFirstPostCategories blacklist=selectedCategories}}
|
||||
</div>
|
||||
<div class="instructions">{{i18n 'user.watched_first_post_categories_instructions'}}</div>
|
||||
|
||||
<div class="controls category-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-muted"}} {{i18n 'user.muted_categories'}}</label>
|
||||
{{category-selector categories=model.mutedCategories blacklist=selectedCategories}}
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<div class="control-group notifications">
|
||||
<label class="control-label">{{i18n 'user.notifications'}}</label>
|
||||
|
||||
<div class="controls controls-dropdown">
|
||||
<label>{{i18n 'user.new_topic_duration.label'}}</label>
|
||||
{{combo-box class="duration" valueAttribute="value" content=considerNewTopicOptions value=model.user_option.new_topic_duration_minutes}}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<label class="control-label">{{i18n 'user.tag_settings'}}</label>
|
||||
|
||||
<div class="controls tag-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-watching" class="icon watching"}} {{i18n 'user.watched_tags'}}</label>
|
||||
{{tag-chooser
|
||||
tags=model.watched_tags
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<div class="instructions">{{i18n 'user.watched_tags_instructions'}}</div>
|
||||
|
||||
<div class="controls tag-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-tracking" class="icon tracking"}} {{i18n 'user.tracked_tags'}}</label>
|
||||
{{tag-chooser
|
||||
tags=model.tracked_tags
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div class="instructions">{{i18n 'user.tracked_tags_instructions'}}</div>
|
||||
|
||||
<div class="controls tag-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-watching-first" class="icon watching-first-post"}} {{i18n 'user.watched_first_post_tags'}}</label>
|
||||
{{tag-chooser
|
||||
tags=model.watching_first_post_tags
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="instructions">{{i18n 'user.watched_first_post_tags_instructions'}}</div>
|
||||
|
||||
<div class="controls tag-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-muted" class="icon muted"}} {{i18n 'user.muted_tags'}}</label>
|
||||
{{tag-chooser
|
||||
tags=model.muted_tags
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<div class="control-group muting">
|
||||
<label class="control-label">{{i18n 'user.users'}}</label>
|
||||
<div class="controls category-controls">
|
||||
<label class="control-label">{{i18n 'user.users'}}</label>
|
||||
<div class="control-group">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "d-muted" class="``icon"}} {{i18n 'user.muted_users'}}</label>
|
||||
{{user-selector excludeCurrentUser=true usernames=model.muted_usernames class="user-selector"}}
|
||||
</div>
|
||||
<div class="instructions">{{i18n 'user.muted_users_instructions'}}</div>
|
||||
|
||||
{{#if siteSettings.ignore_user_enabled}}
|
||||
<div class="controls category-controls">
|
||||
<div class="controls tracking-controls">
|
||||
<label>{{d-icon "eye-slash" class="icon"}} {{i18n 'user.ignored_users'}}</label>
|
||||
{{user-selector excludeCurrentUser=true
|
||||
usernames=model.ignored_usernames class="user-selector"}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{#d-section pageClass="user-invites"}}
|
||||
{{#d-section pageClass="user-invites" tagName=""}}
|
||||
{{#if canInviteToForum}}
|
||||
{{#load-more class="paginated-topics-list" selector=".paginated-topics-list .user-invite-list tr" action=(action "loadMore")}}
|
||||
<section class='user-content'>
|
||||
{{#load-more class="user-content" selector=".user-invite-list tr" action=(action "loadMore")}}
|
||||
<section>
|
||||
<h2>{{i18n 'user.invited.title'}}</h2>
|
||||
|
||||
{{#if model.can_see_invite_details}}
|
||||
|
||||
@ -213,6 +213,9 @@
|
||||
{{/unless}}
|
||||
</section>
|
||||
|
||||
<div class='user-content-wrapper'>
|
||||
|
||||
<section class="user-primary-navigation">
|
||||
{{#mobile-nav class='main-nav' desktopClass="nav nav-pills user-nav" currentPath=currentPath}}
|
||||
{{#unless model.profile_hidden}}
|
||||
<li>{{#link-to 'user.summary'}}{{i18n 'user.summary.title'}}{{/link-to}}</li>
|
||||
@ -239,11 +242,9 @@
|
||||
<li>{{#link-to 'preferences'}}{{d-icon "cog"}}{{i18n 'user.preferences'}}{{/link-to}}</li>
|
||||
{{/if}}
|
||||
{{/mobile-nav}}
|
||||
</section>
|
||||
|
||||
<div class='user-table'>
|
||||
<div class='wrapper'>
|
||||
{{outlet}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/d-section}}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{#d-section pageClass="user-activity" class="user-navigation" scrollTop="false"}}
|
||||
{{#d-section pageClass="user-activity" class="user-secondary-navigation" scrollTop="false"}}
|
||||
{{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
|
||||
<li>
|
||||
{{#link-to 'userActivity.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
|
||||
@ -26,14 +26,13 @@
|
||||
connectorTagName='li'
|
||||
args=(hash model=model)}}
|
||||
{{/mobile-nav}}
|
||||
|
||||
{{#if canDownloadPosts}}
|
||||
<div class='user-archive'>
|
||||
{{d-button action=(action "exportUserArchive") class="btn-default" label="user.download_archive.button_text" icon="download"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/d-section}}
|
||||
|
||||
<section class='user-right'>
|
||||
{{#if canDownloadPosts}}
|
||||
<section class='user-additional-controls'>
|
||||
{{d-button action=(action "exportUserArchive") class="btn-default" label="user.download_archive.button_text" icon="download"}}
|
||||
</section>
|
||||
{{/if}}
|
||||
<section class='user-content'>
|
||||
{{outlet}}
|
||||
</section>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{#d-section class="user-navigation" pageClass="user-messages"}}
|
||||
{{#d-section class="user-secondary-navigation" pageClass="user-messages"}}
|
||||
{{#unless site.mobileView}}
|
||||
{{#if showNewPM}}
|
||||
{{d-button class="btn-primary new-private-message" action=(route-action "composePrivateMessage") icon="envelope" label="user.new_private_message"}}
|
||||
@ -55,7 +55,7 @@
|
||||
{{/mobile-nav}}
|
||||
{{/d-section}}
|
||||
|
||||
<section class='user-right messages'>
|
||||
<section class='user-content'>
|
||||
|
||||
<div class="list-actions">
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{#d-section pageClass="user-notifications" class="user-navigation"}}
|
||||
{{#d-section pageClass="user-notifications" class="user-secondary-navigation"}}
|
||||
{{#mobile-nav class='notifications-nav' desktopClass='notification-list action-list nav-stacked' currentPath=application.currentPath}}
|
||||
<li>
|
||||
{{#link-to 'userNotifications.index'}}
|
||||
@ -29,17 +29,20 @@
|
||||
</li>
|
||||
{{/mobile-nav}}
|
||||
|
||||
{{#if model}}
|
||||
{{/d-section}}
|
||||
|
||||
{{#if model}}
|
||||
<section class="user-additional-controls">
|
||||
{{d-button title='user.dismiss_notifications_tooltip'
|
||||
class='btn btn-default dismiss-notifications'
|
||||
action=(action "resetNew")
|
||||
label='user.dismiss_notifications'
|
||||
icon='check'
|
||||
disabled=allNotificationsRead}}
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/d-section}}
|
||||
|
||||
<section class='user-right'>
|
||||
<section class='user-content'>
|
||||
{{#load-more class="notification-history user-stream" selector=".user-stream .notification" action=(action "loadMore")}}
|
||||
{{outlet}}
|
||||
{{conditional-loading-spinner condition=model.loadingMore}}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
{{#d-section pageClass="user-summary"}}
|
||||
{{#d-section pageClass="user-summary" tagName=""}}
|
||||
<div class="user-content">
|
||||
<div class='top-section stats-section'>
|
||||
<h3 class='stats-title'>{{i18n "user.summary.stats"}}</h3>
|
||||
<ul>
|
||||
@ -44,7 +45,7 @@
|
||||
<li>
|
||||
{{user-stat value=model.likes_received icon="heart" label="user.summary.likes_received"}}
|
||||
</li>
|
||||
{{plugin-outlet name="user-summary-stat" connectorTagName="li" args=(hash model=model)}}
|
||||
{{plugin-outlet name="user-summary-stat" tagName="" connectorTagName="li" args=(hash model=model)}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -157,4 +158,5 @@
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/d-section}}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// We should try to reuse the user page HTML for groups when possible
|
||||
// To style group content differently, use the existing classes with a .group parent class.
|
||||
// For example: .group .user-navigation
|
||||
// For example: .group .user-secondary-navigation
|
||||
|
||||
.group-details-container {
|
||||
background: $primary-very-low;
|
||||
|
||||
@ -1,12 +1,79 @@
|
||||
// Common styles for "/user" section
|
||||
// These styles are also used for "/groups" — test those pages if making significant changes
|
||||
.user-right {
|
||||
|
||||
.user-content-wrapper {
|
||||
// Grid layout
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 5fr;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-row-gap: s(5);
|
||||
.user-primary-navigation {
|
||||
grid-column-start: span 2;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 2;
|
||||
}
|
||||
.user-secondary-navigation {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
.user-content,
|
||||
.spinner {
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 4;
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.user-content {
|
||||
min-width: 100%;
|
||||
}
|
||||
.user-secondary-navigation + .user-content {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: span 1;
|
||||
}
|
||||
.user-additional-controls {
|
||||
grid-row-start: 3;
|
||||
align-self: start;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.user-content-wrapper { // IE11 Support
|
||||
display: -ms-grid;
|
||||
-ms-grid-columns: 1fr 5fr;
|
||||
-ms-grid-rows: auto auto 1fr auto;
|
||||
.user-primary-navigation {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 2;
|
||||
}
|
||||
.user-secondary-navigation {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 2;
|
||||
}
|
||||
.user-content,
|
||||
.spinner {
|
||||
-ms-grid-row: 2;
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 2;
|
||||
}
|
||||
.user-secondary-navigation + .user-content {
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 1;
|
||||
}
|
||||
.user-additional-controls {
|
||||
-ms-grid-row: 3;
|
||||
-ms-grid-column-align: start;
|
||||
-ms-grid-row-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
.user-content {
|
||||
.list-actions {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: s(3);
|
||||
|
||||
.btn {
|
||||
margin-right: 10px;
|
||||
margin-right: s(3);
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,6 +84,10 @@
|
||||
.show-mores {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.d-icon-heart {
|
||||
color: $love;
|
||||
}
|
||||
}
|
||||
|
||||
.user-main {
|
||||
@ -163,14 +234,6 @@
|
||||
}
|
||||
|
||||
&.collapsed-info {
|
||||
.controls {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 0;
|
||||
background: rgba($secondary, 0.8);
|
||||
@ -180,12 +243,9 @@
|
||||
}
|
||||
|
||||
.primary {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
@ -197,7 +257,6 @@
|
||||
|
||||
h2 {
|
||||
font-size: $font-up-1;
|
||||
margin-top: 4px;
|
||||
}
|
||||
h3,
|
||||
h3.location-and-website {
|
||||
@ -210,7 +269,7 @@
|
||||
.avatar-flair {
|
||||
bottom: 8px;
|
||||
right: 2px;
|
||||
.fa {
|
||||
.d-icon {
|
||||
font-size: $font-0;
|
||||
}
|
||||
}
|
||||
@ -229,34 +288,22 @@
|
||||
align-items: baseline;
|
||||
flex: 0 1 auto;
|
||||
margin: 0 10px 0 0;
|
||||
color: $secondary;
|
||||
|
||||
span {
|
||||
padding: 1px 6px;
|
||||
padding: 0 7px 1px;
|
||||
border-radius: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $secondary;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.pill {
|
||||
border-radius: 15px;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: $line-height-large;
|
||||
}
|
||||
|
||||
.helpful-flags {
|
||||
background-color: green;
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.flagged-posts {
|
||||
@ -264,25 +311,20 @@
|
||||
}
|
||||
|
||||
.warnings-received {
|
||||
background-color: #ec441b;
|
||||
background-color: $danger-medium;
|
||||
}
|
||||
|
||||
.deleted-posts {
|
||||
background-color: #ec441b;
|
||||
background-color: $danger-medium;
|
||||
}
|
||||
|
||||
.suspensions {
|
||||
background-color: #c22020;
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.user-field {
|
||||
clear: both;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.text {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
label {
|
||||
width: auto;
|
||||
@ -291,11 +333,10 @@
|
||||
}
|
||||
|
||||
.instructions {
|
||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||
color: $primary-medium;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: $font-down-1;
|
||||
line-height: $line-height-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -331,42 +372,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-navigation {
|
||||
.map {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
nav.buttons {
|
||||
width: 180px;
|
||||
padding: 0;
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
a {
|
||||
font-size: $font-0;
|
||||
color: scale-color($tertiary, $lightness: -10%);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-table {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.avatar-selector {
|
||||
padding-bottom: 0 !important;
|
||||
label.radio {
|
||||
padding-left: 10px;
|
||||
}
|
||||
@ -390,10 +396,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-nav {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.top-section {
|
||||
@include clearfix();
|
||||
ul {
|
||||
@ -424,14 +426,14 @@
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 10px 14px;
|
||||
margin: 0 5px 10px 0;
|
||||
padding: 10px 14px 10px 0;
|
||||
margin: 0 10px 10px 0;
|
||||
|
||||
&.linked-stat {
|
||||
// This makes the entire "box" (the li) clickable instead of a narrow area.
|
||||
padding: 0;
|
||||
a {
|
||||
padding: 10px 14px;
|
||||
padding: 10px 14px 10px 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
@ -440,23 +442,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
li:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: bold;
|
||||
font-size: $font-up-2;
|
||||
}
|
||||
|
||||
.label {
|
||||
// TODO: Remove once all languages have been translated to remove icons from
|
||||
// their user-stat labels
|
||||
.fa:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
color: blend-primary-secondary(50%);
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
@ -474,7 +466,7 @@
|
||||
}
|
||||
|
||||
.topic-info {
|
||||
color: dark-light-choose($primary-medium, $secondary-high);
|
||||
color: $primary-medium;
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
@ -494,7 +486,7 @@
|
||||
.links-section {
|
||||
.domain {
|
||||
font-size: $font-down-1;
|
||||
color: dark-light-choose($primary-medium, $secondary-high);
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
@ -517,7 +509,7 @@
|
||||
|
||||
.summary-user-list {
|
||||
li {
|
||||
height: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -532,13 +524,22 @@
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.tracking-controls {
|
||||
label {
|
||||
align-items: center;
|
||||
.d-icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.static {
|
||||
color: $primary;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||
color: $primary-medium;
|
||||
margin-bottom: 10px;
|
||||
font-size: $font-down-1;
|
||||
line-height: $line-height-large;
|
||||
@ -564,8 +565,7 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-notifications .category-controls,
|
||||
.tag-notifications .tag-controls {
|
||||
.tracking-controls {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@ -698,7 +698,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-summary-page .d-icon-heart {
|
||||
color: $love;
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
// Desktop styles for "/user" section
|
||||
.user-right {
|
||||
display: table-cell;
|
||||
|
||||
.user-content-wrapper {
|
||||
&,
|
||||
> .user-stream {
|
||||
> .alert:first-child {
|
||||
@ -14,46 +12,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
transition: height 0.15s linear;
|
||||
}
|
||||
|
||||
.no-background {
|
||||
.profile-image {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-horizontal .control-group.category {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.user-table {
|
||||
width: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
|
||||
.wrapper {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.new-private-message {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-hidden {
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
.user-navigation {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: 170px;
|
||||
|
||||
.user-secondary-navigation {
|
||||
min-width: 150px;
|
||||
.nav-stacked {
|
||||
background-color: transparent;
|
||||
|
||||
@ -61,12 +29,12 @@
|
||||
border-bottom: none;
|
||||
|
||||
&.archive {
|
||||
padding-left: 1.81em;
|
||||
padding-left: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: dark-light-choose($primary-medium, $secondary-high);
|
||||
color: $primary-medium;
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
@ -82,9 +50,9 @@
|
||||
}
|
||||
|
||||
.user-content {
|
||||
padding: 10px 8px;
|
||||
padding-bottom: s(3);
|
||||
margin-bottom: s(3);
|
||||
background-color: $secondary;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.user-badges-list {
|
||||
@ -103,8 +71,8 @@
|
||||
|
||||
.pref-avatar {
|
||||
.avatar {
|
||||
max-width: 45px;
|
||||
max-height: 45px;
|
||||
max-width: 90px;
|
||||
max-height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -128,8 +96,7 @@
|
||||
}
|
||||
|
||||
.user-invite-none {
|
||||
clear: both;
|
||||
padding: 15px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.user-main {
|
||||
@ -148,7 +115,7 @@
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 0 0 4px 0;
|
||||
padding-bottom: s(2);
|
||||
transition: margin 0.15s linear;
|
||||
|
||||
img.avatar {
|
||||
@ -158,7 +125,7 @@
|
||||
|
||||
.primary {
|
||||
.primary-textual {
|
||||
padding: 3px;
|
||||
padding: s(0 1 1);
|
||||
a[href] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -199,11 +166,6 @@
|
||||
.btn {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed-info {
|
||||
@ -216,7 +178,6 @@
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
width: auto;
|
||||
}
|
||||
@ -256,18 +217,9 @@
|
||||
.public-user-fields {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewing-self & .about.collapsed-info {
|
||||
.secondary,
|
||||
.staff-counters {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-preferences {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
padding-top: 10px;
|
||||
padding-left: 30px;
|
||||
|
||||
@ -283,52 +235,13 @@
|
||||
|
||||
.category-selector,
|
||||
.tag-chooser,
|
||||
textarea {
|
||||
textarea,
|
||||
input.user-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
&.user-selector {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-controls,
|
||||
.category-controls {
|
||||
label {
|
||||
align-items: center;
|
||||
.d-icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.instructions {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pref-mailing-list-mode .controls {
|
||||
select {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications,
|
||||
.category-notifications,
|
||||
.tag-notifications,
|
||||
.user-custom-preferences-outlet {
|
||||
.controls select {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-main & .user-field.text {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.image-upload-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: s(1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,31 +46,19 @@ blockquote {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mobile-view .mobile-nav {
|
||||
.mobile-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $primary-low;
|
||||
list-style: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
width: 45%;
|
||||
|
||||
&.messages-nav,
|
||||
&.notifications-nav,
|
||||
&.activity-nav,
|
||||
&.preferences-nav {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -57px;
|
||||
}
|
||||
border: 1px solid $primary-medium;
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
|
||||
.fa {
|
||||
margin-right: 8px;
|
||||
color: dark-light-choose($primary-medium, $secondary-medium);
|
||||
line-height: $line-height-medium;
|
||||
.d-icon {
|
||||
margin-right: .25em;
|
||||
color: $primary-medium;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,8 +71,11 @@ blockquote {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.d-icon-caret-down {
|
||||
margin-left: auto;
|
||||
.expander .d-icon {
|
||||
&:last-of-type {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drop {
|
||||
@ -99,7 +90,7 @@ blockquote {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
border: 1px solid $primary-low;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
|
||||
@ -1,12 +1,40 @@
|
||||
// Mobile styles for "/user" section
|
||||
|
||||
.user-content-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-row-gap: s(5);
|
||||
grid-column-gap: s(4);
|
||||
.user-primary-navigation {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
.user-secondary-navigation {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
.user-secondary-navigation + .user-content {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
.user-additional-controls {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
.user-content,
|
||||
.spinner {
|
||||
grid-row-start: 3;
|
||||
grid-column-start: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.user-main {
|
||||
margin-top: s(3);
|
||||
|
||||
.user-content {
|
||||
box-sizing: border-box;
|
||||
background-color: $secondary;
|
||||
margin-top: s(3);
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: s(3);
|
||||
@ -256,3 +284,35 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-invites-page {
|
||||
.admin-controls {
|
||||
flex-wrap: wrap;
|
||||
.pull-right {
|
||||
flex: 1 1 100%;
|
||||
font-size: $font-down-1;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
table {
|
||||
tr:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
tr {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
td:first-of-type {
|
||||
margin-right: 1em;
|
||||
}
|
||||
td:nth-of-type(n + 3) {
|
||||
display: block;
|
||||
width: 50%;
|
||||
padding: 0.25em 0 1em 0;
|
||||
}
|
||||
}
|
||||
.user-invite-none {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ QUnit.test("update some fields", async assert => {
|
||||
await savePreferences();
|
||||
|
||||
click(".preferences-nav .nav-categories a");
|
||||
fillIn(".category-controls .category-selector", "faq");
|
||||
fillIn(".tracking-controls .category-selector", "faq");
|
||||
await savePreferences();
|
||||
|
||||
assert.ok(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user