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';
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 {
......
......@@ -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
......
---
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