Added user dropdown
This commit is contained in:
Kenneth Jao
parent
230245813c
commit
bf91825c0a
@ -13,7 +13,7 @@
|
||||
bottom: 0;
|
||||
z-index: 51;
|
||||
}
|
||||
|
||||
flogin
|
||||
#loginHeader {
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
@ -148,7 +148,7 @@ p.text {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.login-buttons {
|
||||
.login-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
@ -183,24 +183,36 @@ input, textarea {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#logout {
|
||||
padding: 1%;
|
||||
#dropdown {
|
||||
width: 6.5vh;
|
||||
height: 6.5vh;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
|
||||
float: right;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
-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: background-color 0.5s ease;
|
||||
-moz-transition: background-color 0.5s ease;
|
||||
-ms-transition: background-color 0.5s ease;
|
||||
transition: background-color 0.5s ease;
|
||||
}
|
||||
|
||||
#logout:hover {
|
||||
#dropdown img{
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
margin: -2.6vh 0 0 -2.7vh;
|
||||
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
border: 2px solid #222;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#dropdown:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
@ -1025,3 +1037,93 @@ input, textarea {
|
||||
#markDone:hover, #markConfirm:hover, #markReport:hover {
|
||||
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
#userTab {
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
-webkit-filter: drop-shadow(2px 2px 5px #666);
|
||||
filter: drop-shadow(2px 2px 5px #666);
|
||||
|
||||
border-left: 2.5vh solid transparent;
|
||||
border-right: 2.5vh solid transparent;
|
||||
|
||||
position: absolute;
|
||||
top: -3vh;
|
||||
right: 2vw;
|
||||
z-index: 19;
|
||||
}
|
||||
|
||||
#userDropdown {
|
||||
width: 15vw;
|
||||
margin-top: 10vh;
|
||||
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 1vh;
|
||||
right: 4vw;
|
||||
z-index: 20;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#userDropdownAvatar {
|
||||
width: 100%;
|
||||
height: 16vh;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#userDropdownAvatar img {
|
||||
width: 9vh;
|
||||
height: 9vh;
|
||||
margin: -6.5vh 0 0 -5vh;
|
||||
|
||||
border: 3px solid #0D0D0D;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
#userDropdownAvatar p {
|
||||
width: 9vh;
|
||||
margin: 0 auto 0 auto;
|
||||
padding-top: 12vh;
|
||||
}
|
||||
|
||||
#userFunctions {
|
||||
margin-bottom: 1%;
|
||||
border-bottom: 2px solid #666;
|
||||
}
|
||||
|
||||
.userFunction {
|
||||
font-size: 2.5vh;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-transition: background-color 0.4s ease;
|
||||
-moz-transition: background-color 0.4s ease;
|
||||
-ms-transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease;
|
||||
}
|
||||
|
||||
.userFunction:hover {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.userFunction i, .userFunction p {
|
||||
margin: 0;
|
||||
padding: 7% 0 7% 10%;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -9,7 +9,9 @@
|
||||
<i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
|
||||
<h1>Hourglass</h1><h2>{{schoolName}}</h2>
|
||||
<i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
|
||||
<div id="logout" onclick='document.getElementById("login-buttons-logout").click();'>Logout</div>
|
||||
<div id="dropdown">
|
||||
<img src="{{avatar}}">
|
||||
</div>
|
||||
</div>
|
||||
<div id="loadBar">
|
||||
<div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
|
||||
@ -202,6 +204,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="userDropdown" style="background-color:{{divColor 'cards'}}">
|
||||
<div id="userTab" style="border-bottom: 3vh solid {{divColor 'header'}}"></div>
|
||||
<div id="userDropdownAvatar">
|
||||
<img src="{{avatar}}">
|
||||
<p>ksjdragon</p>
|
||||
</div>
|
||||
<div id="userFunctions">
|
||||
<div id="myprofile" class="userFunction" onclick="window.location='/profile';">
|
||||
<i class="fa fa-user" aria-hidden="true"></i>
|
||||
<p>My Profile</p>
|
||||
</div>
|
||||
{{#if admin}}
|
||||
<div id="myprofile" class="userFunction" onclick="window.location='/admin';">
|
||||
<i class="fa fa-cogs" aria-hidden="true"></i>
|
||||
<p>Admin Panel</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="myprofile" class="userFunction" onclick='document.getElementById("login-buttons-logout").click();'>
|
||||
<i class="fa fa-sign-out" aria-hidden="true"></i>
|
||||
<p>Sign out</p>
|
||||
</div>
|
||||
</div>
|
||||
{{> loginButtons}}
|
||||
</template>
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ var ref = {
|
||||
|
||||
// Reactive variables.
|
||||
Session.set("user",{}); // Stores user preferences.
|
||||
Session.set("calendarClasses", null);
|
||||
Session.set("calendarClasses", []); // Stores calendar classes.
|
||||
Session.set("sidebar", null); // Status of sidebar
|
||||
Session.set("newWork", null); // If user creating new work.
|
||||
Session.set("currentWork", null); // Stores current selected work info.
|
||||
@ -190,6 +190,12 @@ Template.main.helpers({
|
||||
return;
|
||||
}
|
||||
},
|
||||
avatar() { // Returns avatar.
|
||||
return Session.get("user").avatar;
|
||||
},
|
||||
username() { // Returns user name.
|
||||
return Session.get("user").name;
|
||||
},
|
||||
defaultMode() { //Loads the default display mode for user.
|
||||
if(load) Session.set("mode",Session.get("user").preferences.mode);
|
||||
return;
|
||||
@ -373,6 +379,9 @@ Template.main.helpers({
|
||||
) return true;
|
||||
}
|
||||
},
|
||||
admin() {
|
||||
return Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin']);
|
||||
},
|
||||
refetchEvents() {
|
||||
if (Session.get("refetchEvents")) {
|
||||
$("#fullcalendar").fullCalendar('refetchEvents');
|
||||
@ -441,6 +450,8 @@ Template.main.events({
|
||||
} catch (err) {}
|
||||
}
|
||||
}
|
||||
|
||||
if(!document.getElementById("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown"));
|
||||
},
|
||||
// MAIN MENU BUTTONS
|
||||
'click .fa-bars' () { // Click menu button.
|
||||
@ -508,6 +519,12 @@ Template.main.events({
|
||||
});
|
||||
openDivFade(document.getElementsByClassName("overlay")[0]);
|
||||
},
|
||||
'click #dropdown' (event) {
|
||||
if(document.getElementById("userDropdown").style.display === "block") return;
|
||||
setTimeout(function() {
|
||||
openDivFade(document.getElementById("userDropdown"));
|
||||
}, 300);
|
||||
},
|
||||
'click .workCard' (event) { // Display work information on work card click.
|
||||
var dom = event.target;
|
||||
while (event.target.className !== "workCard") event.target = event.target.parentNode;
|
||||
|
||||
@ -58,25 +58,6 @@ Router.route('/user/:email', {
|
||||
}
|
||||
});
|
||||
|
||||
/*Router.route('/admin', {
|
||||
waitOn: function() {
|
||||
if (Roles.userIsInRole(Meteor.userId(), ['admin', 'superadmin'])) {
|
||||
return [
|
||||
Meteor.subscribe('classes', this.params._id),
|
||||
Meteor.subscribe('schools', this.params._id),
|
||||
Meteor.subscribe('work', this.params._id),
|
||||
Meteor.subscribe('requests', this.params._id),
|
||||
Meteor.subscribe('users', this.params._id)
|
||||
];
|
||||
} else {
|
||||
this.render('NotFound');
|
||||
}
|
||||
},
|
||||
action: function() {
|
||||
this.render("admin");
|
||||
}
|
||||
});*/
|
||||
|
||||
Router.route('/admin', {
|
||||
waitOn: function() {
|
||||
return [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user