Hide options panel on mobile
This commit is contained in:
parent
b702bec1ec
commit
0bf8d2847d
11
css/main.css
11
css/main.css
@ -158,10 +158,13 @@ img { width: auto; max-width: 100%; height: auto; }
|
|||||||
.hide-mobile {
|
.hide-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.hide-desktop {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 40rem) {
|
@media (min-width: 40rem) {
|
||||||
.hide-desktop { display: none }
|
.hide-desktop { display: none }
|
||||||
.hide-mobile { }
|
.hide-mobile { display: initial }
|
||||||
}
|
}
|
||||||
|
|
||||||
/*****************************************************************************/
|
/*****************************************************************************/
|
||||||
@ -439,9 +442,9 @@ a.no-decoration:hover {
|
|||||||
/*
|
/*
|
||||||
/*****************************************************************************/
|
/*****************************************************************************/
|
||||||
|
|
||||||
i.icon {
|
div.controls-tab button {
|
||||||
padding-left: 0.25rem;
|
width: 28px;
|
||||||
padding-right: 0.25rem;
|
height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.options-panel {
|
div.options-panel {
|
||||||
|
@ -8,7 +8,8 @@ title: Tyler Hallada
|
|||||||
window.magicObj = new Magic({{site.data.magic | jsonify}});
|
window.magicObj = new Magic({{site.data.magic | jsonify}});
|
||||||
magicObj.draw();
|
magicObj.draw();
|
||||||
document.getElementById("play-pause").addEventListener("click", togglePlay);
|
document.getElementById("play-pause").addEventListener("click", togglePlay);
|
||||||
document.getElementById("hide-show").addEventListener("click", togglePanel);
|
document.getElementById("hide-show-mobile").addEventListener("click", togglePanel);
|
||||||
|
document.getElementById("hide-show-desktop").addEventListener("click", togglePanel);
|
||||||
document.getElementById("clear").addEventListener("click", clear);
|
document.getElementById("clear").addEventListener("click", clear);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -16,8 +17,8 @@ title: Tyler Hallada
|
|||||||
magicObj[key] = value;
|
magicObj[key] = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function findParentWithId(el, id) {
|
function findParentWithIds(el, ids) {
|
||||||
while (el.getAttribute('id') !== id) {
|
while (ids.indexOf(el.getAttribute('id')) === -1) {
|
||||||
el = el.parentElement;
|
el = el.parentElement;
|
||||||
}
|
}
|
||||||
return el;
|
return el;
|
||||||
@ -25,8 +26,8 @@ title: Tyler Hallada
|
|||||||
|
|
||||||
function togglePanel(event) {
|
function togglePanel(event) {
|
||||||
var options = document.getElementById("options");
|
var options = document.getElementById("options");
|
||||||
var button = findParentWithId(event.target, "hide-show");
|
var button = findParentWithIds(event.target, ["hide-show-desktop", "hide-show-mobile"]);
|
||||||
if (options.style.display === "none") { // hidden
|
if (options.offsetParent === null) { // hidden
|
||||||
options.style.display = "block";
|
options.style.display = "block";
|
||||||
button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
|
button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
|
||||||
} else { // shown
|
} else { // shown
|
||||||
@ -36,7 +37,7 @@ title: Tyler Hallada
|
|||||||
}
|
}
|
||||||
|
|
||||||
function togglePlay(event) {
|
function togglePlay(event) {
|
||||||
var button = findParentWithId(event.target, "play-pause");
|
var button = findParentWithIds(event.target, ["play-pause"]);
|
||||||
if (magicObj.paused) {
|
if (magicObj.paused) {
|
||||||
magicObj.paused = false;
|
magicObj.paused = false;
|
||||||
button.innerHTML = "<i class=\"icon ion-pause\"></i>";
|
button.innerHTML = "<i class=\"icon ion-pause\"></i>";
|
||||||
@ -55,10 +56,11 @@ title: Tyler Hallada
|
|||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button id="play-pause"><i class="icon ion-pause"></i></button>
|
<button id="play-pause"><i class="icon ion-pause"></i></button>
|
||||||
<button id="clear"><i class="icon ion-refresh"></i></button>
|
<button id="clear"><i class="icon ion-refresh"></i></button>
|
||||||
<button id="hide-show"><i class="icon ion-chevron-down"></i></button>
|
<button id="hide-show-mobile" class="hide-desktop"><i class="icon ion-chevron-up"></i></button>
|
||||||
|
<button id="hide-show-desktop" class="hide-mobile"><i class="icon ion-chevron-down"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="options" class="container-full" style="display:block;">
|
<div id="options" class="container-full hide-mobile">
|
||||||
<div class="row clearfix">
|
<div class="row clearfix">
|
||||||
<div class="column fourth">
|
<div class="column fourth">
|
||||||
<form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))">
|
<form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))">
|
||||||
|
Loading…
Reference in New Issue
Block a user