updated examples

This commit is contained in:
mig 2017-04-07 01:13:46 +02:00
parent 9babba18d2
commit 0db8aa288a
3 changed files with 31 additions and 24 deletions

View file

@ -63,10 +63,14 @@
</div>
</div>
<div id="games" style="display:none">
<div id="close-games">
<span></span>
</div>
<div id="game-list"></div>
<div>
<div>
<div id="close-games">
<span>&laquo; Back</span>
</div>
<div id="game-list"></div>
</div>
</div>
</div>

View file

@ -13,13 +13,12 @@ html,body {
}
#applet {
display: table-cell;
width: 60%;
height: 100%;
position: relative;
}
#controls {
display: table-cell;
width: 33%;
width: 300px;
vertical-align: top;
padding: 0 .5em 0 .5em;
}
@ -27,7 +26,7 @@ html,body {
margin: .0 0 1em 0;
}
#controls button {
margin-right: 1em;
margin: .25em;
}
#controls label select {
margin-left: 1em;
@ -62,33 +61,36 @@ html,body {
}
#games {
display: table-cell;
width: 33%;
width: 300px;
vertical-align: top;
padding: 0;
}
#games > div {
position: relative;
height: 100%;
width: 100%;
}
#games > div > div {
overflow-y: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#close-games {
text-align: right;
position: absolute;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid #eee;
background-color: #fff;
}
#close-games {
#close-games span {
font-size: 16pt;
padding: 6px;
cursor: pointer;
}
#game-list {
width: 100%;
height: 100%;
Xfloat: right;
overflow-y: auto;
Xborder: 1px solid #eee;
margin: 0px;
padding: 40px 8px 8px 8px;
padding: 8px;
}
.game-descr {

View file

@ -107,7 +107,7 @@ $(document).ready(function () {
match.getConfig()
.then( (config) => {
$("#game-title").show().text(config.model["title-en"]);
$("#close-games span").show().text("<< Back to "+config.model["title-en"]);
$("#close-games span").show();
$("#game-status").show();
var viewOptions = config.view;
@ -215,11 +215,12 @@ $(document).ready(function () {
});
// yeah, using the fullscreen API is not as easy as it should be
var requestFullscreen = area.requestFullscreen || area.webkitRequestFullscreen;
var requestFullscreen = area.requestFullscreen || area.webkitRequestFullscreen ||
area.webkitRequestFullScreen || area.mozRequestFullScreen;
if(requestFullscreen) {
$(document).on("webkitfullscreenchange fullscreenchange",()=>{
var isFullscreen = document.webkitFullscreenElement || document.fullscreenElement;
$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange",()=>{
var isFullscreen = document.webkitFullscreenElement || document.webkitFullScreenElement ||
document.mozFullScreenElement || document.fullscreenElement;
if(isFullscreen)
area.style.display = "block";
else