From 6b6f5e92f18df5b0050c1d354f1306b684afa735 Mon Sep 17 00:00:00 2001
From: Frode Petterson <frode.andre.petterson@gmail.com>
Date: Mon, 13 Feb 2017 12:35:10 +0100
Subject: [PATCH] Improve popup size and position

---
 memory-game.css |  6 +++++-
 memory-game.js  |  1 +
 popup.js        | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/memory-game.css b/memory-game.css
index f491184..afe44ce 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -172,6 +172,7 @@
   background: #fff;
   padding: 1em;
   width: 20em;
+  max-width: 90%;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -182,7 +183,6 @@
 }
 .h5p-memory-game .h5p-memory-image {
   float: left;
-  margin: 0 1em 1em 0;
   border: 2px solid #d0d0d0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -190,7 +190,11 @@
   background: #f0f0f0;
   width: 6.25em;
   height: 6.25em;
+  text-align: center;
 }
 .h5p-memory-game .h5p-row-break {
   clear: left;
 }
+.h5p-memory-game .h5p-memory-desc {
+  margin-left: 7em;
+}
diff --git a/memory-game.js b/memory-game.js
index 5165c1c..e3d8794 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -268,6 +268,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       // We use font size to evenly scale all parts of the cards.
       $list.css('font-size', fontSize + 'px');
+      popup.setSize(fontSize);
       // due to rounding errors in browsers the margins may vary a bit…
     };
 
diff --git a/popup.js b/popup.js
index 44a12de..6ef14b9 100644
--- a/popup.js
+++ b/popup.js
@@ -39,6 +39,23 @@
         closed = undefined;
       }
     };
+
+    /**
+     * Sets popup size relative to the card size
+     * @param {number} fontSize
+     */
+    self.setSize = function (fontSize) {
+      // Set image size
+      $image[0].style.fontSize = fontSize + 'px';
+
+      // Determine card size
+      var cardSize = fontSize * 6.25; // From CSS
+
+      // Set popup size
+      $popup[0].style.minWidth = (cardSize * 2) + 'px';
+      $popup[0].style.minHeight = cardSize + 'px';
+      $desc[0].style.marginLeft = (cardSize + 20) + 'px';
+    };
   };
 
 })(H5P.MemoryGame, H5P.jQuery);