Improve popup size and position

pull/18/head
Frode Petterson 2017-02-13 12:35:10 +01:00
parent 1e645d6b7b
commit 6b6f5e92f1
3 changed files with 23 additions and 1 deletions

View File

@ -172,6 +172,7 @@
background: #fff; background: #fff;
padding: 1em; padding: 1em;
width: 20em; width: 20em;
max-width: 90%;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -182,7 +183,6 @@
} }
.h5p-memory-game .h5p-memory-image { .h5p-memory-game .h5p-memory-image {
float: left; float: left;
margin: 0 1em 1em 0;
border: 2px solid #d0d0d0; border: 2px solid #d0d0d0;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -190,7 +190,11 @@
background: #f0f0f0; background: #f0f0f0;
width: 6.25em; width: 6.25em;
height: 6.25em; height: 6.25em;
text-align: center;
} }
.h5p-memory-game .h5p-row-break { .h5p-memory-game .h5p-row-break {
clear: left; clear: left;
} }
.h5p-memory-game .h5p-memory-desc {
margin-left: 7em;
}

View File

@ -268,6 +268,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// We use font size to evenly scale all parts of the cards. // We use font size to evenly scale all parts of the cards.
$list.css('font-size', fontSize + 'px'); $list.css('font-size', fontSize + 'px');
popup.setSize(fontSize);
// due to rounding errors in browsers the margins may vary a bit… // due to rounding errors in browsers the margins may vary a bit…
}; };

View File

@ -39,6 +39,23 @@
closed = undefined; 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); })(H5P.MemoryGame, H5P.jQuery);