Commit 668c38f4 authored by Phil Hughes's avatar Phil Hughes

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
parents 68e6cb5d fa976454
...@@ -8,6 +8,7 @@ import { updateTooltipTitle } from './lib/utils/common_utils'; ...@@ -8,6 +8,7 @@ import { updateTooltipTitle } from './lib/utils/common_utils';
import { isInVueNoteablePage } from './lib/utils/dom_utils'; import { isInVueNoteablePage } from './lib/utils/dom_utils';
import flash from './flash'; import flash from './flash';
import axios from './lib/utils/axios_utils'; import axios from './lib/utils/axios_utils';
import bp from './breakpoints';
const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd'; const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
...@@ -264,7 +265,10 @@ export class AwardsHandler { ...@@ -264,7 +265,10 @@ export class AwardsHandler {
const css = { const css = {
top: `${$addBtn.offset().top + $addBtn.outerHeight()}px`, 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`; css.left = `${$addBtn.offset().left - $menu.outerWidth() + 20}px`;
$menu.addClass('is-aligned-right'); $menu.addClass('is-aligned-right');
} else { } else {
......
...@@ -415,7 +415,7 @@ $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175); ...@@ -415,7 +415,7 @@ $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175);
$award-emoji-positive-add-bg: #fed159; $award-emoji-positive-add-bg: #fed159;
$award-emoji-positive-add-lines: #bb9c13; $award-emoji-positive-add-lines: #bb9c13;
$award-emoji-width: 376px; $award-emoji-width: 376px;
$award-emoji-width-xs: 300px; $award-emoji-width-xs: 90%;
/* /*
* Search Box * Search Box
......
---
title: Makes emoji picker full width on mobile.
merge_request: 25883
author: Jacopo Beschi @jacopo-beschi
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment