From be64c43cc5d4aa7007f7cbffba0559de494bf4fe Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Tue, 26 Sep 2017 12:54:34 -0700
Subject: [PATCH] emoji-popover: Add centered layout for mobile/responsive.

This adds a centered layout for mobile and responsive screens where the
emoji picker is guaranteed to be in the center of the screen, and the
rest of the screen darkens behind it.

Fixes: #6291.
---
 static/js/emoji_picker.js  | 11 ++++++++++-
 static/styles/popovers.css | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js
index 99e34e465b..67e9a04065 100644
--- a/static/js/emoji_picker.js
+++ b/static/js/emoji_picker.js
@@ -566,10 +566,19 @@ exports.render_emoji_popover = function (elt, id) {
         categories: get_rendered_emoji_categories(),
     };
     var placement = popovers.compute_placement(elt, APPROX_HEIGHT, APPROX_WIDTH, true);
+
+    var template = templates.render('emoji_popover', template_args);
+
+    // if the window is mobile sized, add the `.popover-flex` wrapper to the emoji
+    // popover so that it will be wrapped in flex and centered in the screen.
+    if (window.innerWidth <= 768) {
+        template = "<div class='popover-flex'>" + template + "</div>";
+    }
+
     elt.popover({
         // temporary patch for handling popover placement of `viewport_center`
         placement: placement === 'viewport_center' ? 'left' : placement,
-        template:  templates.render('emoji_popover', template_args),
+        template:  template,
         title:     "",
         content:   generate_emoji_picker_content(id),
         trigger:   "manual",
diff --git a/static/styles/popovers.css b/static/styles/popovers.css
index f0452cbf60..be63b5b1ed 100644
--- a/static/styles/popovers.css
+++ b/static/styles/popovers.css
@@ -127,6 +127,42 @@ ul.actions_popover i {
         background-color: #fff;
         pointer-events: all;
     }
+
+    .popover-flex {
+        position: absolute;
+        top: 0 !important;
+        left: 0 !important;
+
+        width: 100vw;
+        height: 100vh;
+
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+
+        background-color: rgba(0, 0, 0, 0.7);
+
+        z-index: 103;
+
+        opacity: 0;
+        pointer-events: none;
+
+        transition: all 0.3s ease;
+    }
+
+    .popover-flex.fade.in {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    .popover-flex .popover {
+        display: inline-block;
+    }
+
+    .emoji-info-popover {
+        position: static;
+        margin-right: 0;
+    }
 }
 
 .popover_user_presence {