css, mobile button edits

This commit is contained in:
Kenneth Jao 2017-03-03 03:15:55 -05:00
parent f20c513b4a
commit 1b589176b4
3 changed files with 30 additions and 9 deletions

View File

@ -277,3 +277,7 @@
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
#mTypeFilterWrapper {
margin-top: 0;
}

View File

@ -43,18 +43,18 @@
<div class="mSectionTitle downOffset"> <div class="mSectionTitle downOffset">
<h3>Filters</h3> <h3>Filters</h3>
</div> </div>
<div id="typeFilterWrapper" class="mSectionTitle"> <div id="mTypeFilterWrapper" class="mSectionTitle">
<h3>By Type</h3> <h3>By Type</h3>
</div> </div>
<div id="classFilterHolder"> <div id="mClassFilterHolder">
{{#each types}} {{#each types}}
{{> mSideTypeFilter}} {{> mSideTypeFilter}}
{{/each}} {{/each}}
</div> </div>
<div id="classFilterWrapper" class="mSectionTitle"> <div id="mClassFilterWrapper" class="mSectionTitle">
<h3>By Class</h3> <h3>By Class</h3>
</div> </div>
<div id="classListHolder"> <div id="mClassListHolder">
{{#each myClasses}} {{#each myClasses}}
{{> mSidebarClasses}} {{> mSidebarClasses}}
{{/each}} {{/each}}

View File

@ -102,7 +102,6 @@ function addListeners() {
new Hammer($(".mobileClass")[i], { new Hammer($(".mobileClass")[i], {
domEvents: true domEvents: true
}); });
$(".mobileClass[workid="+id+"]").on('panmove', function(e) { $(".mobileClass[workid="+id+"]").on('panmove', function(e) {
var dX = deltaX + (e.originalEvent.gesture.deltaX); var dX = deltaX + (e.originalEvent.gesture.deltaX);
if(dX < 0) { if(dX < 0) {
@ -186,7 +185,8 @@ function addMobileButton(element, lighten, thisFunction) {
backgroundColorBlue: colors[2] + add, backgroundColorBlue: colors[2] + add,
},100); },100);
}); });
button.on('pressup', function(e) {
ele.bind('touchend', function(e) {
ele.velocity("stop"); ele.velocity("stop");
ele.velocity( ele.velocity(
{ {
@ -206,19 +206,36 @@ function addMobileSideButton(element, lighten, thisFunction) {
let add = lighten; let add = lighten;
let ele = jQuery(element); let ele = jQuery(element);
let execute = thisFunction; let execute = thisFunction;
let care = true;
let colors = parseFloat($.Velocity.hook(ele, "backgroundColorAlpha")); let colors = parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"));
var press = new Hammer.Press({ var press = new Hammer.Press({
event: 'press', event: 'press',
pointers: 1, pointers: 1,
time: 0.01, time: 0.01
threshold: 3000
}); });
var pan = new Hammer.Pan();
button.add(press); button.add(press);
button.add(pan);
button.on('press', function(e) { button.on('press', function(e) {
care = true;
ele.velocity({backgroundColorAlpha: colors + add},100); ele.velocity({backgroundColorAlpha: colors + add},100);
}); });
button.on('pressup', function(e) {
button.on('pan', function(e) {
if(element !== document.elementFromPoint(e.pX, e.pY)) {
care = false;
ele.velocity("stop");
ele.velocity({backgroundColorAlpha: colors}, 200);
}
});
ele.bind('touchend', function(e) {
if(!care) return;
ele.velocity("stop"); ele.velocity("stop");
ele.velocity( ele.velocity(
{ {