From faece5a5040d3aa84984ee2fed3ab0815e5334ae Mon Sep 17 00:00:00 2001 From: Kris Aubuchon Date: Wed, 29 Oct 2014 19:48:20 -0400 Subject: [PATCH] new usercard style --- .../admin/templates/user_index.hbs | 1 - .../discourse/templates/user-card.hbs | 63 +++++++-------- .../discourse/templates/user/user.hbs | 2 - .../discourse/views/user-card.js.es6 | 4 +- .../stylesheets/desktop/topic-list.scss | 1 - app/assets/stylesheets/desktop/user-card.scss | 79 +++++++++++++++---- app/assets/stylesheets/desktop/user.scss | 5 -- 7 files changed, 98 insertions(+), 57 deletions(-) diff --git a/app/assets/javascripts/admin/templates/user_index.hbs b/app/assets/javascripts/admin/templates/user_index.hbs index f5aac349e88..2b5f9b8d36d 100644 --- a/app/assets/javascripts/admin/templates/user_index.hbs +++ b/app/assets/javascripts/admin/templates/user_index.hbs @@ -83,7 +83,6 @@ - {{#if currentUser.admin}}
{{i18n admin.groups.title}}
diff --git a/app/assets/javascripts/discourse/templates/user-card.hbs b/app/assets/javascripts/discourse/templates/user-card.hbs index 3e1bf4f70fb..57cd68a40db 100644 --- a/app/assets/javascripts/discourse/templates/user-card.hbs +++ b/app/assets/javascripts/discourse/templates/user-card.hbs @@ -1,37 +1,22 @@ {{#if username}} + +
+ {{#link-to 'user' user}}{{bound-avatar avatar "huge"}}{{/link-to}}
+

{{#link-to 'user' user}}{{username}}{{/link-to}}

{{#if showName}}

{{#link-to 'user' user}}{{name}}{{/link-to}}

{{/if}} +
- {{#if showBadges}} -
- {{#each user.featured_user_badges}} - {{user-badge badge=badge}} - {{/each}} - {{#if showMoreBadges}} - {{#link-to 'user.badges' user class="btn more-user-badges"}} - {{i18n badges.more_badges count=moreBadgesCount}} - {{/link-to}} - {{/if}} -
- {{/if}} - {{#if user}} -
- {{#if user.location}}

{{fa-icon "map-marker"}} {{user.location}}

{{/if}} -

{{i18n last_post}} {{format-date path="user.last_posted_at" leaveAgo="true"}}

-

{{i18n joined}} {{format-date path="user.created_at" leaveAgo="true"}}

- {{groups-list groups=user.custom_groups}} -
-
{{#if isSuspended}}
{{fa-icon "ban"}} @@ -42,26 +27,42 @@ {{#if user.bio_cooked}}
{{{user.bio_cooked}}}
{{/if}} {{/if}} - {{#if user.can_send_private_message_to_user}} - - {{/if}} +{{#if showBadges}} +
+ {{#each user.featured_user_badges}} + {{user-badge badge=badge}} + {{/each}} + {{#if showMoreBadges}} + {{#link-to 'user.badges' user class="btn more-user-badges"}} + {{i18n badges.more_badges count=moreBadgesCount}} + {{/link-to}} + {{/if}} +
+{{/if}} - {{#link-to 'user' user class="btn"}}{{fa-icon "user"}}{{i18n user.profile}}{{/link-to}} + {{#if user.card_badge}} {{#link-to 'badges.show' user.card_badge class="card-badge"}} {{icon-or-image user.card_badge.image}} {{/link-to}} {{/if}} -
+ +
{{else}}

{{i18n loading}}

{{/if}} diff --git a/app/assets/javascripts/discourse/templates/user/user.hbs b/app/assets/javascripts/discourse/templates/user/user.hbs index 930b6170501..5659561b6db 100644 --- a/app/assets/javascripts/discourse/templates/user/user.hbs +++ b/app/assets/javascripts/discourse/templates/user/user.hbs @@ -39,7 +39,6 @@
- {{bound-avatar model "huge"}}
@@ -217,6 +216,5 @@
-
{{/unless}} diff --git a/app/assets/javascripts/discourse/views/user-card.js.es6 b/app/assets/javascripts/discourse/views/user-card.js.es6 index 66bb57f3773..a9e05e5855f 100644 --- a/app/assets/javascripts/discourse/views/user-card.js.es6 +++ b/app/assets/javascripts/discourse/views/user-card.js.es6 @@ -17,9 +17,9 @@ export default Discourse.View.extend(CleansUp, { if (!$this) { return; } if (Ember.empty(url)) { - $this.css('background-image', ''); + $this.css('background-image', '').addClass('no-bg'); } else { - $this.css('background-image', "url(" + url + ")"); + $this.css('background-image', "url(" + url + ")").removeClass('no-bg'); } }.observes('controller.user.card_background'), diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index a15e3c63567..cb110a92172 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -37,7 +37,6 @@ } - // Base list // -------------------------------------------------- diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss index 867a7e23d05..d03ec4eab47 100644 --- a/app/assets/stylesheets/desktop/user-card.scss +++ b/app/assets/stylesheets/desktop/user-card.scss @@ -2,18 +2,33 @@ #user-card { position: absolute; - width: 460px; + width: 500px; left: 20px; z-index: 990; box-shadow: 0 2px 6px rgba(0,0,0, .6); margin-top: -2px; - background-color: $secondary; - padding: 12px 12px 5px 12px; - border: 1px solid scale-color-diff(); - + background-color: $primary; + color: $secondary; background-size: cover; background-position: center center; + .card-content { + padding: 12px; + background: rgba($primary, .85); + margin-top: 100px; + &:after { + content: ''; + display: block; + clear: both; + } + } + +&.no-bg { + .card-content { + margin-top: 0; + } +} + .avatar-placeholder { width: 120px; height: 120px; @@ -27,12 +42,12 @@ font-size: 25px; line-height: 1.25; display: block; - max-width: 280px; + max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; a { - color: $primary; + color: $secondary; } } @@ -41,13 +56,12 @@ line-height: 1.25; font-weight: normal; display: block; - max-width: 280px; + max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - a { - color: $primary; + color: $secondary; } } @@ -58,6 +72,9 @@ color: scale-color($primary, $lightness: 50%); overflow: hidden; text-overflow: ellipsis; + a { + color: $secondary; + } } .groups { font-size: 13px; @@ -84,9 +101,15 @@ } .bio { - max-height: 100px; + max-height: 55px; overflow: auto; - margin-bottom: 10px; + float: left; + margin: 10px 0; + width: 70%; + a { + color: $secondary; + text-decoration: underline; + } img { max-width: 100%; } @@ -95,6 +118,7 @@ img.avatar { float: left; padding-right: 10px; + margin-top: -60px; } p { @@ -108,6 +132,16 @@ .btn { margin: 0 0 7px 0; + box-sizing: border-box; + } + + .usercard-controls { + list-style-type: none; + margin: 0; + position: absolute; + right: 12px; + + a {width: 100%; min-width: 150px;} } .new-user a { @@ -115,17 +149,32 @@ } &.show-badges { - width: 560px; + width: 580px; .names { - width: 250px; float: left; + height: 60px; + position: relative; + width: 45%; + + span { + position: absolute; + bottom: 0; + display: block; + } + } .badge-section { margin-top: 10px; float: left; - width: 270px; + width: 390px; + + .user-badge { + background: transparent; + color: $secondary; + + } h3 { color: $primary; diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index d966bde7864..44975240f08 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -6,11 +6,6 @@ } } -.has-background .details { -} - - - .profile-image { height: 250px; width: 100%;