Finished mobile login page
This commit is contained in:
Kenneth Jao
parent
1347bf5ef5
commit
3f6fd93eed
@ -558,6 +558,7 @@
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.formDiv:first-child {
|
||||
|
||||
@ -563,7 +563,7 @@ Template.mOptionCard.rendered = function() {
|
||||
});
|
||||
}
|
||||
|
||||
function addMobileButton(element, lighten, animateType, completeFunction) {
|
||||
addMobileButton = function(element, lighten, animateType, completeFunction) {
|
||||
let add = lighten;
|
||||
let type = animateType;
|
||||
let ele = jQuery(element);
|
||||
|
||||
163
hourglass/client/profile/mProfile.css
Normal file
163
hourglass/client/profile/mProfile.css
Normal file
@ -0,0 +1,163 @@
|
||||
#mProfWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #282933;
|
||||
color: #FCF0F0 !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mSelect {
|
||||
font-size: 4vw;
|
||||
width: 100%;
|
||||
padding: 4.5%;
|
||||
|
||||
border-bottom: 1px solid #888 !important;
|
||||
}
|
||||
|
||||
#mOpOverlay {
|
||||
color: #FCF0F0 !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
|
||||
display: none;
|
||||
opacity: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#mProfMain {
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
#schoolCont, #gradeCont, #classCont {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#schoolCont .fa, #gradeCont .fa {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 4%;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#classCont .fa {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
right: 3%;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#mOpCont {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
margin-top: 30%;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
#mOpCont h3 {
|
||||
font-weight: 200;
|
||||
padding: 4%;
|
||||
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
#mOpProfCont {
|
||||
max-height: 56vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mOpCard2 {
|
||||
width: 90%;
|
||||
padding: 4% 4% 4% 6%;
|
||||
border-bottom: 1px solid #555;
|
||||
background-color: rgba(255,255,255,0.01);
|
||||
}
|
||||
|
||||
#mProfClass {
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
#classCont {
|
||||
padding: 3%;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
#classCont h3 {
|
||||
font-weight: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mDisable {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.mClassBox {
|
||||
width: 90%;
|
||||
padding: 4% 4% 4% 6%;
|
||||
|
||||
border-bottom: 1px solid #555;
|
||||
background-color: rgba(255,255,255,0.01);
|
||||
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.mClassBox .fa {
|
||||
font-size: 4vw;
|
||||
width: 2%;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#mProfClassTitle {
|
||||
font-weight: 200;
|
||||
width: 92%;
|
||||
padding: 4%;
|
||||
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
|
||||
display: table;
|
||||
}
|
||||
|
||||
#mProfClassTitle h3 {
|
||||
width: 40%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
#mOpProfCont h3 {
|
||||
background-color: rgba(255,255,255,0);
|
||||
}
|
||||
|
||||
#mClassSearch {
|
||||
font-size: 3.5vw;
|
||||
width: 90%;
|
||||
padding: 5%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.-autocomplete-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mProfSubmit {
|
||||
font-size: 4vw;
|
||||
width: 15vw;
|
||||
margin: auto;
|
||||
padding: 3%;
|
||||
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
text-align: center;
|
||||
|
||||
position: absolute;
|
||||
bottom: 3vh;
|
||||
left: 42.5vw;
|
||||
}
|
||||
@ -1,3 +1,89 @@
|
||||
<template name="mProfile">
|
||||
|
||||
</template>
|
||||
<div class="noScroll">
|
||||
<div id="mProfWrapper">
|
||||
<div id="mProfMain">
|
||||
<div id="schoolCont">
|
||||
<input class="mSelect" id="school" form="school" onfocus="this.blur()" placeholder="School" readonly>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="gradeCont">
|
||||
<input class="mSelect" id="grade" form="grade" onfocus="this.blur()" placeholder="Grade" readonly>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mProfClass">
|
||||
<div id="classCont" class="mDisable">
|
||||
<h3>My Classes</h3>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
</div>
|
||||
{{#each mProfClasses}}
|
||||
{{> mClassDisplay2}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<p id="mProfSubmit">Finish!</p>
|
||||
</div>
|
||||
<div id="mOpOverlay">
|
||||
<div id="mOpCont">
|
||||
{{#if mProfOp 'class'}}
|
||||
<div id="mProfClassTitle">
|
||||
<h3>Select</h3>
|
||||
{{> inputAutocomplete id="mClassSearch" settings=classSettings placeholder="Search..."}}
|
||||
</div>
|
||||
<div id="mOpProfCont">
|
||||
{{#if notsearching}}
|
||||
{{#each classes}}
|
||||
{{> mClassDisplay}}
|
||||
{{/each}}
|
||||
{{#if noclass}}
|
||||
<h3>No results found...</h3>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#each autocompleteClasses}}
|
||||
{{> mClassDisplay}}
|
||||
{{/each}}
|
||||
{{#if notfound}}
|
||||
<h3>No results found...</h3>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<h3>Select</h3>
|
||||
<div id="mOpProfCont">
|
||||
{{#if mProfOp 'school'}}
|
||||
{{#each selectOptions 'school'}}
|
||||
{{> mOptionCard2}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
{{#if mProfOp 'grade'}}
|
||||
{{#each selectOptions 'grade'}}
|
||||
{{> mOptionCard2}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{> sAlert}}
|
||||
</template>
|
||||
|
||||
<template name="mOptionCard2">
|
||||
<h4 class="mOpCard2">{{alias}}</h4>
|
||||
</template>
|
||||
|
||||
<template name="mClassDisplay">
|
||||
<div class="mClassBox" classid="{{_id}}">
|
||||
<span class="name classText">{{name}}</span>
|
||||
<span class="teacher classText">{{teachershort}}</span>
|
||||
<span class="hour classText">{{hour}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="mClassDisplay2">
|
||||
<div class="mClassBox" classid="{{_id}}">
|
||||
<span class="name classText">{{name}}</span>
|
||||
<span class="teacher classText">{{teachershort}}</span>
|
||||
<span class="hour classText">{{hour}}</span>
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
252
hourglass/client/profile/mProfile.js
Normal file
252
hourglass/client/profile/mProfile.js
Normal file
@ -0,0 +1,252 @@
|
||||
Session.set("profile", {classes: []});
|
||||
Session.set("notsearching", true); // If user isn't searching
|
||||
Session.set("noclass", null); // If user doesn't have classes.
|
||||
Session.set("autocompleteDivs", null);
|
||||
|
||||
Template.mProfile.rendered = function() {
|
||||
addMobileButton($("#school"), 0.2, "brightness", function() {
|
||||
Session.set("mProfOption", "school");
|
||||
$("#mOpOverlay").velocity("fadeIn", 200);
|
||||
});
|
||||
|
||||
addMobileButton($("#grade"), 0.2, "brightness", function() {
|
||||
Session.set("mProfOption", "grade");
|
||||
$("#mOpOverlay").velocity("fadeIn", 200);
|
||||
});
|
||||
|
||||
addMobileButton($("#classCont"), -0.1, "brightness", function() {
|
||||
if(Session.get("profile").school === undefined) return;
|
||||
Session.set("mProfOption", "class");
|
||||
$("#mOpOverlay").velocity("fadeIn", 200);
|
||||
});
|
||||
|
||||
addMobileButton($("#mProfSubmit"), -0.1, "brightness", function() {
|
||||
var myClasses = Session.get("profile").classes;
|
||||
var message = "Sorry, your profile couldn't be created. Please try again!";
|
||||
|
||||
var inputs = document.getElementsByClassName("mSelect");
|
||||
var required = ["school","grade"];
|
||||
var alert = checkComplete(required, inputs);
|
||||
var values = alert[2];
|
||||
if(!alert[0]) {
|
||||
sAlert.error("Missing " + alert[1], {
|
||||
effect: 'stackslide',
|
||||
position: 'top',
|
||||
timeout: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if(myClasses.length === 0) {
|
||||
sAlert.error("Please enroll in a class!", {
|
||||
effect: 'stackslide',
|
||||
position: 'top'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
_.each(myClasses, function(myClass) {
|
||||
Meteor.call("joinClass", [myClass, ""], function(err, result) {
|
||||
if(err !== undefined) {
|
||||
sAlert.error(message, {
|
||||
effect: 'stackslide',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
var profile = Session.get("profile");
|
||||
profile.complete = true;
|
||||
profile.preferences = Meteor.user().profile.preferences;
|
||||
profile.classes.push(Meteor.userId());
|
||||
Meteor.call("editProfile", profile, function(err, result) {
|
||||
if(err !== undefined) {
|
||||
sAlert.error(message, {
|
||||
effect: 'stackslide',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
Meteor.subscribe('classes');
|
||||
Meteor.subscribe('schools');
|
||||
Meteor.subscribe('teachers');
|
||||
Meteor.subscribe('work');
|
||||
Meteor.subscribe('requests');
|
||||
Meteor.subscribe("personalUser");
|
||||
Meteor.subscribe('users');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Template.mProfile.helpers({
|
||||
mProfOp(type) {
|
||||
return Session.equals("mProfOption", type);
|
||||
},
|
||||
classes() {
|
||||
var array = classes.find({
|
||||
status: {
|
||||
$eq: true
|
||||
},
|
||||
privacy: {
|
||||
$eq: false
|
||||
},
|
||||
_id: {
|
||||
$nin: Session.get("profile").classes
|
||||
},
|
||||
school: {
|
||||
$eq: Session.get("profile").school
|
||||
}
|
||||
}, {
|
||||
sort: {
|
||||
subscribers: -1
|
||||
}
|
||||
}, {
|
||||
limit: 20
|
||||
}).fetch();
|
||||
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
array[i].subscribers = array[i].subscribers.length;
|
||||
array[i].teachershort = array[i].teacher.split(" ").slice(1).reduce(function(a, b) {
|
||||
return a + " " + b;
|
||||
});
|
||||
}
|
||||
if (array.length === 0) {
|
||||
Session.set("noclass", true);
|
||||
} else {
|
||||
Session.set("noclass", false);
|
||||
}
|
||||
return array;
|
||||
},
|
||||
classSettings() {
|
||||
return {
|
||||
position: "bottom",
|
||||
limit: 10,
|
||||
rules: [{
|
||||
token: '',
|
||||
collection: classes,
|
||||
template: Template.classAutoList,
|
||||
filter: {
|
||||
privacy: false,
|
||||
status: true
|
||||
},
|
||||
selector: (match) => {
|
||||
regex = new RegExp(match, 'i');
|
||||
return {
|
||||
$or: [{
|
||||
'name': regex
|
||||
}, {
|
||||
'teacher': regex
|
||||
}, {
|
||||
'hour': regex
|
||||
}]
|
||||
};
|
||||
}
|
||||
}]
|
||||
};
|
||||
},
|
||||
notsearching() { // Tells whether user is using the searchbox
|
||||
return Session.get("notsearching");
|
||||
},
|
||||
autocompleteClasses() { // Returns current auto-completes for classes
|
||||
return Session.get("autocompleteDivs");
|
||||
},
|
||||
notfound() { // Returns if autocomplete has no results.
|
||||
return Session.get("notfound");
|
||||
},
|
||||
mProfClasses() {
|
||||
var array = [];
|
||||
var myClasses = Session.get("profile").classes;
|
||||
for(var i = 0; i < myClasses.length; i++) {
|
||||
var val = classes.findOne({_id: myClasses[i]});
|
||||
val.subscribers = val.subscribers.length;
|
||||
val.teachershort = val.teacher.split(" ").slice(1).reduce(function(a, b) {
|
||||
return a + " " + b;
|
||||
});
|
||||
array.push(val);
|
||||
|
||||
}
|
||||
return array;
|
||||
}
|
||||
});
|
||||
|
||||
Template.mProfile.events({
|
||||
'click #mOpOverlay' (event) {
|
||||
if(event.target.id === "mOpOverlay") {
|
||||
$("#mOpOverlay").velocity("fadeOut", 200);
|
||||
}
|
||||
},
|
||||
'input #mClassSearch' (event) { // Auto-complete updater
|
||||
if (event.target.value.length === 0) {
|
||||
Session.set("notsearching", true);
|
||||
} else {
|
||||
Session.set("notsearching", false);
|
||||
}
|
||||
Session.set("autocompleteDivs", null);
|
||||
var divs = [];
|
||||
try {
|
||||
var items = document.getElementsByClassName("-autocomplete-container")[0].children;
|
||||
if(items[0].tagName === "I") {
|
||||
Session.set("notfound", true);
|
||||
return;
|
||||
} else {
|
||||
items = items[0].children;
|
||||
for(var i = 0; i < items.length; i++) {
|
||||
var item = items[i].children;
|
||||
var id = item[4].textContent;
|
||||
if(Session.get("profile").classes.indexOf(id) !== -1) continue;
|
||||
divs.push({
|
||||
name: item[0].textContent,
|
||||
teachershort: item[1].textContent.split(" ")[1],
|
||||
hour: item[2].textContent,
|
||||
subscribers: (item[3].textContent.match(new RegExp(",","g")) || []).length+1,
|
||||
_id: id,
|
||||
join: true
|
||||
})
|
||||
}
|
||||
Session.set("autocompleteDivs", divs.sort(function(a, b) {
|
||||
return b.subscribers - a.subscribers;
|
||||
}));
|
||||
Session.set("notfound", false);
|
||||
return;
|
||||
}
|
||||
} catch(err) {}
|
||||
},
|
||||
})
|
||||
|
||||
Template.mOptionCard2.rendered = function() {
|
||||
var div = this.firstNode;
|
||||
addMobileButton(div, 0.1, "brightness", function() {
|
||||
$("#"+Session.get("mProfOption"))[0].value = div.innerHTML;
|
||||
var newSetting = Session.get("profile");
|
||||
if(Session.equals("mProfOption", "school")) {
|
||||
$("#classCont").removeClass("mDisable");
|
||||
if(div.innerHTML !== Session.get("profile").school) {
|
||||
newSetting["classes"] = [];
|
||||
}
|
||||
newSetting[Session.get("mProfOption")] = div.innerHTML;
|
||||
} else {
|
||||
newSetting[Session.get("mProfOption")] = div.innerHTML;
|
||||
}
|
||||
Session.set("profile", newSetting);
|
||||
$("#mOpOverlay").velocity("fadeOut", 200);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
Template.mClassDisplay.rendered = function() {
|
||||
var div = this.firstNode;
|
||||
addMobileButton(div, 0.1, "brightness", function() {
|
||||
var newSetting = Session.get("profile");
|
||||
newSetting.classes.push(div.getAttribute("classid"));
|
||||
Session.set("profile", newSetting);
|
||||
$("#mOpOverlay").velocity("fadeOut", 200);
|
||||
});
|
||||
}
|
||||
|
||||
Template.mClassDisplay2.rendered = function() {
|
||||
var div = this.firstNode.children[3];
|
||||
div.onclick = function() {
|
||||
var newSetting = Session.get("profile");
|
||||
newSetting.classes.splice(newSetting.classes.indexOf(div.getAttribute("classid")),1)
|
||||
Session.set("profile", newSetting);
|
||||
}
|
||||
}
|
||||
@ -62,6 +62,7 @@
|
||||
}
|
||||
|
||||
#basicNext {
|
||||
font-weight: 200;
|
||||
padding: 2%;
|
||||
border: 1px solid #FCF0F0;
|
||||
-moz-border-radius: 5px;
|
||||
|
||||
@ -12,14 +12,6 @@ Session.set("noclass", null); // If user doesn't have classes.
|
||||
Session.set("notfound", null); // If no results for autocomplete.
|
||||
|
||||
Template.profile.helpers({
|
||||
schoolgradenext() {
|
||||
if(_.contains([null, undefined, ""], Meteor.user().profile.school ||
|
||||
_.contains([null, undefined, ""], Meteor.user().profile.grade))) {
|
||||
return "";
|
||||
} else {
|
||||
return "disabled";
|
||||
}
|
||||
},
|
||||
showArrow(type) {
|
||||
var order = [
|
||||
{"back":false, "forward":true},
|
||||
@ -291,6 +283,12 @@ Template.profile.events({
|
||||
document.getElementById(modifyingInput).value = option;
|
||||
toggleOptionMenu(false, modifyingInput);
|
||||
$(".selectedOption").removeClass("selectedOption");
|
||||
if(option !== Session.get("profile").school) {
|
||||
newSetting = Session.get("profile");
|
||||
newSetting["classes"] = [];
|
||||
newSetting.school = option;
|
||||
Session.set("profile", newSetting);
|
||||
}
|
||||
},
|
||||
'input #classSearch' (event) { // Auto-complete updater
|
||||
if (event.target.value.length === 0) {
|
||||
@ -375,6 +373,14 @@ Template.profile.events({
|
||||
var newClasses = Session.get("newClasses");
|
||||
var message = "Sorry, your profile couldn't be created. Please try again!";
|
||||
|
||||
if(myClasses.length === 0 && newClasses.length === 0) {
|
||||
sAlert.error("Please enroll in a class!", {
|
||||
effect: 'stackslide',
|
||||
position: 'top'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
_.each(myClasses, function(myClass) {
|
||||
Meteor.call("joinClass", [myClass, ""], function(err, result) {
|
||||
if(err !== undefined) {
|
||||
|
||||
@ -31,8 +31,7 @@ Router.route('/', {
|
||||
} else {
|
||||
Session.set("user", Meteor.user().profile);
|
||||
if(Meteor.Device.isPhone()) {
|
||||
//this.render("mobile");
|
||||
this.render("mProfile");
|
||||
this.render("mobile");
|
||||
} else {
|
||||
this.render("main");
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user