Merge branch 'master' of https://github.com/ksjdragon/hourglass

hourglass/client/login/login.css

@@ -96,6 +96,8 @@ p.text {
 	-moz-transition: background-color 0.4s ease; 
 	-ms-transition: background-color 0.4s ease;
 	transition: background-color 0.4s ease; 
+
+	cursor: pointer;
 }
 
 #loginButton:hover {

hourglass/client/main/main.css

@@ -80,6 +80,10 @@ h4 {
 	transition: color 0.5s ease; 
 }
 
+input {
+	font-family: 'Raleway';
+}
+
 #aboveBar {
 	display: inline;
 }
@@ -132,8 +136,7 @@ h4 {
 
 	position: absolute;
 	z-index:0;
-	overflow-x: hidden;
+	overflow: hidden;
-	overflow-y: auto;
 	
 	-webkit-transition: margin 0.5s ease, background-color 0.5s ease;  
 	-moz-transition: margin 0.5s ease, background-color 0.5s ease; 
@@ -261,7 +264,7 @@ h4 {
 	transition: background-color 0.2s ease; 
 }
 
-input, select {
+.creInput, select {
 	font-family: 'Raleway';
 	width: 90%;
 	margin-bottom: 4%;

hourglass/client/main/main.js

@@ -12,7 +12,8 @@ var themeColors = {
 		"header":"#EBEBEB",
 		"sidebar":"#65839A",
 		"statusIcons":"#33ADFF",
-		"highlightText":"#FF1A1A"
+		"highlightText":"#FF1A1A",
+		"cards":"#FEFEFE"
 	},
 	"dark": {
 
@@ -220,7 +221,6 @@ Template.main.events({
 		Session.set("inputOpen",null)
 	},
 	'click' (event) {
-		console.log(event.target.className);
 		var e = event.target.className;
 		if(!(e.includes("creInput") || e.includes("select"))) {
 			try {
@@ -253,8 +253,4 @@ function closeDivFade(div) {
 
 function sendData() {
 	// Take form data
-}
-
-function select(div) {
-	div.parentNode.parentNode.childNodes[0].value = div.childNodes[0].nodeValue;
 }

hourglass/client/profile/profile.css

@@ -0,0 +1,136 @@
+.change {
+	font-size: 150%;
+	color: #8C8C8C;
+	cursor: pointer;
+}
+
+.changeInput {
+	font-size: 100%;
+	padding: 0;
+	color: #8C8C8C;
+	position: relative;
+}
+
+.profTitle {
+	font-size: 150%;
+	font-weight: 400;
+	margin: 0;
+}
+
+.profHea {
+	font-size: 300%;
+	font-weight: 200;
+}
+
+#motda {
+	font-size: 100%;
+	width: 30% !important;
+}
+
+#profPage {
+	width: 100%;
+	overflow-y: auto;
+}
+
+#profMainContainer {
+	position: relative;
+	top: 0;
+	left: 50%;
+}
+
+#profBanner {
+	border: 5px solid #0D0D0D;
+	border-top: 0;
+	border-bottom: 0;
+}
+
+#profAvatar {
+	border: 10px solid #0D0D0D;
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+
+	position: absolute;
+	top: 43%;
+	left: 2.5%;
+	float: left;
+	z-index: 5;
+}
+
+#motdBox {
+	width: 100%;
+	height: 5%;
+	padding: 0.5% 0 0.5% 0;
+
+	background-color: #0D0D0D;
+}
+
+#motdBox span {
+	font-size: 130% !important;
+	margin: 0;
+	color: #FFF !important;
+}
+
+.username {
+	margin-left: 20% !important;
+}
+
+.profOptions {
+	box-shadow: 2px 2px 5px 3px #666;
+
+	position: absolute;
+	display: none;
+	opacity: 0;
+
+	-webkit-transition: opacity 0.4s ease;  
+	-moz-transition: opacity 0.4s ease; 
+	-ms-transition: opacity 0.4s ease;
+	transition: opacity 0.4s ease; 
+}
+
+.profOptions p {
+	font-size: 150%;
+	margin: 0;
+	padding: 20%;
+	text-align: center;
+	cursor: pointer;
+	
+	-webkit-transition: box-shadow 0.4s ease;  
+	-moz-transition: box-shadow 0.4s ease; 
+	-ms-transition: box-shadow 0.4s ease;
+	transition: box-shadow 0.4s ease;
+}
+
+.profOptions p:hover {
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
+}
+
+#profCards {
+	margin-top: 3%;
+	margin-bottom: 3%;
+}
+
+.card {
+	padding: 4%;
+	padding-top: 2.5%;
+	padding-right: 6%;
+
+	box-shadow: 2px 2px 5px 3px #666;
+}
+
+#profInfo {
+	width: 30%;
+	border-top: 5px solid #CC4444;
+}
+
+#about {
+	padding: 5%;
+}
+
+#profClasses {
+	width: 44%;
+	margin-top: -21.8%;
+	float: right;
+	border-top: 5px solid #2E4F74;
+}
+

