Rewrite all css to scss and refactor html

rpg-docs/.meteor/packages

@@ -16,7 +16,6 @@ differential:vulcanize
 matb33:collection-hooks
 zimme:collection-softremovable
 momentjs:moment
-mike:mocha
 dburles:mongo-collection-instances
 percolate:migrations
 ecwyne:mathjs
@@ -24,3 +23,5 @@ useraccounts:polymer
 accounts-google
 splendido:accounts-meld
 email
+fourseven:scss@2.1.1
+wolves:bourbon

rpg-docs/.meteor/versions

@@ -6,7 +6,6 @@ accounts-ui@1.1.5
 accounts-ui-unstyled@1.1.7
 aldeed:collection2@2.3.3
 aldeed:simple-schema@1.3.3
-amplify@1.0.0
 autoupdate@1.2.1
 base64@1.0.3
 binary-heap@1.0.3
@@ -25,6 +24,7 @@ ecwyne:mathjs@0.25.0
 ejson@1.0.6
 email@1.0.6
 fastclick@1.0.3
+fourseven:scss@2.1.1
 geojson-utils@1.0.3
 google@1.1.5
 html-tools@1.0.4
@@ -50,7 +50,6 @@ logging@1.0.7
 matb33:collection-hooks@0.7.13
 meteor@1.1.6
 meteor-platform@1.2.2
-mike:mocha@0.5.4
 minifiers@1.1.5
 minimongo@1.0.8
 mobile-status-bar@1.0.3
@@ -61,19 +60,13 @@ oauth@1.1.4
 oauth2@1.1.3
 observe-sequence@1.0.6
 ordered-dict@1.0.3
-package-version-parser@3.0.3
 percolate:migrations@0.7.5
-practicalmeteor:chai@1.9.2_3
-practicalmeteor:loglevel@1.1.0_3
 random@1.0.3
 reactive-dict@1.1.0
 reactive-var@1.0.5
 reload@1.1.3
 retry@1.0.3
 routepolicy@1.0.5
-sanjo:long-running-child-process@1.0.3
-sanjo:meteor-files-helpers@1.1.0_4
-sanjo:meteor-version@1.0.0
 service-configuration@1.0.4
 session@1.1.0
 sha@1.0.3
@@ -90,12 +83,8 @@ underscore@1.0.3
 url@1.0.4
 useraccounts:core@1.9.1
 useraccounts:polymer@1.9.1
-velocity:chokidar@0.12.6_1
-velocity:core@0.6.1
-velocity:html-reporter@0.5.3
-velocity:meteor-internals@1.1.0_7
-velocity:shim@0.1.0
 webapp@1.2.0
 webapp-hashing@1.0.3
+wolves:bourbon@1.0.0
 zimme:collection-behaviours@1.0.4
 zimme:collection-softremovable@1.0.4

rpg-docs/Model/Character/Effects.js

