diff options
| author | jerasmus <jerasmus@gitlab.com> | 2018-11-06 08:57:21 +0200 |
|---|---|---|
| committer | jerasmus <jerasmus@gitlab.com> | 2018-11-07 08:19:20 +0200 |
| commit | 9406a497ba6214995d60be3f74252d295fac2da2 (patch) | |
| tree | a58e41c5bc75ef66312e6518d5f98704f87b723e | |
| parent | 84f562e7040f1da818157853de84874d57135ca9 (diff) | |
| download | gitlab-ce-6500-fix-misaligned-approvers-dropdown.tar.gz | |
Fix miss-aligned approvers dropdown6500-fix-misaligned-approvers-dropdown
Fixed the miss-alignment by adding the correct classes.
Cleaned up the method to rather use string interpolation.
| -rw-r--r-- | app/assets/javascripts/users_select.js | 28 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/selects.scss | 2 | ||||
| -rw-r--r-- | changelogs/unreleased/6500-fix-misaligned-approvers-dropdown.yml | 5 |
3 files changed, 23 insertions, 12 deletions
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js index 4b090212d83..ce051582299 100644 --- a/app/assets/javascripts/users_select.js +++ b/app/assets/javascripts/users_select.js @@ -1,4 +1,4 @@ -/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, no-void, camelcase, no-param-reassign */ +/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, camelcase, no-param-reassign */ /* global Issuable */ /* global emitSidebarEvent */ @@ -696,17 +696,21 @@ UsersSelect.prototype.formatResult = function(user) { } else { avatar = gon.default_avatar_url; } - return ( - "<div class='user-result " + - (!user.username ? 'no-username' : void 0) + - "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" + - avatar + - "'></div> <div class='user-name dropdown-menu-user-full-name'>" + - _.escape(user.name) + - "</div> <div class='user-username dropdown-menu-user-username'>" + - (!user.invite ? '@' + _.escape(user.username) : '') + - '</div> </div>' - ); + return ` + <div class='user-result'> + <div class='user-image'> + <img class='avatar avatar-inline s32' src='${avatar}'> + </div> + <div class='user-info'> + <div class='user-name dropdown-menu-user-full-name'> + ${_.escape(user.name)} + </div> + <div class='user-username dropdown-menu-user-username text-secondary'> + ${!user.invite ? '@' + _.escape(user.username) : ''} + </div> + </div> + </div> + `; }; UsersSelect.prototype.formatSelection = function(user) { diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 381c0290d32..7f0edd88dfb 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -243,6 +243,8 @@ .user-result { min-height: 24px; + display: flex; + align-items: center; .user-image { float: left; diff --git a/changelogs/unreleased/6500-fix-misaligned-approvers-dropdown.yml b/changelogs/unreleased/6500-fix-misaligned-approvers-dropdown.yml new file mode 100644 index 00000000000..3e87c5875c6 --- /dev/null +++ b/changelogs/unreleased/6500-fix-misaligned-approvers-dropdown.yml @@ -0,0 +1,5 @@ +--- +title: Fix misaligned approvers dropdown +merge_request: 22832 +author: +type: fixed |