hourglass/client/profile/profile.html

@@ -1,3 +1,42 @@
 <template name="profile">
-	
+	<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};">
+		<div id="profMainContainer" style="{{mainCenter}}">
+			<div id="profBanner" style="{{banner}};"></div>
+			<div id="profAvatar" style="{{avatar}};{{avatarDim}}"></div>
+			<div id="motdBox">
+				<span class="username">{{username}} - </span><span class="change mo" id="motd">{{motd}}</span>
+			</div>
+			<div id="profCards">
+				<div id="profInfo" class="card" style="background-color:{{divColor 'cards'}}">
+					<h3 class="profHea">About</h3>
+					<div id="about">
+						<div>
+							<p class="profTitle">School Name:</p>
+							<span class="change" id="school">{{school}}</span>
+						</div>
+						<br>
+						<div>
+							<div>
+							<p class="profTitle">Grade:</p>
+							<span class="change radio"  op="0" re="readonly" id="grade">{{grade}}</span>
+							</div>
+				            <div class="profOptions" style="background-color:{{divColor 'header'}}">
+			                  	<p>9th</p>
+				                <p>10th</p>
+				                <p>11th</p>
+				                <p>12th</p>
+				            </div>
+			            </div>
+			        </div>
+				</div>
+				<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}}">
+					<h3 class="profHea">Classes</h3>
+					<div id="classes">
+						<!-- {{#each classes}}
+						{{/each}} -->
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>

hourglass/client/profile/profile.js

@@ -0,0 +1,165 @@
+import { Template } from 'meteor/templating';
+
+Session.set("profInputOpen",null);
+Session.set("modifying",null);
+Session.set("radioDiv",null);
+
+Template.profile.helpers({
+	mainCenter() {
+		var width = window.innerWidth * 1600/1920 + 10;
+		return "width:"+width.toString()+"px;margin-left:"+-.5*width.toString()+"px"; 
+	},
+	mainHeight() {
+		return window.innerHeight.toString()+"px";
+	},
+	banner() {
+		var width = window.innerWidth * 1600/1920;
+		var height = width * 615/1600;
+		var banner = "defaultcover.jpg"; // Add personal user banner eventually
+		return "width:"+width.toString()+"px;height:"+height.toString()+"px;background-image:url(\'"+banner+"\');background-size:"+width.toString()+"px "+height.toString()+"px";
+	},
+	avatar() {
+		var dim = window.innerWidth * 1600/1920 * .16;
+		var pic = "defaultAvatars/"+(Math.floor(Math.random() * (10 - 1)) + 1).toString()+".png"; // User personalization
+		return "background-image:url("+pic+");background-size:"+dim.toString()+"px "+dim.toString()+"px";
+	},
+	avatarDim() {
+		var dim = window.innerWidth * 1600/1920 * .16;
+		return "height:"+dim.toString()+"px;width:"+dim.toString()+"px;top:"+.43*window.innerHeight.toString()+"px";
+	},
+	username() {
+		return Meteor.user().profile.name;
+	},
+	motd() {
+		return "Say something about yourself!" // User personalization
+	},
+	school() {
+		if(Meteor.user().profile.school !== null) {
+			return "Click here to edit..."
+		} else {
+			return Meteor.user().profile.school;
+		}
+	},
+	grade() {
+		if(Meteor.user().profile.grade !== null) {
+			return "Click here to edit..."
+		} else {
+			return Meteor.user().profile.grade;
+		}
+	},
+	classes() {
+		return classes.find( { status: { $eq: true }, privacy: { $eq: false }}).sort({ subscribers: -1 }).fetch();
+	}
+})
+
+Template.profile.events({
+	'click #profile input' (event) {
+		var opened = Session.get("profradioDiv");
+		if(opened !== null && opened !== event.target.getAttribute("op")) {
+			closeDivFade(document.getElementsByClassName("creInputSel")[opened].parentNode.childNodes[4]);
+		}
+	},
+	'click .profInputSel' (event) {
+		Session.set("profradioDiv", event.target.getAttribute("op"));
+		openDivFade(event.target.parentNode.childNodes[4]);
+	},
+	'click profOptions p' (event) {
+		var p = event.target;
+		p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue;
+		closeDivFade(p.parentNode);
+		Session.set("radioDiv",null);
+	},
+	'click .change' (event) {
+		var ele = event.target;
+		var sessval = Session.get("modifying");
+		if(ele.id !== sessval && sessval != null) closeInput(sessval);
+
+		Session.set("modifying", ele.id);
+		var dim = ele.getBoundingClientRect();
+		ele.style.display = "none";
+		var input = document.createElement("input");
+		
+		if(ele.getAttribute("type") !== null) {
+			input.type = ele.getAttribute("type");
+			
+		} else {
+			input.type = "text";
+		}
+		input.value = ele.childNodes[0].nodeValue;
+		input.className = "changeInput";
+		input.style.height = .9*dim.height.toString()+"px";
+		input.style.width = "70%";
+		input.style.padding = "0.1%";
+		input.id = ele.id+"a";
+		ele.parentNode.appendChild(input);
+		if(ele.getAttribute("re") == "readonly") {
+			input.readOnly = true;
+			input.style.cursor = "pointer";
+		} else {
+			input.select();
+		}
+		input.focus();
+
+		
+	},
+	'click' (event) {
+		var sessval = Session.get("modifying");
+		if(event.target.id !== sessval && event.target.id !== sessval+"a" && !Session.equals("modifying",null) && !event.target.parentNode.className.includes("profOptions")) {
+			closeInput(sessval);
+		}
+		if(!event.target.className.includes("radio") && !Session.equals("radioDiv",null) && !event.target.parentNode.className.includes("profOptions")) {
+			closeDivFade(document.getElementsByClassName("profOptions")[Session.get("radioDiv")]);
+		}	
+	},
+	'keyup' (event) {
+		var sessval = Session.get("modifying");
+		if(event.keyCode == 13) {
+			try {
+				closeInput(sessval);
+			} catch(err) {}
+		}
+	},
+	'click .radio' (event) {
+		Session.set("radioDiv", event.target.getAttribute("op"));
+		openDivFade(event.target.parentNode.parentNode.childNodes[3]);
+	},
+	'click .profOptions p' (event) {
+		var sessval = Session.get("modifying");
+		var p = event.target;
+		var input = p.parentNode.parentNode.childNodes[1].childNodes[5];		
+		input.value = p.childNodes[0].nodeValue;
+		closeInput(sessval);
+		closeDivFade(p.parentNode);
+		input.focus();
+		Session.set("radioDiv",null)
+	}
+})
+
+function openDivFade(div) {
+	div.style.display = "block";
+	div.style.opacity = "0";
+	setTimeout(function() {
+		div.style.opacity = "1";
+	}, 100);
+}
+
+function closeDivFade(div) {
+	div.style.opacity = "0";
+	setTimeout(function() {
+		div.style.display = "none";
+	}, 100);
+}
+
+function closeInput(sessval) {
+	var input = document.getElementById(sessval+"a");
+	var span = document.getElementById(sessval);
+	input.parentNode.removeChild(input);
+	if(input.value == "") {
+		span.childNodes[0].nodeValue = "Click here to edit...";
+	} else {
+		span.childNodes[0].nodeValue = input.value;
+	}
+	span.style.display = "initial";
+	Session.set("modifying",null);
+}
+