From 7276bed5abaa6adcb76577409abb4066d8b4f72f Mon Sep 17 00:00:00 2001
From: Trey Pendragon <tpendragon@princeton.edu>
Date: Thu, 15 Jun 2017 14:08:31 -0700
Subject: [PATCH] Override flipping animations for IE.

IE doesn't support the hidden backing property very well. The best I
could do was make it so that it works in Chrome and will flip instantly
in IE. Unfortunately, to do that, I had to override the classes and copy
over some of the CSS from Spotlight.
---
 app/assets/stylesheets/application.scss       | 88 +++++++++++++++++++
 .../spotlight/exhibits/_exhibit_card.html.erb | 10 +++
 2 files changed, 98 insertions(+)
 create mode 100644 app/views/spotlight/exhibits/_exhibit_card.html.erb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ef641735..742d8934 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -110,3 +110,91 @@ li[dir=rtl] {
   width: 60%;
   display: inline-block;
 }
+.exhibit-card:hover .flipping {
+  /*Flip */
+  -webkit-transform: rotateY(0.5turn);
+  -moz-transform: rotateY(0.5turn);
+  -o-transform: rotateY(0.5turn);
+  -ms-transform: none;
+  .card-fronting {
+    -ms-transform:perspective(800px) rotateY(180deg);
+  }
+  .card-backing {
+    -ms-transform:perspective(800px) rotateY(0deg);
+  }
+}
+.flipping {
+  position: relative;
+  transform-style: preserve-3d;
+  -moz-transition: 0.6s;
+  -webkit-transition: 0.6s;
+  -o-transition: 0.6s;
+  -ms-transition: 0s;
+
+  .card-face {
+    transition: 0s;
+  }
+  .card-backing {
+    -moz-transform:perspective(800px) rotateY(-180deg);
+    -webkit-transform:perspective(800px) rotateY(-180deg);
+    -o-transform:perspective(800px) rotateY(-180deg);
+    // transform:perspective(800px) rotateY(-180deg);
+  }
+}
+body { -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; }
+
+.card-backing {
+  box-shadow: $exhibit-card-shadow;
+  padding: 0 $exhibit-card-gutter;
+
+  .card-title {
+    border-bottom: 1px dotted $exhibit-card-border;
+    line-height: $headings-line-height;
+    margin-bottom: $padding-base-vertical;
+    padding-bottom: $padding-base-vertical;
+  }
+
+  .subtitle {
+    @extend .h5;
+    @extend .text-center;
+    line-height: $headings-line-height;
+  }
+
+  .description {
+    font-size: $font-size-h6;
+  }
+
+  .visit-exhibit {
+    bottom: $exhibit-card-gutter;
+    position: absolute;
+  }
+}
+
+.card-fronting {
+  z-index: 2;
+
+  img {
+    height: $exhibit-card-image-size;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .card-title {
+    padding-left: $padding-small-horizontal;
+    padding-right: $padding-small-horizontal;
+    padding-top: $padding-large-vertical;
+  }
+
+  .unpublished {
+    @extend .center-block;
+
+    font-size: $font-size-base;
+    margin-top: -1em;
+    position: relative;
+    width: 15ch;
+
+    + .card-title {
+      padding-top: 0;
+    }
+  }
+}
diff --git a/app/views/spotlight/exhibits/_exhibit_card.html.erb b/app/views/spotlight/exhibits/_exhibit_card.html.erb
new file mode 100644
index 00000000..083d4ff9
--- /dev/null
+++ b/app/views/spotlight/exhibits/_exhibit_card.html.erb
@@ -0,0 +1,10 @@
+<div class="col-xs-12 col-sm-4 exhibit-card">
+  <div class="flipping">
+    <div class="card-fronting card-face">
+      <%= render 'exhibit_card_front', exhibit: exhibit %>
+    </div>
+    <div class="card-backing card-face">
+      <%= render 'exhibit_card_back', exhibit: exhibit %>
+    </div>
+  </div>
+</div>