From 308c3461243647ffae23e78ad5865359e178aa60 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Wed, 10 Aug 2016 21:56:12 -0400 Subject: [PATCH] Added joining classes, and viewing classes --- hourglass/client/main/main.css | 2 +- hourglass/client/main/main.js | 25 ++--- hourglass/client/profile/profile.css | 148 +++++++++++++++++++++++++- hourglass/client/profile/profile.html | 108 ++++++++++++------- hourglass/client/profile/profile.js | 141 ++++++++++++++++++------ 5 files changed, 337 insertions(+), 87 deletions(-) diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index 7af13fd..4484063 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -335,7 +335,7 @@ select { border-radius: 30px; position: absolute; - top: 50%; + top: 30%; left: 50%; text-align: center; diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index a73db0c..d9e9bb4 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -45,6 +45,15 @@ Template.registerHelper( 'divColor', (div) => { return themeColors[Cookie.get("theme")][div]; }) +Template.registerHelper( 'overlayDim', (part) => { + var dim = [window.innerWidth * .2,window.innerHeight * .2]; + var width = "width:"+dim[0].toString() + "px;"; + var height = "height:"+dim[1].toString() + "px;"; + var margin = "margin-left:"+(-dim[0]/2).toString() + "px;"; + var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";"; + return width+height+margin+bg; +}) + Template.main.helpers({ schoolname() { return " - " + Meteor.user().profile.school; @@ -106,14 +115,6 @@ Template.main.helpers({ return openValues["options"]; } }, - overlayDim(part) { - var dim = [window.innerWidth * .2,window.innerHeight * .2]; - var width = "width:"+dim[0].toString() + "px;"; - var height = "height:"+dim[1].toString() + "px;"; - var margin = "margin:"+(-dim[0]/2).toString() + "px 0 0 " + -(dim[1]/2).toString() + "px;"; - var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";"; - return width+height+margin+bg; - }, creHighlight(input) { if(input == Session.get("creInput")) { return "#CCEEFF"; @@ -152,17 +153,17 @@ Template.main.helpers({ }, calendarOptions() { var cursor = work.find({}); - var donelist = []; + var events = []; cursor.forEach(function(current) { backgroundColor = calendarColors[current.type]; title = current.name; duedate = current.dueDate.toISOString().slice(0,10); - donelist.push({start: duedate, title: title, backgroundColor: backgroundColor}); + events.push({start: duedate, title: title, backgroundColor: backgroundColor}); }); - + console.log(events); return { height: window.innerHeight *.8, - events: donelist + events: events }; }, calCenter() { diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index b6d1c97..f5b93b1 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -29,6 +29,7 @@ #profPage { width: 100%; + overflow-x: hidden; overflow-y: auto; } @@ -111,15 +112,17 @@ } .card { + margin-bottom: 5%; padding: 4%; padding-top: 2.5%; - padding-right: 6%; + padding-right: 4%; box-shadow: 2px 2px 5px 3px #666; } #profInfo { width: 30%; + float: left; border-top: 5px solid #CC4444; } @@ -128,9 +131,148 @@ } #profClasses { - width: 44%; - margin-top: -21.8%; + width: 50%; + height: 30%; float: right; border-top: 5px solid #2E4F74; + + -webkit-transition: width 0.4s ease; + -moz-transition: width 0.4s ease; + -ms-transition: width 0.4s ease; + transition: width 0.4s ease; +} + +#profClassInfoHolder { + + + -webkit-transition: opacity 0.4s ease; + -moz-transition: opacity 0.4s ease; + -ms-transition: opacity 0.4s ease; + transition: opacity 0.4s ease; +} + +#classes { + padding: 4% 0 4% 0; +} + +#profFunctions { + display: inline; +} + +.profFunction { + margin-right: 1%; + padding: 2%; + + border: 2px solid rgba(0,0,0,0.2); + + display: inherit; + cursor: pointer; + + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; +} + +.profFunction:hover { + background-color: rgba(0,0,0,0.1); + +} + +.profFunction i, .profFunction h4 { + padding: 1%; +} + +#searchBar { + display: inline; +} + +#profClassSearch { + font-size: 125%; + width: 30%; + margin-top: 3%; + padding: 1.5% 1% 1.5% 1%; + + -webkit-animation: expand .7s ease 1; + animation: expand .7s ease 1; +} + +@-webkit-keyframes expand { + 0% { width: 0%; } + 100% { width: 30%; } +} + +@keyframes expand { + 0% { width: 0%; } + 100% { width: 30%; } +} + +#label { + width: 90%; + margin-top: 2.5%; + margin-bottom: 2%; + + background-color: rgba(0,0,0,0.2); + box-shadow: none; + + display: table; + cursor: default; +} + +.classHolder { + width: 90%; + padding: 1%; + padding-right: 100%; + + display: inline-block; + + overflow-x: hidden; + overflow-y: scroll; +} + +.classBox { + font-size: 150%; + width: 100%; + margin-bottom: 3%; + padding: 2%; + + box-shadow: 2px 2px 5px 3px #666; + display: table; + cursor: pointer; + + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; +} + +.classBox:hover { + background-color: rgba(0,0,0,0.1); +} + +.classText { + margin-left: .5%; + margin-right: 10%; + display: table-cell; +} + +.name { + width: 40%; +} + +.teacher { + width: 25%; +} + +.hour { + width: 15%; +} + +.subscribers { + width: 13%; +} + +.-autocomplete-container { + display: none; } diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index eef7bcc..dd4f937 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -29,7 +29,7 @@ -
+

Classes

@@ -48,65 +48,91 @@
{{#if profClassTab "manClass"}} - +
+ Class Name + Teacher + Hour + Members +
+
+ {{#each myclasses}} + {{> classDisplay}} + {{/each}} +
{{/if}} + {{#if profClassTab "addClass"}} - {{> inputAutocomplete settings=classsettings placeholder="Search..."}} + + {{> inputAutocomplete id="profClassSearch" settings=classsettings placeholder="Search..."}} +
+ Class Name + Teacher + Hour + Members +
+
+ {{#if notsearching}} + {{#each classes}} + {{> classDisplay}} + {{/each}} + {{else}} + {{#each autocompleteClasses}} + {{> classDisplay}} + {{/each}} + {{/if}} +
{{/if}} + {{#if profClassTab "creClass"}} - {{/if}} - +
+
+

Class

+

Club

+

Other

+
+
+
Submit Request
+ --> + {{/if}}
+
+
+

Join class?

+ + +
+
-