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

CSS fixes

Browse Source
This commit is contained in:
Kenneth Jao 2016-09-07 20:04:51 -04:00
parent 2a08efacba
commit afb3486268
5 changed files with 68 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -137,9 +137,13 @@ input, textarea {
resize: none; resize: none;
} }
header h1 {
font-size: 3.5vh;
}
header h2 { header h2 {
font-weight: 400; font-weight: 400;
padding: 0.6%; padding: 1vh;
padding-left: 0; padding-left: 0;
float: left; float: left;
} }
@ -197,7 +201,7 @@ header h2 {
#dropdown img{ #dropdown img{
width: 4vh; width: 4vh;
height: 4vh; height: 4vh;
margin: -2.2vh 0 0 -2.2vh; margin: -2.5vh 0 0 -2.2vh;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@ -1072,7 +1076,6 @@ header h2 {
#userDropdownAvatar { #userDropdownAvatar {
width: 100%; width: 100%;
height: 16vh; height: 16vh;
background-color: rgba(0,0,0,0.1);
position: relative; position: relative;
} }

58
hourglass/client/main/main.html
View File

@ -54,9 +54,9 @@
<p class="prefTitle">Theme:</p> <p class="prefTitle">Theme:</p>
<span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span> <span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
</div> </div>
<div class="prefOptions" style="background-color:{{divColor 'header'}}"> <div class="prefOptions">
<p class="prefOptionText">Light</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">Light</p>
<p class="prefOptionText">Dark</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">Dark</p>
</div> </div>
</div> </div>
<div> <div>
@ -64,9 +64,9 @@
<p class="prefTitle">Default Mode:</p> <p class="prefTitle">Default Mode:</p>
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span> <span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
</div> </div>
<div class="prefOptions" style="background-color:{{divColor 'header'}}"> <div class="prefOptions">
<p class="prefOptionText">Classes</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">Classes</p>
<p class="prefOptionText">Calendar</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">Calendar</p>
</div> </div>
</div> </div>
<div> <div>
@ -74,12 +74,12 @@
<p class="prefTitle">Hide Homework:</p> <p class="prefTitle">Hide Homework:</p>
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span> <span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
</div> </div>
<div class="prefOptions" style="background-color:{{divColor 'header'}}"> <div class="prefOptions">
<p class="prefOptionText">1 Day</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">1 Day</p>
<P class="prefOptionText">2 Days</p> <P class="prefOptionText" style="background-color:{{divColor 'header'}}">2 Days</p>
<p class="prefOptionText">1 Week</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">1 Week</p>
<p class="prefOptionText">1 Month</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">1 Month</p>
<p class="prefOptionText">Never</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">Never</p>
</div> </div>
</div> </div>
<div> <div>
@ -87,9 +87,9 @@
<p class="prefTitle">Hide Done:</p> <p class="prefTitle">Hide Done:</p>
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span> <span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
</div> </div>
<div class="prefOptions" style="background-color:{{divColor 'header'}}"> <div class="prefOptions">
<p class="prefOptionText">Yes</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">Yes</p>
<p class="prefOptionText">No</p> <p class="prefOptionText" style="background-color:{{divColor 'header'}}">No</p>
</div> </div>
</div> </div>
</div> </div>
@ -134,12 +134,12 @@
<span class="workTitle">Type:</span> <span class="workTitle">Type:</span>
<span class="change radio req" re="readonly" id="workType">{{work 'type'}}</span> <span class="change radio req" re="readonly" id="workType">{{work 'type'}}</span>
</div> </div>
<div class="workOptions type" style="background-color:{{divColor 'header'}}"> <div class="workOptions type">
<p class="workOptionText">Normal</p> <p class="workOptionText" style="background-color:{{divColor 'header'}}">Normal</p>
<p class="workOptionText">Quiz</p> <p class="workOptionText" style="background-color:{{divColor 'header'}}">Quiz</p>
<p class="workOptionText">Test</p> <p class="workOptionText" style="background-color:{{divColor 'header'}}">Test</p>
<p class="workOptionText">Project</p> <p class="workOptionText" style="background-color:{{divColor 'header'}}">Project</p>
<p class="workOptionText">Other</p> <p class="workOptionText" style="background-color:{{divColor 'header'}}">Other</p>
</div> </div>
</div> </div>
<!-- <div id="workAttach">Attach other files</div> <!-- <div id="workAttach">Attach other files</div>
@ -202,12 +202,12 @@
</div> </div>
<div id="userDropdown" style="background-color:{{divColor 'dropdown'}}"> <div id="userDropdown" style="background-color:{{divColor 'dropdown'}}">
<div id="userTab" style="border-bottom: 3vh solid {{divColor 'header'}}"></div> <div id="userTab" style="border-bottom: 3vh solid {{divColor 'dropdown'}}"></div>
<div id="userDropdownAvatar"> <div id="userDropdownAvatar" style="background-color:{{divColor 'dropdown'}}">
<img src="{{avatar}}"> <img src="{{avatar}}">
<p>{{username}}</p> <p>{{username}}</p>
</div> </div>
<div id="userFunctions"> <div id="userFunctions" style="background-color:{{divColor 'dropdown'}}">
<div id="myprofile" class="userFunction" onclick="window.location='/profile';"> <div id="myprofile" class="userFunction" onclick="window.location='/profile';">
<i class="fa fa-user" aria-hidden="true"></i> <i class="fa fa-user" aria-hidden="true"></i>
<p>My Profile</p> <p>My Profile</p>
@ -219,9 +219,11 @@
</div> </div>
{{/if}} {{/if}}
</div> </div>
<div id="myprofile" class="userFunction" onclick='document.getElementById("login-buttons-logout").click();'> <div style="background-color:{{divColor 'dropdown'}}">
<i class="fa fa-sign-out" aria-hidden="true"></i> <div id="myprofile" class="userFunction" onclick='document.getElementById("login-buttons-logout").click();'>
<p>Sign out</p> <i class="fa fa-sign-out" aria-hidden="true"></i>
<p>Sign out</p>
</div>
</div> </div>
</div> </div>
{{> loginButtons}} {{> loginButtons}}
@ -269,7 +271,7 @@
<i class="fa fa-thumbs-up" aria-hidden="true"></i> <i class="fa fa-thumbs-up" aria-hidden="true"></i>
<span>{{confirmationLength}} </span> <span>{{confirmationLength}} </span>
<i class="fa fa-thumbs-down" aria-hidden="true"></i> <i class="fa fa-thumbs-down" aria-hidden="true"></i>
<span>{{reportLength}} </span> <span>{{reportLength}}</span>
</div> </div>
</div> </div>
</div> </div>

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

