Copied starter Meteor App files.
Cut and paste of the BasicMeteorApp.
This commit is contained in:
5
imports/ui/AdminHome.html
Normal file
5
imports/ui/AdminHome.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<template name="AdminHome">
|
||||
<div id="adminHome">
|
||||
Hello World
|
||||
</div>
|
||||
</template>
|
||||
2
imports/ui/AdminHome.import.styl
vendored
Normal file
2
imports/ui/AdminHome.import.styl
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
#adminHome
|
||||
margin: 20px 40px
|
||||
2
imports/ui/AdminHome.js
Normal file
2
imports/ui/AdminHome.js
Normal file
@@ -0,0 +1,2 @@
|
||||
|
||||
import './AdminHome.html';
|
||||
5
imports/ui/Home.html
Normal file
5
imports/ui/Home.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<template name="Home">
|
||||
<div id="homePage">
|
||||
{{#markdown}}This is a test of __markdown__.{{/markdown}}
|
||||
</div>
|
||||
</template>
|
||||
3
imports/ui/Home.import.styl
vendored
Normal file
3
imports/ui/Home.import.styl
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
#homePage
|
||||
display: block
|
||||
min-height: 300px
|
||||
2
imports/ui/Home.js
Normal file
2
imports/ui/Home.js
Normal file
@@ -0,0 +1,2 @@
|
||||
|
||||
import './Home.html';
|
||||
76
imports/ui/UserManagement.html
Normal file
76
imports/ui/UserManagement.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<template name="UserManagement">
|
||||
<div id="userManagement">
|
||||
{{#if Template.subscriptionsReady}}
|
||||
<div class="tableControls">
|
||||
<div class="contentControls">
|
||||
<a class="loadMoreLink {{#if disableLoadMore}}disabled{{/if}}" href="javascript:">Load More...</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separatedTableHeader">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="username">Username {{>UserSearch columnName='username'}}</th>
|
||||
<th class="email">Email {{>UserSearch columnName='email' collectionQueryColumnName='name' collection='Items' collectionResultColumnName='_id'}}</th>
|
||||
<th class="roles">Roles</th>
|
||||
<th class="actions">Actions <span class="newUserButton btn btn-success"><i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-times-circle" aria-hidden="true"></i></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="listRow">
|
||||
<div class="listCell">
|
||||
<div class="tableContainer mCustomScrollbar" data-mcs-theme="dark">
|
||||
<table class="dataTable table table-striped table-hover">
|
||||
<tbody>
|
||||
{{#if displayNewUser}}
|
||||
<tr>{{> UserEditor isNew=true}}</tr>
|
||||
{{/if}}
|
||||
{{#each users}}
|
||||
{{> User}}
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="User">
|
||||
<tr>
|
||||
{{#if editing}}
|
||||
{{> UserEditor}}
|
||||
{{else}}
|
||||
<td class="username tdLarge noselect nonclickable">{{username}}</td>
|
||||
<td class="email tdLarge noselect nonclickable">{{email}}</td>
|
||||
<td class="roles tdLarge noselect nonclickable">{{roles}}</td>
|
||||
<td class="actions center tdLarge"><i class="userRemove fa fa-times-circle fa-lg noselect clickable" aria-hidden="true"></i> / <i class="userEdit fa fa-pencil-square-o fa-lg noselect clickable" aria-hidden="true"></i></td>
|
||||
{{/if}}
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template name="UserEditor">
|
||||
<td colspan="3" class="userEditor measureEditorTd">
|
||||
<div>
|
||||
<div class="username editorDiv"><label>User Name:</label><input name="username" class="form-control" type="text" value="{{username}}" autocomplete="off" required></div>
|
||||
<div class="email editorDiv"><label>User Email:</label><input name="email" class="form-control" type="text" value="{{email}}" autocomplete="off" required></div>
|
||||
<div class="rolesContainer editorDiv"><label>Roles:</label>
|
||||
<div class="roles center" style="font-size: 1.2em">
|
||||
{{#each allRoles}}
|
||||
<span class="role {{getRoleState this}} noselect">{{name}}</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="actions center measureEditorTd"><i class="editorApply fa fa-check-square-o fa-lg noselect clickable" aria-hidden="true"></i> / <i class="editorCancel fa fa-times-circle fa-lg noselect clickable" aria-hidden="true"></i></td>
|
||||
</template>
|
||||
|
||||
<template name="UserSearch">
|
||||
<div class="">
|
||||
<input type="text" class="searchInput" placeholder="Filter..." value="{{searchValue}}" style="width: 90%"/>
|
||||
</div>
|
||||
</template>
|
||||
145
imports/ui/UserManagement.import.styl
vendored
Normal file
145
imports/ui/UserManagement.import.styl
vendored
Normal file
@@ -0,0 +1,145 @@
|
||||
#userManagement
|
||||
display: table
|
||||
content-box: border-box
|
||||
padding: 10px 20px
|
||||
height: 100%
|
||||
width: 100%
|
||||
text-align: left
|
||||
|
||||
.tableControls
|
||||
display: table
|
||||
width: 100%
|
||||
text-align: right
|
||||
margin-right: 20px
|
||||
.contentControls
|
||||
vertical-align: bottom
|
||||
display: table-cell
|
||||
text-align: right
|
||||
min-width: 100px
|
||||
a
|
||||
font-size: 12px
|
||||
font-family: "Arial", san-serif
|
||||
font-weight: 800
|
||||
color: #2d1b8c
|
||||
text-decoration: none
|
||||
a:hover
|
||||
text-decoration: underline
|
||||
a.disabled
|
||||
visibility: hidden
|
||||
.editor
|
||||
height: 100%
|
||||
overflow-y: auto
|
||||
|
||||
.insert
|
||||
flex: none
|
||||
width: 100%
|
||||
|
||||
.col-md-6
|
||||
padding: 10px 30px 0 30px
|
||||
background: #EFEFEF
|
||||
border-radius: 1em
|
||||
|
||||
.formGroupHeading
|
||||
font-size: 1.6em
|
||||
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif
|
||||
font-style: normal
|
||||
font-variant: normal
|
||||
font-weight: 500
|
||||
.table
|
||||
table-layout: fixed
|
||||
min-width: 100%
|
||||
thead, tbody
|
||||
> tr
|
||||
> .username
|
||||
width: 50%
|
||||
min-width: 100px
|
||||
> .email
|
||||
width: 50%
|
||||
min-width: 100px
|
||||
> .roles
|
||||
width: 260px
|
||||
min-width: 260px
|
||||
> .actions
|
||||
width: 80px
|
||||
min-width: 80px
|
||||
.separatedTableHeader
|
||||
.actions
|
||||
text-align: center
|
||||
.newUserButton
|
||||
margin-top: 4px
|
||||
padding: 0 12px
|
||||
.fa-plus-circle
|
||||
display: inline-block
|
||||
.fa-times-circle
|
||||
display: none
|
||||
.newUserButton.active
|
||||
background-color: #fb557b
|
||||
color: black
|
||||
.fa-times-circle
|
||||
display: inline-block
|
||||
.fa-plus-circle
|
||||
display: none
|
||||
.listRow
|
||||
display: table-row
|
||||
.listCell
|
||||
display: table-cell
|
||||
position: relative
|
||||
height: 100%
|
||||
width: 100%
|
||||
.tableContainer
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
width: auto
|
||||
height: auto
|
||||
border: 0
|
||||
font-size: 12.5px
|
||||
overflow-y: auto
|
||||
table
|
||||
table-layout: fixed
|
||||
width: 100%
|
||||
thead
|
||||
display: none
|
||||
visibility: hidden
|
||||
.userRemove
|
||||
color: red
|
||||
.userEdit
|
||||
color: darkblue
|
||||
.editorApply
|
||||
color: green
|
||||
.editorCancel
|
||||
color: red
|
||||
.userEditor > div
|
||||
display: table
|
||||
> div
|
||||
display: table-cell
|
||||
padding: 10px
|
||||
.roles
|
||||
.role
|
||||
vertical-align: middle
|
||||
td.roles
|
||||
.role
|
||||
padding: 4px 4px
|
||||
border: 1px solid #555
|
||||
border-radius: .25em
|
||||
background: white
|
||||
color: #999
|
||||
cursor: pointer
|
||||
.selected
|
||||
color: black
|
||||
|
||||
div.roles
|
||||
padding: 4px 0
|
||||
.role
|
||||
padding: 4px 4px
|
||||
border: 1px solid #555
|
||||
border-radius: .25em
|
||||
background: white
|
||||
color: #999
|
||||
cursor: pointer
|
||||
.selected
|
||||
color: black
|
||||
.center
|
||||
vertical-align: middle !important
|
||||
223
imports/ui/UserManagement.js
Normal file
223
imports/ui/UserManagement.js
Normal file
@@ -0,0 +1,223 @@
|
||||
|
||||
import './UserManagement.html';
|
||||
import '/imports/util/selectize/selectize.js'
|
||||
|
||||
let QUERY_LIMIT = 100;
|
||||
let QUERY_LIMIT_INCREMENT = 100;
|
||||
let PREFIX = "UserManagement";
|
||||
|
||||
Tracker.autorun(function() {
|
||||
Meteor.subscribe("users", Session.get(PREFIX + 'searchQuery'));
|
||||
Meteor.subscribe("roles");
|
||||
});
|
||||
|
||||
Template.UserManagement.onCreated(function() {
|
||||
Session.set(PREFIX + "displayNewUser", false);
|
||||
Session.set(PREFIX + "queryLimit", QUERY_LIMIT);
|
||||
});
|
||||
Template.UserManagement.onRendered(function() {
|
||||
$(".tableContainer").mCustomScrollbar({
|
||||
scrollButtons: {enable:true},
|
||||
theme: "light-thick",
|
||||
scrollbarPosition: "outside",
|
||||
scrollEasing: "linear"
|
||||
});
|
||||
});
|
||||
Template.UserManagement.helpers({
|
||||
displayNewUser: function() {
|
||||
return Session.get(PREFIX + "displayNewUser");
|
||||
},
|
||||
users: function() {
|
||||
let skipCount = Session.get(PREFIX + 'skipCount') || 0;
|
||||
let query = Session.get(PREFIX + 'searchQuery');
|
||||
let dbQuery = [];
|
||||
|
||||
if(query) {
|
||||
_.each(_.keys(query), function(key) {
|
||||
if(_.isFunction(query[key])) dbQuery.push({[key]: query[key]}); //dbQuery[key] = query[key]();
|
||||
else if(_.isObject(query[key])) dbQuery.push({[key]: query[key]}); //dbQuery[key] = query[key]; //Will look something like: {$in: [xxx,xxx,xxx]}
|
||||
else if(_.isNumber(query[key])) dbQuery.push({[key]: query[key]}); //dbQuery[key] = query[key];
|
||||
else {
|
||||
//dbQuery[key] = {$regex: query[key], $options: 'i'};
|
||||
let searchValue = query[key];
|
||||
let searches = searchValue && searchValue.length > 0 ? searchValue.split(/\s+/) : undefined;
|
||||
|
||||
for(let search of searches) {
|
||||
dbQuery.push({[key]: {$regex: '\\b' + search, $options: 'i'}});
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if(!Session.get(PREFIX + "showHidden")) {
|
||||
//Ignore any hidden elements by showing those not hidden, or those without the hidden field.
|
||||
dbQuery.push({$or: [{hidden: false}, {hidden: {$exists:false}}]});
|
||||
}
|
||||
|
||||
dbQuery = dbQuery.length > 0 ? {$and: dbQuery} : {};
|
||||
Session.set(PREFIX + 'userCount', Meteor.collections.Users.find(dbQuery).count()); //Always get a full count.
|
||||
return Meteor.collections.Users.find(dbQuery, {limit: Session.get(PREFIX + "queryLimit"), skip: skipCount, sort: {username: 1}});
|
||||
},
|
||||
disableLoadMore: function() {
|
||||
return Session.get(PREFIX + 'userCount') - (Session.get(PREFIX + 'skipCount') || 0) - Session.get(PREFIX + "queryLimit") <= 0;
|
||||
}
|
||||
});
|
||||
Template.UserManagement.events({
|
||||
'click .loadMoreLink': function(event, template) {
|
||||
event.preventDefault();
|
||||
Session.set(PREFIX + 'queryLimit', Session.get(PREFIX + "queryLimit") + QUERY_LIMIT_INCREMENT);
|
||||
},
|
||||
'click .newUserButton': function(event, template) {
|
||||
if(template.$('.newUserButton').hasClass('active')) {
|
||||
Session.set(PREFIX + 'displayNewUser', false);
|
||||
}
|
||||
else {
|
||||
Session.set(PREFIX + 'displayNewUser', true);
|
||||
Session.set(PREFIX + "editedUser", undefined); //Clear the edited user so that only one editor is open at a time.
|
||||
}
|
||||
template.$('.newUserButton').toggleClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
Template.User.onCreated(function() {
|
||||
this.edited = new ReactiveVar();
|
||||
});
|
||||
Template.User.events({
|
||||
"click .userEdit": function(event, template) {
|
||||
//template.edited.set(this);
|
||||
Session.set(PREFIX + "editedUser", this._id);
|
||||
Session.set(PREFIX + 'displayNewUser', false); //Ensure the new measure editor is closed.
|
||||
template.parentTemplate().$('.newUserButton').removeClass('active');
|
||||
},
|
||||
"click .userRemove": function(event, template) {
|
||||
let _this = this;
|
||||
bootbox.confirm({
|
||||
message: "Delete the user?",
|
||||
buttons: {confirm: {label: "Yes", className: 'btn-success'}, cancel: {label: "No", className: "btn-danger"}},
|
||||
callback: function(result) {
|
||||
if(result) {
|
||||
Meteor.call('deleteUser', _this._id, function(error, result) {
|
||||
if(error) {
|
||||
sAlert.error(error);
|
||||
}
|
||||
else {
|
||||
sAlert.success("User removed.");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
Template.User.helpers({
|
||||
email: function() {
|
||||
return this.emails && this.emails.length > 0 ? this.emails[0].address : "";
|
||||
},
|
||||
editing: function() {
|
||||
let editedUser = Session.get(PREFIX + "editedUser");
|
||||
|
||||
return editedUser == this._id;
|
||||
}
|
||||
});
|
||||
|
||||
Template.UserEditor.helpers({
|
||||
email: function() {
|
||||
return this.emails && this.emails.length > 0 ? this.emails[0].address : "";
|
||||
},
|
||||
allRoles: function() {
|
||||
return Meteor.collections.UserRoles.find();
|
||||
},
|
||||
getRoleState: function(role) {
|
||||
let user = Template.parentData(1);
|
||||
|
||||
return !user.isNew && user.roles.includes(role.name) ? "selected" : "";
|
||||
}
|
||||
});
|
||||
Template.UserEditor.events({
|
||||
"click .editorCancel": function(event, template) {
|
||||
Session.set(PREFIX + "editedUser", undefined);
|
||||
Session.set(PREFIX + 'displayNewUser', false);
|
||||
template.parentTemplate().$('.newUserButton').removeClass('active');
|
||||
},
|
||||
"click .editorApply": function(event, template) {
|
||||
let user = {};
|
||||
let roles = [];
|
||||
|
||||
user.username = template.$('input[name="username"]').val();
|
||||
user.email = template.$('input[name="email"]').val();
|
||||
|
||||
let roleSpans = template.$('.role.selected');
|
||||
for(let i = 0; i < roleSpans.length; i++) {
|
||||
roles.push($(roleSpans[i]).text());
|
||||
}
|
||||
|
||||
user.roles = roles;
|
||||
|
||||
if(Session.get(PREFIX + 'displayNewUser')) {
|
||||
Meteor.call('insertUser', user, function(error, result) {
|
||||
if(error) {
|
||||
sAlert.error(error);
|
||||
}
|
||||
else {
|
||||
sAlert.success("User created.");
|
||||
Session.set(PREFIX + 'displayNewUser', false);
|
||||
template.parentTemplate().$('.newUserButton').removeClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
user._id = this._id;
|
||||
Meteor.call("updateUser", user, function(error, result) {
|
||||
if(error) sAlert.error(error);
|
||||
else {
|
||||
sAlert.success("User updated.");
|
||||
Session.set(PREFIX + "editedUser", undefined);
|
||||
template.parentTemplate().$('.newUserButton').removeClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
"click .role": function(event, template) {
|
||||
$(event.target).toggleClass("selected");
|
||||
}
|
||||
});
|
||||
|
||||
Template.UserSearch.events({
|
||||
"keyup .searchInput": _.throttle(function(event, template) {
|
||||
let searchQuery = Session.get(PREFIX + 'searchQuery') || {};
|
||||
let searchFields = Session.get(PREFIX + 'searchFields') || {};
|
||||
let searchValue = template.$('.searchInput').val();
|
||||
|
||||
if(searchValue) {
|
||||
if(this.number) searchValue = parseFloat(searchValue);
|
||||
|
||||
if(this.collection) {
|
||||
let ids = Meteor.collections[this.collection].find({[this.collectionQueryColumnName]: {$regex: searchValue, $options: 'i'}}, {fields: {[this.collectionResultColumnName]: 1}}).fetch();
|
||||
|
||||
//Convert the ids to an array of ids instead of an array of objects containing an id.
|
||||
for(let i = 0; i < ids.length; i++) {ids[i] = ids[i]._id;}
|
||||
searchQuery[this.columnName] = {$in: ids};
|
||||
searchFields[this.columnName] = searchValue;
|
||||
}
|
||||
else {
|
||||
searchFields[this.columnName] = searchQuery[this.columnName] = searchValue;
|
||||
}
|
||||
}
|
||||
else {
|
||||
//Remove columns from the search query whose values are empty so we don't bother the database with them.
|
||||
delete searchQuery[this.columnName];
|
||||
delete searchFields[this.columnName];
|
||||
}
|
||||
|
||||
Session.set(PREFIX + 'searchQuery', searchQuery);
|
||||
Session.set(PREFIX + 'skipCount', 0); //Reset the paging of the results.
|
||||
}, 500)
|
||||
});
|
||||
Template.UserSearch.helpers({
|
||||
searchValue: function() {
|
||||
let searchFields = Session.get(PREFIX + 'searchFields');
|
||||
|
||||
return (searchFields && searchFields[this.columnName]) ? searchFields[this.columnName] : '';
|
||||
}
|
||||
});
|
||||
58
imports/ui/accounts/accounts.html
Normal file
58
imports/ui/accounts/accounts.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<template name="OverrideAtForm">
|
||||
{{#unless hide}}
|
||||
<div class="at-form">
|
||||
<!--{{#if showTitle}}-->
|
||||
<!--{{> atTitle}}-->
|
||||
<!--{{/if}}-->
|
||||
{{#if showOauthServices}}
|
||||
{{> atOauth}}
|
||||
{{/if}}
|
||||
{{#if showServicesSeparator}}
|
||||
{{> atSep}}
|
||||
{{/if}}
|
||||
{{#if showError}}
|
||||
{{> atError}}
|
||||
{{/if}}
|
||||
{{#if showResult}}
|
||||
{{> atResult}}
|
||||
{{/if}}
|
||||
{{#if showMessage}}
|
||||
{{> atMessage}}
|
||||
{{/if}}
|
||||
{{#if showPwdForm}}
|
||||
{{> OverrideAtPwdForm}}
|
||||
{{/if}}
|
||||
{{#if showTermsLink}}
|
||||
{{> atTermsLink}}
|
||||
{{/if}}
|
||||
{{#if showSignInLink}}
|
||||
{{> atSigninLink}}
|
||||
{{/if}}
|
||||
{{#if showSignUpLink}}
|
||||
{{> atSignupLink}}
|
||||
{{/if}}
|
||||
{{#if showResendVerificationEmailLink}}
|
||||
{{> atResendVerificationEmailLink}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
</template>
|
||||
|
||||
<template name="OverrideAtPwdForm">
|
||||
<div class="at-pwd-form">
|
||||
<form role="form" id="at-pwd-form" novalidate action="#" method="POST">
|
||||
<fieldset {{disabled}}>
|
||||
{{#each fields}}
|
||||
{{> atInput}}
|
||||
{{/each}}
|
||||
{{#if showReCaptcha}}
|
||||
{{> atReCaptcha}}
|
||||
{{/if}}
|
||||
{{> atPwdFormBtn}}
|
||||
{{#if showForgotPasswordLink}}
|
||||
{{> atPwdLink}}
|
||||
{{/if}}
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
18
imports/ui/accounts/accounts.js
Normal file
18
imports/ui/accounts/accounts.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import { Template } from 'meteor/templating';
|
||||
|
||||
import './accounts.html';
|
||||
|
||||
// Simply 'inherits' helpers from AccountsTemplates
|
||||
Template.OverrideAtForm.helpers(AccountsTemplates.atFormHelpers);
|
||||
|
||||
// Simply 'inherits' helpers and events from AccountsTemplates
|
||||
Template.OverrideAtPwdForm.helpers(AccountsTemplates.atPwdFormHelpers);
|
||||
Template.OverrideAtPwdForm.events(AccountsTemplates.atPwdFormEvents);
|
||||
|
||||
// We identified the templates that need to be overridden by looking at the available templates
|
||||
// here: https://github.com/meteor-useraccounts/unstyled/tree/master/lib
|
||||
// Template['override-atPwdFormBtn'].replaces('atPwdFormBtn');
|
||||
// Template['override-atPwdForm'].replaces('atPwdForm');
|
||||
// Template['override-atTextInput'].replaces('atTextInput');
|
||||
// Template['override-atTitle'].replaces('atTitle');
|
||||
// Template['override-atError'].replaces('atError');
|
||||
8
imports/ui/helpers.js
Normal file
8
imports/ui/helpers.js
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
// General use helpers - available to all views.
|
||||
|
||||
UI.registerHelper('currentUserName', function() {
|
||||
if(Meteor.user()){
|
||||
return Meteor.user().emails[0].address;
|
||||
}
|
||||
});
|
||||
32
imports/ui/layouts/Admin.html
Normal file
32
imports/ui/layouts/Admin.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<template name="Admin">
|
||||
{{> sAlert}}
|
||||
<div id="mainAdmin">
|
||||
<nav class="leftSidebarContainer generalSidebar">
|
||||
<a href="javascript:" class="fa fa-bars leftSidebarMenuButton generalMenuButton" aria-hidden="true"></a>
|
||||
<div class="leftSidebar">
|
||||
<div class="logoArea">
|
||||
<i class="fa fa-sign-out fa-2x signOut" aria-hidden="true"></i>
|
||||
<div class="logo"><img src="/images/Logo_v1.png" height="60px"/></div>
|
||||
</div>
|
||||
<div class="menuArea generalMenu">
|
||||
<ul>
|
||||
<li class="{{isActiveRoute 'UserManagement'}}">
|
||||
<a href="{{pathFor 'UserManagement'}}">
|
||||
Users
|
||||
</a>
|
||||
</li>
|
||||
<!-- Below is a second menu with a tag attached. -->
|
||||
<!--<li class="{{isActiveRoute 'Misc'}}">-->
|
||||
<!--<a href="{{pathFor 'Misc'}}">-->
|
||||
<!--Misc <!– <span class="tag">sample tag</span>–>-->
|
||||
<!--</a>-->
|
||||
<!--</li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="contentBody verticalStack">
|
||||
{{> Template.dynamic template=content}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
189
imports/ui/layouts/Admin.import.styl
vendored
Normal file
189
imports/ui/layouts/Admin.import.styl
vendored
Normal file
@@ -0,0 +1,189 @@
|
||||
|
||||
#mainAdmin
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 0
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
nav.leftSidebarContainer
|
||||
z-index:999
|
||||
position: fixed
|
||||
top: 0
|
||||
width: 220px
|
||||
padding: 0
|
||||
height: 100%
|
||||
border: 0
|
||||
vertical-align: top
|
||||
text-align: left
|
||||
background-color: #90b272 //Old browsers
|
||||
background: -moz-linear-gradient(-180deg, #90b272 0%, #4d7727 100%) //FF3.6-15
|
||||
background: -webkit-linear-gradient(-180deg, #90b272 0%,#4d7727 100%) //Chrome10-25,Safari5.1-6
|
||||
background: linear-gradient(180deg, #90b272 0%,#4d7727 100%) //W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
|
||||
font-size: 14px
|
||||
font-weight: 700
|
||||
overflow: visible
|
||||
margin: 0 0 0 -220px
|
||||
-webkit-transition: .5s ease-in
|
||||
-moz-transition: .5s ease-in
|
||||
-o-transition: .5s ease-in
|
||||
-ms-transition: .5s ease-in
|
||||
transition: .5s ease-in
|
||||
.leftSidebarMenuButton
|
||||
position: absolute
|
||||
right: -30px
|
||||
-webkit-transition: .5s ease-in
|
||||
-moz-transition: .5s ease-in
|
||||
-o-transition: .5s ease-in
|
||||
-ms-transition: .5s ease-in
|
||||
transition: .5s ease-in
|
||||
-webkit-border-top-right-radius: 5px
|
||||
-webkit-border-bottom-right-radius: 5px
|
||||
-moz-border-radius-topright: 5px
|
||||
-moz-border-radius-bottomright: 5px
|
||||
border-top-right-radius: 5px
|
||||
border-bottom-right-radius: 5px
|
||||
color: black
|
||||
font-size: 20px
|
||||
line-height: 20px
|
||||
font-weight: 900
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
width: 30px
|
||||
height: 30px
|
||||
padding: 5px 0
|
||||
background-color: #90b272
|
||||
display: block
|
||||
border-top: 1px solid #494
|
||||
border-right: 1px solid #494
|
||||
border-bottom: 1px solid #494
|
||||
.leftSidebarMenuButton:hover
|
||||
color: rgba(150,0,0,.5)
|
||||
nav.generalSidebar
|
||||
.leftSidebarMenuButton
|
||||
top: 10px
|
||||
nav.menuHide .leftSidebarMenuButton
|
||||
right: 60px
|
||||
nav.menuShow
|
||||
margin: 0
|
||||
nav.menuShow .leftSidebarMenuButton
|
||||
right: -15px
|
||||
-webkit-transform: rotate(45deg) !important
|
||||
-moz-transform: rotate(45deg) !important
|
||||
-o-transform: rotate(45deg) !important
|
||||
-ms-transform: rotate(45deg) !important
|
||||
transform: rotate(45deg) !important
|
||||
-moz-border-radius-bottomright: 0
|
||||
//border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
border-bottom: 0
|
||||
.leftSidebar
|
||||
height: 100%
|
||||
//position: absolute
|
||||
border: 0
|
||||
vertical-align: top
|
||||
padding: 0
|
||||
text-align: left
|
||||
//top: 0px
|
||||
//left: 0px
|
||||
//bottom: 0px
|
||||
width: 220px
|
||||
//Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D
|
||||
background-color: #90b272 //Old browsers
|
||||
background: -moz-linear-gradient(-180deg, #90b272 0%, #4d7727 100%) //FF3.6-15
|
||||
background: -webkit-linear-gradient(-180deg, #90b272 0%,#4d7727 100%) //Chrome10-25,Safari5.1-6
|
||||
background: linear-gradient(180deg, #90b272 0%,#4d7727 100%) //W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
|
||||
font-size: 14px
|
||||
font-weight: 700
|
||||
overflow: hidden
|
||||
|
||||
.logoArea
|
||||
width: 100%
|
||||
min-height: 50px
|
||||
.signOut
|
||||
position: absolute
|
||||
left: 10px
|
||||
top: 10px
|
||||
color: white
|
||||
cursor: pointer
|
||||
.signOut:hover
|
||||
color: #BBB
|
||||
.signOut:active
|
||||
color: black
|
||||
.logo
|
||||
text-align: center
|
||||
margin-top: 20px
|
||||
img:hover
|
||||
//-webkit-animation: neon6_drop 1.5s ease-in-out infinite alternate;
|
||||
//-moz-animation: neon6_drop 1.5s ease-in-out infinite alternate;
|
||||
animation: neon6_drop 1.5s ease-in-out infinite alternate;
|
||||
.menuArea
|
||||
width: 100%
|
||||
ul
|
||||
padding: 20px 0 0 0
|
||||
margin: 0
|
||||
list-style: none
|
||||
li:first-child
|
||||
border-top: 1px solid #e4e5e7
|
||||
li
|
||||
border-bottom: 1px solid #e4e5e7
|
||||
color: #96a2ae
|
||||
text-transform: uppercase
|
||||
display: block
|
||||
a
|
||||
color: black
|
||||
padding: 10px 20px
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
display: block
|
||||
.tag
|
||||
padding: .3em .6em
|
||||
margin-top: -.2em
|
||||
font-size: .8em
|
||||
color: #ddd
|
||||
white-space: nowrap
|
||||
vertical-align: baseline
|
||||
border-radius: .5em
|
||||
border: 1px solid #000000
|
||||
float: right
|
||||
.subMenu
|
||||
background-color: #999
|
||||
padding: .3em .6em
|
||||
margin-top: -.2em
|
||||
font-size: .8em
|
||||
color: #fff
|
||||
white-space: nowrap
|
||||
vertical-align: baseline
|
||||
border-radius: .5em
|
||||
border: 1px solid #000000
|
||||
float: right
|
||||
.subMenu.active
|
||||
background-color: #333
|
||||
li:hover
|
||||
// Note: neon6 is defined in effects.import.styl
|
||||
background-color: #666
|
||||
-webkit-animation: neon6 1.5s ease-in-out infinite alternate
|
||||
-moz-animation: neon6 1.5s ease-in-out infinite alternate
|
||||
animation: neon6 1.5s ease-in-out infinite alternate
|
||||
.subMenu
|
||||
// Note: neon6 is defined in effects.import.styl
|
||||
background-color: #999
|
||||
-webkit-animation: neon7 1.5s ease-in-out infinite alternate
|
||||
-moz-animation: neon7 1.5s ease-in-out infinite alternate
|
||||
animation: neon7 1.5s ease-in-out infinite alternate
|
||||
li.active
|
||||
background-color: #333
|
||||
> a
|
||||
color: #96a2ae
|
||||
li.active:hover
|
||||
background-color: #333
|
||||
> a
|
||||
color: white
|
||||
|
||||
.contentBody
|
||||
flex: 1 1 1px
|
||||
padding: 10px 20px
|
||||
-webkit-box-shadow: inset 4px 2px 10px -3px rgba(168,165,168,1)
|
||||
-moz-box-shadow: inset 4px 2px 10px -3px rgba(168,165,168,1)
|
||||
box-shadow: inset 8px 0px 10px -3px rgba(168,165,168,1)
|
||||
overflow: hidden
|
||||
54
imports/ui/layouts/Admin.js
Normal file
54
imports/ui/layouts/Admin.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import { Template } from 'meteor/templating';
|
||||
import './Admin.html';
|
||||
|
||||
Template.Admin.toggleMenu = function($sidebar) {
|
||||
let $sidebars = $('nav.leftSidebarContainer');
|
||||
|
||||
for(let i = 0; i < $sidebars.length; i++) {
|
||||
if($sidebars[i] == $sidebar[0]) {
|
||||
$sidebar.toggleClass('menuShow');
|
||||
}
|
||||
else {
|
||||
$($sidebars[i]).toggleClass('menuHide');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Template.Admin.events({
|
||||
"click .signOut": function(event, template) {
|
||||
AccountsTemplates.logout();
|
||||
},
|
||||
// General Menu
|
||||
"click .generalSidebar .leftSidebarMenuButton": function(event, template) {
|
||||
event.preventDefault();
|
||||
Template.Admin.toggleMenu($('nav.generalSidebar'));
|
||||
},
|
||||
"click .generalSidebar .leftSidebar a": function(event, template) {
|
||||
Template.Admin.toggleMenu($('nav.generalSidebar'));
|
||||
},
|
||||
"click .generalSidebar .leftSidebar a .subMenu": function(event, template) {
|
||||
Template.Admin.toggleMenu($('nav.generalSidebar'));
|
||||
},
|
||||
// Graphs Menu
|
||||
"click .graphsSidebar .leftSidebarMenuButton": function(event, template) {
|
||||
event.preventDefault();
|
||||
Template.Admin.toggleMenu($('nav.graphsSidebar'));
|
||||
},
|
||||
"click .graphsSidebar .leftSidebar a": function(event, template) {
|
||||
Template.Admin.toggleMenu($('nav.graphsSidebar'));
|
||||
},
|
||||
"click .graphsSidebar .leftSidebar a .subMenu": function(event, template) {
|
||||
Template.Admin.toggleMenu($('nav.graphsSidebar'));
|
||||
},
|
||||
// Settings Menu
|
||||
"click .settingsSidebar .leftSidebarMenuButton": function(event, template) {
|
||||
event.preventDefault();
|
||||
Template.Admin.toggleMenu($('nav.settingsSidebar'));
|
||||
},
|
||||
"click .settingsSidebar .leftSidebar a": function(event, template) {
|
||||
Template.Admin.toggleMenu($('nav.settingsSidebar'));
|
||||
},
|
||||
"click .settingsSidebar .leftSidebar a .subMenu": function(event, template) {
|
||||
Template.Admin.toggleMenu($('nav.settingsSidebar'));
|
||||
}
|
||||
});
|
||||
9
imports/ui/layouts/Login.html
Normal file
9
imports/ui/layouts/Login.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<template name="Login">
|
||||
<div id="login" class="content">
|
||||
<div class="spacer"> </div>
|
||||
<div class="contentBox">
|
||||
<img src="/images/Logo_v1.png"/>
|
||||
<div class="form">{{> Template.dynamic template=content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
63
imports/ui/layouts/Login.import.styl
vendored
Normal file
63
imports/ui/layouts/Login.import.styl
vendored
Normal file
@@ -0,0 +1,63 @@
|
||||
#login.content
|
||||
background: white
|
||||
height: 100%
|
||||
.spacer
|
||||
height: 10%
|
||||
.contentBox
|
||||
margin: 0 auto
|
||||
max-width: 600px
|
||||
background-color: #88d15a
|
||||
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
|
||||
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
|
||||
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
|
||||
padding: 40px 10px
|
||||
text-align: center
|
||||
img
|
||||
height: 120px
|
||||
vertical-align: top
|
||||
.form
|
||||
display: inline-block
|
||||
margin-left: 20px
|
||||
input
|
||||
padding: 8px
|
||||
width: 300px
|
||||
margin-bottom: 10px
|
||||
label
|
||||
display: none
|
||||
fieldset
|
||||
border: none
|
||||
.at-btn
|
||||
margin-bottom: 6px
|
||||
text-align: center
|
||||
width: 300px
|
||||
background: #34d955;
|
||||
background-image: -webkit-linear-gradient(top, #5d942b, #4b7d26)
|
||||
background-image: -moz-linear-gradient(top, #5d942b, #4b7d26)
|
||||
background-image: -ms-linear-gradient(top, #5d942b, #4b7d26)
|
||||
background-image: -o-linear-gradient(top, #5d942b, #4b7d26)
|
||||
background-image: linear-gradient(to bottom, #5d942b, #4b7d26)
|
||||
font-family: "Arial Black", Arial
|
||||
color: #ffffff
|
||||
font-size: 14px
|
||||
line-height: 16px
|
||||
padding: 10px 20px 10px 20px
|
||||
text-decoration: none
|
||||
text-transform: uppercase
|
||||
border: none
|
||||
.at-btn:hover
|
||||
background: #29b54f
|
||||
background-image: -webkit-linear-gradient(top, #29b54f, #186b31)
|
||||
background-image: -moz-linear-gradient(top, #29b54f, #186b31)
|
||||
background-image: -ms-linear-gradient(top, #29b54f, #186b31)
|
||||
background-image: -o-linear-gradient(top, #29b54f, #186b31)
|
||||
background-image: linear-gradient(to bottom, #29b54f, #186b31)
|
||||
text-decoration: none
|
||||
cursor: pointer
|
||||
.at-link
|
||||
color: #1555b4
|
||||
font: Arial
|
||||
font-size: 12px
|
||||
font-weight: 800
|
||||
text-decoration: none
|
||||
.at-link:hover
|
||||
text-decoration: underline
|
||||
1
imports/ui/layouts/Login.js
Normal file
1
imports/ui/layouts/Login.js
Normal file
@@ -0,0 +1 @@
|
||||
import './Login.html';
|
||||
29
imports/ui/layouts/Public.html
Normal file
29
imports/ui/layouts/Public.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<template name="Public">
|
||||
{{> sAlert}}
|
||||
<div id="publicBody">
|
||||
<div id="page">
|
||||
<div id="menu"><!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed.
|
||||
--><a href="/Home">Home</a><!--
|
||||
--></div>
|
||||
<div id="links">
|
||||
<!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed. -->
|
||||
<a id="linkFacebook" href="" target='_blank' rel="nofollow"></a><!--
|
||||
--><a id="linkGoogle" href="" target='_blank' rel="nofollow"></a><!--
|
||||
--><a id="linkTwitter" href="" target='_blank' rel="nofollow"></a>
|
||||
</div>
|
||||
<div id="menuBackground"></div> <!-- A spacer between the menu and the header image. -->
|
||||
<div id="head">
|
||||
<!-- Logo click takes the user back to home -->
|
||||
<div id="logo" onclick="window.location='/Home'"></div>
|
||||
</div>
|
||||
<div id="content">
|
||||
{{> Template.dynamic template=content}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer lines -->
|
||||
<div id="footer">© 2018 Just Me | My Email <a href="mailto:me@somewhere.com">me@somewhere.com</a></div>
|
||||
<div id="designedBy" style="">
|
||||
Web Site By: <a href="http://somewhere.com" style="font-weight: normal" target="_blank">Your Company</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
181
imports/ui/layouts/Public.import.styl
vendored
Normal file
181
imports/ui/layouts/Public.import.styl
vendored
Normal file
@@ -0,0 +1,181 @@
|
||||
|
||||
#publicBody
|
||||
position: relative
|
||||
max-width: 950px
|
||||
min-width: 250px
|
||||
margin: 0 auto
|
||||
#page
|
||||
background: #FDFDFD
|
||||
@media(max-width: 549px)
|
||||
#head
|
||||
margin: 0 auto
|
||||
height: 0
|
||||
#logo
|
||||
position: absolute
|
||||
right: 5px
|
||||
top: 0
|
||||
width: 40px
|
||||
height: 40px
|
||||
background: url(images/Logo_v1.png) no-repeat top center
|
||||
background-size: 40px 40px
|
||||
cursor: pointer
|
||||
.page
|
||||
margin: 0 auto
|
||||
padding: 6px 4px
|
||||
position: relative
|
||||
#menuBackground
|
||||
height: 20px
|
||||
max-width: 950px
|
||||
background: #FFF
|
||||
#menu
|
||||
white-space: nowrap
|
||||
position: absolute
|
||||
height: 20px
|
||||
z-index: 200
|
||||
font-family: "Open Sans", Arial, Helvetica, sans-serif
|
||||
font-weight: 600
|
||||
font-size: .8em
|
||||
#menu a
|
||||
margin: 0 0 0 5px
|
||||
text-decoration: none
|
||||
color: black
|
||||
line-height: 20px
|
||||
display: inline-block
|
||||
height: 20px
|
||||
border-bottom: 1px solid transparent
|
||||
/* Force the browser to include padding and border as part of the size of the block. */
|
||||
-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
|
||||
-moz-box-sizing: border-box /* Firefox, other Gecko */
|
||||
box-sizing: border-box /* Opera/IE 8+ */
|
||||
#menu a:hover
|
||||
opacity: .7
|
||||
color: black
|
||||
border-bottom: 1px solid red
|
||||
#links
|
||||
white-space: nowrap
|
||||
position: absolute
|
||||
right: 50px
|
||||
top: 26px
|
||||
height: 15px
|
||||
width: 60px
|
||||
text-align: left
|
||||
z-index: 100
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
font-size: .8em
|
||||
font-weight: 800
|
||||
#links a
|
||||
display: inline-block
|
||||
width: 20px
|
||||
height: 15px
|
||||
border-bottom: 1px solid transparent
|
||||
/* Force the browser to include padding and border as part of the size of the block. */
|
||||
-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
|
||||
-moz-box-sizing: border-box /* Firefox, other Gecko */
|
||||
box-sizing: border-box /* Opera/IE 8+ */
|
||||
#links a:hover
|
||||
border-bottom: 1px solid red
|
||||
opacity: .7
|
||||
#linkFacebook
|
||||
background: url('images/Facebook_v2.png') no-repeat center center
|
||||
background-size: auto 9px
|
||||
#linkGoogle
|
||||
background: url('images/GooglePlus_v2.png') no-repeat center center
|
||||
background-size: 12px auto
|
||||
#linkTwitter
|
||||
background: url('images/Twitter_v2.png') no-repeat center center
|
||||
background-size: 12px auto
|
||||
@media(min-width: 550px)
|
||||
#head
|
||||
margin: 0 auto
|
||||
background: url(images/Header_v1.jpg) no-repeat top center
|
||||
background-size: contain
|
||||
max-width: 950px
|
||||
height: 171px
|
||||
#logo
|
||||
position: absolute
|
||||
right: 10px
|
||||
top: 10px
|
||||
width: 120px
|
||||
height: 120px
|
||||
background: url(images/Logo_v1.png) no-repeat top center
|
||||
background-size: 120px 120px
|
||||
cursor: pointer
|
||||
.page
|
||||
margin: 0 auto
|
||||
padding: 30px 20px
|
||||
position: relative
|
||||
#menuBackground
|
||||
height: 31px
|
||||
max-width: 950px
|
||||
background: #FFF
|
||||
#menu
|
||||
white-space: nowrap
|
||||
position: absolute
|
||||
height: 30px
|
||||
margin-bottom: 1px
|
||||
z-index: 200
|
||||
font-family: "Open Sans", Arial, Helvetica, sans-serif
|
||||
font-weight: 600
|
||||
font-size: 1em
|
||||
#menu a
|
||||
margin: 0 0 0 16px
|
||||
text-decoration: none
|
||||
color: black
|
||||
line-height: 30px
|
||||
display: inline-block
|
||||
height: 30px
|
||||
border-bottom: 3px solid transparent
|
||||
/* Force the browser to include padding and border as part of the size of the block. */
|
||||
-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
|
||||
-moz-box-sizing: border-box /* Firefox, other Gecko */
|
||||
box-sizing: border-box /* Opera/IE 8+ */
|
||||
#menu a.holidayMenuItem
|
||||
font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif
|
||||
font-weight: 400
|
||||
font-size: 1.3em
|
||||
letter-spacing: 1px
|
||||
vertical-align: top
|
||||
#menu a.shippingMenuItem
|
||||
font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif
|
||||
font-weight: 400
|
||||
font-size: 1.3em
|
||||
letter-spacing: 1px
|
||||
vertical-align: top
|
||||
#menu a:hover
|
||||
opacity: 1
|
||||
color: black
|
||||
background: transparent
|
||||
border-bottom: 3px solid #a20010
|
||||
#link
|
||||
white-space: nowrap
|
||||
position: absolute
|
||||
right: 10px
|
||||
top: 130px
|
||||
height: 30px
|
||||
width: 120px
|
||||
text-align: center
|
||||
z-index: 200
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
font-weight: 800
|
||||
font-size: 1em
|
||||
#links a
|
||||
display: inline-block
|
||||
width: 30px
|
||||
height: 30px
|
||||
border-bottom: 2px solid transparent
|
||||
/* Force the browser to include padding and border as part of the size of the block. */
|
||||
-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
|
||||
-moz-box-sizing: border-box /* Firefox, other Gecko */
|
||||
box-sizing: border-box /* Opera/IE 8+ */
|
||||
#links a:hover
|
||||
border-bottom: 2px solid rgb(200, 146, 186) /*#a20010;*/
|
||||
opacity: 1
|
||||
#linkFacebook
|
||||
background: url('images/Facebook_white_v2.png') no-repeat center 5px
|
||||
background-size: 20px auto
|
||||
#linkGoogle
|
||||
background: url('images/GooglePlus_white_v2.png') no-repeat center 6px
|
||||
background-size: 20px auto
|
||||
#linkTwitter
|
||||
background: url('images/Twitter_white_v2.png') no-repeat center 7px
|
||||
background-size: 20px auto
|
||||
6
imports/ui/layouts/Public.js
Normal file
6
imports/ui/layouts/Public.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { Template } from 'meteor/templating';
|
||||
import './Public.html';
|
||||
|
||||
Template.Public.events({
|
||||
|
||||
});
|
||||
52
imports/ui/styles/buttons.import.styl
vendored
Normal file
52
imports/ui/styles/buttons.import.styl
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
|
||||
span.button
|
||||
margin: 0 0 0 1px
|
||||
padding: 0.5em 1em
|
||||
border: 1px solid #d4d4d4
|
||||
border-radius: 50em
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
cursor: pointer
|
||||
outline: none
|
||||
background-color: #ececec
|
||||
color: #333
|
||||
font: 11px/normal sans-serif
|
||||
text-shadow: 1px 1px 0 #fff
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
//Prevent selection
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently not supported by any browser */
|
||||
span.button:hover
|
||||
color: blue
|
||||
span.button:active
|
||||
color: #fff
|
||||
background-color: #141414
|
||||
text-shadow: 1px 1px 0 #000
|
||||
border: 1px solid #292929
|
||||
span.button.primary
|
||||
font-weight: 800
|
||||
span.button.selected //Use this if they are toggle buttons
|
||||
color: #fff
|
||||
background-color: #141414
|
||||
text-shadow: 1px 1px 0 #000
|
||||
cursor: default
|
||||
span.buttonGroup
|
||||
:not(:first-child):not(:last-child)
|
||||
border-radius: 0
|
||||
:first-child
|
||||
border-top-left-radius: 50em
|
||||
border-bottom-left-radius: 50em
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
margin-left: 0
|
||||
:last-child
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 0
|
||||
border-top-right-radius: 50em
|
||||
border-bottom-right-radius: 50em
|
||||
52
imports/ui/styles/effects.import.styl
vendored
Normal file
52
imports/ui/styles/effects.import.styl
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
// For black text.
|
||||
@-webkit-keyframes neon6
|
||||
from
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@-moz-keyframes neon6
|
||||
from
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@keyframes neon6
|
||||
from
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
|
||||
// For white text.
|
||||
@-webkit-keyframes neon7
|
||||
from
|
||||
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@-moz-keyframes neon7
|
||||
from
|
||||
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
@keyframes neon7
|
||||
from
|
||||
text-shadow: 0 0 10px #bbb, 0 0 20px #bbb, 0 0 30px #bbb, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de
|
||||
to
|
||||
text-shadow: 0 0 5px #bbb, 0 0 10px #bbb, 0 0 15px #bbb, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de
|
||||
|
||||
//@-webkit-keyframes neon6_drop
|
||||
// from
|
||||
// -webkit-filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7))
|
||||
// filter: url(shadow.svg#drop-shadow)
|
||||
// 50%
|
||||
// -webkit-filter: drop-shadow(0px 0px 20px rgba(255,0,0,1))
|
||||
// filter: url(shadow.svg#drop-shadow)
|
||||
// to
|
||||
// -webkit-filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7))
|
||||
// filter: url(shadow.svg#drop-shadow)
|
||||
|
||||
@keyframes neon6_drop
|
||||
from
|
||||
filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7)) brightness(120%)
|
||||
50%
|
||||
filter: drop-shadow(0px 0px 20px rgba(255,0,0,1)) brightness(80%)
|
||||
to
|
||||
filter: drop-shadow(0px 0px 20px rgba(194,0,0,0.7)) brightness(100%)
|
||||
117
imports/ui/styles/forms.import.styl
vendored
Normal file
117
imports/ui/styles/forms.import.styl
vendored
Normal file
@@ -0,0 +1,117 @@
|
||||
|
||||
//Form Styles
|
||||
.select2-container
|
||||
font-size: 10px
|
||||
.select2-selection
|
||||
font-size: 13px //Make the font small enough the control can have a height similar to a standard input field.
|
||||
margin-bottom: 0px
|
||||
min-height: 10px !important //This is what really sets the height of the box containing the selection(s)
|
||||
padding-bottom: 2px //Add a little space below the selections to balance it all out.
|
||||
input
|
||||
padding: 6px
|
||||
border-radius: 4px
|
||||
border-width: 1px
|
||||
border-style: solid
|
||||
border-color: #ccc
|
||||
//input[type='button'].btn-success, input[type='submit'].btn-success
|
||||
// background-color: #5cb85c
|
||||
// :hover
|
||||
// background-color:
|
||||
//input[type='button'].btn-danger, input[type='submit'].btn-danger
|
||||
// background-color: #e55b46
|
||||
.form-control, .select2-selection //?
|
||||
font-size: 14px
|
||||
margin-bottom: 0px
|
||||
.form-group
|
||||
margin: 4px 0
|
||||
.has-error .form-control
|
||||
border-color: #a94442
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0)
|
||||
input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control
|
||||
line-height: 34px
|
||||
|
||||
.form-control
|
||||
display: block
|
||||
width: 100%
|
||||
height: 34px
|
||||
padding: 6px 12px
|
||||
font-size: 14px
|
||||
line-height: 1.42857143
|
||||
color: #555
|
||||
background-color: #fff
|
||||
background-image: none
|
||||
border: 1px solid #ccc
|
||||
border-radius: 4px
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
|
||||
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]
|
||||
align-items: center
|
||||
-webkit-padding-start: 1px
|
||||
overflow: hidden
|
||||
padding-left: 10px
|
||||
input
|
||||
-webkit-appearance: textfield
|
||||
background-color: white
|
||||
-webkit-rtl-ordering: logical
|
||||
user-select: text
|
||||
cursor: auto
|
||||
padding: 1px
|
||||
border-width: 2px
|
||||
border-style: inset
|
||||
border-color: initial
|
||||
border-image: initial
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control
|
||||
background-color: #eee
|
||||
opacity: 1
|
||||
input, textarea, keygen, select, button
|
||||
text-rendering: auto
|
||||
color: initial
|
||||
letter-spacing: normal
|
||||
word-spacing: normal
|
||||
text-transform: none
|
||||
text-indent: 0px
|
||||
text-shadow: none
|
||||
display: inline-block
|
||||
text-align: start
|
||||
margin: 0em 0em 0em 0em
|
||||
font: 13.3333px Arial
|
||||
input, textarea, keygen, select, button, meter, progress
|
||||
-webkit-writing-mode: horizontal-tb
|
||||
//.btn.disabled, .btn[disabled], fieldset[disabled] .btn
|
||||
// cursor: not-allowed
|
||||
// filter: unquote("alpha(opacity=65)")
|
||||
// -webkit-box-shadow: none
|
||||
// box-shadow: none
|
||||
// opacity: .65
|
||||
//button, html input[type="button"], input[type="reset"], input[type="submit"]
|
||||
// -webkit-appearance: button
|
||||
// cursor: pointer
|
||||
//button, html input[type="button"], input[type="reset"], input[type="submit"]
|
||||
// -webkit-appearance: button
|
||||
// cursor: pointer
|
||||
//.btn
|
||||
// display: inline-block;
|
||||
// padding: 6px 12px;
|
||||
// margin-bottom: 0;
|
||||
// font-size: 14px;
|
||||
// font-weight: normal;
|
||||
// line-height: 1.42857143;
|
||||
// text-align: center;
|
||||
// white-space: nowrap;
|
||||
// vertical-align: middle;
|
||||
// -ms-touch-action: manipulation;
|
||||
// touch-action: manipulation;
|
||||
// cursor: pointer;
|
||||
// -webkit-user-select: none;
|
||||
// -moz-user-select: none;
|
||||
// -ms-user-select: none;
|
||||
// user-select: none;
|
||||
// background-image: none;
|
||||
// border: 1px solid transparent;
|
||||
// border-radius: 4px;
|
||||
133
imports/ui/styles/maxHeightLayout.import.styl
vendored
Normal file
133
imports/ui/styles/maxHeightLayout.import.styl
vendored
Normal file
@@ -0,0 +1,133 @@
|
||||
section.maxHeightContainer, div.maxHeightContainer
|
||||
display: table
|
||||
height: 100%
|
||||
width: 100%
|
||||
section.maxHeightRow, div.maxHeightRow
|
||||
display: table-row
|
||||
section.maxHeightContent, div.maxHeightContent //Use this for a row of content that should shrink to fit the content size.
|
||||
display: table-cell
|
||||
height: 1px
|
||||
section.maxHeightContentExpandAndScroll, div.maxHeightContentExpandAndScroll //Use this for a row of content that should take up all remaining space and will contain potentially scrolled content.
|
||||
display: table-cell
|
||||
height: 100%
|
||||
position: relative
|
||||
section.maxHeightContentScrolled, div.maxHeightContentScrolled //Use this to create the scrolled content. Can use any display within it.
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
width: auto
|
||||
height: auto
|
||||
overflow-y: auto
|
||||
|
||||
// *****************
|
||||
// ** Vertical Stack
|
||||
// ** Use .verticalStack on containers, and .vscFixed or .vscExpand on children (they can also be containers).
|
||||
// ** Designed to use Flexbox to allow full screen (vertical) layouts. Fixed children will fit the content, and expand children will consume all available vertical space, but will not exceed the vertical space.
|
||||
// ** Use .columnContainer to setup a horizontally scrolling, full height container where children are tiled down first, then wrap to the next column.
|
||||
/*
|
||||
Test Code:
|
||||
-------CSS------
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
body {
|
||||
background: purple;
|
||||
color: black;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.vscFixed {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.vscExpand {
|
||||
flex: 1 1 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.verticalStack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: stretch;
|
||||
}
|
||||
.columnContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
overflow-x: auto;
|
||||
background: white;
|
||||
}
|
||||
.columnContent {
|
||||
flex: none;
|
||||
width: 300px;
|
||||
}
|
||||
-------Javascript------
|
||||
var container = document.querySelector('.columnContainer');
|
||||
for(var i = 0; i < 400; i++) {
|
||||
var child = document.createElement("div");
|
||||
child.innerHTML = "Element " + i;
|
||||
child.className = "columnContent";
|
||||
container.appendChild(child);
|
||||
}
|
||||
-------HTML------
|
||||
<div class="verticalStack">
|
||||
<div class='vscFixed' style="width: 100%; background:green">
|
||||
<p>
|
||||
Some content.
|
||||
</p>
|
||||
<p>
|
||||
More content...
|
||||
</p>
|
||||
</div>
|
||||
<div class="verticalStack vscExpand">
|
||||
<div class='vscFixed' style="background: yellow;">
|
||||
Test bar.
|
||||
</div>
|
||||
<div class="columnContainer vscExpand">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
.vscFixed {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.vscExpand {
|
||||
flex: 1 1 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.verticalStack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: stretch;
|
||||
}
|
||||
.columnContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.columnContent {
|
||||
flex: none;
|
||||
}
|
||||
61
imports/ui/styles/tabs.import.styl
vendored
Normal file
61
imports/ui/styles/tabs.import.styl
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
ul.tabRow
|
||||
position: relative
|
||||
text-align: left
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0 0 0 10px
|
||||
line-height: 24px
|
||||
height: 26px
|
||||
font-size: 12px
|
||||
overflow: hidden
|
||||
li
|
||||
position: relative
|
||||
z-index: 0
|
||||
border: 1px solid #AAA
|
||||
background: #D1D1D1
|
||||
display: inline-block
|
||||
border-top-left-radius: 6px
|
||||
border-top-right-radius: 6px
|
||||
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%)
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF
|
||||
text-shadow: 0 1px #FFF
|
||||
margin: 0 -5px
|
||||
padding: 0 20px
|
||||
li:before, li:after
|
||||
position: absolute
|
||||
bottom: -1px
|
||||
width: 5px
|
||||
height: 5px
|
||||
content: " "
|
||||
border: 1px solid #AAA
|
||||
li:before
|
||||
left: -6px
|
||||
border-bottom-right-radius: 6px
|
||||
border-width: 0 1px 1px 0
|
||||
box-shadow: 2px 2px 0 #D1D1D1
|
||||
li:after
|
||||
right: -6px
|
||||
border-bottom-left-radius: 6px
|
||||
border-width: 0 0 1px 1px
|
||||
box-shadow: -2px 2px 0 #D1D1D1
|
||||
li.selected
|
||||
z-index: 2
|
||||
background: white
|
||||
color: #333
|
||||
border-bottom-color: #FFF
|
||||
li.selected:before
|
||||
box-shadow: 2px 2px 0 #FFF
|
||||
li.selected:after
|
||||
box-shadow: -2px 2px 0 #FFF
|
||||
ul.tabRow:before
|
||||
position: absolute
|
||||
width: 100%
|
||||
bottom: 0
|
||||
left: 0
|
||||
border-bottom: 1px solid #AAA
|
||||
z-index: 1
|
||||
content: " "
|
||||
Reference in New Issue
Block a user