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

Add icon font for buttons

Browse Source
This commit is contained in:
Tyler Hallada 2015-01-11 16:20:37 -05:00
parent d433f40469
commit b702bec1ec
8 changed files with 2267 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_layouts/home.html
View File

@ -26,6 +26,9 @@
<!-- Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italics,300,300italics,200' rel='stylesheet' type='text/css'>
<!-- Icon Fonts -->
<link rel="stylesheet" href="/css/ionicons.min.css">
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.png" />

11
css/ionicons.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
css/main.css
View File

@ -439,6 +439,11 @@ a.no-decoration:hover {
/*
/*****************************************************************************/
i.icon {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
div.options-panel {
position: fixed;
bottom: 0;

BIN
fonts/ionicons.eot Normal file
View File

Binary file not shown.

2232
fonts/ionicons.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 326 KiB

BIN
fonts/ionicons.ttf Normal file
View File

Binary file not shown.

BIN
fonts/ionicons.woff Normal file
View File

Binary file not shown.

23
magic/index.html
View File

@ -16,24 +16,33 @@ title: Tyler Hallada
magicObj[key] = value;
}
function findParentWithId(el, id) {
while (el.getAttribute('id') !== id) {
el = el.parentElement;
}
return el;
}
function togglePanel(event) {
var options = document.getElementById("options");
var button = findParentWithId(event.target, "hide-show");
if (options.style.display === "none") { // hidden
options.style.display = "block";
event.target.innerHTML = "Hide";
button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
} else { // shown
options.style.display = "none";
event.target.innerHTML = "Show";
button.innerHTML = "<i class=\"icon ion-chevron-up\"></i>";
}
}
function togglePlay(event) {
var button = findParentWithId(event.target, "play-pause");
if (magicObj.paused) {
magicObj.paused = false;
event.target.innerHTML = "Pause";
button.innerHTML = "<i class=\"icon ion-pause\"></i>";
} else {
magicObj.paused = true;
event.target.innerHTML = "Play";
button.innerHTML = "<i class=\"icon ion-play\"></i>";
}
}
@ -44,9 +53,9 @@ title: Tyler Hallada
<div class="options-panel">
<div class="controls-tab">
<div class="controls">
<button id="play-pause">Pause</button>
<button id="clear">Clear</button>
<button id="hide-show">Hide</button>
<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>
</div>
</div>
<div id="options" class="container-full" style="display:block;">