Rework dialog open/close.

diff --git a/main.css b/main.css
index 0ef3b19e9d4c849d931eac6488084209828729c4..74250b84c1f40b2dcaf8d08ca2075871e1794414 100644 (file)
--- a/main.css
+++ b/main.css
@@ -81,40 +81,45 @@ body {
 }
 
 #overlay {
-    position: absolute;
-    left: -50%;
-    right: -50%;
-    top: -50%;
-    bottom: -50%;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     background-color: black;
     opacity: 0;
-    -webkit-animation: fadein 0.5s forwards;
-    animation: fadein 0.5s forwards;
+    transition: opacity 0.5s;
+    -webkit-transition: opacity 0.5s;
+    z-index: 3;
+    pointer-events: none;
 }
 
-@keyframes fadein { to { opacity: 0.5; } }
-@-webkit-keyframes fadein { to { opacity: 0.5; } }
-
 .dialog {
     font-size: 8vmin;
     position: absolute;
     bottom: 10%;
-    width: 66.6667%;
-    margin-left: -6px;
+    left: 16.6667%;
+    right: 16.6667%;
     border-style: solid;
     border-width: 3px;
     border-radius: 9px;
     background-color: inherit;
     padding-bottom: 3vh;
-    transform: translateX(160%);
-    -webkit-transform: translateX(160%);
+    transform: translateX(150%);
+    -webkit-transform: translateX(150%);
     transition: transform 0.5s;
     -webkit-transition: -webkit-transform 0.5s;
+    z-index: 4;
+}
+
+.dialog.open {
+    transform: translateX(0);
+    -webkit-transform: translateX(0);
 }
 
-#overlay + .dialog {
-    transform: translateX(25%);
-    -webkit-transform: translateX(25%);
+.dialog.open ~ #overlay {
+    opacity: 0.5;
+    pointer-events: auto;
 }
 
 .dialog p {
@@ -257,7 +262,6 @@ body {
 
 a {
     display: inline-block;
-    min-width: 1em;
     line-height: 1em;
     border-radius: 0.5em;
 }

diff --git a/mlpccg.html b/mlpccg.html
index 5433a8878d9184084618c3a81efd71784b3fc651..55a56fbc9d3d74b4e8d52a40d05f9f6828ca61df 100644 (file)
--- a/mlpccg.html
+++ b/mlpccg.html
@@ -180,25 +180,7 @@
 
         The CCG is designed and developed by
         <a target="_blank"
-           href="http://www.enter-play.com/products/mlpccg.html">EnterPLAY</a>.
-
-        The <a target="_blank"
-               href="http://www.carrois.com/en/fira-3-1/">Fira Sans</a>
-        font, copyright 2014 the
-        <a target="_blank"
-           href="https://www.mozilla.org/en-US/foundation/">Mozilla Foundation</a>
-        with Reserved Font Name Fira Sans, is licensed under the
-        <a target="_blank"
-           href="http://scripts.sil.org/OFL">SIL OFL</a>.
-
-        The Android Emoji font, copyright 2013
-        the <a target="_blank"
-               href="https://source.android.com/">Android Open Source
-          Project</a>, is licensed under
-        <a target="_blank"
-           href="http://www.apache.org/licenses/LICENSE-2.0.html">the
-        Apache License</a>, Version 2.0; you may not use this work
-        except in compliance with the License.
+           href="http://www.enter-play.com/products/mlpccg.html">EnterPLAY.</a>
 
         This tool is not affiliated with or authorized by any of the
         above parties.
@@ -206,5 +188,7 @@
 
       <a onclick="dismiss()" class="button" >Bo-ring.</a>
     </div>
+
+    <div id="overlay"></div>
   </body>
 </html>

diff --git a/mlpccg.js b/mlpccg.js
index 0e8643efc432b4189f135d425a5a6a1e8897205b..1681afefb30d5a4a5d8523edb03de06aa64a22d5 100644 (file)
--- a/mlpccg.js
+++ b/mlpccg.js
@@ -236,21 +236,14 @@ if (applicationCache && applicationCache.status) {
 }
 
 function dismiss () {
-    var overlay = document.getElementById("overlay");
-    if (overlay)
-        overlay.parentNode.removeChild(overlay);
-    broadcast({ type: "dismiss" });
+    var open = document.querySelectorAll(".dialog.open");
+    for (var i = 0; i < open.length; ++i)
+        open[i].className = "dialog";
 }
 
 function show (id) {
-    var overlay = document.getElementById("overlay");
-    if (!overlay) {
-        overlay = document.createElement('div');
-        overlay.id = 'overlay';
-    } else {
-        overlay.parentNode.removeChild(overlay);
-    }
+    dismiss();
     var target = document.getElementById(id);
-    target.parentNode.insertBefore(overlay, target);
+    target.className += " open";
 }
 

diff --git a/single.html b/single.html
index 2852ad5e475201c19c1e1638845fbb2a35c9ff6b..625a576b4da12f66ff315fe1b056bcb524702d65 100644 (file)
--- a/single.html
+++ b/single.html
@@ -63,7 +63,7 @@
       .bits {
           top: 70vh;
           left: 0;
-          bottom: 15vh;
+          bottom: 10vh;
           right: 50vw;
           line-height: 15vh;
       }
@@ -84,19 +84,18 @@
 
       .adj {
           display: block;
-          padding: 0;
-          max-width: 0.6em;
-          min-width: 0.6em;
           line-height: 0.6em;
           width: 0.6em;
           height: 0.6em;
-          max-height: 0.6em;
-          max-height: 0.6em;
           font-size: 20vmin;
           font-family: 'Sans', sans-serif;
           border-style: solid;
           border-width: 1px;
           border-radius: 0.3em;
+          position: absolute;
+          margin-top: -2.25em;
+          margin-left: 1.6667em;
+          overflow: hidden;
       }
 
       /* Height 0.6 with line-height 0.6 should be centering the text,
@@ -114,7 +113,7 @@
       .score {
           top: 0vh;
           left: 0;
-          bottom: 70vh;
+          bottom: 30vh;
           right: 50vw;
           line-height: 70vh;
       }
@@ -170,16 +169,10 @@
           #current-score, #current-actions { line-height: 1.3333em; }
       }
 
-      #current-score + .adj, #current-actions + .adj {
-          position: absolute;
-          margin-top: -2.25em;
-          margin-left: 1.6667em;
-      }
-
       .turn {
           left: 45vw;
           top: 70vh;
-          bottom: 15vh;
+          bottom: 10vh;
           right: 0;
           line-height: 15vh;
       }
@@ -393,5 +386,6 @@
       <div class="mark subdue" style="font-size: 30vmin; height: 40vmin"></div>
       <a class="button" onclick="dismiss()">You Win!</a>
     </div>
+    <div id="overlay"></div>
   </body>
 </html>