kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yamanq 2016-08-10 05:05:31 -04:00
commit 7d2ad898ae
6 changed files with 351 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
hourglass/client/login/login.css
View File

@ -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 {

9
hourglass/client/main/main.css
View File

@ -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-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;
@ -261,7 +264,7 @@ h4 {
transition: background-color 0.2s ease;
}
input, select {
.creInput, select {
font-family: 'Raleway';
width: 90%;
margin-bottom: 4%;

8
hourglass/client/main/main.js
View File

@ -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 {
@ -254,7 +254,3 @@ function closeDivFade(div) {
function sendData() {
// Take form data
}
function select(div) {
div.parentNode.parentNode.childNodes[0].value = div.childNodes[0].nodeValue;
}

136
hourglass/client/profile/profile.css
View File

@ -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;
}

41
hourglass/client/profile/profile.html
View File

@ -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>

165
hourglass/client/profile/profile.js
View File

@ -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);
}