From 9a884a38d7364b3518b5245bc36c4a8eeac1e7a0 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 7 Dec 2018 10:30:58 +0000
Subject: [PATCH] Add PNG versions of the folder icons for IE8 users
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

IE8 doesn’t support SVG images as CSS backgrounds. We still have users
on IE8, as I saw yesterday.

This commit adds fallback PNG images for these users. The images are
rendered at 1x (because no-one is using IE8 on a retina screen) and
have been run through `pngcrush -brute` for the smallest possible file
size.
---
 app/assets/images/folder-black.png            | Bin 0 -> 266 bytes
 app/assets/images/folder-blue-bold.png        | Bin 0 -> 262 bytes
 app/assets/images/folder-blue.png             | Bin 0 -> 272 bytes
 .../stylesheets/components/message.scss       |  18 ++++++++++++++++++
 4 files changed, 18 insertions(+)
 create mode 100644 app/assets/images/folder-black.png
 create mode 100644 app/assets/images/folder-blue-bold.png
 create mode 100644 app/assets/images/folder-blue.png

diff --git a/app/assets/images/folder-black.png b/app/assets/images/folder-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f29a028684bd9c5d5b461d2700b9850e409b286
GIT binary patch
literal 266
zcmeAS@N?(olHy`uVBq!ia0vp^YCtT@!3HFcHOL(RQjEnx?oNz1PwLbIISR=hLB0$O
zRX|k@Ees65fI<x~7#K<o7#Ln9FfdrnU|<k0n6oR;1}MQ<;1OBOz`!jG!i)^F=12eq
zn>}3|Ln2z=Uf#&tpdiwc$hKg^(scGajWZ$yj~B?yJTz@bi*&}ECz4iD!iSrmh=%|9
z8-7P~t*POxPLHo1hKajFBJy7F?SA(>{MZbkZC#DN_oi<M=F!R9_?vT8f@QXD`Rw@{
z6TCT$5;bK_tgf#~+i;DMO(LNILa0fosUFBm&}VnpW5e}vyB^Rv44$rjF6*2UngFjO
BRXG3v

literal 0
HcmV?d00001

diff --git a/app/assets/images/folder-blue-bold.png b/app/assets/images/folder-blue-bold.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5065ea421c1dfd2290be64985c8bc4acf528850
GIT binary patch
literal 262
zcmeAS@N?(olHy`uVBq!ia0vp^Qa~)i!3HEJJLv8MQjEnx?oNz1PwLbIISR=hLB0$O
zRcZ_j4J`}|zkoswFBlj~4Hy_+B``2p&0t^<FPO6{&;}^MS>O>_%)r1c48n{Iv*t(u
z1?xRs978;gCnt17|C;adN3MfaqT#{+|Nm8z*@SeM9<p@lPC6O=+rIvvAkQ3&zYLpP
ze`{_#v8e9!|7w1@#G?xC3Xx(C#@!Bf%7z_=hK6FYy9&DP#2O3UetI17SU{fd-F@d>
zu1_93W!LMEGReBQ!qxefQp{BrRf%jtmtr6NZU(_i_qBeO%xD8Tg~8L+&t;ucLK6Uq
CQ&e35

literal 0
HcmV?d00001

diff --git a/app/assets/images/folder-blue.png b/app/assets/images/folder-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..10e994dd18ea694de25cbadb7a24f257a78b1c56
GIT binary patch
literal 272
zcmeAS@N?(olHy`uVBq!ia0vp^YCtT@!3HFcHOL(RQjEnx?oNz1PwLbIISR=hLB0$O
zRX|k@Ees65fI<x~7#K<o7#Ln9FfdrnU|<k0n6oR;1}MQ<;1OBOz`!jG!i)^F=12eq
zJ3U<-Ln00*C-g;sn$INj;s5`7wx|R)F4=8$8?1O*STkO2Xt>1t|NY&150SEy(cN!0
zG&w%r&==`GLAI>!g2kH;Cuf_SXGyW-X>okDa)RB)q%Ik=%8MTlzBGtf5y-8ruD^WV
z;T4?|Cm&mJ*iF{#)rP?KUaOodiHrH9OK+?=%r@~bo3LD|ge4y{L+U54?OWycH~<~R
N;OXk;vd$@?2>?ACU4sAs

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index a0426c916..ef867af2b 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -87,12 +87,18 @@
   &-folder {
 
     a:first-child {
+
       display: inline-block;
       text-indent: 40px;
       background-image: file-url('folder-blue-bold.svg');
       background-repeat: no-repeat;
       background-size: auto 20px;
       background-position: 0px 2px;
+
+      @include ie-lte(8) {
+        background-image: file-url('folder-blue-bold.png');
+      }
+
     }
 
   }
@@ -134,10 +140,16 @@
     vertical-align: top;
 
     &:first-child {
+
       background-image: file-url('folder-blue.svg');
       max-width: 33%;
       overflow: hidden;
       text-overflow: ellipsis;
+
+      @include ie-lte(8) {
+        background-image: file-url('folder-blue.png');
+      }
+
     }
 
   }
@@ -147,8 +159,14 @@
     padding-left: 0;
 
     &:first-child {
+
       background-image: file-url('folder-black.svg');
       padding-left: $gutter * 2;
+
+      @include ie-lte(8) {
+        background-image: file-url('folder-black.png');
+      }
+
     }
 
   }