From 318dc60e3f9cb78569e2f53ddd263b29f28e7cf5 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Tue, 9 Aug 2016 18:54:36 -0400 Subject: [PATCH 1/3] CSS fix --- hourglass/client/main/main.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index c4d12c7..a208de5 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -132,8 +132,7 @@ h4 { position: absolute; z-index:0; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden; -webkit-transition: margin 0.5s ease, background-color 0.5s ease; -moz-transition: margin 0.5s ease, background-color 0.5s ease; From 12b933d8f16faffb897b590c57fd322a7ebd8e78 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Wed, 10 Aug 2016 00:25:19 -0400 Subject: [PATCH 2/3] Profile page layout, and working form buttons, no submission --- hourglass/client/login/login.css | 2 + hourglass/client/main/main.css | 6 +- hourglass/client/main/main.js | 8 +- hourglass/client/profile/profile.css | 136 +++++++++++++++++++++ hourglass/client/profile/profile.html | 41 ++++++- hourglass/client/profile/profile.js | 165 ++++++++++++++++++++++++++ 6 files changed, 350 insertions(+), 8 deletions(-) diff --git a/hourglass/client/login/login.css b/hourglass/client/login/login.css index b520a34..5d25170 100644 --- a/hourglass/client/login/login.css +++ b/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 { diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index a208de5..dbdbf84 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -80,6 +80,10 @@ h4 { transition: color 0.5s ease; } +input { + font-family: 'Raleway'; +} + #aboveBar { display: inline; } @@ -260,7 +264,7 @@ h4 { transition: background-color 0.2s ease; } -input, select { +.creInput, select { font-family: 'Raleway'; width: 90%; margin-bottom: 4%; diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 5d40215..78d527f 100644 --- a/hourglass/client/main/main.js +++ b/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; } \ No newline at end of file diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index e69de29..b6d1c97 100644 --- a/hourglass/client/profile/profile.css +++ b/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; +} + diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index f031f72..b3a4c4b 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -1,3 +1,42 @@ \ No newline at end of file diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index e69de29..29ee45d 100644 --- a/hourglass/client/profile/profile.js +++ b/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 = "\'defaultavatartemp.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); +} + From 7f9c845d92b672aeb061d0578cb56244daf62423 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Wed, 10 Aug 2016 01:50:49 -0400 Subject: [PATCH 3/3] Added default avatar icons --- hourglass/client/profile/profile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hourglass/client/profile/profile.js b/hourglass/client/profile/profile.js index 29ee45d..c985b19 100644 --- a/hourglass/client/profile/profile.js +++ b/hourglass/client/profile/profile.js @@ -20,7 +20,7 @@ Template.profile.helpers({ }, avatar() { var dim = window.innerWidth * 1600/1920 * .16; - var pic = "\'defaultavatartemp.png\'"; // User personalization + 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() {