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 {
display: none;
}
.hide-desktop {
display: initial;
}
@media (min-width: 40rem) {
.hide-desktop { display: none }
.hide-mobile { }
.hide-mobile { display: initial }
}
/*****************************************************************************/
@ -439,9 +442,9 @@ a.no-decoration:hover {
/*
/*****************************************************************************/
i.icon {
padding-left: 0.25rem;
padding-right: 0.25rem;
div.controls-tab button {
width: 28px;
height: 28px;
}
div.options-panel {

18
magic/index.html
View File

@ -8,7 +8,8 @@ title: Tyler Hallada
window.magicObj = new Magic({{site.data.magic | jsonify}});
magicObj.draw();
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);
}
@ -16,8 +17,8 @@ title: Tyler Hallada
magicObj[key] = value;
}
function findParentWithId(el, id) {
while (el.getAttribute('id') !== id) {
function findParentWithIds(el, ids) {
while (ids.indexOf(el.getAttribute('id')) === -1) {
el = el.parentElement;
}
return el;
@ -25,8 +26,8 @@ title: Tyler Hallada
function togglePanel(event) {
var options = document.getElementById("options");
var button = findParentWithId(event.target, "hide-show");
if (options.style.display === "none") { // hidden
var button = findParentWithIds(event.target, ["hide-show-desktop", "hide-show-mobile"]);
if (options.offsetParent === null) { // hidden
options.style.display = "block";
button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
} else { // shown
@ -36,7 +37,7 @@ title: Tyler Hallada
}
function togglePlay(event) {
var button = findParentWithId(event.target, "play-pause");
var button = findParentWithIds(event.target, ["play-pause"]);
if (magicObj.paused) {
magicObj.paused = false;
button.innerHTML = "<i class=\"icon ion-pause\"></i>";
@ -55,10 +56,11 @@ title: Tyler Hallada
<div class="controls">
<button id="play-pause"><i class="icon ion-pause"></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 id="options" class="container-full" style="display:block;">
<div id="options" class="container-full hide-mobile">
<div class="row clearfix">
<div class="column fourth">
<form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))">