@ -57,6 +57,7 @@ Template.registerHelper('userProfile', () => {
}); });
Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors. Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
console.log(div);console.log(themeColors[Session.get("user").preferences.theme][div]);
return themeColors[Session.get("user").preferences.theme][div]; return themeColors[Session.get("user").preferences.theme][div];
}); });
@ -647,11 +648,10 @@ Template.main.events({
var p = event.target; var p = event.target;
var input = p.parentNode.parentNode.childNodes[1].childNodes[5]; var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
input.value = p.childNodes[0].nodeValue; input.value = p.childNodes[0].nodeValue;
closeDivFade(p.parentNode);
try { try {
closeInput(modifyingInput); closeInput(modifyingInput);
} catch (err) {} } catch (err) {}
closeDivFade(p.parentNode);
input.focus(); input.focus();
}, },
'click .prefOptionText' (event) { // Click each preferences setting. 'click .prefOptionText' (event) { // Click each preferences setting.
@ -659,11 +659,10 @@ Template.main.events({
var p = event.target; var p = event.target;
var input = p.parentNode.parentNode.childNodes[1].childNodes[5]; var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
input.value = p.childNodes[0].nodeValue; input.value = p.childNodes[0].nodeValue;
closeDivFade(p.parentNode);
try { try {
closeInput(modifyingInput); closeInput(modifyingInput);
} catch (err) {} } catch (err) {}
closeDivFade(p.parentNode);
input.focus(); input.focus();
}, },
'click #workComment' (event) { 'click #workComment' (event) {
@ -823,7 +822,7 @@ function openDivFade(div) {
function closeDivFade(div) { function closeDivFade(div) {
div.style.opacity = "0"; div.style.opacity = "0";
setTimeout(function() { setTimeout(function() {
div.style.display = "none"; div.style.display = "none";
}, 100); }, 100);
} }

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

@ -28,11 +28,11 @@
<p class="profTitle">Grade:</p> <p class="profTitle">Grade:</p>
<span class="change radio" re="readonly" id="grade">{{grade}}</span> <span class="change radio" re="readonly" id="grade">{{grade}}</span>
</div> </div>
<div class="profOptions" style="background-color:{{divColor 'header'}}"> <div class="profOptions">
<p class="profOptionText">9th</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">9th</p>
<p class="profOptionText">10th</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">10th</p>
<p class="profOptionText">11th</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">11th</p>
<p class="profOptionText">12th</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">12th</p>
</div> </div>
</div> </div>
</div> </div>
@ -46,9 +46,9 @@
<p class="profTitle">Theme:</p> <p class="profTitle">Theme:</p>
<span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span> <span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
</div> </div>
<div class="profOptions" style="background-color:{{divColor 'header'}}"> <div class="profOptions">
<p class="profOptionText">Light</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">Light</p>
<p class="profOptionText">Dark</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">Dark</p>
</div> </div>
</div> </div>
<br> <br>
@ -57,9 +57,9 @@
<p class="profTitle">Default Mode:</p> <p class="profTitle">Default Mode:</p>
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span> <span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
</div> </div>
<div class="profOptions" style="background-color:{{divColor 'header'}}"> <div class="profOptions">
<p class="profOptionText">Classes</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">Classes</p>
<p class="profOptionText">Calendar</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">Calendar</p>
</div> </div>
</div> </div>
<br> <br>
@ -68,12 +68,12 @@
<p class="profTitle">Hide Homework:</p> <p class="profTitle">Hide Homework:</p>
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span> <span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
</div> </div>
<div class="profOptions" style="background-color:{{divColor 'header'}}"> <div class="profOptions">
<p class="profOptionText">1 Day</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Day</p>
<P class="profOptionText">2 Days</p> <P class="profOptionText" style="background-color:{{divColor 'header'}}">2 Days</p>
<p class="profOptionText">1 Week</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Week</p>
<p class="profOptionText">1 Month</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Month</p>
<p class="profOptionText">Never</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">Never</p>
</div> </div>
</div> </div>
<br> <br>
@ -82,9 +82,9 @@
<p class="profTitle">Hide Done:</p> <p class="profTitle">Hide Done:</p>
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span> <span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
</div> </div>
<div class="profOptions" style="background-color:{{divColor 'header'}}"> <div class="profOptions">
<p class="profOptionText">Yes</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">Yes</p>
<p class="profOptionText">No</p> <p class="profOptionText" style="background-color:{{divColor 'header'}}">No</p>
</div> </div>
</div> </div>
</div> </div>
@ -181,18 +181,18 @@
<div class="formDiv"> <div class="formDiv">
<p class="profTitle">Privacy:</p> <p class="profTitle">Privacy:</p>
<input class="creInput radio op" type="text" name="privacy" readonly> <input class="creInput radio op" type="text" name="privacy" readonly>
<div class="profOptions creOp" style="background-color:{{divColor 'header'}}"> <div class="profOptions creOp">
<p class="profOptionText cre">Public</p> <p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Public</p>
<p class="profOptionText cre">Private</p> <p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Private</p>
</div> </div>
</div> </div>
<div class="formDiv"> <div class="formDiv">
<p class="profTitle">Category:</p> <p class="profTitle">Category:</p>
<input class="creInput radio op" type="text" name="category" readonly> <input class="creInput radio op" type="text" name="category" readonly>
<div class="profOptions creOp" style="background-color:{{divColor 'header'}}"> <div class="profOptions creOp">
<p class="profOptionText cre">Class</p> <p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Class</p>
<p class="profOptionText cre">Club</p> <p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Club</p>
<p class="profOptionText cre">Other</p> <p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Other</p>
</div> </div>
</div> </div>
</div> </div>

2
hourglass/lib/constants.js
View File

@ -3,7 +3,7 @@ themeColors = {
"background": "White.jpg", "background": "White.jpg",
"header": "#EBEBEB", "header": "#EBEBEB",
"sidebar": "#65839A", "sidebar": "#65839A",
"dropdown": "#D9D9D9", "dropdown": "#E6E6E6",
"adminButtons": "#C8C0C0", "adminButtons": "#C8C0C0",
"funcButton": "#849CAE", "funcButton": "#849CAE",
"statusIcons": "#33ADFF", "statusIcons": "#33ADFF",