CSS fixes, more mobile sidebar functionality
This commit is contained in:
Kenneth Jao
parent
e51814b3fb
commit
b651d23e9d
@ -174,7 +174,7 @@ input {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fa-bars, .fa-cog, .fa-question {
|
||||
.barIco {
|
||||
font-size: 3.5vh;
|
||||
width: 6vh;
|
||||
height: calc(6vh - 1px);
|
||||
@ -193,7 +193,7 @@ input {
|
||||
transition: color 0.5s ease, background-color 0.5s ease;
|
||||
}
|
||||
|
||||
.fa-bars:hover, .fa-cog:hover, .fa-question:hover {
|
||||
.barIco:hover {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
@ -294,7 +294,6 @@ input {
|
||||
.status {
|
||||
width: 3% !important;
|
||||
height: 100%;
|
||||
border-spacing: 6%;
|
||||
display: table-cell;
|
||||
|
||||
-webkit-transition: background-color 0.3s ease;
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
<img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
|
||||
<div id="divLeftBar">
|
||||
<div id="menuBar" style="background-color:{{divColor 'sidebarColor'}}">
|
||||
<i class="fa fa-bars" style="color:{{iconStatus 'menu'}}" aria-hidden="true"></i>
|
||||
<i class="fa fa-cog" style="color:{{iconStatus 'option'}}" aria-hidden="true"></i>
|
||||
<i class="fa fa-question" style="color:{{iconStatus 'requests'}}" aria-hidden="true"></i>
|
||||
<i class="barIco fa fa-bars" style="color:{{iconStatus 'menu'}}" aria-hidden="true"></i>
|
||||
<i class="barIco fa fa-cog" style="color:{{iconStatus 'option'}}" aria-hidden="true"></i>
|
||||
<i class="barIco fa fa-question" style="color:{{iconStatus 'requests'}}" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="menuContainer" style="background-color:{{divColor 'sidebarColor'}};">
|
||||
<div class="menuWrapper">
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
background-color: rgba(255,255,255,0);
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
@ -241,6 +242,21 @@
|
||||
line-height: 13vw;
|
||||
}
|
||||
|
||||
.mOpenable .fa {
|
||||
font-size: 4vw;
|
||||
height: 13vw;
|
||||
padding: 0;
|
||||
padding-right: 6%;
|
||||
float: right;
|
||||
line-height: 13vw;
|
||||
}
|
||||
|
||||
.mOpenable h3:first-child {
|
||||
font-weight: 200;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mSectionMode {
|
||||
font-size: 4vw !important;
|
||||
width: 100%;
|
||||
@ -252,7 +268,6 @@
|
||||
.mStatus {
|
||||
width: 2% !important;
|
||||
height: 100%;
|
||||
border-spacing: 6%;
|
||||
display: table-cell;
|
||||
|
||||
-webkit-transition: background-color 0.3s ease;
|
||||
@ -262,6 +277,7 @@
|
||||
}
|
||||
|
||||
.mSectionMode .fa {
|
||||
font-size: 4vw;
|
||||
width: 10%;
|
||||
padding: 0 6% 0 6%;
|
||||
line-height: 13vw;
|
||||
@ -278,6 +294,58 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#mFilterWrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mTypeFilterWrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#mClassFilterWrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mSideFilter, .mSideClass {
|
||||
width: 100%;
|
||||
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
display: table;
|
||||
}
|
||||
|
||||
.mSideTypeName {
|
||||
font-size: 3.5vw;
|
||||
width: 92%;
|
||||
margin: 0;
|
||||
padding: 5%;
|
||||
padding-left: 5%;
|
||||
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.mSideClass span {
|
||||
font-weight: 200;
|
||||
margin: 0;
|
||||
font-size: 3.5vw;
|
||||
padding: 5%;
|
||||
display: table-cell;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mSideClassName {
|
||||
width: 50%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.mSideClassHour {
|
||||
width: 50%;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
#mSettings {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
#mSettings h3 {
|
||||
padding: 0;
|
||||
}
|
||||
@ -40,19 +40,23 @@
|
||||
<i class="fa fa-check-square" aria-hidden="true"></i>
|
||||
<h4>Done Work</h4>
|
||||
</div>
|
||||
<div class="mSectionTitle downOffset">
|
||||
<div id="mFilterHead" class="mSectionTitle mOpenable downOffset">
|
||||
<h3>Filters</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mTypeFilterWrapper" class="mSectionTitle">
|
||||
<div id="mFilterWrapper">
|
||||
<div id="mTypeFilterWrapper" class="mSectionTitle mOpenable">
|
||||
<h3>By Type</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mClassFilterHolder">
|
||||
{{#each types}}
|
||||
{{> mSideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="mClassFilterWrapper" class="mSectionTitle">
|
||||
<div id="mClassFilterWrapper" class="mSectionTitle mOpenable">
|
||||
<h3>By Class</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mClassListHolder">
|
||||
{{#each myClasses}}
|
||||
@ -60,6 +64,11 @@
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="mSettings" class="mSectionTitle mSectionMode">
|
||||
<i class="fa fa-cog" aria-hidden="true"></i>
|
||||
<h3>Settings</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -90,7 +99,7 @@
|
||||
<template name="mSideTypeFilter">
|
||||
<div class="mSideFilter" type="{{type}}">
|
||||
<div class="mStatus" style="background-color:{{selected}}"></div>
|
||||
<span class="sideTypeName">{{typeName}}</span>
|
||||
<span class="mSideTypeName">{{typeName}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,6 +2,8 @@ Session.set("mobileWork", []);
|
||||
Session.set("mobileMode", "main");
|
||||
Session.set("mobileSidebar", false);
|
||||
|
||||
var filterOpen = [false, true, true];
|
||||
|
||||
Template.mobile.rendered = function() {
|
||||
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
|
||||
|
||||
@ -38,8 +40,95 @@ Template.mobile.rendered = function() {
|
||||
toggleSidebar(false);
|
||||
}
|
||||
});
|
||||
|
||||
addMobileButton($("#mSettings"), 0.1, "brightness" , function() {
|
||||
console.log("Go to settings!"); // Render setting template
|
||||
});
|
||||
|
||||
addMobileButton($("#mFilterHead"), 0.1, "brightness", function() {
|
||||
if (event.target.id === "disableFilter") return;
|
||||
if (!filterOpen[0]) {
|
||||
$("#mFilterWrapper").slideDown(300);
|
||||
} else {
|
||||
$("#mFilterWrapper").slideUp(300);
|
||||
}
|
||||
filterOpen[0] = !filterOpen[0];
|
||||
});
|
||||
|
||||
addMobileButton($("#mTypeFilterWrapper"), 0.1, "brightness", function() {
|
||||
if (!filterOpen[1]) {
|
||||
$("#mClassFilterHolder").slideDown(300);
|
||||
} else {
|
||||
$("#mClassFilterHolder").slideUp(300);
|
||||
}
|
||||
filterOpen[1] = !filterOpen[1];
|
||||
});
|
||||
|
||||
addMobileButton($("#mClassFilterWrapper"), 0.1, "brightness", function() {
|
||||
if (!filterOpen[2]) {
|
||||
$("#mClassListHolder").slideDown(300);
|
||||
} else {
|
||||
$("#mClassListHolder").slideUp(300);
|
||||
}
|
||||
filterOpen[2] = !filterOpen[2];
|
||||
});
|
||||
|
||||
// FOR SIDEBAR SLIDEBACK
|
||||
/*var deltaX = 0;
|
||||
var sidebar = $("#mSidebar");
|
||||
new Hammer(sidebar[0], {
|
||||
domEvents: true
|
||||
});
|
||||
|
||||
sidebar.on('panmove', function(e) {
|
||||
var dX = deltaX + (e.originalEvent.gesture.deltaX);
|
||||
if(dX > 0) {
|
||||
$.Velocity.hook(jQuery(e.target), 'translateX', dX/70 + 'px');
|
||||
$.Velocity.hook(jQuery)
|
||||
} else {
|
||||
$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
|
||||
}
|
||||
});
|
||||
|
||||
movable.on('panend', function(e) {
|
||||
deltaX = deltaX + (e.originalEvent.gesture.deltaX);
|
||||
if(deltaX <= window.innerWidth * 0.3) {
|
||||
deltaX = 0;
|
||||
jQuery(e.target).velocity(
|
||||
{
|
||||
translateX: window.innerWidth*1.2+"px"
|
||||
},
|
||||
{
|
||||
duration: 150,
|
||||
complete: function() {
|
||||
undo[0].velocity("fadeIn", {duration: 300});
|
||||
undo[1].velocity("fadeIn", {duration: 300});
|
||||
var container = $(".mClassContainer[workid="+id+"]");
|
||||
clearTile = setTimeout(function() {
|
||||
container.velocity(
|
||||
{
|
||||
height: 0
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
complete: function() {
|
||||
serverData = [container[0].getAttribute("workid"), "done"];
|
||||
sendData("toggleWork");
|
||||
container.remove();
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
deltaX = 0;
|
||||
jQuery(e.target).velocity({translateX: "0px"},300);
|
||||
}
|
||||
});*/
|
||||
}
|
||||
|
||||
|
||||
Template.mobileClass.rendered = function() {
|
||||
var deltaX = 0;
|
||||
var clearTile;
|
||||
@ -53,11 +142,10 @@ Template.mobileClass.rendered = function() {
|
||||
movable.on('panmove', function(e) {
|
||||
var dX = deltaX + (e.originalEvent.gesture.deltaX);
|
||||
if(dX < 0) {
|
||||
$.Velocity.hook(jQuery(e.target), 'translateX', dX/45 + 'px');
|
||||
$.Velocity.hook(jQuery(e.target), 'translateX', dX/25 + 'px');
|
||||
} else {
|
||||
$.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
movable.on('panend', function(e) {
|
||||
@ -179,7 +267,8 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
|
||||
parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"))
|
||||
];
|
||||
|
||||
ele.on('touchstart mousedown', function(e) {
|
||||
ele.on('touchstart', function(e) {
|
||||
console.log("start!");
|
||||
care = true;
|
||||
switch(type) {
|
||||
case "color":
|
||||
@ -194,7 +283,7 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
|
||||
}
|
||||
});
|
||||
|
||||
ele.on('touchend mouseup', function(e) {
|
||||
ele.on('touchend', function(e) {
|
||||
if(!care) return;
|
||||
ele.velocity("stop");
|
||||
switch(type) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user