Large CSS update for main
This commit is contained in:
Kenneth Jao
parent
925b1276b2
commit
b9a4cbc6bd
@ -99,7 +99,8 @@ body {
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
|
||||
-webkit-transition: background-color 0.5s ease;
|
||||
@ -109,6 +110,7 @@ body {
|
||||
}
|
||||
|
||||
#mainHeader h1, #mainHeader h2 {
|
||||
font-size: 3.5vh;
|
||||
margin-left: 0.5%;
|
||||
padding: 0;
|
||||
height: 5.5vh;
|
||||
@ -120,6 +122,7 @@ body {
|
||||
|
||||
#mainHeader h2 {
|
||||
font-weight: 200;
|
||||
font-size: 3vh;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -227,23 +230,24 @@ input, textarea {
|
||||
#menuContainer, #optionsContainer {
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
width: 17%;
|
||||
width: 250px;
|
||||
padding: 1% 0 1% 0;
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
|
||||
position: absolute;
|
||||
top: 6vh;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-transition: margin 0.5s ease, background-color 0.5s ease;
|
||||
-moz-transition: margin 0.5s ease, background-color 0.5s ease;
|
||||
-ms-transition: margin 0.5s ease, background-color 0.5s ease;
|
||||
transition: margin 0.5s ease, background-color 0.5s ease;
|
||||
-webkit-transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease;
|
||||
-moz-transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease;
|
||||
-ms-transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease;
|
||||
transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#optionsContainer {
|
||||
width: 12%;
|
||||
padding: 1.5%;
|
||||
width: 200px;
|
||||
padding: 40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@ -379,17 +383,41 @@ input, textarea {
|
||||
|
||||
#classesMode {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
height: 94vh;
|
||||
|
||||
position: absolute;
|
||||
top: 6vh;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mainClass {
|
||||
width: 18vw;
|
||||
margin: 2%;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 1%;
|
||||
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.classWrapper {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
margin: 10px;
|
||||
margin-top: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.classWrapper:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.classWrapper:last-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.classInfo {
|
||||
@ -398,7 +426,9 @@ input, textarea {
|
||||
}
|
||||
|
||||
.mainClassName {
|
||||
font-size: 3.1vh;
|
||||
font-size: 160%;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
@ -428,15 +458,12 @@ input, textarea {
|
||||
}
|
||||
|
||||
.workHolder {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
left: 5%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.workCard {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-bottom: 5%;
|
||||
width: 90%;
|
||||
margin: 2.5% 5% 2.5% 5%;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
cursor: pointer;
|
||||
@ -447,6 +474,14 @@ input, textarea {
|
||||
transition: box-shadow 0.4s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.workCard:first-child {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.workCard:last-child {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.workCard:hover {
|
||||
box-shadow: 2px 2px 5px 3px #666, inset 0 0 0 99999px rgba(0,0,0,0.09);
|
||||
}
|
||||
@ -517,14 +552,14 @@ input, textarea {
|
||||
}
|
||||
|
||||
.workTitle, .prefTitle {
|
||||
font-size: 2.7vh;
|
||||
font-size: 200%;
|
||||
font-weight: 400;
|
||||
margin: 0 3% 1% 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.prefTitle {
|
||||
font-size: 2.5vh;
|
||||
font-size: 140%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
@ -722,17 +757,22 @@ input, textarea {
|
||||
}
|
||||
|
||||
#bg {
|
||||
min-width: 1920px;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
#mainBody {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
position: relative;
|
||||
|
||||
-webkit-transition: opacity 0.4s ease;
|
||||
-moz-transition: opacity 0.4s ease;
|
||||
@ -1085,6 +1125,10 @@ input, textarea {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#toggleButtons div {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#toggleButtons i {
|
||||
margin-right: 12%;
|
||||
|
||||
@ -1167,9 +1211,9 @@ input, textarea {
|
||||
#userDropdownAvatar img {
|
||||
width: 9vh;
|
||||
height: 9vh;
|
||||
margin: -6.5vh 0 0 -5vh;
|
||||
margin: -6.5vh 0 0 -5.25vh;
|
||||
|
||||
border: 3px solid #0D0D0D;
|
||||
border: 0.5vh solid #0D0D0D;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
@ -1180,9 +1224,10 @@ input, textarea {
|
||||
}
|
||||
|
||||
#userDropdownAvatar p {
|
||||
font-size: 2.4vh;
|
||||
width: 15vw;
|
||||
margin: 0 auto 0 auto;
|
||||
padding-top: 12vh;
|
||||
padding-top: 12.4vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -1214,10 +1259,9 @@ input, textarea {
|
||||
}
|
||||
|
||||
#requests {
|
||||
width: 25vw;
|
||||
height: 11vw;
|
||||
margin-bottom: -15.5vw;
|
||||
padding: 2vw;
|
||||
width: 300px;
|
||||
height: 170px;
|
||||
padding: 30px;
|
||||
|
||||
border-top: 5px solid #852E6D;
|
||||
box-shadow: -2px 0px 5px 1px #444;
|
||||
@ -1228,31 +1272,31 @@ input, textarea {
|
||||
|
||||
z-index: 30;
|
||||
|
||||
-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;
|
||||
}
|
||||
|
||||
#requestTab {
|
||||
width: 5vw;
|
||||
height: 4vw;
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
|
||||
border-top: 5px solid #852E6D;
|
||||
box-shadow: -2px -4px 5px 0px #444;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -4vw;
|
||||
top: -55px;
|
||||
|
||||
cursor: pointer;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.fa-question {
|
||||
font-size: 5vh;
|
||||
width: 4vw;
|
||||
padding: 5% 10% 10% 10%;
|
||||
font-size: 36px;
|
||||
width: 50px;
|
||||
padding: 5px 10px 1px 10px;
|
||||
text-align: center;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease;
|
||||
@ -1266,14 +1310,16 @@ input, textarea {
|
||||
}
|
||||
|
||||
#requests p {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
#requests textarea {
|
||||
width: 96%;
|
||||
height: 11vh;
|
||||
margin-bottom: 1.5vh;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#requestCont{
|
||||
@ -1282,7 +1328,7 @@ input, textarea {
|
||||
|
||||
#requestSubmit {
|
||||
font-weight: 200;
|
||||
font-size: 2.5vh;
|
||||
font-size: 20px;
|
||||
margin-right: 2%;
|
||||
padding: 2%;
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<div id="headerBar"></div>
|
||||
</header>
|
||||
<div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
|
||||
<div id="menuContainer" style="left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
|
||||
<div id="modes">
|
||||
<div class="mode classes" style="background-color:{{divColor 'funcButton'}}">
|
||||
<i class="fa fa-university" aria-hidden="true"></i>
|
||||
@ -47,7 +47,7 @@
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
|
||||
<div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
|
||||
<h3>Preferences</h3>
|
||||
<div id="prefCont">
|
||||
<div>
|
||||
@ -236,7 +236,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="requests" style="background-color:{{divColor 'cards'}}">
|
||||
<div id="requests" style="bottom:{{requestStatus}};background-color:{{divColor 'cards'}}">
|
||||
<div id="requestTab" style="background-color:{{divColor 'cards'}}">
|
||||
<i class="fa fa-question" aria-hidden="true"></i>
|
||||
</div>
|
||||
@ -265,20 +265,22 @@
|
||||
</template>
|
||||
|
||||
<template name="classesMode">
|
||||
<div class="mainClass" style="background-color:{{divColor 'classes'}}">
|
||||
<div class="classInfo"> <!-- class color -->
|
||||
<h3 class="mainClassName">{{name}}</h3>
|
||||
<p class="mainClassHour">{{hour}}</p>
|
||||
<p class="mainClassTeacher">{{teacher}}</p>
|
||||
</div>
|
||||
<div class="creWork" classid="{{_id}}">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
<h4>Add Work</h4>
|
||||
</div>
|
||||
<div class="workHolder">
|
||||
{{#each thisClassWork}}
|
||||
{{> classModeWork}}
|
||||
{{/each}}
|
||||
<div class="classWrapper">
|
||||
<div class="mainClass" style="background-color:{{divColor 'classes'}}">
|
||||
<div class="classInfo"> <!-- class color -->
|
||||
<h3 class="mainClassName">{{name}}</h3>
|
||||
<p class="mainClassHour">{{hour}}</p>
|
||||
<p class="mainClassTeacher">{{teacher}}</p>
|
||||
</div>
|
||||
<div class="creWork" classid="{{_id}}">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
<h4>Add Work</h4>
|
||||
</div>
|
||||
<div class="workHolder">
|
||||
{{#each thisClassWork}}
|
||||
{{> classModeWork}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -10,8 +10,9 @@ var calWorkOpen = null;
|
||||
var calWorkDate = null;
|
||||
|
||||
var openValues = {
|
||||
"menu": "-25%",
|
||||
"options": "-20%"
|
||||
"menu": "-250px",
|
||||
"options": "-280px",
|
||||
"requests": "-235px"
|
||||
};
|
||||
|
||||
// Sets colors for different assignment statuses
|
||||
@ -38,7 +39,8 @@ var ref = {
|
||||
// Reactive variables.
|
||||
Session.set("user",{}); // Stores user preferences.
|
||||
Session.set("calendarClasses", []); // Stores calendar classes.
|
||||
Session.set("sidebar", null); // Status of sidebar
|
||||
Session.set("sidebar", null); // Status of sidebar.
|
||||
Session.set("requests",false); // Status of requests.
|
||||
Session.set("newWork", null); // If user creating new work.
|
||||
Session.set("currentWork", null); // Stores current selected work info.
|
||||
Session.set("currentReadableWork", null); // Stores readable selected work info.
|
||||
@ -226,22 +228,26 @@ Template.main.helpers({
|
||||
},
|
||||
menuStatus() { // Status of of menu sidebar.
|
||||
if (Session.equals("sidebar", "menuContainer")) {
|
||||
return "0%";
|
||||
return "0px";
|
||||
} else if (Session.equals("sidebar", "both")) {
|
||||
return "0%";
|
||||
return "0px";
|
||||
} else {
|
||||
return openValues.menu;
|
||||
}
|
||||
},
|
||||
optionsStatus() { // Status of options sidebar.
|
||||
if (Session.equals("sidebar", "optionsContainer")) {
|
||||
return "0%";
|
||||
return "0px";
|
||||
} else if (Session.equals("sidebar", "both")) {
|
||||
return "0%";
|
||||
return "0px";
|
||||
} else {
|
||||
return openValues.options;
|
||||
}
|
||||
},
|
||||
requestStatus() {
|
||||
if (Session.get("requests")) return "0px";
|
||||
return openValues.requests;
|
||||
},
|
||||
modeStatus(status) { // Color status of display modes.
|
||||
if (!Session.equals("mode",status)) return;
|
||||
return themeColors[Session.get("user").preferences.theme].highlightText;
|
||||
@ -467,7 +473,7 @@ Template.main.events({
|
||||
}
|
||||
|
||||
if(!document.getElementById("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown"));
|
||||
if(!document.getElementById("requests").contains(event.target)) document.getElementById("requests").style.marginBottom = "-15.5vw";
|
||||
if(!document.getElementById("requests").contains(event.target)) Session.set("requests",false);
|
||||
},
|
||||
// MAIN MENU BUTTONS
|
||||
'click .fa-bars' () { // Click menu button.
|
||||
@ -494,6 +500,10 @@ Template.main.events({
|
||||
Session.set("sidebar", "optionsContainer");
|
||||
}
|
||||
},
|
||||
'click #requests .fa-question' () {
|
||||
console.log("hi");
|
||||
Session.set("requests",!Session.get("requests"));
|
||||
},
|
||||
'click .classes' () { // Click classes mode button.
|
||||
if (Session.equals("mode", "classes")) return;
|
||||
var modeHolder = document.getElementById("mainBody");
|
||||
@ -569,9 +579,6 @@ Template.main.events({
|
||||
}
|
||||
openDivFade(document.getElementsByClassName("overlay")[0]);
|
||||
},
|
||||
'click #requests .fa-question' () {
|
||||
document.getElementById("requests").style.marginBottom = "0";
|
||||
},
|
||||
'click #requestSubmit' () {
|
||||
var area = document.getElementById("requestArea");
|
||||
if(area.value === "") return;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.change {
|
||||
font-size: 2.5vh;
|
||||
font-size: 150%;
|
||||
color: #8C8C8C;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user