From 814aee343be3e3d36199ba0a6bc1c13f34121687 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 29 Mar 2019 12:52:26 -0400 Subject: [PATCH] UX: Minor profile page restructure --- .../javascripts/discourse/templates/user.hbs | 111 +++++++++--------- app/assets/stylesheets/common/base/user.scss | 6 +- app/assets/stylesheets/desktop/user.scss | 38 +++--- app/assets/stylesheets/mobile/user.scss | 27 +++-- 4 files changed, 93 insertions(+), 89 deletions(-) diff --git a/app/assets/javascripts/discourse/templates/user.hbs b/app/assets/javascripts/discourse/templates/user.hbs index c8442628897..a014d4257b1 100644 --- a/app/assets/javascripts/discourse/templates/user.hbs +++ b/app/assets/javascripts/discourse/templates/user.hbs @@ -1,8 +1,9 @@
{{#d-section class="user-main"}} -
+
{{#unless collapsedInfo}} + {{#if showStaffCounters}}
{{#if model.number_of_flags_given}} @@ -12,7 +13,7 @@
{{#link-to 'review' (query-params username=model.username status='all' type='ReviewableFlaggedPost')}} {{model.number_of_flagged_posts}}{{i18n 'user.staff_counters.flagged_posts'}} - {{/link-to}} + {{/link-to}}
{{/if}} {{#if model.number_of_deleted_posts}} @@ -55,7 +56,7 @@ {{/if}} {{/if}} {{#if currentUser.staff}} -
  • {{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}
    • +
  • {{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}
    • {{/if}} {{plugin-outlet name="user-profile-controls" tagName="" @@ -146,61 +147,61 @@ {{plugin-outlet name="user-profile-primary" args=(hash model=model)}}
    -
    + {{#unless collapsedInfo}} +
    +
    + {{#if model.created_at}} +
    {{i18n 'user.created'}}
    {{bound-date model.created_at}}
    + {{/if}} + {{#if model.last_posted_at}} +
    {{i18n 'user.last_posted'}}
    {{bound-date model.last_posted_at}}
    + {{/if}} + {{#if model.last_seen_at}} +
    {{i18n 'user.last_seen'}}
    {{bound-date model.last_seen_at}}
    + {{/if}} +
    {{i18n 'views'}}
    {{model.profile_view_count}}
    + {{#if model.invited_by}} +
    {{i18n 'user.invited_by'}}
    {{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}
    + {{/if}} + {{#if model.trust_level}} +
    {{i18n 'user.trust_level'}}
    {{model.trustLevel.name}}
    + {{/if}} + {{#if canCheckEmails}} +
    {{i18n 'user.email.title'}}
    +
    + {{#if model.email}} + {{model.email}} + {{else}} + {{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}} + {{/if}} +
    +
    + {{/if}} + + {{#if model.displayGroups}} +
    {{i18n 'groups.title' count=model.displayGroups.length}}
    +
    + {{#each model.displayGroups as |group|}} + {{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}} + {{/each}} + + {{#link-to "groups" (query-params username=model.username)}} + ... + {{/link-to}} +
    +
    + {{/if}} + + {{#if canDeleteUser}} +
    {{d-button action=(action "adminDelete") icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
    + {{/if}} +
    + {{plugin-outlet name="user-profile-secondary" args=(hash model=model)}} +
    + {{/unless}} - {{#unless collapsedInfo}} -
    -
    - {{#if model.created_at}} -
    {{i18n 'user.created'}}
    {{bound-date model.created_at}}
    - {{/if}} - {{#if model.last_posted_at}} -
    {{i18n 'user.last_posted'}}
    {{bound-date model.last_posted_at}}
    - {{/if}} - {{#if model.last_seen_at}} -
    {{i18n 'user.last_seen'}}
    {{bound-date model.last_seen_at}}
    - {{/if}} -
    {{i18n 'views'}}
    {{model.profile_view_count}}
    - {{#if model.invited_by}} -
    {{i18n 'user.invited_by'}}
    {{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}
    - {{/if}} - {{#if model.trust_level}} -
    {{i18n 'user.trust_level'}}
    {{model.trustLevel.name}}
    - {{/if}} - {{#if canCheckEmails}} -
    {{i18n 'user.email.title'}}
    -
    - {{#if model.email}} - {{model.email}} - {{else}} - {{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}} - {{/if}} -
    -
    - {{/if}} - {{#if model.displayGroups}} -
    {{i18n 'groups.title' count=model.displayGroups.length}}
    -
    - {{#each model.displayGroups as |group|}} - {{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}} - {{/each}} - - {{#link-to "groups" (query-params username=model.username)}} - ... - {{/link-to}} -
    -
    - {{/if}} - - {{#if canDeleteUser}} -
    {{d-button action=(action "adminDelete") icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
    - {{/if}} -
    - {{plugin-outlet name="user-profile-secondary" args=(hash model=model)}} -
    - {{/unless}}
    diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss index 050a3ade44f..b477ad34248 100644 --- a/app/assets/stylesheets/common/base/user.scss +++ b/app/assets/stylesheets/common/base/user.scss @@ -101,9 +101,9 @@ margin-bottom: 15px; .secondary { - background: $secondary; + display: inline-block; + width: 100%; border-top: 1px solid $primary-low; - border-bottom: 1px solid $primary-low; .btn { padding: 4px 12px; @@ -155,6 +155,7 @@ .details { background: rgba($secondary, 0.8); + border-bottom: 1px solid $primary-low; h1 { font-size: $font-up-5; @@ -196,7 +197,6 @@ .primary { width: 100%; position: relative; - float: left; h1 { font-weight: bold; diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 3de610ee9aa..dcd4cd66796 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -103,9 +103,6 @@ margin-bottom: 50px; .about { - background-position: center center; - background-size: cover; - &.group { .details { padding: 15px 0; @@ -115,12 +112,8 @@ } .details { - padding-bottom: s(2); - transition: margin 0.15s linear; - img.avatar { margin: 0 20px 10px 0; - transition: all 0.1s linear; } .primary { @@ -149,12 +142,23 @@ } } } + + .secondary { + margin-top: s(4); + } } &.has-background { + .user-profile-image { + height: 300px; + background-size: cover; + background-repeat: no-repeat; + } .details { - padding: 15px 15px 4px 15px; - margin-top: 240px; + box-sizing: border-box; + width: 100%; + padding: 15px 0 0 0; + bottom: 0; } } @@ -169,11 +173,14 @@ } &.collapsed-info { + .user-profile-image { + display: none; + } .controls { width: auto; - ul { - li { + > ul { + > li { display: inline; } @@ -185,16 +192,11 @@ } .details { - padding: 0 0 2px 0; + position: relative; + padding: 0; margin-top: 0; border-bottom: 1px solid $primary-low; } - - &.has-background { - .details { - padding: 12px 15px 2px 15px; - } - } } } diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 061e772e5af..b0990b9a773 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -47,14 +47,13 @@ color: $secondary; .secondary { - margin-bottom: s(3); dl { padding: s(2) 0; } } .details { - background: $secondary; + margin-bottom: s(3); h1 { line-height: $line-height-small; @@ -131,16 +130,15 @@ } &.has-background { - background-size: contain; - background-position: top center; - background-repeat: no-repeat; - + .user-profile-image { + height: 200px; + background-size: contain; + background-position: top center; + background-repeat: no-repeat; + } .user-profile-avatar { margin-top: s(-24); } - .details { - margin-top: 200px; - } } .controls { @@ -163,6 +161,13 @@ a { width: 100%; } + .select-kit.dropdown-select-box.user-notifications-dropdown { + width: 100%; + li { + flex: 1 1 100%; + margin-left: 0; + } + } } } @@ -210,10 +215,6 @@ .user-profile-names { text-align: left; } - .controls { - margin: s(2) 0 s(3); - border-bottom: 1px solid $primary-low; - } } .form-horizontal .control-group.category {