Merge branch 'award-emoji-retina' into 'master'

Award emoji supports retina displays

Based on discussion in !2800

There is now a retina spritesheet for emojis. It is 2mb, don't know how big an issue that is.

Before:

![Screen_Shot_2016-02-19_at_11.07.25](/uploads/ea412579bcaddfd13fce67bf583de61b/Screen_Shot_2016-02-19_at_11.07.25.png)

After:

![Screen_Shot_2016-02-19_at_11.07.36](/uploads/9d44c6278ba31987bad03dc1f46edd8b/Screen_Shot_2016-02-19_at_11.07.36.png)

Also updated the rake task to make the @2x spritesheet https://gitlab.com/snippets/15348

cc\ @rspeicher @vsizov 

See merge request !2891

3 files changed, 10 insertions, 0 deletions

diff --git a/app/assets/images/emoji.png b/app/assets/images/emoji.png
index 44c4ac260ac..1e7cf79ea45 100644
--- a/app/assets/images/emoji.png
+++ b/app/assets/images/emoji.png
diff --git a/app/assets/images/emoji@2x.png b/app/assets/images/emoji@2x.png
new file mode 100644
index 00000000000..74d67f7520d
--- /dev/null
+++ b/app/assets/images/emoji@2x.png
diff --git a/app/assets/stylesheets/pages/emojis.scss b/app/assets/stylesheets/pages/emojis.scss
index e99d60db419..6c721b514f8 100644
--- a/app/assets/stylesheets/pages/emojis.scss
+++ b/app/assets/stylesheets/pages/emojis.scss
@@ -1723,4 +1723,14 @@
   background-repeat: no-repeat;
   height: 20px;
   width: 20px;
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2),
+         only screen and (min--moz-device-pixel-ratio: 2),
+         only screen and (-o-min-device-pixel-ratio: 2/1),
+         only screen and (min-device-pixel-ratio: 2),
+         only screen and (min-resolution: 192dpi),
+         only screen and (min-resolution: 2dppx) {
+    background-image: image-url('emoji@2x.png');
+    background-size: 840px 820px;
+  }
 }