diff options
| author | Phil Hughes <me@iamphill.com> | 2019-03-25 08:54:57 +0000 |
|---|---|---|
| committer | Phil Hughes <me@iamphill.com> | 2019-03-25 08:54:57 +0000 |
| commit | 668c38f4f8ccbbefdb200561722273d7508ac0e0 (patch) | |
| tree | eff859897b154a84a3ac078f67a686cf6c935d5b | |
| parent | 68e6cb5dd6551b5f1c1c24cc1696d31f156fb95b (diff) | |
| parent | fa976454c1c998d3beee45b5663a96c2f609edbc (diff) | |
| download | gitlab-ce-668c38f4f8ccbbefdb200561722273d7508ac0e0.tar.gz | |
Merge branch '57648-make-emoji-picker-full-width-on-mobile' into 'master'
Resolve "Make emoji picker full-width on mobile"
Closes #57648
See merge request gitlab-org/gitlab-ce!25883
| -rw-r--r-- | app/assets/javascripts/awards_handler.js | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 | ||||
| -rw-r--r-- | changelogs/unreleased/57648-make-emoji-picker-full-width-on-mobile.yml | 5 |
3 files changed, 11 insertions, 2 deletions
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js index aeb88715c11..3826ecd1ac1 100644 --- a/app/assets/javascripts/awards_handler.js +++ b/app/assets/javascripts/awards_handler.js @@ -8,6 +8,7 @@ import { updateTooltipTitle } from './lib/utils/common_utils'; import { isInVueNoteablePage } from './lib/utils/dom_utils'; import flash from './flash'; import axios from './lib/utils/axios_utils'; +import bp from './breakpoints'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'; @@ -264,7 +265,10 @@ export class AwardsHandler { const css = { top: `${$addBtn.offset().top + $addBtn.outerHeight()}px`, }; - if (position === 'right') { + // for xs screen we position the element on center + if (bp.getBreakpointSize() === 'xs') { + css.left = '5%'; + } else if (position === 'right') { css.left = `${$addBtn.offset().left - $menu.outerWidth() + 20}px`; $menu.addClass('is-aligned-right'); } else { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 5ee53b22757..efebbd124d0 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -415,7 +415,7 @@ $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175); $award-emoji-positive-add-bg: #fed159; $award-emoji-positive-add-lines: #bb9c13; $award-emoji-width: 376px; -$award-emoji-width-xs: 300px; +$award-emoji-width-xs: 90%; /* * Search Box diff --git a/changelogs/unreleased/57648-make-emoji-picker-full-width-on-mobile.yml b/changelogs/unreleased/57648-make-emoji-picker-full-width-on-mobile.yml new file mode 100644 index 00000000000..d92fd2a762e --- /dev/null +++ b/changelogs/unreleased/57648-make-emoji-picker-full-width-on-mobile.yml @@ -0,0 +1,5 @@ +--- +title: Makes emoji picker full width on mobile. +merge_request: 25883 +author: Jacopo Beschi @jacopo-beschi +type: fixed |