@@ -61,7 +61,6 @@ Effects.attachSchema(Schemas.Effect);
 if (Meteor.isServer) Characters.after.insert(function(userId, char) {
 	Effects.insert({
 		charId: char._id,
-		type: "inate",
 		name: "Constitution modifier for each level",
 		stat: "hitPoints",
 		operation: "add",
@@ -69,11 +68,11 @@ if (Meteor.isServer) Characters.after.insert(function(userId, char) {
 		parent: {
 			id: char._id,
 			collection: "Characters",
+			group: "Inate",
 		},
 	});
 	Effects.insert({
 		charId: char._id,
-		type: "inate",
 		name: "Proficiency bonus by level",
 		stat: "proficiencyBonus",
 		operation: "add",
@@ -81,11 +80,11 @@ if (Meteor.isServer) Characters.after.insert(function(userId, char) {
 		parent: {
 			id: char._id,
 			collection: "Characters",
+			group: "Inate",
 		},
 	});
 	Effects.insert({
 		charId: char._id,
-		type: "inate",
 		name: "Dexterity Armor Bonus",
 		stat: "armor",
 		operation: "add",
@@ -93,11 +92,11 @@ if (Meteor.isServer) Characters.after.insert(function(userId, char) {
 		parent: {
 			id: char._id,
 			collection: "Characters",
+			group: "Inate",
 		},
 	});
 	Effects.insert({
 		charId: char._id,
-		type: "inate",
 		name: "Natural Armor",
 		stat: "armor",
 		operation: "base",
@@ -105,6 +104,7 @@ if (Meteor.isServer) Characters.after.insert(function(userId, char) {
 		parent: {
 			id: char._id,
 			collection: "Characters",
+			group: "Inate",
 		},
 	});
 });

rpg-docs/Model/Inventory/Items.js

@@ -19,6 +19,156 @@ Schemas.Item = new SimpleSchema({
 
 Items.attachSchema(Schemas.Item);
 
+var checkMovePermission = function(itemId, parent) {
+	var item = Items.findOne(itemId);
+	if (!item)
+		throw new Meteor.Error("No such item",
+							   "An item could not be found to move");
+	//handle permissions
+	var permission = Meteor.call("canWriteCharacter", item.charId);
+	if (!permission){
+		throw new Meteor.Error("Access denied",
+							   "Not permitted to move items from this character");
+	}
+	if (parent.collection === "Characters"){
+		permission = Meteor.call("canWriteCharacter", parent.id);
+		if (!permission){
+			throw new Meteor.Error("Access denied",
+								   "Not permitted to move items to this character");
+		}
+	} else {
+		var parentCollectionObject = global[parent.collection];
+		var parentObject = null;
+		if (parentCollectionObject)
+			parentObject = parentCollectionObject.findOne(
+				parent.id, {fields: {_id: 1, charId: 1}}
+			);
+		if (!parentObject) throw new Meteor.Error(
+			"Invalid parent",
+			"The destination parent " + parent.id +
+			" does not exist in the collection " + parent.collection
+		);
+		if (parentObject.charId){
+			permission = Meteor.call("canWriteCharacter", parentObject.charId);
+			if (!permission){
+				throw new Meteor.Error("Access denied",
+									   "Not permitted to move items to this character");
+			}
+		}
+	}
+};
+
+var moveItem = function(itemId, enable, parentCollection, parentId) {
+	var item = Items.findOne(itemId);
+	if (!item) return;
+	parentCollection = parentCollection || item.parent.collection;
+	parentId = parentId || item.parent.id;
+
+	if (Meteor.isServer) {
+		checkMovePermission(itemId, {collection: parentCollection, id: parentId});
+	}
+
+	//update the item provided the update will actually change something
+	if (
+		item.parent.collection !== parentCollection ||
+		item.parent.id !== parentId ||
+		item.enabled !== enable
+	){
+		Items.update(
+			itemId,
+			{$set: {
+				"parent.collection": parentCollection,
+				"parent.id": parentId,
+				enabled: enable,
+			}}
+		);
+	}
+};
+
+Meteor.methods({
+	moveItemToParent: function(itemId, parent) {
+		check(itemId, String);
+		check(parent, {collection: String, id: String});
+		moveItem(itemId, false, parent.collection, parent.id);
+	},
+	moveItemToCharacter: function(itemId, charId) {
+		check(itemId, String);
+		check(charId, String);
+		moveItem(itemId, false, "Characters", charId);
+	},
+	moveItemToContainer: function(itemId, containerId) {
+		check(itemId, String);
+		check(containerId, String);
+		moveItem(itemId, false, "Containers", containerId);
+	},
+	equipItem: function(itemId, charId){
+		check(itemId, String);
+		check(charId, String);
+		moveItem(itemId, true, "Characters", charId);
+	},
+	unequipItem: function(itemId, charId){
+		check(itemId, String);
+		check(charId, String);
+		moveItem(itemId, false, "Characters", charId);
+	},
+	splitItemToParent: function(itemId, moveQuantity, parent){
+		check(itemId, String);
+		check(moveQuantity, Number);
+		check(parent, {id: String, collection: String});
+
+		//get the item
+		var item = Items.findOne(itemId);
+		if (!item) return;
+
+		//don't bother moving nothing
+		if (moveQuantity <= 0 || item.quantity <= 0){
+			return;
+		}
+		//ensure we are only moving up to the current stack size
+		if (item.quantity < moveQuantity){
+			moveQuantity = this.quantity;
+		}
+
+		if (Meteor.isServer) {
+			checkMovePermission(itemId, parent);
+		}
+
+		//create a new item stack
+		var newStack = _.omit(EJSON.clone(item), "_id");
+		newStack.parent = parent;
+		newStack.quantity = moveQuantity;
+
+		//find out if we have an exact replica in the destination
+		var query = _.omit(newStack, ["parent", "quantity"]);
+		query["parent.collection"] = newStack.parent.collection;
+		query["parent.id"] = newStack.parent.id;
+		query._id = {$ne: itemId}; //make sure we don't join it to itself
+		var existingStack = Items.findOne(query);
+		if (existingStack){
+			//increase the existing stack's size
+			Items.update(
+				existingStack._id,
+				{$inc: {quantity: moveQuantity}}
+			);
+		} else {
+			//insert the new stack
+			Items.insert(newStack, function(err, id){
+				if (err) throw err;
+				//copy the children also
+				Meteor.call("cloneChildren", item._id, {collection: "Items", id: id});
+			});
+		}
+
+		//reduce the old stack's size
+		var oldQuantity = item.quantity - moveQuantity;
+		if (oldQuantity === 0){
+			Items.remove(itemId);
+		} else {
+			Items.update(itemId, {$set: {quantity: oldQuantity}});
+		}
+	},
+});
+
 Items.helpers({
 	totalValue: function(){
 		return this.value * this.quantity;
@@ -33,103 +183,6 @@ Items.helpers({
 			return this.name;
 		}
 	},
-	equip: function(characterId){
-		var charId = characterId || this.charId;
-		if (!charId || !Characters.findOne(charId)) throw "Invalid character";
-		if (this.parent.collection === "Characters" &&
-			this.parent.id === charId &&
-			this.enabled) {
-			return;
-		}
-		Items.update(
-			this._id,
-			{$set: {
-				"parent.collection": "Characters",
-				"parent.id": charId,
-				enabled: true,
-			}}
-		);
-	},
-	unequip: function(){
-		if (!this.enabled) return;
-		Items.update(this._id, {$set: {enabled: false}});
-	},
-	moveToContainer: function(containerId){
-		if (!containerId || !Containers.findOne(containerId)){
-			throw "Invalid container";
-		}
-		if (this.parent.collection === "Containers" &&
-			this.parent.id === containerId &&
-			!this.enabled) return;
-		Items.update(
-			this._id,
-			{$set: {
-				"parent.collection": "Containers",
-				"parent.id": containerId,
-				enabled: false,
-			}}
-		);
-	},
-	moveToCharacter: function(characterId){
-		if (!characterId || !Characters.findOne(characterId)) {
-			throw "Invalid character";
-		}
-		if (this.parent.collection === "Characters" &&
-			this.parent.id === characterId &&
-			!this.enabled) return;
-		Items.update(
-			this._id,
-			{$set: {
-				"parent.collection": "Characters",
-				"parent.id": characterId,
-				charId: characterId,
-				enabled: false,
-			}}
-		);
-	},
-	splitToParent: function(parent, moveQuantity){
-		check(parent, {id: String, collection: String});
-		check(moveQuantity, Number);
-		var parentCollection = Meteor.isClient ?
-			window[parent.collection] : global[parent.collection];
-		if (!parent.id || !parentCollection.findOne(parent.id)){
-			throw "Invalid parent";
-		}
-		var oldStack = this;
-		//we can only move as much as we have, leaving 0 behind at worst
-		if (oldStack.quantity < moveQuantity) moveQuantity = oldStack.quantity;
-		var oldQuantity = oldStack.quantity - moveQuantity;
-
-		var newStack = _.pick(oldStack, Schemas.Item.objectKeys());
-		newStack.parent = parent;
-		newStack.quantity = moveQuantity;
-
-		var existingStack = Items.findOne(_.omit(newStack, "quantity"));
-		var updateStackSize = function(){
-			if (oldQuantity > 0){
-				Items.update(oldStack._id, {$set: {quantity: oldQuantity}});
-			} else {
-				Items.remove(oldStack._id);
-			}
-		};
-		if (existingStack){
-			Items.update(
-				existingStack._id,
-				{$inc: {quantity: moveQuantity}},
-				{},
-				function(){
-					updateStackSize();
-				}
-			);
-		} else {
-			Items.insert(newStack, function(err, id){
-				if (err) throw err;
-				updateStackSize();
-				//copy the children also
-				Meteor.call("cloneChildren", oldStack._id, {collection: "Items", id: id});
-			});
-		}
-	},
 });
 
 Items.before.update(function(userId, doc, fieldNames, modifier, options){

rpg-docs/Model/Meta/ChangeLogs.js

@@ -0,0 +1,27 @@
+ChangeLogs = new Mongo.Collection("changeLogs");
+
+Schemas.ChangeLog = new SimpleSchema({
+	version: {
+		type: String,
+	},
+	changes: {
+		type: [String],
+	},
+});
+
+ChangeLogs.attachSchema(Schemas.ChangeLog);
+
+ChangeLogs.allow({
+	insert: function(userId, doc) {
+		var user = Meteor.users.findOne(userId);
+		if (user) return _.contains(user.roles, "admin");
+	},
+	update: function(userId, doc, fields, modifier) {
+		var user = Meteor.users.findOne(userId);
+		if (user) return _.contains(user.roles, "admin");
+	},
+	remove: function(userId, doc) {
+		var user = Meteor.users.findOne(userId);
+		if (user) return _.contains(user.roles, "admin");
+	},
+});

rpg-docs/Model/Meta/Reports.js

@@ -0,0 +1,60 @@
+Reports = new Mongo.Collection("reports");
+
+Schemas.Report = new SimpleSchema({
+	owner: {
+		type: String,
+		regEx: SimpleSchema.RegEx.Id,
+	},
+	title: {
+		type: String,
+		trim: false,
+		optional: true,
+	},
+	description: {
+		type: String,
+		trim: false,
+		optional: true,
+	},
+	type: {
+		type: String,
+		allowedValues: ["bug", "change", "feature", "general"],
+		defaultValue: "bug",
+	},
+	//the immediate impact of doing this action (eg. -1 rages)
+	severity: {
+		type: Number,
+		defaultValue: 5,
+		min: 1,
+		max: 10,
+	},
+	metaData: {
+		type: Object,
+		blackbox: true,
+	},
+});
+
+Reports.attachSchema(Schemas.Report);
+
+Meteor.methods({
+	insertReport: function(report) {
+		check(report, {
+			title: String,
+			description: String,
+			type: String,
+			severity: Number,
+			metaData: Object,
+		});
+		report.owner = this.userId;
+		Reports.insert(report);
+	},
+	deleteReport: function(id) {
+		var user = Meteor.users.findOne(this.userId);
+		if (!_.contains(user.roles, "admin")){
+			throw new Meteor.Error(
+				"not admin",
+				"The user must be an administrator to delete feedback"
+			);
+		}
+		Reports.remove(id);
+	},
+});

rpg-docs/Routes/Routes.js

@@ -4,7 +4,18 @@ Router.configure({
 });
 
 Router.plugin("ensureSignedIn", {
-	except: ["home", "atSignIn", "atSignUp", "atForgotPassword", "notFound"]
+	except: [
+		"home",
+		"atSignIn",
+		"atSignUp",
+		"atForgotPassword",
+		"atResetPwd",
+		"atEnrollAccount",
+		"atVerifyEmail",
+		"atResendVerificationEmail",
+		"loginButtons",
+		"notFound",
+	]
 });
 
 Router.plugin("dataNotFound", {notFoundTemplate: "notFound"});
@@ -12,6 +23,9 @@ Router.plugin("dataNotFound", {notFoundTemplate: "notFound"});
 Router.map(function() {
 	this.route("/", {
 		name: "home",
+		onAfterAction: function() {
+			document.title = appName;
+		},
 	});
 
 	this.route("characterList", {
@@ -39,7 +53,7 @@ Router.map(function() {
 		data: function() {
 			var data = Characters.findOne(
 				{_id: this.params._id},
-				{fields: {_id: 1, name: 1, color: 1}}
+				{fields: {_id: 1, name: 1, color: 1, writers: 1, readers: 1}}
 			);
 			return data;
 		},
@@ -63,7 +77,20 @@ Router.map(function() {
 		},
 	});
 
-	this.route("/loginButtons", {
+	this.route("/changelog", {
-		name: "loginButtons",
+		name: "changeLog",
-	})
+		waitOn: function() {
+			return [
+				Meteor.subscribe("changeLog"),
+			]
+		},
+		data: {
+			changeLogs: function() {
+				return ChangeLogs.find({}, {sort: {version: -1}});
+			}
+		},
+		onAfterAction: function() {
+			document.title = appName;
+		},
+	});
 });

rpg-docs/bower.json

@@ -13,9 +13,9 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#~0.5.4",
+    "polymer": "Polymer/polymer#~0.5.5",
-    "core-elements": "Polymer/core-elements#~0.5.4",
+    "core-elements": "Polymer/core-elements#~0.5.5",
-    "paper-elements": "Polymer/paper-elements#~0.5.4",
+    "paper-elements": "Polymer/paper-elements#~0.5.5",
 	"paper-fab-menu": "cwdoh/paper-fab-menu"
   },
   "resolutions": {

rpg-docs/client/globalHelpers/canEditCharacter.js

@@ -0,0 +1,6 @@
+Template.registerHelper("canEditCharacter", function(charId) {
+	var char = Characters.findOne(charId)
+	var userId = Meteor.userId();
+	return char.owner === userId ||
+		_.contains(char.writers, userId);
+});

rpg-docs/client/style/listItem.scss

@@ -0,0 +1,37 @@
+/*
+List items
+*/
+.item-slot {
+	background-color: rgb(232, 232, 232);
+	background-color: rgba(0, 0, 0, 0.1);	
+}
+
+.item {
+	background: white;
+	cursor: pointer;
+	font-size: 16px;
+	height: 40px;
+	margin: 1px 0 1px 0;
+	padding: 0 16px 0 16px;
+	position: relative;
+	transition: box-shadow 0.3s ease, opacity 0.5s ease-in-out;
+	&.small {
+		height: 32px;
+	}
+	&.tall {
+		height: 56px;
+	}
+	&.flexible {
+		height: auto;
+		padding-top: 16px;
+		padding-bottom: 16px;
+	}
+	&[hero], &:active{
+		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
+		z-index: 10;
+	}
+	core-icon, paper-icon-button {
+		color: #747474;
+		color: rgba(0,0,0,0.54);
+	}
+}

rpg-docs/client/style/main.scss

@@ -0,0 +1,148 @@
+@import "bourbon/bourbon";
+@import "colors";
+
+$thickColumnWidth: 304px;
+$thinColumnWidth: 240px;
+
+//apply a natural box layout model to all elements
+*, *:before, *:after {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+root {
+	display: block;
+}
+
+body {
+	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
+	margin: 0;
+	overflow-x: hidden;
+	background-color: #E0E0E0;
+}
+
+//Horizontal rule
+hr {
+	background-color: #444;
+	opacity: 0.12;
+	border-width: 0;
+	color: #444;
+	height: 1px;
+	line-height: 0;
+	margin: 16px -16px;
+	text-align: center;
+}
+
+//FABs
+.floatyButton {
+	position: absolute;
+	bottom: 24px;
+	right: 24px;
+}
+
+//Column layouts of cards
+.column-container {
+	@include column-fill(balance);
+	@include column-gap(8px);
+	@include column-width($thickColumnWidth);
+	padding: 8px;
+
+	&.thin-columns {
+		@include column-count(4);
+		@include column-width($thinColumnWidth);
+	}
+}
+
+//Cards
+.card {
+	background: white;
+	border-radius: 2px;
+
+	.column-container & {
+		margin-bottom: 8px;
+		width: 100%;
+		//hack to stop flickering
+		-webkit-backface-visibility: hidden;
+		-webkit-transform: translateX(0);
+		//stop breaking over column divide
+		-webkit-column-break-inside: avoid;
+		page-break-inside: avoid;
+		break-inside: avoid;
+		//Fixes extra margin at top of columns
+		display: inline-block;
+	}
+
+	.top {
+		cursor: pointer;
+		padding: 16px;
+		border-radius: 2px 2px 0 0;
+		&.white {
+			cursor: auto;
+			padding: 16px;
+			border-bottom: rgba(0,0,0,0.12) solid 1px;
+		}
+		paper-checkbox::shadow #ink[checked] {
+			color: #ffffff;
+		}
+		paper-checkbox::shadow #ink {
+			color: #ffffff;
+		}
+		paper-checkbox::shadow #checkbox.checked {
+			background-color: #ffffff;
+			background-color: rgba(255,255,255,0.27);
+			border-color: #ffffff;
+			border-color: rgba(255,255,255,0.27);
+		}
+		paper-checkbox::shadow #checkbox {
+			border-color: #ffffff;
+			border-color: rgba(255,255,255,0.54);
+		}
+	}
+	.bottom {
+		padding: 16px;
+		border-radius: 0 0 2px 2px;
+		&.list {
+			padding: 0 0 16px 0;
+			.subhead {
+				color: rgba(0,0,0,0.54);
+				font-size: 14px;
+				font-weight: 500;
+				letter-spacing: 0.010em;
+				padding: 12px 16px 12px 16px;
+			}
+		}
+		&.text {
+			white-space: pre-wrap;
+		}
+	}
+	.left {
+		padding: 16px;
+		border-radius: 2px 0 0 2px;
+		text-align: center;
+		min-width: 72px;
+	}
+	.right {
+		padding: 16px;
+		border-radius: 0 2px 2px 0;
+	}
+}
+
+//Buttons
+paper-button {
+	color: #000;
+	color: rgba(0,0,0,0.87);
+	font-size: 14px;
+	font-weight: 400;
+	letter-spacing: 0.010;
+	text-transform: uppercase;
+}
+
+//Style shortcuts
+.scroll-y {
+	overflow-y: auto;
+}
+
+.clickable, core-item, paper-tab {
+	cursor: pointer;
+}

rpg-docs/client/style/shadowDom.css

@@ -0,0 +1,20 @@
+.card .left paper-icon-button {
+	display: block;
+	height: 32px;
+	padding: 0;
+	width: 32px;
+}
+
+.card .left paper-icon-button[disabled] {
+	color: rgba(255, 255, 255, 0.2);
+}
+
+.card .left paper-icon-button /deep/ core-icon {
+	height: 32px;
+	width: 32px;
+}
+
+/*fix paper-dropdowns*/
+body /deep/ core-menu {
+	overflow-x: hidden !important;
+}

rpg-docs/client/views/GeneralCSS/general.css

@@ -1,268 +0,0 @@
-root {
-	display: block;
-}
-
-body {
-	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial;
-	margin: 0;
-	overflow-x: hidden;
-}
-
-body.core-narrow {
-	padding: 8px;
-}
-
-body /deep/ core-menu {
-	overflow-x: hidden !important;
-}
-
-.calculatedValue {
-	color: #021C33;
-	font-weight: bold;
-}
-
-* {
-	box-sizing: border-box;
-}
-
-td {
-	padding: 0;
-}
-
-table {
-	border-spacing: 0;
-}
-
-.summaryTable td{
-	text-align: right;
-	padding: 4px;
-	min-width: 80px;
-}
-
-.summaryTable td:first-child {
-	text-align: left;
-}
-
-hr {
-	background-color: #444;
-	opacity: 0.12;
-	border-width: 0;
-	color: #444;
-	height: 1px;
-	line-height: 0;
-	margin: 0 -16px;
-	text-align: center;
-}
-
-paper-button {
-	font-size: 14px;
-	font-weight: 400;
-	text-transform: uppercase;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010;
-}
-
-core-item {
-	cursor: pointer;
-}
-
-.listRow {
-	height: 32px;
-}
-
-.card {
-	margin-bottom: 8px;
-	/*hack to stop flickering*/
-	-webkit-backface-visibility: hidden;
-	-webkit-transform: translateX(0);
-	/*stop divs breaking over divide*/
-	-webkit-column-break-inside: avoid;
-	page-break-inside: avoid;
-	break-inside: avoid;
-	/*Fixes extra margin at top of columns*/
-	display: inline-block;
-
-	width: 100%;
-
-	font-size: 14px;
-	border-radius: 2px;
-	background-color: white;
-}
-
-.card.double {
-	padding: 0;
-}
-
-.card paper-button {
-	font-size: 14px;
-	letter-spacing: 0.01em;
-}
-
-.cardHeader {
-	height: 48px;
-	padding: 0 16px 0 16px;
-	align-content: center;
-	font-size: 14px;
-	font-weight: 400;
-	color: rgba(0, 0, 0, 0.54);
-}
-
-.clickable, .statCard, .abilityMiniCard {
-	cursor: pointer;
-}
-
-.skillRow {
-	cursor: pointer;
-}
-
-.resourceCards {
-	padding: 4px 4px 0 4px;
-	margin-bottom: -4px;
-}
-
-.resourceCards .card {
-	width: 180px;
-	margin: 4px;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
-
-.grey-background, body {
-	background-color: #E0E0E0;
-}
-
-.center {
-	text-align: center;
-}
-
-.screen-center {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	-webkit-transform: translate(-50%, -50%);
-	transform: translate(-50%, -50%);
-}
-
-.scroll-y {
-	overflow-y: auto;
-}
-
-.fab-buffer {
-	height: 88px;
-	width: 100%;
-	order: 999;
-}
-
-*[hidden] {
-	visibility: hidden;
-}
-
-.hidden{
-	opacity: 0;
-}
-
-@media (max-width: 640px) {
-	html /deep/ paper-action-dialog[global-dialog] {
-		top: 0 !important;
-		left: 0 !important;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		border-radius: 0;
-	}
-}
-
-.floatyButton {
-	position: absolute;
-	bottom: 24px;
-	right: 24px;
-}
-
-.wideTable td {
-	padding: 4px 8px 4px 8px;
-}
-
-.wideTable table {
-	padding: 8px;
-}
-
-paper-fab-menu /deep/ .container {
-	padding: 24px !important;
-}
-
-paper-slider {
-	margin-left: -8px;
-}
-
-.list-subhead {
-	color: rgba(0,0,0,0.54);
-	font-size: 14px;
-	height: 40px;
-	padding-left: 16px;
-	font-weight: 500;
-}
-
-.whiteTop {
-	cursor: initial;
-	border-bottom: black solid 0.5px;
-	border-bottom: rgba(0,0,0,0.12) solid 1px;
-	background: white;
-	padding: 16px;
-	position: relative;
-	border-radius: 2px 2px 0 0;
-}
-
-.whiteTop paper-icon-button {
-	margin: -8px;
-}
-
-.fullwidth {
-	width: 100%;
-}
-
-.padded {
-	padding: 16px;
-}
-
-.listPadded {
-	padding: 0 0 16px 0; 
-}
-
-.rightPadded {
-	padding-right: 16px;
-}
-
-.bottomPadded {
-	padding-bottom: 16px;
-}
-
-.sideMargin {
-	margin-left: 16px;
-	margin-right: 16px;
-}
-
-.vertMargin {
-	margin-top: 16px;
-	margin-bottom: 16px;
-}
-
-.spaceAfter {
-	margin-bottom: 8px;
-}
-
-.s {
-	padding: 0 0 16px 0;
-}
-
-.leftRound{
-	border-radius: 2px 0 0 2px;
-}
-
-.preline {
-	white-space: pre-line;
-}
-
-.prewrap{
-	white-space: pre-wrap;
-}

rpg-docs/client/views/GeneralCSS/typography.css

@@ -18,7 +18,7 @@
 	letter-spacing: 0;
 }
 
-.white-text .display1{
+.white-text .display1, .white-text.display1{
 	color: rgba(255,255,255,0.54);
 }
 

rpg-docs/client/views/character/characterSheet.html

@@ -5,6 +5,7 @@
 		<div flex>
 			{{name}}
 		</div>
+		{{#if canEditCharacter _id}}
 			<div>
 				{{> colorDropdown}}
 			</div>
@@ -12,11 +13,16 @@
 				<paper-icon-button icon="more-vert" noink></paper-icon-button>
 				<paper-dropdown class="dropdown" halign="right">
 					<core-menu class="menu" style="color: black; color: rgba(0,0,0,0.87);">
-					<paper-item id="deleteCharacter"><core-icon icon="delete"></core-icon>Delete</paper-item>
+						<paper-item id="deleteCharacter">
-					<paper-item id="shareCharacter"><core-icon icon="social:share"></core-icon>Share</paper-item>
+							<core-icon icon="delete"></core-icon>Delete
+						</paper-item>
+						<paper-item id="shareCharacter">
+							<core-icon icon="social:share"></core-icon>Share
+						</paper-item>
 					</core-menu>
 				</paper-dropdown>
 			</paper-menu-button>
+		{{/if}}
 		<div class="bottom fit" horizontal layout>
 			<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}">
 				<paper-tab name="stats">Stats</paper-tab>

rpg-docs/client/views/character/characterSheet.js

@@ -13,7 +13,7 @@ var getTab = function(charId){
 Template.characterSheet.helpers({
 	selectedTab: function(){
 		return getTab(this._id);
-	}
+	},
 });
 
 Template.characterSheet.events({

rpg-docs/client/views/character/features/features.html

@@ -1,7 +1,7 @@
 <template name="features">
 	<div fit>
 		<div class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				<!--expertiseDice-->
 				{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
 				<!--ki-->
@@ -14,22 +14,22 @@
 				{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
 				
 				<!--Attacks-->
-				<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+				<paper-shadow class="card">
-					<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
+					<div class="top white">
-						<div flex>
+						Attacks
-							<div class="containerName subhead">Attacks</div>
 					</div>
-						<!--<paper-icon-button class="black54" id="addAttackButton" icon="add"></paper-icon-button>-->
+					<div class="bottom list">
-					</div>
-					<div class="containerMain listPadded">
 						{{#each attacks}}
-							<div class="itemSlot">
+							<div class="item-slot">
-								<paper-item class="white attack" hero-id="main" {{detailHero}}>
+								<div class="flexible attack item"
-									<div layout horizontal class="fullwidth">
+											hero-id="main" {{detailHero}}>
-										<div class="headline rightPadded" layout horizontal center>
+									<div layout horizontal>
+										<div class="headline"
+											 style="margin-right: 16px;"
+											 layout horizontal center>
 											{{evaluateSigned ../_id attackBonus}}
 										</div>
-										<div layout vertical flex>
+										<div flex layout vertical>
 											<div class="body2">
 												{{name}}
 											</div>
@@ -43,34 +43,32 @@
 											{{/if}}
 										</div>
 									</div>
-								</paper-item>
+								</div>
 							</div>
 						{{/each}}
 					</div>
 				</paper-shadow>
 
 				<!--Proficiencies-->
-				<paper-shadow class="card container"  hero-id="main" {{detailHero "proficiencies"}}>
+				<paper-shadow class="card">
-					<div id="proficiencies"
+					<div class="white top">
-						 class="whiteTop"
+						Proficiencies
-						 layout horizontal center>
-						<div class="containerName subhead">Proficiencies</div>
 					</div>
-					<div flex class="containerMain listPadded">
+					<div flex class="bottom list">
 						{{#if weaponProfs.count}}
-							<div class="list-subhead" layout horizontal center>Weapons</div>
+							<div class="subhead">Weapons</div>
 						{{/if}}
 						{{#each weaponProfs}}
 							{{> proficiencyListItem}}
 						{{/each}}
 						{{#if armorProfs.count}}
-							<div class="list-subhead" layout horizontal center>Armor</div>
+							<div class="subhead">Armor</div>
 						{{/if}}
 						{{#each armorProfs}}
 							{{> proficiencyListItem}}
 						{{/each}}
 						{{#if toolProfs.count}}
-							<div class="list-subhead" layout horizontal center>Tools</div>
+							<div class="subhead">Tools</div>
 						{{/if}}
 						{{#each toolProfs}}
 							{{> proficiencyListItem}}
@@ -80,23 +78,42 @@
 
 				<!--features-->
 				{{#each features}}
-					<paper-shadow class="card container featureCard"  hero-id="main" {{detailHero}}>
+					<paper-shadow class="card featureCard"
-						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
+								  hero-id="main" {{detailHero}}>
-							<paper-ripple fit></paper-ripple>
+						<div class="top {{colorClass}} subhead" 
-							<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
+							 layout horizontal 
-							{{#if hasUses}}<div class="subhead" style="margin-right: 8px">{{usesLeft}}/{{usesValue}}</div>{{/if}}
+							 hero-id="toolbar" {{detailHero}}>
-							<paper-ripple fit></paper-ripple>
+							<div flex hero-id="title" {{detailHero}}>
+								{{name}}
+							</div>
+							{{#if hasUses}}
+								<div style="margin-right: 8px">
+									{{usesLeft}}/{{usesValue}}
+								</div>
+							{{/if}}
 							{{#if canEnable}}
-								<core-tooltip label="Feature enabled" position="left">
+								<core-tooltip label="Feature enabled"
-									<paper-checkbox class="enabledCheckbox" checked={{enabled}}></paper-checkbox>
+											  position="left">
+									<paper-checkbox class="enabledCheckbox" 
+													checked={{enabled}}>
+									</paper-checkbox>
 								</core-tooltip>
 							{{/if}}
 						</div>
-						{{#if description}}<div flex class="containerMain body1 featureDescription">{{description}}</div>{{/if}}
+						{{#if description}}
+							<div flex class="bottom text"
+								 >{{description}}</div>
+						{{/if}}
 						{{#if hasUses}}
-							<div class="containerFoot" layout horizontal center end-justified>
+							<div layout horizontal center end-justified>
-								<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
+								<paper-button class="useFeature" 
-								<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
+											  disabled={{noUsesLeft}}>
+									Use
+								</paper-button>
+								<paper-button class="resetFeature" 
+											  disabled={{usesFull}}>
+									Reset
+								</paper-button>
 							</div>
 						{{/if}}
 					</paper-shadow>
@@ -104,6 +121,7 @@
 			</div>
 			<div class="fab-buffer"></div>
 		</div>
+		{{#if canEditCharacter _id}}
 			<paper-fab id="addFeature" 
 					   class="floatyButton" 
 					   icon="add" 
@@ -112,23 +130,34 @@
 					   tabindex="0" 
 					   aria-label="Add" 
 					   hero-id="main"></paper-fab>
+		{{/if}}
 	</div>
 </template>
 
 <template name="resource">
 	{{#if char.attributeBase name}}
-		<paper-shadow class="card container" hero-id="main" {{detailHero name char._id}} layout horizontal>
+		<paper-shadow class="card" 
-			<div class="containerLeft {{getColor}}" hero-id="toolbar" {{detailHero name char._id}} >
+					  hero-id="main" {{detailHero name char._id}}
-				<div class="resourceButtons">
+					  layout horizontal>
-					<paper-icon-button class="resourceUp" icon="arrow-drop-up" disabled={{cantIncrement}}></paper-icon-button>
+			<div class="left {{getColor}} display1 white-text" 
-					<paper-icon-button class="resourceDown" icon="arrow-drop-down" disabled={{cantDecrement}}></paper-icon-button>
+				 hero-id="toolbar" {{detailHero name char._id}}
+				 layout horizontal center>
+				<div style="margin-right: 8px;">
+					<paper-icon-button class="resourceUp" 
+									   icon="arrow-drop-up" 
+									   disabled={{cantIncrement}}>
+					</paper-icon-button>
+					<paper-icon-button class="resourceDown"
+									   icon="arrow-drop-down"
+									   disabled={{cantDecrement}}>
+					</paper-icon-button>
 				</div>
-				<div class="resourceValue">{{char.attributeValue name}}</div>
+				<div>{{char.attributeValue name}}</div>
-				<!--<div class="resourceMax">{{char.attributeBase name}}</div>-->
+				<!--<div>/{{char.attributeBase name}}</div>-->
 			</div>
-			<div class="containerRight clickable" flex relative horizontal layout center>
+			<div class="right clickable" 
+				 flex layout horizontal center>
 				{{title}}
-				<paper-ripple fit></paper-ripple>
 			</div>
 		</paper-shadow>
 	{{/if}}

rpg-docs/client/views/character/features/features.js

@@ -65,7 +65,7 @@ Template.features.events({
 			}
 		});
 	},
-	"tap .featureCard .containerTop": function(event){
+	"tap .featureCard .top": function(event){
 		var featureId = this._id;
 		var charId = Template.parentData()._id;
 		GlobalUI.setDetail({
@@ -128,7 +128,7 @@ Template.resource.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .containerRight": function(event, instance) {
+	"tap .right": function(event, instance) {
 		GlobalUI.setDetail({
 			template: "attributeDialog",
 			data:     {name: this.title, statName: this.name, charId: this.char._id},

rpg-docs/client/views/character/inventory/inventory.css

@@ -1,152 +0,0 @@
-div#stats {
-	-webkit-column-width: 200px;
-	-moz-column-width: 200px;
-	column-width: 200px;
-	-webkit-column-count: 4;
-	-moz-column-count: 4;
-	column-count: 4;
-}
-
-.containers {
-	-webkit-column-width: 300px;
-	-moz-column-width: 300px;
-	column-width: 300px;
-	-webkit-column-gap: 8px;
-	-moz-column-gap: 8px;
-	column-gap: 8px;
-	-moz-column-fill: balance;
-	column-fill: balance;
-	padding: 8px;
-}
-
-.containerLeft {
-	padding: 16px 16px 16px 24px;
-	display: flex;
-	justify-content: center;
-	flex-direction: row;
-	border-radius: 2px 0 0 2px;
-
-	/* same style as display-1 */
-	font-size: 34px;
-	font-weight: 400;
-	color: #ffffff;
-	color: rgba(255,255,255,0.54);
-	letter-spacing: 0;
-}
-
-.statCard .containerLeft {
-	padding: 16px;
-}
-
-.containerRight {
-	padding: 16px;
-
-	/* same style as subhead */
-	font-size: 16px;
-	font-weight: 400;
-	margin: 0;
-	color: #000;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010em;
-}
-
-.resourceValue {
-	display: inline-block;
-}
-
-.resourceMax {
-	display: inline-block;
-	align-self: flex-end;
-
-	/* same style as subhead */
-	font-size: 16px;
-	font-weight: 400;
-	margin: 0;
-	color: #fff;
-	color: rgba(255,255,255,0.54);
-	letter-spacing: 0.010em;
-}
-
-.resourceMax:before {
-	content: "/";
-}
-
-.resourceButtons {
-	margin: -16px 8px -16px -16px;
-	align-self: center;
-}
-
-.resourceButtons paper-icon-button{
-	width: 32px;
-	height: 32px;
-	padding: 0;
-	display: block;
-}
-
-.resourceButtons paper-icon-button[disabled]{
-	color: rgba(255, 255, 255, 0.26);
-}
-
-.resourceButtons /deep/ core-icon {
-	width: 32px;
-	height: 32px;
-}
-
-.containerTop {
-	cursor: pointer;
-	padding: 16px;
-	position: relative;
-	border-radius: 2px 2px 0 0;
-}
-
-.equipmentTop {
-	padding: 16px;
-	border-bottom: rgba(0,0,0,0.12) solid 1px;
-}
-
-.containerMain {
-	padding: 16px;
-}
-
-.equipmentMain {
-	padding-bottom: 16px;
-}
-
-.inventoryItem {
-	background: white;
-	transition: box-shadow 0.3s ease,
-		opacity 0.5s ease-in-out;
-	height: 40px;
-	margin: 1px 0 1px 0;
-	font-size: 16px;
-	color: rgba(0,0,0,0.87);
-	letter-spacing: 0.010em;
-}
-
-.inventoryItem core-icon, .inventoryItem paper-icon-button {
-	color: rgba(0,0,0,0.54);
-}
-
-.inventoryItem core-icon {
-	margin-right: 16px;
-}
-
-.inventoryItem /deep/ .button-content {
-	-webkit-flex: 1;
-	flex: 1;
-	-webkit-flex-basis: 0.000000001px;
-	flex-basis: 0.000000001px;
-}
-
-.inventoryItem[hero] {
-	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.37);
-}
-
-.itemSlot {
-	background-color: rgb(232, 232, 232);
-	background-color: rgba(0, 0, 0, 0.1);
-}
-
-#inventory .containerMain {
-	padding: 0 0 16px 0;
-}

rpg-docs/client/views/character/inventory/inventory.html

@@ -1,73 +1,95 @@
 <template name="inventory">
 	<div fit>
 		<div id="inventory" class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				<!--Net Worth-->
-				<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
+				<paper-shadow class="card" layout horizontal>
-					<div class="indigo white-text subhead padded leftRound" layout horizontal center>
+					<div class="indigo white-text subhead left">
 						Net Worth
 					</div>
-					<div class="padded" layout horizontal center>
+					<div class="right" flex>
 						{{valueString netWorth}}
 					</div>
 				</paper-shadow>
 				<!--Weight Carried-->
-				<paper-shadow class="card container" hero-id="main" {{detailHero}} layout horizontal>
+				<paper-shadow class="card" layout horizontal>
-					<div class="green white-text subhead padded leftRound" layout horizontal center>
+					<div class="green white-text subhead left">
 						Weight Carried
 					</div>
-					<div class="padded" layout horizontal center>
+					<div class="right" flex>
 						{{round weightCarried}}lbs
 					</div>
 				</paper-shadow>
 				<!--Equipment-->
-				<paper-shadow class="card container equipmentContainer">
+				<paper-shadow class="card equipmentContainer">
-					<div class="equipmentTop" layout horizontal center>
+					<div class="white top" layout horizontal center>
-						<div class="containerName subhead" flex>
+						<div class="subhead" flex>
 							Equipment
 						</div>
-						<div class="caption" style="margin-right: 8px">{{valueString equipmentValue}}</div>
+						<div class="caption" style="margin-right: 8px">
-						<div class="caption">{{round equipmentWeight}}lbs</div>
+							{{valueString equipmentValue}}
 						</div>
-					<div flex class="equipmentMain">
+						<div class="caption">
+							{{round equipmentWeight}}lbs
+						</div>
+					</div>
+					<div flex class="bottom list">
 						{{#if attuned.count}}
-							<div class="list-subhead" layout horizontal center>Attuned</div>
+							<div class="subhead">Attuned</div>
 						{{/if}}
 						{{#each attuned}}
 							{{>inventoryItem}}
 						{{/each}}
-						{{#if attuned.count}}<div class="list-subhead" layout horizontal center>Equipment</div>{{/if}}
+						{{#if attuned.count}}
+							<div class="subhead">Equipment</div>
+						{{/if}}
 						{{#each equipment}}
 							{{>inventoryItem}}
 						{{/each}}
 					</div>
 				</paper-shadow>
 				<!--Carried Items-->
-				<paper-shadow class="card container carriedContainer">
+				<paper-shadow class="card carriedContainer">
-					<div class="equipmentTop" layout horizontal center>
+					<div class="white top" layout horizontal center>
-						<div class="containerName subhead" flex>
+						<div class="subhead">
 							Carried
 						</div>
-						<div class="caption" style="margin-right: 8px">{{valueString carriedValue}}</div>
+						<div class="caption" style="margin-right: 8px">
-						<div class="caption">{{round carriedWeight}}lbs</div>
+							{{valueString carriedValue}}
 						</div>
-					<div flex class="containerMain">
+						<div class="caption">
+							{{round carriedWeight}}lbs
+						</div>
+					</div>
+					<div flex class="bottom list">
 						{{#each carriedItems}}
 							{{>inventoryItem}}
 						{{/each}}
 					</div>
 				</paper-shadow>
 				{{#each containers}}
-					<paper-shadow class="card container itemContainer"  hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
+					<paper-shadow class="card itemContainer" 
-						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
+								  hero-id="main" {{detailHero}}>
-							<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
+						<div class="top {{colorClass}}"
-							<div class="caption" style="margin-right: 8px">{{valueString totalValue}}</div>
+							 hero-id="toolbar" {{detailHero}}
-							<div class="caption" style="margin-right: 8px">{{round totalWeight}}lbs</div>
+							 layout horizontal center>
+							<div class="subhead" flex
+								 hero-id="title" {{detailHero}}>
+								{{name}}
+							</div>
+							<div class="caption" style="margin-right: 8px">
+								{{valueString totalValue}}
+							</div>
+							<div class="caption" style="margin-right: 8px">
+								{{round totalWeight}}lbs
+							</div>
 							<core-tooltip label="Container carried" position="left">
-								<paper-checkbox class="carriedCheckbox" checked={{isCarried}}></paper-checkbox>
+								<paper-checkbox class="carriedCheckbox"
+												checked={{isCarried}}>
+								</paper-checkbox>
 							</core-tooltip>
 						</div>
-						<div flex class="containerMain">
+						<div class="bottom list">
 							{{#each items ../_id _id}}
 								{{>inventoryItem}}
 							{{/each}}
@@ -77,16 +99,32 @@
 			</div>
 			<div class="fab-buffer"></div>
 		</div>
-		<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
+		{{#if canEditCharacter _id}}
-			<paper-fab-menu-item id="addItem" icon="note-add" color="#d23f31" tooltip="Item"></paper-fab-menu-item>
+			<paper-fab-menu id="inventoryAddMenu" 
-			<paper-fab-menu-item id="addContainer" icon="work" color="#d23f31" tooltip="Container"></paper-fab-menu-item>
+							icon="add" 
+							closeIcon="close" 
+							duration="0.3">
+				<paper-fab-menu-item id="addItem"
+									 icon="note-add"
+									 color="#d23f31"
+									 tooltip="Item">
+				</paper-fab-menu-item>
+				<paper-fab-menu-item id="addContainer"
+									 icon="work"
+									 color="#d23f31"
+									 tooltip="Container">
+				</paper-fab-menu-item>
 			</paper-fab-menu>
+		{{/if}}
 	</div>
 </template>
 
 <template name="inventoryItem">
-	<div class="itemSlot">
+	<div class="item-slot">
-		<paper-item class="inventoryItem {{hidden}}" hero-id="main" noink {{detailHero}} layout horizontal draggable="true">
+		<paper-item class="item inventoryItem {{hidden}}" noink
+					hero-id="main" {{detailHero}}
+					layout horizontal
+					draggable="true">
 			{{#if ne1 quantity}}{{quantity}}&nbsp;{{/if}}{{pluralName}}
 		</paper-item>
 	</div>

rpg-docs/client/views/character/inventory/inventory.js

@@ -145,7 +145,7 @@ Template.inventory.events({
 			heroId:   itemId,
 		});
 	},
-	"tap .containerTop": function(event){
+	"tap .itemContainer .top": function(event){
 		GlobalUI.setDetail({
 			template: "containerDialog",
 			data:     {containerId: this._id, charId: this.charId},
@@ -174,71 +174,93 @@ Template.inventoryItem.helpers({
 
 Template.layout.events({
 	"dragstart .inventoryItem": function(event, instance){
+		event.originalEvent.dataTransfer.setData("dicecloud-id/items", this._id);
 		Session.set("inventory.dragItemId", this._id);
-		Session.set("inventory.dragItemOriginalContainer", this.container);
+	},
-		Session.set("inventory.dragItemOriginalCharacter", this.charId);
+	"dragover .itemContainer, dragenter .itemContainer":
+	function(event, instance){
+		if (_.contains(event.originalEvent.dataTransfer.types, "dicecloud-id/items")){
+			event.preventDefault();
+		}
+	},
+	"dragover .equipmentContainer, dragenter .equipmentContainer":
+	function(event, instance){
+		if (_.contains(event.originalEvent.dataTransfer.types, "dicecloud-id/items")){
+			event.preventDefault();
+		}
+	},
+	"dragover .carriedContainer, dragenter .carriedContainer":
+	function(event, instance){
+		if (_.contains(event.originalEvent.dataTransfer.types, "dicecloud-id/items")){
+			event.preventDefault();
+		}
+	},
+	"dragover .characterRepresentative, dragenter .characterRepresentative":
+	function(event, instance){
+		if (_.contains(event.originalEvent.dataTransfer.types, "dicecloud-id/items")){
+			event.preventDefault();
+		}
 	},
 	"dragend .inventoryItem": function(event, instance){
-		resetInvetorySession(); //this is a valid drop zone
+		Session.set("inventory.dragItemId", null);
 	},
-	"dragover .itemContainer": function(event, instance){
+	"drop .itemContainer": function(event, instance){
-		event.preventDefault();
+		var itemId = event.originalEvent.dataTransfer.getData("dicecloud-id/items");
-	},
-	"dragover .equipmentContainer": function(event, instance){
-		event.preventDefault();
-	},
-	"dragover .carriedContainer": function(event, instance){
-		event.preventDefault();
-	},
-	"drop .itemContainer": function(event, instacne){
-		var item = Items.findOne(Session.get("inventory.dragItemId"));
 		if (event.ctrlKey){
 			//split the stack to the container
 			GlobalUI.showDialog({
 				template: "splitStackDialog",
 				data: {
-					id: item._id,
+					id: itemId,
 					parentCollection: "Containers",
 					parentId: this._id,
 				},
 			});
 		} else {
 			//move item to the container
-			item.moveToContainer(this._id);
+			Meteor.call("moveItemToContainer", itemId, this._id);
 		}
-		resetInvetorySession();
+		Session.set("inventory.dragItemId", null);
 	},
 	"drop .equipmentContainer": function(event, instance){
-		var charId = Session.get("inventory.dragItemOriginalCharacter");
+		var itemId = event.originalEvent.dataTransfer.getData("dicecloud-id/items");
-		var item = Items.findOne(Session.get("inventory.dragItemId"));
+		Meteor.call("equipItem", itemId, this._id);
-		item.equip(charId);
+		Session.set("inventory.dragItemId", null);
-		resetInvetorySession();
 	},
 	"drop .carriedContainer": function(event, instance){
-		var charId = Session.get("inventory.dragItemOriginalCharacter");
+		var itemId = event.originalEvent.dataTransfer.getData("dicecloud-id/items");
-		var item = Items.findOne(Session.get("inventory.dragItemId"));
 		if (event.ctrlKey){
 			//split the stack to the container
 			GlobalUI.showDialog({
 				template: "splitStackDialog",
 				data: {
-					id: item._id,
+					id: itemId,
 					parentCollection: "Characters",
 					parentId: this._id,
 				},
 			});
 		} else {
 			//move item to the character
-			item.moveToCharacter(this._id);
+			Meteor.call("moveItemToCharacter", itemId, this._id);
 		}
-		resetInvetorySession();
+		Session.set("inventory.dragItemId", null);
+	},
+	"drop .characterRepresentative": function(event, instance) {
+		var itemId = event.originalEvent.dataTransfer.getData("dicecloud-id/items");
+		if (event.ctrlKey){
+			//split the stack to the container
+			GlobalUI.showDialog({
+				template: "splitStackDialog",
+				data: {
+					id: itemId,
+					parentCollection: "Characters",
+					parentId: this._id,
 				},
 			});
-
+		} else {
-var resetInvetorySession = function(){
+			//move item to the character
-	_.defer(function(){
+			Meteor.call("moveItemToCharacter", itemId, this._id);
+		}
 		Session.set("inventory.dragItemId", null);
-		Session.set("inventory.dragItemOriginalContainer", null);
+	},
-		Session.set("inventory.dragItemOriginalCharacter", null);
 });
-};

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html

@@ -10,7 +10,7 @@
 
 <template name="itemDetails">
 	<div layout horizontal wrap center justified class="headline">
-		{{#if weight}}<div class="sideMargin">{{totalWeight}}lbs</div>{{/if}}
+		{{#if weight}}<div class="sideMargin">{{round totalWeight}}lbs</div>{{/if}}
 		{{#if value}}<div>{{valueString totalValue}}</div>{{/if}}
 	</div>
 	<div layout horizontal wrap class="caption">

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js

@@ -81,13 +81,10 @@ Template.itemEdit.events({
 	},
 	"change #equippedInput": function(event){
 		var equipped = Template.instance().find("#equippedInput").checked;
-		var item = Items.findOne(this._id);
-		if (item){
 		if (equipped){
-				item.equip();
+			Meteor.call("equipItem", this._id, this.charId);
 		} else {
-				item.unequip();
+			Meteor.call("unequipItem", this._id, this.charId);
-			}
 		}
 	},
 	"change #attunementCheckbox": function(event){
@@ -107,7 +104,6 @@ Template.containerDropdown.events({
 		var detail = event.originalEvent.detail;
 		if (!detail.isSelected) return;
 		var containerId = detail.item.getAttribute("name");
-		var item = Items.findOne(Template.currentData()._id);
+		Meteor.call("moveItemToContainer", Template.currentData()._id, containerId);
-		item.moveToContainer(containerId);
 	}
 });

rpg-docs/client/views/character/inventory/splitStackDialog/splitStackDialog.js

@@ -7,13 +7,12 @@ Template.splitStackDialog.helpers({
 
 Template.splitStackDialog.events({
 	"tap #moveButton": function(event, instance){
-		var item = Items.findOne(this.id);
+		Meteor.call(
-		if (item){
+			"splitItemToParent",
-			item.splitToParent(
+			this.id,
-				{collection: this.parentCollection , id: this.parentId},
+			+instance.find("#quantityInput").value,
-				+instance.find("#quantityInput").value
+			{collection: this.parentCollection , id: this.parentId}
 		);
-		}
 	},
 	"tap #oneButton":function(event, instance){
 		instance.find("#quantityInput").value = 1;

rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.html

@@ -1,7 +1,7 @@
 <template name="experienceDialog">
 	{{#with experience}}
 		{{#baseDialog title=name class=colorClass hideColor="true" startEditing=../startEditing}}
-			<div horizontal layout center-justified>
+			<div horizontal layout center-justified class= "display2">
 				{{value}}
 			</div>
 			{{#if description}}

rpg-docs/client/views/character/journal/journal.html

@@ -1,73 +1,98 @@
 <template name="journal">
 	<div fit>
 		<div id="journal" class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				<!--Experience Table-->
-				<paper-shadow class="card container experiencesCard"  hero-id="main" {{detailHero}}>
+				<paper-shadow class="card experiencesCard"
-					<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
+							  hero-id="main" {{detailHero}}>
-						<div class="containerName subhead" flex>Experience</div>
+					<div class="top white subhead"
-						<div class="subhead">{{experience}} XP</div>
+						 hero-id="toolbar" {{detailHero}}
+						 layout horizontal center>
+						<div flex>Experience</div>
+						<div >{{experience}} XP</div>
 						<paper-icon-button class="black54" id="addXP" icon="add"></paper-icon-button>
 					</div>
-					<div class="containerMain experiences">
+					<div class="bottom list">
 						{{#each experiences}}
-							<div class="itemSlot">
+							<div class="item-slot">
-								<paper-item class="inventoryItem experience" hero-id="main" {{detailHero}} layout horizontal>
+								<div class="item experience"
-									<div flex>{{name}}</div><div class="xpValue">{{value}}</div>
+									 hero-id="main" {{detailHero}}
-								</paper-item>
+									 layout horizontal center>
+									<div flex>{{name}}</div>
+									<div class="xpValue">{{value}}</div>
+								</div>
 							</div>
 						{{/each}}
 					</div>
 					{{#if moreExperiencesOrCollapse}}
-						<div class="containerFoot" layout="" horizontal="" center="" end-justified="">
+						<div layout horizontal center end-justified>
-							<paper-button id="moreExperiences" disabled={{notMoreExperiences}}>Load More</paper-button>
+							<paper-button id="moreExperiences"
-							<paper-button id="lessExperiences" disabled={{cantCollapse}}>Collapse</paper-button>
+										  disabled={{notMoreExperiences}}>
+								Load More
+							</paper-button>
+							<paper-button id="lessExperiences"
+										  disabled={{cantCollapse}}>
+								Collapse
+							</paper-button>
 						</div>
 					{{/if}}
 				</paper-shadow>
 				<!--Class Table-->
-				<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+				<paper-shadow class="card"
-					<div class="whiteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
+							  hero-id="main" {{detailHero}}>
+					<div class="white top"
+						 hero-id="toolbar" {{detailHero}}
+						 layout horizontal center>
 						<div flex>
-							<div class="containerName subhead">Level {{level}}</div>
+							<div class="containerName subhead">
+								Level {{level}}
+							</div>
 							{{#if nextLevelXP}}
 								<div class="caption">
 									Next Level: {{nextLevelXP}}XP
 								</div>
 							{{/if}}
 						</div>
-						<paper-icon-button class="black54" id="addClassButton" icon="add"></paper-icon-button>
+						<paper-icon-button class="black54"
+										   id="addClassButton"
+										   icon="add">
+						</paper-icon-button>
 					</div>
-					<div class="containerMain experiences">
+					<div class="bottom list">
-						<div class="itemSlot">
+						<div class="item-slot">
-							<paper-item class="inventoryItem race" hero-id="main" {{detailHero "race" _id}} layout horizontal>
+							<div class="item race"
+								 hero-id="main" {{detailHero "race" _id}}
+								 layout horizontal center>
 								{{race}}
-							</paper-item>
+							</div>
 						</div>
 						{{#each classes}}
-							<div class="itemSlot">
+							<div class="item-slot">
-								<paper-item class="inventoryItem class" hero-id="main" {{detailHero}} layout horizontal>
+								<div class="item class"
+									 hero-id="main" {{detailHero}}
+									 layout horizontal center>
 									{{name}}&nbsp;{{level}}
-								</paper-item>
+								</div>
 							</div>
 						{{/each}}
 					</div>
 				</paper-shadow>
 				<!--Notes-->
 				{{#each notes}}
-					<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+					<paper-shadow class="card"  hero-id="main" {{detailHero}}>
-						<div class="containerTop {{colorClass}} noteTop" hero-id="toolbar" layout horizontal center {{detailHero}}>
+						<div class="top {{colorClass}} noteTop subhead"
-							<div flex>
+							 hero-id="toolbar" {{detailHero}}
-								<div class="containerName subhead">{{name}}</div>
+							 layout horizontal center>
+							{{name}}
 						</div>
-						</div>
+						<div class="bottom text">{{description}}</div>
-						<div class="containerMain preline">{{description}}</div>
 					</paper-shadow>
 				{{/each}}
 			</div>
 			<div class="fab-buffer"></div>
 		</div>
 	</div>
+	{{#if canEditCharacter _id}}
 	<paper-fab id="addNote" 
 				   class="floatyButton" 
 				   icon="add" 
@@ -75,4 +100,5 @@
 				   role="button" 
 				   tabindex="0" 
 				   hero-id="main"></paper-fab>
+	{{/if}}
 </template>

rpg-docs/client/views/character/journal/noteDialog/noteDialog.html

@@ -3,16 +3,28 @@
 		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
 			<div class="prewrap">{{description}}</div>
 		{{else}}
-			<!--Name-->
+			{{> noteDialogEdit}}
-			<div horizontal layout>
-				<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
-			</div>
-			<!--Description-->
-			<paper-input-decorator label="Description" floatinglabel layout vertical>
-				<paper-autogrow-textarea>
-					<textarea id="noteDescriptionInput" value={{description}}></textarea>
-				</paper-autogrow-textarea>
-			</paper-input-decorator>
 		{{/baseDialog}}
 	{{/with}}
 </template>
+
+<template name="noteDialogEdit">
+	<!--Name-->
+	<div horizontal layout>
+		<paper-input id="noteNameInput"
+					 label="Name"
+					 floatinglabel
+					 value={{name}}
+					 flex>
+		</paper-input>
+	</div>
+	<!--Description, formatting this nicely breaks it, leave it as is-->
+	<paper-input-decorator label="Description"
+						   floatinglabel
+						   layout vertical>
+		<paper-autogrow-textarea>
+			<textarea id="noteDescriptionInput"
+					  value={{description}}></textarea>
+		</paper-autogrow-textarea>
+	</paper-input-decorator>
+</template>

rpg-docs/client/views/character/journal/noteDialog/noteDialog.js

@@ -1,5 +1,7 @@
-Template.noteDialog.onRendered(function(){
+Template.noteDialog.helpers({
-	updatePolymerInputs(this);
+	note: function(){
+		return Notes.findOne(this.noteId);
+	}
 });
 
 Template.noteDialog.events({
@@ -11,6 +13,13 @@ Template.noteDialog.events({
 		GlobalUI.deletedToast(instance.data.noteId, "Notes", "Note");
 		GlobalUI.closeDetail();
 	},
+});
+
+Template.noteDialogEdit.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
+Template.noteDialogEdit.events({
 	"change #noteNameInput, input #noteNameInput": function(event){
 		var value = event.currentTarget.value;
 		Notes.update(this._id, {$set: {name: value}});
@@ -20,9 +29,3 @@ Template.noteDialog.events({
 		Notes.update(this._id, {$set: {description: value}});
 	},
 });
-
-Template.noteDialog.helpers({
-	note: function(){
-		return Notes.findOne(this.noteId);
-	}
-});

rpg-docs/client/views/character/journal/raceDialog/raceDialog.html

@@ -1,5 +1,8 @@
 <template name="raceDialog">
 	{{#baseDialog title="Race" class=colorClass hideColor="true" hideDelete="true" startEditing=startEditing}}
+		<div horizontal layout center-justified class= "display2">
+			{{race}}
+		</div>
 		{{> effectsViewList charId=charId parentId=charId parentGroup="racial"}}
 		{{> proficiencyViewList charId=charId parentId=charId parentGroup="racial"}}
 	{{else}}

rpg-docs/client/views/character/persona/persona.html

@@ -1,7 +1,7 @@
 <template name="persona">
 	<div fit>
 		<div id="persona" class="scroll-y" fit>
-			<div class="containers">
+			<div class="column-container">
 				{{#with characterDetails}}
 					{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
 				{{/with}}
@@ -11,11 +11,11 @@
 				{{> containerCard characterField "bonds" "Bonds"}}
 				{{> containerCard characterField "flaws" "Flaws"}}
 				{{> containerCard characterField "backstory" "Background"}}
-				<paper-shadow class="card container">
+				<paper-shadow class="card">
-					<div class="containerTop whiteTop" layout horizontal center>
+                    <div class="white top subhead">
-						<div class="containerName subhead" flex>Languages</div>
+                      Languages
 					</div>
-					<div flex class="containerMain listPadded">
+					<div class="bottom list">
 						{{#each languages}}
 							{{> proficiencyListItem}}
 						{{/each}}
@@ -31,10 +31,15 @@
 </template>
 
 <template name="containerCardHelper">
-	<paper-shadow class="card container {{class}}"  hero-id="main" {{detailHero field ../_id}}>
+	<paper-shadow class="card {{class}}"
-		<div class="containerTop {{colorClass}} {{topClass}}" hero-id="toolbar" layout horizontal center {{detailHero field ../_id}}>
+                  hero-id="main" {{detailHero field ../_id}}>
-			<div class="containerName subhead" hero-id="title" flex {{detailHero field ../_id}}>{{title}}</div>
+        <div class="top subhead {{colorClass}} {{topClass}}"
+             hero-id="toolbar" {{detailHero field ../_id}}>
+			<div class="subhead" flex
+                 hero-id="title" {{detailHero field ../_id}}>
+              {{title}}
           </div>
-		<div flex class="containerMain prewrap">{{> UI.contentBlock}}</div>
+		</div>
+		<div class="bottom text">{{> UI.contentBlock}}</div>
 	</paper-shadow>
 </template>

rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html

@@ -1,8 +1,11 @@
 <template name="proficiencyListItem">
-	<div class="itemSlot">
+	<div class="item-slot">
-		<paper-item noink class="white proficiencyItem" hero-id="main" {{detailHero}}>
+		<div class="proficiency item small"
-			<core-icon icon="{{profIcon}}" class="black54"></core-icon>
+			 hero-id="main" {{detailHero}}
-			<div class="sideMargin">{{getName}}</div>
+			 layout horizontal center>
-		</paper-item>
+			<core-icon icon="{{profIcon}}"
+					   style="margin-right: 16px;"></core-icon>
+			<div flex>{{getName}}</div>
+		</div>
 	</div>
 </template>

rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js

@@ -14,7 +14,7 @@ Template.proficiencyListItem.helpers({
 });
 
 Template.proficiencyListItem.events({
-	"tap .proficiencyItem": function(event, instance){
+	"tap .proficiency": function(event, instance){
 		openParentDialog(this.parent, this.charId, this._id);
 	}
 });

rpg-docs/client/views/character/spells/spells.html

@@ -1,84 +1,120 @@
 <template name="spells">
 	<div fit>
 		<div id="spells" class="scroll-y" fit>
-			<div class="spellsContainer" layout horizontal start wrap>
+			<div style="padding: 4px;" 
+				 layout horizontal start wrap>
 				{{#if hasSlots}}
-					<paper-shadow class="card container spellSlotContainer"  hero-id="main" {{detailHero}}>
+					<paper-shadow class="card"
-						<div class="containerTop whiteTop" layout horizontal center>
+								  style="margin: 4px;"
-							<div class="containerName subhead" hero-id="title" flex>Spell Slots</div>
+								  hero-id="main" {{detailHero}}>
+						<div class="white top subhead"
+							 layout horizontal center>
+							Spell Slots
 						</div>
-						<div flex class="containerMain">
+						<div class="bottom list">
 							{{#each levels}}{{#if showSlots ..}}
-								<div class="itemSlot">
+								<div class="item-slot">
-									<paper-item class="inventoryItem spellSlot" hero-id="main" {{detailHero slotStatName ../_id}} layout horizontal>
+									<div class="item spellSlot"
-										<div class="slotName">
+												hero-id="main" {{detailHero slotStatName ../_id}}
+												layout horizontal center>
+										<div style="margin-right: 16px">
 											{{name}}
 										</div>
 										<div flex layout horizontal center>
 											{{#each slotBubbles ..}}
-												<paper-icon-button class="slotBubble" icon={{icon}} disabled={{disabled}}></paper-icon-button>
+												<paper-icon-button class="slotBubble"
+																   icon={{icon}}
+																   disabled={{disabled}}>
+												</paper-icon-button>
 											{{/each}}
 										</div>
-									</paper-item>
+									</div>
 								</div>
 							{{/if}}{{/each}}
 						</div>
 					</paper-shadow>
 				{{/if}}
 				{{#each spellLists}}
-					<paper-shadow class="card container spellList"  hero-id="main" {{detailHero}} flex>
+					<paper-shadow class="card spellList" flex
-						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
+								  hero-id="main" {{detailHero}}
+								  style="margin: 4px;">
+						<div class="top {{colorClass}}"
+							 hero-id="toolbar" {{detailHero}}
+							 layout horizontal center>
 							<div flex>
-								<div class="containerName subhead">{{name}}</div>
+								<div class="subhead">{{name}}</div>
 								<div class="caption">
 									{{#if saveDC}}
+										<span style="margin-right: 16px;">
 											Save DC: {{evaluate charId saveDC}}
-										<div style="width: 16px; display: inline-block;"></div>
+										</span>
 									{{/if}}
 									{{#if attackBonus}}
+										<span>
 											Attack Bonus: {{evaluateSigned charId attackBonus}}
+										</span>
 									{{/if}}
 								</div>
 							</div>
 							{{#if settings.showUnprepared}}
-								{{#if maxPrepared}}<div class="subhead">{{numPrepared}} / {{evaluate charId maxPrepared}}</div>{{/if}}
+								{{#if maxPrepared}}
-								<core-tooltip label="Done" position="left">
+									<div class="subhead">
-									<paper-icon-button class="finishPrep" icon="done"></paper-icon-button>
+										{{numPrepared}} / {{evaluate charId maxPrepared}}
+									</div>
+								{{/if}}
+								<core-tooltip label="Done"
+											  position="left">
+									<paper-icon-button class="finishPrep"
+													   icon="done">
+									</paper-icon-button>
 								</core-tooltip>
 							{{else}}
-								<core-tooltip label="Change prepared spells" position="left">
+								<core-tooltip label="Change prepared spells"
-									<paper-icon-button class="prepSpells" icon="book"></paper-icon-button>
+											  position="left">
+									<paper-icon-button class="prepSpells"
+													   icon="book">
+									</paper-icon-button>
 								</core-tooltip>
 							{{/if}}
 						</div>
-						<div class="containerMain">
+						<div class="bottom list column-container">
 							{{#each levels}}
 								<div class="spellLevel">
 									{{#if spellCount .. ../../_id}}
-										<div class="list-subhead" layout horizontal center>
+										<div class="subhead">
 											{{name}}
 										</div>
 									{{/if}}
 									{{#each spells ../_id ../../_id}}
 										{{#if showSpell ../../settings.showUnprepared}}
-											<div class="itemSlot">
+											<div class="item-slot">
-												<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}} 
+												<div class="tall spell item"
+													 hero-id="main" {{detailHero}}
 													 layout horizontal center>
-														<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
 													<core-icon icon="social:whatshot" 
-															   style="color: {{hexColor color}};"
+															   style="color: {{hexColor color}};
+																	  margin-right: 16px;"
 															   ></core-icon>
 													<div flex layout vertical>
 														<div>{{name}}</div>
 														<div class="caption">
-															{{school}} {{castingTime}}
+															{{school}}
-															{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
+															{{castingTime}}
+															{{#if ritual}}
+																(ritual)
+															{{/if}}
+															{{#if spellComponents}}
+																- {{spellComponents}}
+															{{/if}}
 														</div>
 													</div>
 													{{#if ../../settings.showUnprepared}}
-														<paper-checkbox class="preparedCheckbox" checked={{isPrepared}} disabled={{cantUnprepare}}></paper-checkbox>
+														<paper-checkbox class="preparedCheckbox"
+																		checked={{isPrepared}}
+																		disabled={{cantUnprepare}}>
+														</paper-checkbox>
 													{{/if}}
-												</paper-item>
+												</div>
 											</div>
 										{{/if}}
 									{{/each}}
@@ -91,8 +127,21 @@
 			<div class="fab-buffer"></div>
 		</div>
 	</div>
-	<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
+	{{#if canEditCharacter _id}}
-		<paper-fab-menu-item id="addSpell" icon="note-add" color="#d23f31" tooltip="Spell"></paper-fab-menu-item>
+		<paper-fab-menu id="inventoryAddMenu"
-		<paper-fab-menu-item id="addSpellList" icon="work" color="#d23f31" tooltip="Spell List"></paper-fab-menu-item>
+						icon="add"
+						closeIcon="close"
+						duration="0.3">
+			<paper-fab-menu-item id="addSpell"
+								 icon="note-add"
+								 color="#d23f31"
+								 tooltip="Spell">
+			</paper-fab-menu-item>
+			<paper-fab-menu-item id="addSpellList"
+								 icon="work"
+								 color="#d23f31"
+								 tooltip="Spell List">
+			</paper-fab-menu-item>
 		</paper-fab-menu>
+	{{/if}}
 </template>

rpg-docs/client/views/character/spells/spells.js

@@ -170,7 +170,7 @@ Template.spells.events({
 			heroId:   charId + stat,
 		});
 	},
-	"tap .containerTop": function(event){
+	"tap .spellList .top": function(event){
 		GlobalUI.setDetail({
 			template: "spellListDialog",
 			data:     {spellListId: this._id, charId: this.charId},

rpg-docs/client/views/character/stats/abilityCards/abilityCards.css

@@ -1,34 +0,0 @@
-.card.double {
-	display: flex;
-}
-
-.card.double > div{
-	vertical-align: top;
-	padding: 16px;
-}
-
-.abilityScore {
-	width: 70px;
-	text-align: center;
-	background-color: #D50000;
-	padding: 16px;
-	position: relative;
-	border-radius: 2px 0 0 2px;
-}
-
-#stats .card {
-	padding: 0;
-}
-
-.abilityCardRight {
-	flex-grow: 1;
-	padding-right: 0;
-}
-
-.abilityCardRight hr{
-	margin: 8px 0 8px -16px;
-}
-
-.abilityCardRight h1{
-	margin-bottom: 8px;
-}

rpg-docs/client/views/character/stats/abilityCards/abilityCards.html

@@ -1,122 +1,14 @@
 <template name="abilityMiniCard">
-	<paper-shadow class="card double abilityMiniCard" 
+	<paper-shadow class="card abilityMiniCard clickable" 
-				  hero-id="main" {{detailHero ability ../_id}}>
+				  hero-id="main" {{detailHero ability ../_id}}
-		<div class="abilityScore white-text {{color}}"
+				  layout horizontal>
+		<div class="left white-text {{color}}"
 			 hero-id="toolbar" {{detailHero ability ../_id}}>
-			<h1 class="display1">{{../attributeValue ability}}</h1>
+			<div class="display1">{{../attributeValue ability}}</div>
-			<h2>{{../abilityMod ability}}</h2>
+			<div class="title">{{../abilityMod ability}}</div>
 		</div>
-		<div class="abilityCardRight subhead" layout horizontal center>
+		<div class="right subhead" layout horizontal center>
 			{{title}}
 		</div>
-		<paper-ripple fit></paper-ripple>
-	</paper-shadow>
-</template>
-
-<template name="strengthCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore red white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "strength"}}</h1>
-			<h2>{{abilityMod "strength"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Strength</h1>
-			{{> skillRow name="Save" skill="strengthSave"}}
-			<hr>
-			{{> skillRow name="Athletics" skill="athletics"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="dexterityCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore green white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "dexterity"}}</h1>
-			<h2>{{abilityMod "dexterity"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Dexterity</h1>
-			{{> skillRow name="Save" skill="dexteritySave"}}
-			<hr>
-			{{> skillRow name="Acrobatics" skill="acrobatics"}}
-			{{> skillRow name="Sleight of Hand" skill="sleightOfHand"}}
-			{{> skillRow name="Stealth" skill="stealth"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="constitutionCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore deep-orange white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "constitution"}}</h1>
-			<h2>{{abilityMod "constitution"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Constitution</h1>
-			{{> skillRow name="Save" skill="constitutionSave"}}
-			<hr>
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="intelligenceCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore indigo white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "intelligence"}}</h1>
-			<h2>{{abilityMod "intelligence"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Intelligence</h1>
-			{{> skillRow name="Save" skill="intelligenceSave"}}
-			<hr>
-			{{> skillRow name="Arcana" skill="arcana"}}
-			{{> skillRow name="History" skill="history"}}
-			{{> skillRow name="Investigation" skill="investigation"}}
-			{{> skillRow name="Nature" skill="nature"}}
-			{{> skillRow name="Religion" skill="religion"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="wisdomCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore purple white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "wisdom"}}</h1>
-			<h2>{{abilityMod "wisdom"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Wisdom</h1>
-			{{> skillRow name="Save" skill="wisdomSave"}}
-			<hr>
-			{{> skillRow name="Animal Handling" skill="animalHandling"}}
-			{{> skillRow name="Insight" skill="insight"}}
-			{{> skillRow name="Medicine" skill="medicine"}}
-			{{> skillRow name="Perception" skill="perception" showPassive="true"}}
-			{{> skillRow name="Survival" skill="survival"}}
-		</div>
-	</paper-shadow>
-</template>
-
-<template name="charismaCard">
-	<paper-shadow class="card double">
-		<div class="abilityScore pink white-text">
-			{{> ripple color="#eee"}}
-			<h1 class="display1">{{attributeValue "charisma"}}</h1>
-			<h2>{{abilityMod "charisma"}}</h2>
-		</div>
-		<div class="abilityCardRight">
-			<h1>Charisma</h1>
-			{{> skillRow name="Save" skill="charismaSave"}}
-			<hr>
-			{{> skillRow name="Deception" skill="deception"}}
-			{{> skillRow name="Intimidation" skill="intimidation"}}
-			{{> skillRow name="Performance" skill="performance"}}
-			{{> skillRow name="Persuasion" skill="persuasion"}}
-		</div>
 	</paper-shadow>
 </template>

rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html

@@ -1,6 +1,6 @@
 <!-- needs name, char, and statName -->
 <template name="attributeDialog">
-	{{#baseDialog title=name class=colorClass hideEdit=true}}
+	{{#baseDialog title=name class=color hideEdit=true}}
 		{{> attributeDialogView}}
 	{{/baseDialog}}
 </template>

rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.js

@@ -93,6 +93,14 @@ var abilities = {
 	charisma: {name: "Charisma"},
 };
 
+Template.attributeDialog.helpers({
+	color: function(){
+		if (this.color) return this.color + " white-text";
+		var char = Characters.findOne(this.charId, {fields: {color: 1}});
+		if (char) return getColorClass(char.color);
+	},
+});
+
 Template.attributeDialogView.helpers({
 	or: function(a, b, c){
 		return a || b || c;
@@ -106,27 +114,27 @@ Template.attributeDialogView.helpers({
 	},
 	baseEffects: function(){
 		return Effects.find(
-			{charId: this.charId, stat: this.statName, operation: "base"}
+			{charId: this.charId, stat: this.statName, operation: "base", enabled: true}
 		);
 	},
 	addEffects: function(){
 		return Effects.find(
-			{charId: this.charId, stat: this.statName, operation: "add"}
+			{charId: this.charId, stat: this.statName, operation: "add", enabled: true}
 		);
 	},
 	mulEffects: function(){
 		return Effects.find(
-			{charId: this.charId, stat: this.statName, operation: "mul"}
+			{charId: this.charId, stat: this.statName, operation: "mul", enabled: true}
 		);
 	},
 	minEffects: function(){
 		return Effects.find(
-			{charId: this.charId, stat: this.statName, operation: "min"}
+			{charId: this.charId, stat: this.statName, operation: "min", enabled: true}
 		);
 	},
 	maxEffects: function(){
 		return Effects.find(
-			{charId: this.charId, stat: this.statName, operation: "max"}
+			{charId: this.charId, stat: this.statName, operation: "max", enabled: true}
 		);
 	},
 	attributeBase: function(){
@@ -140,7 +148,12 @@ Template.attributeDialogView.helpers({
 		return char.attributeValue(this.statName);
 	},
 	sourceName: function(){
-		if (this.parent.collection === "Characters") return this.name;
+		if (this.parent.group === "racial"){
+			return this.getParent().race;
+		}
+		if (this.parent.collection === "Characters"){
+			return this.name;
+		}
 		return this.getParent().name;
 	},
 	operationName: function(){

rpg-docs/client/views/character/stats/healthCard/healthCard.html

@@ -2,19 +2,21 @@
 	<paper-shadow class="card container healthCard" 
 				  hero-id="main" {{detailHero "hitPoints" _id}} 
 				  layout horizontal wrap>
-		<div class="green white-text subhead padded leftRound" 
+		<div class="green white-text subhead left" 
 			 hero-id="toolbar" {{detailHero "hitPoints" _id}}
-			 layout vertical center>
+			 layout vertical center center-justified>
 			<div class="hitPointTitle clickable">Hit Points</div>
 			<paper-icon-button class="white54" id="addTempHP" icon="add"></paper-icon-button>
 		</div>
-		<div class="padded" flex layout vertical center-justified style="min-width: 180px;">
+		<div class="right" flex layout vertical center-justified style="min-width: 180px;">
+			<div layout horizontal>
 				<paper-slider id="hitPointSlider"
 							  value={{attributeValue "hitPoints"}}
 							  max={{attributeBase "hitPoints"}} 
 							  editable pin
 							  role="slider"
 							  ></paper-slider>
+			</div>
 			{{#each tempHitPoints}}
 				<div>
 					{{name}}

rpg-docs/client/views/character/stats/hitDice/hitDice.html

@@ -1,10 +1,20 @@
 <template name="hitDice">
 	{{#if ../attributeBase name}}
-		<paper-shadow class="card container" hero-id="main" {{detailHero name ../_id}} layout horizontal>
+		<paper-shadow class="card hit-dice" hero-id="main" 
-			<div class="containerLeft green" layout horizontal hero-id="toolbar" {{detailHero name ../_id}}>
+					  {{detailHero name ../_id}} 
-				<div class="resourceButtons">
+					  layout horizontal>
-					<paper-icon-button class="resourceUp" icon="arrow-drop-up" disabled={{cantIncrement}}></paper-icon-button>
+			<div class="left green display1 white-text" 
-					<paper-icon-button class="resourceDown" icon="arrow-drop-down" disabled={{cantDecrement}}></paper-icon-button>
+				 hero-id="toolbar" {{detailHero name ../_id}}
+				 layout horizontal>
+				<div>
+					<paper-icon-button class="resourceUp" 
+									   icon="arrow-drop-up" 
+									   disabled={{cantIncrement}}>
+					</paper-icon-button>
+					<paper-icon-button class="resourceDown"
+									   icon="arrow-drop-down"
+									   disabled={{cantDecrement}}>
+					</paper-icon-button>
 				</div>
 				<div class="resourceValue" layout vertical center>
 					<div>
@@ -15,9 +25,8 @@
 					</div>
 				</div>
 			</div>
-			<div class="containerRight clickable" flex relative horizontal layout center>
+			<div class="right clickable" flex relative horizontal layout center>
 				Hit Dice
-				<paper-ripple fit></paper-ripple>
 			</div>
 		</paper-shadow>
 	{{/if}}

rpg-docs/client/views/character/stats/hitDice/hitDice.js

@@ -25,12 +25,17 @@ Template.hitDice.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .containerRight": function() {
+	"tap .right": function() {
 		var charId = Template.parentData()._id;
 		var title = "d" + this.diceNum + " Hit Dice";
 		GlobalUI.setDetail({
 			template: "attributeDialog",
-			data:     {name: title, statName: this.name, charId: charId},
+			data:     {
+				name: title,
+				statName: this.name,
+				charId: charId,
+				color: "green",
+			},
 			heroId:   charId + this.name,
 		});
 	},

rpg-docs/client/views/character/stats/skillDialog/skillDialog.html

@@ -1,6 +1,6 @@
 <!-- needs name, char, and skillName -->
 <template name="skillDialog">
-	{{#baseDialog title=name class=colorClass hideEdit=true}}
+	{{#baseDialog title=name class=color hideEdit=true}}
 		{{> skillDialogView}}
 	{{/baseDialog}}
 </template>

rpg-docs/client/views/character/stats/skillDialog/skillDialog.js

@@ -93,6 +93,14 @@ var abilities = {
 	charisma: {name: "Charisma"},
 };
 
+Template.skillDialog.helpers({
+	color: function(){
+		if (this.color) return this.color + " white-text";
+		var char = Characters.findOne(this.charId, {fields: {color: 1}});
+		if (char) return getColorClass(char.color);
+	},
+});
+
 Template.skillDialogView.helpers({
 	or: function(a, b, c){
 		return a || b || c;
@@ -132,6 +140,7 @@ Template.skillDialogView.helpers({
 			charId: this.charId,
 			stat: this.skillName,
 			operation: "add",
+			enabled: true,
 		});
 	},
 	mulEffects: function(){
@@ -139,6 +148,7 @@ Template.skillDialogView.helpers({
 			charId: this.charId,
 			stat: this.skillName,
 			operation: "mul",
+			enabled: true,
 		});
 	},
 	minEffects: function(){
@@ -146,6 +156,7 @@ Template.skillDialogView.helpers({
 			charId: this.charId,
 			stat: this.skillName,
 			operation: "min",
+			enabled: true,
 		});
 	},
 	maxEffects: function(){
@@ -153,6 +164,7 @@ Template.skillDialogView.helpers({
 			charId: this.charId,
 			stat: this.skillName,
 			operation: "max",
+			enabled: true,
 		});
 	},
 	advEffects: function(){
@@ -160,6 +172,7 @@ Template.skillDialogView.helpers({
 			charId: this.charId,
 			stat: this.skillName,
 			operation: "advantage",
+			enabled: true,
 		});
 	},
 	dadvEffects: function(){
@@ -167,6 +180,7 @@ Template.skillDialogView.helpers({
 			charId: this.charId,
 			stat: this.skillName,
 			operation: "disadvantage",
+			enabled: true,
 		});
 	},
 	conditionalEffects: function(){
@@ -174,6 +188,7 @@ Template.skillDialogView.helpers({
 			charId: this.charId,
 			stat: this.skillName,
 			operation: "conditional",
+			enabled: true,
 		});
 	},
 	ability: function(){

rpg-docs/client/views/character/stats/skillRow/skillRow.css

@@ -1,40 +0,0 @@
-.skillRow {
-	height: 32px;
-	margin: 0 -16px 0 -16px;
-	background: white;
-}
-
-.skillRow core-icon {
-	color: rgba(0,0,0,0.54);
-}
-
-.skillMod {
-	width: 42px;
-	text-align: center;
-}
-
-.skillName, .skillMod{
-	
-}
-
-.fail.skillMod {
-	color: #D50000;
-}
-
-.advantage{
-	background-image: url(/png/advantage/greenUp.png);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-.disadvantage{
-	background-image: url(/png/advantage/redDown.png);
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-.hasConditionals::after{
-	content: "*";
-}

rpg-docs/client/views/character/stats/skillRow/skillRow.html

@@ -1,16 +1,24 @@
 <template name="skillRow">
-	<paper-item class="skillRow" layout horizontal hero-id="main" {{detailHero skill ../_id}}>
+	<div class="item-slot">
+		<div class="skill-row item small" 
+			 hero-id="main" 
+			 {{detailHero skill ../_id}} 
+			 layout horizontal center>
 			<core-icon icon="{{profIcon}}"></core-icon>
 			{{#if failSkill}}
-		<div class="fail skillMod">fail</div>
+				<div class="fail skill-mod">fail</div>
 			{{else}}
-		<div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
+				<div class="{{advantage}} skill-mod">{{../skillMod skill}}</div>
 			{{/if}}
-		<div class="{{#if conditionalCount}}hasConditionals{{/if}} skillName">
+			<div flex>
 				{{name}}
+				{{#if conditionalCount}}
+					*
+				{{/if}}
 				{{#if showPassive}}
 					({{../passiveSkill skill}})
 				{{/if}}
 			</div>
-	</paper-item>
+		</div>
+	</div>
 </template>

rpg-docs/client/views/character/stats/skillRow/skillRow.scss

@@ -0,0 +1,21 @@
+.skill-row {
+	.skill-mod{
+		width: 45px;
+		text-align: center;
+		&.fail {
+			color: #D50000;
+		}
+		&.advantage{
+			background-image: url(/png/advantage/greenUp.png);
+			background-size: contain;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+		&.disadvantage{
+			background-image: url(/png/advantage/redDown.png);
+			background-size: contain;
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+	}
+}

rpg-docs/client/views/character/stats/stats.html

@@ -1,9 +1,9 @@
 <template name="stats">
 	<div class="scroll-y" fit>
-		<div class="resourceCards" layout horizontal wrap>
+		<div style="padding: 8px 8px 0 8px">
 			{{> healthCard}}
 		</div>
-		<div id="stats" class="containers" >
+		<div class="column-container thin-columns" >
 			<!--Ability Scores-->
 			{{> abilityMiniCard ability="strength" title="Strength" color="red"}}
 			{{> abilityMiniCard ability="dexterity" title="Dexterity" color="indigo"}}
@@ -27,11 +27,11 @@
 			{{>hitDice name="d10HitDice" diceNum="10" char=this}}
 			{{>hitDice name="d12HitDice" diceNum="12" char=this}}
 			<!--Saving Throws-->
-			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+			<paper-shadow class="card">
-				<div class="containerTop whiteTop" layout horizontal center>
+				<div class="top white subhead">
-					<div class="containerName subhead" hero-id="title" flex>Saving Throws</div>
+					Saving Throws
 				</div>
-				<div flex class="containerMain">
+				<div flex class="bottom list">
 					{{> skillRow name="Strength" skill="strengthSave"}}
 					{{> skillRow name="Dexterity" skill="dexteritySave"}}
 					{{> skillRow name="Constitution" skill="constitutionSave"}}
@@ -41,11 +41,11 @@
 				</div>
 			</paper-shadow>
 			<!--Skills-->
-			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
+			<paper-shadow class="card">
-				<div class="containerTop whiteTop" layout horizontal center>
+				<div class="top white subhead">
-					<div class="containerName subhead" hero-id="title" flex>Skills</div>
+					Skills
 				</div>
-				<div flex class="containerMain">
+				<div flex class="bottom list">
 					{{> skillRow name="Acrobatics" skill="acrobatics"}}
 					{{> skillRow name="Animal Handling" skill="animalHandling"}}
 					{{> skillRow name="Arcana" skill="arcana"}}
@@ -71,8 +71,8 @@
 </template>
 
 <template name="statCard">
-	<paper-shadow class="card container statCard" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
+	<paper-shadow class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
-		<div class="containerLeft {{color}}"
+		<div class="left display1 white-text {{color}}"
 			 hero-id="toolbar" {{detailHero stat ../_id}}>
 			{{#if isSkill}}
 				{{../skillMod stat}}
@@ -80,9 +80,8 @@
 				{{prefix}}{{../attributeValue stat}}
 			{{/if}}
 		</div>
-		<div class="containerRight" flex horizontal layout center>
+		<div class="right subhead" flex horizontal layout center>
 			{{name}}
 		</div>
-		<paper-ripple fit></paper-ripple>
 	</paper-shadow>
 </template>

rpg-docs/client/views/character/stats/stats.js

@@ -4,13 +4,23 @@ Template.stats.events({
 		if (this.isSkill){
 			GlobalUI.setDetail({
 				template: "skillDialog",
-				data:     {name: this.name, skillName: this.stat, charId: charId},
+				data:     {
+					name: this.name,
+					skillName: this.stat,
+					charId: charId,
+					color: this.color,
+				},
 				heroId:   charId + this.stat,
 			});
 		} else {
 			GlobalUI.setDetail({
 				template: "attributeDialog",
-				data:     {name: this.name, statName: this.stat, charId: charId},
+				data:     {
+					name: this.name,
+					statName: this.stat,
+					charId: charId,
+					color: this.color,
+				},
 				heroId:   charId + this.stat,
 			});
 		}
@@ -19,23 +29,37 @@ Template.stats.events({
 		var charId = Template.parentData()._id;
 		GlobalUI.setDetail({
 			template: "attributeDialog",
-			data:     {name: this.title, statName: this.ability, charId: charId},
+			data:     {
+				name: this.title,
+				statName: this.ability,
+				charId: charId,
+				color: this.color,
+			},
 			heroId:   charId + this.ability,
 		});
 	},
-	"tap .skillRow": function(event, instance){
+	"tap .skill-row": function(event, instance){
 		var skill = this.skill;
 		var charId = instance.data._id;
 		GlobalUI.setDetail({
 			template: "skillDialog",
-				data:     {name: this.name, skillName: skill, charId: charId},
+			data:     {
+				name: this.name,
+				skillName: skill,
+				charId: charId,
+			},
 			heroId:   charId + skill,
 		});
 	},
 	"tap .hitPointTitle": function(event, instance) {
 		GlobalUI.setDetail({
 			template: "attributeDialog",
-			data:     {name: "Hit Points", statName: "hitPoints", charId: this._id},
+			data:     {
+				name: "Hit Points",
+				statName: "hitPoints",
+				charId: this._id,
+				color: "green",
+			},
 			heroId:   this._id + "hitPoints",
 		});
 	},

rpg-docs/client/views/characterList/characterSideList.css

@@ -2,10 +2,21 @@
 	color: black;
 	color: rgba(0, 0, 0, 0.870588);
 	cursor: pointer;
-	font-size: 16px;
-	height: 40px;
 	overflow: hidden;
-	padding: 12px 0 12px 16px;
+	padding: 8px 0 8px 16px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+.singleLineItem core-icon {
+	height: 8px;
+	margin-right: 8px;
+	width: 8px;
+}
+
+.singleLineItem div {
+	text-overflow: ellipsis;
+	/* Required for text-overflow to do anything */
+	white-space: nowrap;
+	overflow: hidden;
+}

rpg-docs/client/views/characterList/characterSideList.html

@@ -3,7 +3,11 @@
 	{{#if characters.count}}
 		<div>
 			{{#each characters}}
-				<div class="singleLineItem">{{name}}</div>
+				<div class="singleLineItem characterRepresentative"
+					 layout horizontal center>
+					<core-icon icon="image:brightness-1"></core-icon>
+					<div>{{name}}</div>
+				</div>
 			{{/each}}
 		</div>
 	{{/if}}

rpg-docs/client/views/characterList/characterSideList.js

@@ -21,8 +21,10 @@ Template.characterSideList.helpers({
 Template.characterSideList.events({
 	"tap .singleLineItem": function(event, instance) {
 		Router.go("characterSheet", {_id: this._id});
+		$("core-drawer-panel").get(0).closeDrawer();
 	},
 	"tap core-item": function() {
 		Router.go("characterList");
+		$("core-drawer-panel").get(0).closeDrawer();
 	},
 });

rpg-docs/client/views/feedback/feedback.html

@@ -0,0 +1,30 @@
+<template name="feedback">
+	<div class="feedback" style="min-width: 300px; min-height: 370px">
+		<div>
+			<paper-input id="feedbackTitle" label="Title" floatinglabel></paper-input>
+		</div>
+		<div>
+			<paper-dropdown-menu class="typeDropdown" label="Operation" flex>
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu typeMenu" selected="general">
+						<paper-item name="general">General Feedback</paper-item>
+						<paper-item name="bug">Bug</paper-item>
+						<paper-item name="change">Suggested Change</paper-item>
+						<paper-item name="feature">Feature Request</paper-item>
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+		</div>
+		<div layout horizontal center>
+			<div>Importance</div>
+			<paper-slider id="severity" max=10 min=1 value=5 snap></paper-slider>
+		</div>
+		<paper-input-decorator label="Description" floatinglabel layout vertical>
+			<paper-autogrow-textarea rows=10 maxRows=10>
+				<textarea id="feedbackDescription"></textarea>
+			</paper-autogrow-textarea>
+		</paper-input-decorator>
+	</div>
+	<paper-button id="cancelButton" affirmative>Cancel</paper-button>
+	<paper-button id="sendButton"   affirmative>Send  </paper-button>
+</template>

rpg-docs/client/views/feedback/feedback.js

@@ -0,0 +1,14 @@
+Template.feedback.events({
+	"tap #sendButton": function(event, instance) {
+		var report = {};
+		report.title = instance.find("#feedbackTitle").value;
+		report.severity = instance.find("#severity").value;
+		report.type = instance.find(".typeMenu").selected;
+		report.description = instance.find("#feedbackDescription").value;
+		report.metaData = {
+			url: window.location.href,
+			session: _.pairs(Session.keys),
+		};
+		Meteor.call("insertReport", report);
+	}
+});

rpg-docs/client/views/guide/guide.html

@@ -1,5 +1,6 @@
 <template name="guide">
-	<div class="wallOfText">
+	<div layout vertical center>
+		<paper-shadow class="wallOfText card" style="padding: 32px; max-width: 800px;">
 			<h1>Dicecloud Beta</h1>
 			<p>Welcome to the Dicecloud beta. Please don't share the link with people you don't actively play with, since the beta is intended to be small, and your experience will probably get laggy if it gets more traffic than I'm expecting.</p>
 			<p>The beta is going to start with just the character sheet. You can play D&amp;D without minis and maps, without a pre-written adventure, you can play without a lot of things, but the character sheet is necessary. So I'm starting here and working my way outwards.</p>
@@ -88,5 +89,6 @@
 				<li>Change your level and check that the <em>Stats</em> tab gets updated accordingly</li>
 			</ul>
 			<p>You can try all sorts of calculations in your effects and in certain other places too. For example if you had some feature that is used a number of times equal to your wisdom modifier or 1, whichever is lower, you could limit its uses to <em>min(1, wisdomMod)</em> and the character sheet will figure it out for you, and update itself if you wisdom modifier happens to change later.</p>
+		</paper-shadow>
 	</div>
 </template>

rpg-docs/client/views/home/home.html

@@ -5,7 +5,7 @@
 			DiceCloud
 		</div>
 	</core-toolbar>
-	<div class="padded scroll-y white" fit>
+	<div class="scroll-y" style="padding: 16px" fit>
 		{{> guide}}
 	</div>
 </template>

rpg-docs/client/views/layout/layout.html

@@ -1,5 +1,5 @@
 <template name="layout">
-	<core-drawer-panel>
+	<core-drawer-panel responsiveWidth="905px">
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
 			<div id="accountSummary">
 				{{#if currentUser}}
@@ -13,6 +13,8 @@
 			<div id="navPanel">
 				<core-item id="homeNav" icon="home" label="Home"></core-item>
 				{{> characterSideList}}
+				<core-item id="feedback" icon="bug-report" label="Send Feedback"></core-item>
+				<core-item id="changeLog" icon="list" label="Change Log"></core-item>
 			</div>
 		</core-header-panel>
 		<core-animated-pages main 
@@ -31,7 +33,9 @@
 			<section id="detailSection">
 				<div id="detailScreenFiller">
 					<div id="screenDim" cross-fade></div>
-					<paper-shadow id="globalDetail" z="5" animated hero hero-id="main">
+					<paper-shadow id="globalDetail" class="card" z="5"
+								  animated hero hero-id="main"
+								  layout vertical>
 						{{#if globalDetailTemplate}}
 							{{> UI.dynamic template=globalDetailTemplate data=globalDetailData}}
 						{{/if}}

rpg-docs/client/views/layout/layout.js

@@ -1,3 +1,7 @@
+Template.layout.onCreated(function() {
+	this.subscribe("user");
+});
+
 Template.layout.rendered = function() {
 	$(window).on("popstate", GlobalUI.popStateHandler);
 };
@@ -19,8 +23,22 @@ Template.layout.helpers({
 Template.layout.events({
 	"tap #homeNav": function(event, instance){
 		Router.go("/");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 	"tap #profileLink": function(event, instance){
 		Router.go("profile");
+		instance.find("core-drawer-panel").closeDrawer();
+	},
+	"tap #feedback": function(event, instance) {
+		GlobalUI.showDialog({
+			heading: "Feedback",
+			template: "feedback",
+			fullOnMobile: true,
+		});
+		instance.find("core-drawer-panel").closeDrawer();
+	},
+	"tap #changeLog": function(event, instance) {
+		Router.go("changeLog");
+		instance.find("core-drawer-panel").closeDrawer();
 	},
 });

rpg-docs/client/views/meta/changeLog/changeLog.html

@@ -0,0 +1,27 @@
+<template name="changeLog">
+	<core-toolbar class="blue-grey white-text">
+		<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
+		<div flex>
+			Change Log
+		</div>
+	</core-toolbar>
+	<div class="changeLog scroll-y" fit>
+		<div layout vertical center>
+			<div layout vertical style="max-width: 800px; padding: 4px;">
+				{{#each changeLogs}}
+					<paper-shadow class="card" 
+								  style="margin: 4px;
+										 padding: 16px;"
+								  layout vertical>
+						<h2>{{version}}</h2>
+						<ul>
+							{{#each changes}}
+							<li>{{this}}</li>
+							{{/each}}
+						</ul>
+					</paper-shadow>
+				{{/each}}
+			</div>
+		</div>
+	</div>
+</template>

rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html

@@ -1,7 +1,11 @@
 <template name="baseDialog">
-	<core-header-panel fit>
+	<div class="{{class}} top subhead"
-		<core-toolbar class={{class}} hero-id="toolbar" hero>
+		 style="height: 72px;"
-			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
+		 hero-id="toolbar" hero
+		 layout horizontal center>
+		<paper-icon-button id="backButton" 
+						   icon="arrow-back">
+		</paper-icon-button>
 		<div flex>{{title}}</div>
 		{{#if editing}}
 			{{#unless hideDelete}}
@@ -20,20 +24,21 @@
 							   aria-label="Delete Feature"
 							   noink></paper-icon-button>
 		{{else}}
-				{{#unless hideEdit}}
+			{{#if showEdit}}
 				<paper-icon-button id="editButton"
 								   icon="create"
 								   aria-label="Delete Feature"
 								   noink></paper-icon-button>
-				{{/unless}}
 			{{/if}}
-		</core-toolbar>
+		{{/if}}
-		<div class="detailContent">
+	</div>
+	<div class="bottom scroll-y"
+		 style="padding: 24px"
+		 flex>
 		{{#unless editing}}
 			{{> UI.contentBlock}}
 		{{else}}
 			{{> UI.elseBlock}}
 		{{/unless}}
 	</div>
-	</core-header-panel>
 </template>

rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js

@@ -11,6 +11,18 @@ Template.baseDialog.helpers({
 	editing: function(){
 		return Template.instance().editing.get();
 	},
+	showEdit: function() {
+		if (this.hideEdit) return false;
+		var charId = Template.parentData().charId;
+		if (charId){
+			var char = Characters.findOne(charId);
+			var userId = Meteor.userId();
+			if (char && userId)
+				return char.owner === userId ||
+					_.contains(char.writers, userId);
+		}
+		return true;
+	},
 });
 
 Template.baseDialog.events({

rpg-docs/client/views/paperTemplates/undoToast/undoToast.js

@@ -9,6 +9,10 @@ Template.undoToast.events({
 			);
 			return;
 		}
+		if (collection.restoreNode){
 			collection.restoreNode(this.id);
+		} else {
+			collection.restore(this.id);
+		}
 	}
 });

rpg-docs/lib/constants/characterAssetAllowDeny.js

@@ -1,3 +1,14 @@
+Meteor.methods({
+	canWriteCharacter: function(charId) {
+		var userId = this.userId;
+		var char = Characters.findOne(
+			charId,
+			{fields: {owner: 1, writers: 1}}
+		);
+		return (userId && char.owner === userId || _.contains(char.writers, userId));
+	},
+});
+
 CHARACTER_SUBSCHEMA_ALLOW = {
 	// the user must be logged in, and the user must be a writer of the character
 	insert: function(userId, doc) {

rpg-docs/lib/functions/parenting.js

@@ -42,6 +42,12 @@ var inheritParentProperties = function(doc, collection){
 		"Document's parent does not exist"
 	);
 	var handMeDowns = _.pick(parent, collection.inheritedKeys);
+	if (
+		_.contains(collection.inheritedKeys, "charId") &&
+		doc.parent.collection === "Characters"
+	){
+		handMeDowns.charId = doc.parent.id;
+	}
 	if (_.isEmpty(handMeDowns)) return;
 	collection.update(doc._id, {$set: handMeDowns});
 };
@@ -76,14 +82,12 @@ makeChild = function(collection, inheritedKeys){
 		}
 	});
 
-	if (Meteor.isClient) {
 	collection.after.update(function(userId, doc, fieldNames, modifier, options) {
-			if (modifier && modifier.$set && modifier.$set.parent){
+		if (modifier && modifier.$set && modifier.$set["parent.id"]){
 			//when we change parents, inherit its properties
 			inheritParentProperties(doc, collection);
 		}
 	});
-	}
 
 	collection.softRemoveNode = collection.softRemoveNode || function(id){
 		collection.softRemove(id);
@@ -102,14 +106,12 @@ makeParent = function(collection, donatedKeys){
 	donatedKeys = joinWithDefaultKeys(donatedKeys);
 	var collectionName = collection._collection.name;
 	//after changing, push the changes to all children
-	if (Meteor.isClient) {
 	collection.after.update(function(userId, doc, fieldNames, modifier, options) {
 		modifier = limitModifierToKeys(modifier, donatedKeys);
 		doc = _.pick(doc, ["_id", "charId"]);
 		if (!modifier) return;
 		Meteor.call("updateChildren", doc, modifier, true);
 	});
-	}
 	collection.softRemoveNode = function(id){
 		Meteor.call("softRemoveNode", collectionName, id);
 	};

rpg-docs/private/changeLogs/changeLogs.js

@@ -0,0 +1,70 @@
+ChangeLogs.insert({
+	version: "0.2.0 - First public release",
+	changes: [
+		"Implemented basic sharing",
+		"Detail boxes separated into view and edit modes",
+		"Spell lists now expand horizontally to make better use of wide screens",
+		"Proficiencies separated from effects and text boxes to be their own assets",
+		"Added favicons and icons for Android/iOS shortcuts",
+		"Changed menu icon from hamburger to dots",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.1",
+	changes: [
+		"Improved sharing functionality",
+		"Sliders no longer jump to a point, they need to be dragged",
+		"Added a list of characters to the side bar",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.2",
+	changes: [
+		"Removed a security vulnerability that allowed users to pretend to be other users",
+		"The character list menu item in the side bar now shows up whether you have characters yet or not",
+		"Stopped the old proficiency text dialog showing up long after it got depreciated",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.3",
+	changes: [
+		"Changed spacing and formatting of the intro text on the front page",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.4",
+	changes: [
+		"Fixed typos in the front page",
+		"Fixed character sheet loading indefinitely if the character does not exist",
+		"Prevented character sheet crashing and loading forever when a incorectly typed ability modifier variable was used in calculations",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.5",
+	changes: [
+		"Moved log-in to its own page and added functionality for forgot passwords, verifying email addresses and general user accounts improvements",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.6",
+	changes: [
+		"Re-wrote how item dragging and dropping works to allow items to be dragged to characters in the side bar, and to containers on characters in other tabs and even other windows.",
+		"Fixed how splitting stacks works. Stacks should now split and merge properly when ctrl-dragged around",
+	],
+});
+
+ChangeLogs.insert({
+	version: "0.2.7",
+	changes: [
+		"Added a quick feedback form",
+		"Improved the formatting of the side-bar's list of characters",
+		"Added a change log",
+		"Fixed the styling and rounding of some of the detail boxes",
+	],
+});

rpg-docs/scss.json

@@ -0,0 +1,5 @@
+{
+	"includePaths": [
+		".meteor/local/build/programs/server/assets/packages/wolves_bourbon"
+	]
+}

rpg-docs/server/publications/changeLog.js

@@ -0,0 +1,3 @@
+Meteor.publish("changeLog", function(){
+	return ChangeLogs.find();
+});

rpg-docs/server/publications/user.js

@@ -0,0 +1,3 @@
+Meteor.publish("user", function(){
+	return Meteor.users.find(this.userId, {fields: {roles: 1}});
+});