Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Make the user card badge image larger. If present, make text have a 

smaller width to accomodate the larger image.
This commit is contained in:
Robin Ward 2014-11-04 16:30:46 -05:00
parent a78048f3fb
commit 6a424cf469
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/discourse/controllers/user-card.js.es6
View File

@ -28,6 +28,11 @@ export default ObjectController.extend({
showMoreBadges: Em.computed.gt('moreBadgesCount', 0), showMoreBadges: Em.computed.gt('moreBadgesCount', 0),
hasCardBadgeImage: function() {
var img = this.get('user.card_badge.image');
return img && img.indexOf('fa-') === -1;
}.property('user.card_badge.image'),
show: function(username, uploadedAvatarId) { show: function(username, uploadedAvatarId) {
// XSS protection (should be encapsulated) // XSS protection (should be encapsulated)
username = username.replace(/[^A-Za-z0-9_]/g, ""); username = username.replace(/[^A-Za-z0-9_]/g, "");

2
app/assets/javascripts/discourse/views/user-card.js.es6
View File

@ -6,7 +6,7 @@ var clickOutsideEventName = "mousedown.outside-user-card",
export default Discourse.View.extend(CleansUp, { export default Discourse.View.extend(CleansUp, {
elementId: 'user-card', elementId: 'user-card',
classNameBindings: ['controller.visible::hidden', 'controller.showBadges'], classNameBindings: ['controller.visible::hidden', 'controller.showBadges', 'controller.hasCardBadgeImage'],
allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'), allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'),
addBackground: function() { addBackground: function() {

8
app/assets/stylesheets/desktop/user-card.scss
View File

@ -116,9 +116,14 @@
padding-top: 10px; padding-top: 10px;
} }
&.has-card-badge-image .bio {
width: 75%;
}
.bio { .bio {
padding: 15px 0 0 0; padding: 15px 0 0 0;
clear: left; clear: left;
a { a {
color: $secondary; color: $secondary;
text-decoration: underline; text-decoration: underline;
@ -198,7 +203,6 @@
background: transparent; background: transparent;
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);
border-color: scale-color($primary, $lightness: 50%); border-color: scale-color($primary, $lightness: 50%);
} }
h3 { h3 {
@ -223,7 +227,7 @@
.card-badge { .card-badge {
img { img {
max-width: 40px; max-width: 120px;
} }
position: absolute; position: absolute;
right: 12px; right: 12px;