diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index c3ba631..e0698e4 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -777,7 +777,6 @@ input, textarea { } #bg { - min-width: 1920px; min-height: 100%; width: 100%; height: auto; diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html index b435ad5..d7c8b1f 100644 --- a/hourglass/client/main/main.html +++ b/hourglass/client/main/main.html @@ -95,7 +95,7 @@ - +
{{#if currMode 'classes'}}
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index db81c24..21238c5 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -70,6 +70,12 @@ Template.registerHelper('userProfile', () => { return; }); +Template.registerHelper('screen', (multiplier, fraction) => { + if(multiplier === undefined) return screen.width.toString() + "px"; + if(fraction === undefined) return (screen.width * parseInt(multiplier)).toString() + "px" + return ((screen.width) * parseInt(multiplier) / parseInt(fraction)).toString() + "px"; +}); + Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors. return themeColors[Session.get("user").preferences.theme][div]; }); diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index cab12f8..b6f1e91 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -4,6 +4,13 @@ cursor: pointer; } +#profWrapper { + width: 100%; + height: 100%; + overflow-x: auto; + overflow-y: hidden; +} + #profPage .change { font-size: 2.5vh; } @@ -41,7 +48,6 @@ #profPage { width: 100%; height: 100%; - padding-right: 10%; overflow-x: hidden; overflow-y: auto; } @@ -307,7 +313,7 @@ .classBox { font-size: 2.7vh; - width: 39vw; + width: 94%; margin-bottom: 3%; padding: 2%; @@ -493,22 +499,20 @@ } #createdClasses { - width: 35vw; + width: 500px; height: 73vh; - margin-right: -40%; - padding: 2.5% 0 2.5% 2.5%; + padding: 30px 0 30px 30px; border-top: 5px solid #27646D; box-shadow: -1px 2px 5px 1px #444; position: absolute; top: 10vh; - right: 0; - -webkit-transition: margin 0.4s ease; - -moz-transition: margin 0.4s ease; - -ms-transition: margin 0.4s ease; - transition: margin 0.4s ease; + -webkit-transition: right 0.4s ease; + -moz-transition: right 0.4s ease; + -ms-transition: right 0.4s ease; + transition: right 0.4s ease; } #code { @@ -684,22 +688,20 @@ } #joinPrivClass { - width: 18vw; - margin-bottom: -20%; - padding: 1.5%; - padding-bottom: 1%; + width: 200px; + height: 110px; + padding: 20px; border-top: 5px solid #852E6D; box-shadow: -2px 0px 5px 1px #444; position: absolute; right: 5vw; - bottom: 0; - -webkit-transition: margin 0.4s ease; - -moz-transition: margin 0.4s ease; - -ms-transition: margin 0.4s ease; - transition: margin 0.4s ease; + -webkit-transition: bottom 0.4s ease; + -moz-transition: bottom 0.4s ease; + -ms-transition: bottom 0.4s ease; + transition: bottom 0.4s ease; } #joinPrivClass h3 { diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index c6050d1..fc901ed 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -2,203 +2,205 @@

Main Page

Logout

-
-
-
- Banner - Avatar -
- {{username}} - - {{motd}} - {{commentLength}} +
+
+
+
+ Banner + Avatar +
+ {{username}} - + {{motd}} + {{commentLength}} +
-
-
-
- -
-

About

-
-
-

School Name:

- {{school}} -
-
-
+
+
+ +
+

About

+
-

Grade:

- {{grade}} +

School Name:

+ {{school}}
-
-

9th

-

10th

-

11th

-

12th

+
+
+
+

Grade:

+ {{grade}} +
+
+

9th

+

10th

+

11th

+

12th

+
-
-
+
+
+ +
+

Preferences

+
+
+
+

Theme:

+ {{pref 'theme'}} +
+
+

Light

+

Dark

+
+
+
+
+
+

Default Mode:

+ {{pref 'mode'}} +
+
+

Classes

+

Calendar

+
+
+
+
+
+

Hide Homework:

