From c6e3a6d7eda223770c94ad94ead294f1077a7763 Mon Sep 17 00:00:00 2001
From: WrinklyNinja <wrinklyninja1@gmail.com>
Date: Tue, 20 May 2014 08:48:51 +0100
Subject: [PATCH] Added (commented-out) flip transform for cards.

I'm having trouble with the plugin menu disappearing below elements from
the card below, and also with the editor controls disappearing once the
flip is complete, so the flip is disabled for now.
---
 resources/report/css/style.css | 27 ++++++++++++++++++++++++++-
 resources/report/js/script.js  |  3 +--
 resources/report/report.html   |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index f2d8dc2e..95c05e30 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -154,6 +154,7 @@ nav a {
     overflow: auto;
     flex-shrink: 10;
     flex-grow: 1;
+    /*-webkit-perspective: 1000;*/
 }
 
 section, .dialog {
@@ -167,6 +168,31 @@ section, .dialog {
 
 section[data-active] {
     overflow:visible;
+    /*transition: 0.6s;
+    -webkit-transform-style: preserve-3d;
+    z-index:-1;*/
+}
+
+/*section[data-active] .front, section[data-active] .editor {
+    -webkit-backface-visibility: hidden;
+    transition: 0.6s;
+}*/
+
+section[data-active] .editor {
+    /*-webkit-transform: rotateY(180deg);*/
+    display:none;
+}
+
+/*section[data-active].flip  {
+    -webkit-transform: rotateY(180deg);
+}*/
+
+section[data-active].flip .front  {
+    display:none;
+}
+
+section[data-active].flip .editor  {
+    display:block;
 }
 
 section[data-active] .buttons {
@@ -201,7 +227,6 @@ section .buttons  > li:hover {
     list-style-type: none;
     position: absolute;
     right: 0.5em;
-    font: 10pt/1.5 Helvetica,sans-serif;
     width: 13em;
     z-index: 2;
     text-align: left;
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 994d3f94..845ca139 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -243,8 +243,7 @@ function processButtonClick(evt) {
         clearAllMetadata();
     } else if (action == 'show-editor') {
         var section = evt.target.parentElement.parentElement.parentElement.parentElement.parentElement;
-        hideElement(document.getElementsByClassName('front')[0]);
-        showElement(document.getElementsByClassName('editor')[0]);
+        section.classList.toggle('flip');
     }
 }
 function toggleInputRO(evt) {
diff --git a/resources/report/report.html b/resources/report/report.html
index f16a111b..c9bc1fac 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -54,7 +54,7 @@
                         </ol>
                 </ol>
             </div>
-            <div class="editor hidden">
+            <div class="editor">
                 <h1></h1>
                 <div class="crc"></div>
                 <div class="version"></div>