thallada/thallada.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide options panel on mobile

Browse Source
This commit is contained in:
Tyler Hallada 2015-01-11 17:45:58 -05:00
parent b702bec1ec
commit 0bf8d2847d
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -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 {

18
magic/index.html
View File

@ -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))">