+ {{pref 'timeHide'}} +
+
+

1 Day

+

2 Days

+

1 Week

+

1 Month

+

Never

+
+
+
+
+
+

Hide Done:

+ {{pref 'done'}} +
+
+

Yes

+

No

+
+
+
+
- -
-

Preferences

-
-
-
-

Theme:

- {{pref 'theme'}} -
-
-

Light

-

Dark

-
-
-
-
-
-

Default Mode:

- {{pref 'mode'}} -
-
-

Classes

-

Calendar

-
-
-
-
-
-

Hide Homework:

- {{pref 'timeHide'}} -
-
-

1 Day

-

2 Days

-

1 Week

-

1 Month

-

Never

-
-
-
-
-
-

Hide Done:

- {{pref 'done'}} -
-
-

Yes

-

No

-
-
-
-
-
-
- -
-

Classes

-
-
-
- -

Manage my Classes

-
-
- -

Join a Class

-
-
- -

Create a Class

-
-
-
- {{#if profClassTab "manClass"}} -
- Class Name - Teacher - Hour - Members -
-
- {{#each myClasses}} - {{> classDisplay}} +
+ +
+

Classes

+
+
+
+ +

Manage my Classes

+
+
+ +

Join a Class

+
+
+ +

Create a Class

+
+
+
+ {{#if profClassTab "manClass"}} +
+ Class Name + Teacher + Hour + Members +
+
+ {{#each myClasses}} + {{> classDisplay}} - {{/each}} - {{#if noclass}} -

No results found...

- {{/if}} -
- {{/if}} + {{/each}} + {{#if noclass}} +

No results found...

+ {{/if}} +
+ {{/if}} - {{#if profClassTab "addClass"}} -
- - {{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}} -

Join Private Class

-
-
- Class Name - Teacher - Hour - Members -
-
- {{#if notsearching}} - {{#each classes}} - {{> classDisplay}} - {{/each}} - {{#if noclass}} -

No results found...

- {{/if}} - {{else}} - {{#each autocompleteClasses}} - {{> classDisplay}} - {{/each}} - {{#if notfound}} -

No results found...

+ {{#if profClassTab "addClass"}} +
+ + {{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}} +

Join Private Class

+
+
+ Class Name + Teacher + Hour + Members +
+
+ {{#if notsearching}} + {{#each classes}} + {{> classDisplay}} + {{/each}} + {{#if noclass}} +

No results found...

+ {{/if}} + {{else}} + {{#each autocompleteClasses}} + {{> classDisplay}} + {{/each}} + {{#if notfound}} +

No results found...

+ {{/if}} {{/if}} +
+ {{/if}} + + {{#if profClassTab "creClass"}} +

Submit a request for a class to be approved by an administrator.

+
+
+

School:

+ {{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }} +
+
+

Hour:

+ +
+
+

Teacher:

+ {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }} +
+
+

Class Name:

+ +
+
+

Privacy:

+ +
+

Public

+

Private

+
+
+
+

Category:

+ +
+

Class

+

Club

+

Other

+
+
+
+

Submit Request

{{/if}}
- {{/if}} - - {{#if profClassTab "creClass"}} -

Submit a request for a class to be approved by an administrator.

-
-
-

School:

- {{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }} -
-
-

Hour:

- -
-
-

Teacher:

- {{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }} -
-
-

Class Name:

- -
-
-

Privacy:

- -
-

Public

-

Private

-
-
-
-

Category:

- -
-

Class

-

Club

-

Other

-
-
-
-

Submit Request

- {{/if}}
@@ -216,7 +218,7 @@
-
+

{{selectedClass 'name'}}

Code:

@@ -253,7 +255,7 @@
Delete Class
-
+

Enter Code:

Submit

diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index ed9f5ab..e9b6a39 100644 --- a/hourglass/client/profile/profile.js +++ b/hourglass/client/profile/profile.js @@ -1,14 +1,20 @@ /* jshint esversion: 6 */ - import { Template } from 'meteor/templating'; +var openValues = { + "owned": "-540px", + "priv": "-160px" +}; + confirm = null; // Sets function to execute after confirmation click. // Sets up global variables Session.set("profClassTab", "manClass"); // Set default classes card mode to 'Manage Classes.' +Session.set("owned",false); // Status of createdClasses. +Session.set("privClass",false); //Status of joinPrivClass. Session.set("modifying", null); // Stores current open input. Session.set("notsearching", true); // If user is searching in search box. Session.set("autocompleteDivs", null); // Stores returned autocomplete results. @@ -70,25 +76,16 @@ Template.profile.helpers({ return Session.get("user").name; }, motd() { // Returns the current user's description - if (Session.get("user").description === "") { - return Session.get("user").description; - } else { - return "Say something about yourself!"; - } + if (Session.get("user").description !== "") return Session.get("user").description; + return "Say something about yourself!"; }, school() { // Returns the current user's school's name - if (Session.get("user").school === "") { - return Session.get("user").school; - } else { - return "Click here to edit..."; - } + if (Session.get("user").school !== "") return Session.get("user").school; + return "Click here to edit..."; }, grade() { // Returns the current user's grade - if (Session.get("user").grade === "") { - return Session.get("user").grade + "th"; - } else { - return "Click here to edit..."; - } + if (Session.get("user").grade !== "") return Session.get("user").grade + "th"; + return "Click here to edit..."; }, classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) var array = classes.find( @@ -111,6 +108,14 @@ Template.profile.helpers({ } return array; }, + ownedStatus() { // Status of createdClasses + if(!Session.get("owned")) return openValues.owned; + return "0px"; + }, + privStatus() { + if(!Session.get("privClass")) return openValues.priv; + return "0px"; + }, profClassTabColor(status) { // Change this [Supposed to show the current mode that's selected via color]     if (Session.equals("profClassTab",status)) {             return themeColors[Meteor.user().profile.preferences.theme].highlightText;         @@ -170,7 +175,7 @@ Template.profile.events({ if(!document.getElementById("createdClasses").contains(event.target) && !Session.equals("code",null) && !event.target.className.includes("fa-times-circle-o")) { - document.getElementById("createdClasses").style.marginRight = "-40%"; + Session.set("owned",false); } if(Session.get("changeAdmin") && !document.getElementById("changeAdmin").contains(event.target)) { @@ -179,10 +184,10 @@ Template.profile.events({ div.removeChild(div.childNodes[3]); div.removeChild(div.childNodes[3]); } - if(Session.get("privateClass") && + if(Session.get("privClass") && + !(event.target.id === "private") && !document.getElementById("joinPrivClass").contains(event.target)) { - Session.set("privateClass",false); - document.getElementById("joinPrivClass").style.marginBottom = "-20%"; + Session.set("privClass",false); } }, // MAIN BUTTONS @@ -275,7 +280,7 @@ Template.profile.events({ } Session.set("selectedClass",array); - document.getElementById("createdClasses").style.marginRight = "0"; + Session.set("owned",true); }); }, 'click .classBox .fa-times' (event) { // Leaves a class @@ -296,11 +301,11 @@ Template.profile.events({ openDivFade(document.getElementsByClassName("overlay")[0]); }, 'click #private' (event) { // Joins private class - Session.set("privateClass",true); + if(Session.get("privClass")) return; var input = document.getElementById("privateCode"); input.className = ""; input.placeholder = "Enter code here..."; - document.getElementById("joinPrivClass").style.marginBottom = "0"; + Session.set("privClass",true); }, 'click #privSubmit' () { // Submits private class code var input = document.getElementById("privateCode"); @@ -309,7 +314,7 @@ Template.profile.events({ serverData = code; Meteor.call("joinPrivateClass", code, function(error, result) { if(result) { - document.getElementById("joinPrivClass").style.marginBottom = "-10%"; + Session.set("privClass",false); } else { input.className = "formInvalid"; input.placeholder = "Invalid code.";