css, mobile button edits
This commit is contained in:
parent
f20c513b4a
commit
1b589176b4
@ -277,3 +277,7 @@
|
|||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#mTypeFilterWrapper {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
@ -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}}
|
||||||
|
|||||||
@ -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(
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user