Added mobile sidebar
This commit is contained in:
Kenneth Jao
parent
662c858b32
commit
f20c513b4a
@ -1,26 +1,43 @@
|
||||
#mobileHeader {
|
||||
box-shadow: -1px 2px 2px 1px #444;
|
||||
border-bottom: 3px solid #999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mobileHeader h2 {
|
||||
font-size: 3vh;
|
||||
font-size: 5vw;
|
||||
font-weight: 200;
|
||||
|
||||
padding: 0;
|
||||
height: 8vh;
|
||||
height: 13vw;
|
||||
|
||||
display: inline;
|
||||
|
||||
line-height: 8vh;
|
||||
line-height: 13vw;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#mobileHeader .fa-bars {
|
||||
margin-left: 1vh;
|
||||
height: 8vh;
|
||||
font-size: 5vw;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
border: 0;
|
||||
line-height: 8vh;
|
||||
line-height: 10vw;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#mSidebarToggle {
|
||||
margin: 1.5vw 1vw 1.5vw 1vw;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
|
||||
background-color: rgba(255,255,255,0);
|
||||
|
||||
display: inline-block;
|
||||
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#mobileBody {
|
||||
@ -75,7 +92,7 @@
|
||||
font-size: 4vw !important;
|
||||
width: 100%;
|
||||
padding: 2%;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
background-color: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.mContTop {
|
||||
@ -187,9 +204,13 @@
|
||||
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
|
||||
display: none;
|
||||
opacity: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
|
||||
#mSidebar {
|
||||
@ -198,7 +219,61 @@
|
||||
|
||||
background-color: #fff;
|
||||
box-shadow: 2px 0px 1px 1px #222;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: -100vw;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mSectionTitle {
|
||||
width: 100%;
|
||||
height: 13vw;
|
||||
margin-top: 13vw;
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.mSectionTitle h3 {
|
||||
font-weight: 200;
|
||||
font-size: 4vw;
|
||||
padding-left: 6%;
|
||||
line-height: 13vw;
|
||||
}
|
||||
|
||||
.mSectionMode {
|
||||
font-size: 4vw !important;
|
||||
width: 100%;
|
||||
height: 13vw;
|
||||
display: table;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.mStatus {
|
||||
width: 2% !important;
|
||||
height: 100%;
|
||||
border-spacing: 6%;
|
||||
display: table-cell;
|
||||
|
||||
-webkit-transition: background-color 0.3s ease;
|
||||
-moz-transition: background-color 0.3s ease;
|
||||
-ms-transition: background-color 0.3s ease;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.mSectionMode .fa {
|
||||
width: 10%;
|
||||
padding: 0 6% 0 6%;
|
||||
line-height: 13vw;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mSectionMode h4 {
|
||||
font-size: 3.5vw !important;
|
||||
width: 65%;
|
||||
padding-left: 5%;
|
||||
line-height: 13vw;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1,7 +1,9 @@
|
||||
<template name="mobile">
|
||||
<div class="noScroll">
|
||||
<header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}">
|
||||
<i class="fa fa-bars" style="color:{{iconStatus}}" aria-hidden="true"></i>
|
||||
<div id="mSidebarToggle">
|
||||
<i class="fa fa-bars" style="color:{{iconStatus}}" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h2>{{schoolName}}</h2>
|
||||
</header>
|
||||
<div id="mobileBody">
|
||||
@ -23,15 +25,42 @@
|
||||
<div id="mAddWork">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mOverlay">
|
||||
<div id="mSidebar">
|
||||
<div class="mSectionTitle">
|
||||
<div class="mStatus" style="background-color:{{modeStatus 'main'}}"></div>
|
||||
<i class="fa fa-list-ul" aria-hidden="true"></i>
|
||||
<h4>Create Classes</h4>
|
||||
</div>
|
||||
<div id="mOverlay"></div>
|
||||
<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}}">
|
||||
<div class="mSectionTitle downOffset">
|
||||
<h3>Main</h3>
|
||||
</div>
|
||||
<div class="mSectionMode">
|
||||
<div class="mStatus" style="background-color:{{modeStatus 'main'}}"></div>
|
||||
<i class="fa fa-list-ul" aria-hidden="true"></i>
|
||||
<h4>Main Work</h4>
|
||||
</div>
|
||||
<div class="mSectionMode">
|
||||
<div class="mStatus" style="background-color:{{modeStatus 'done'}}"></div>
|
||||
<i class="fa fa-check-square" aria-hidden="true"></i>
|
||||
<h4>Done Work</h4>
|
||||
</div>
|
||||
<div class="mSectionTitle downOffset">
|
||||
<h3>Filters</h3>
|
||||
</div>
|
||||
<div id="typeFilterWrapper" class="mSectionTitle">
|
||||
<h3>By Type</h3>
|
||||
</div>
|
||||
<div id="classFilterHolder">
|
||||
{{#each types}}
|
||||
{{> mSideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="classFilterWrapper" class="mSectionTitle">
|
||||
<h3>By Class</h3>
|
||||
</div>
|
||||
<div id="classListHolder">
|
||||
{{#each myClasses}}
|
||||
{{> mSidebarClasses}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -56,4 +85,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template name="mSideTypeFilter">
|
||||
<div class="mSideFilter" type="{{type}}">
|
||||
<div class="mStatus" style="background-color:{{selected}}"></div>
|
||||
<span class="sideTypeName">{{typeName}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="mSidebarClasses">
|
||||
<div class="mSideClass" classid="{{_id}}">
|
||||
<div class="mStatus" style="background-color:{{selected}}"></div>
|
||||
<span class="mSideClassName">{{name}}</span>
|
||||
<span class="mSideClassHour">{{hour}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
Session.set("mobileWork", []);
|
||||
Session.set("mobileMode", "main");
|
||||
Session.set("mobileSidebar", false);
|
||||
|
||||
Template.mobile.rendered = function() {
|
||||
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
|
||||
@ -15,9 +16,23 @@ Template.mobile.rendered = function() {
|
||||
$("#mobileBody").velocity("fadeIn", 200);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
addMobileSideButton($("#mSidebarToggle")[0], 0.2, function() {
|
||||
Session.set("mobileSidebar", true);
|
||||
toggleSidebar(true);
|
||||
});
|
||||
|
||||
addMobileSideButton($(".mSectionMode")[0], 0.2, function() {
|
||||
Session.set("mobileMode","main");
|
||||
toggleSidebar(false);
|
||||
});
|
||||
|
||||
addMobileSideButton($(".mSectionMode")[1], 0.2, function() {
|
||||
Session.set("mobileMode","done");
|
||||
toggleSidebar(false);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
Template.mobile.helpers({
|
||||
@ -63,7 +78,20 @@ Template.mobile.helpers({
|
||||
},
|
||||
modeStatus(mode) {
|
||||
return (Session.equals("mobileMode", mode)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
|
||||
}
|
||||
},
|
||||
types() {
|
||||
var types = Object.keys(workColors);
|
||||
var array = [];
|
||||
for (var i = 0; i < types.length; i++) {
|
||||
array.push({
|
||||
"type": types[i],
|
||||
"typeName": types[i][0].toUpperCase() + types[i].slice(1),
|
||||
"selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
|
||||
});
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function addListeners() {
|
||||
@ -171,4 +199,44 @@ function addMobileButton(element, lighten, thisFunction) {
|
||||
complete: execute()
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function addMobileSideButton(element, lighten, thisFunction) {
|
||||
let button = new Hammer.Manager(element);
|
||||
let add = lighten;
|
||||
let ele = jQuery(element);
|
||||
let execute = thisFunction;
|
||||
let colors = parseFloat($.Velocity.hook(ele, "backgroundColorAlpha"));
|
||||
var press = new Hammer.Press({
|
||||
event: 'press',
|
||||
pointers: 1,
|
||||
time: 0.01,
|
||||
threshold: 3000
|
||||
});
|
||||
button.add(press);
|
||||
|
||||
button.on('press', function(e) {
|
||||
ele.velocity({backgroundColorAlpha: colors + add},100);
|
||||
});
|
||||
button.on('pressup', function(e) {
|
||||
ele.velocity("stop");
|
||||
ele.velocity(
|
||||
{
|
||||
backgroundColorAlpha: colors
|
||||
},
|
||||
{
|
||||
duration: 200,
|
||||
complete: execute()
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSidebar(open) {
|
||||
if(open) {
|
||||
$("#mOverlay").velocity("fadeIn", 300);
|
||||
$("#mSidebar").velocity({left: '0vw'}, 300);
|
||||
} else {
|
||||
$("#mOverlay").velocity("fadeOut", 300);
|
||||
$("#mSidebar").velocity({left: '-100vw'});
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user