COLUMNS! no more flexbox shenanigans

rpg-docs/Model/Character/Characters.js

@@ -188,7 +188,7 @@ Schemas.Character = new SimpleSchema({
 	owner: { type: String, regEx: SimpleSchema.RegEx.Id },
 	readers: { type: [String], regEx: SimpleSchema.RegEx.Id },
 	writers: { type: [String], regEx: SimpleSchema.RegEx.Id },
-	color:   {type: String, allowedValues: _.keys(colorOptions), defaultValue: "grey"}
+	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
 	//TODO add per-character settings
 });
 

rpg-docs/Model/Character/Features.js

@@ -7,7 +7,7 @@ Schemas.Feature = new SimpleSchema({
 	uses:       {type: String, optional: true, trim: false},
 	used:       {type: Number, defaultValue: 0},
 	reset:      {type: String, allowedValues: ["manual", "longRest", "shortRest"], defaultValue: "manual"},
-	color:      {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"}
+	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
 });
 
 Features.attachSchema(Schemas.Feature);

rpg-docs/Model/Character/SpellLists.js

@@ -7,7 +7,7 @@ Schemas.SpellLists = new SimpleSchema({
 	saveDC:      {type: String, optional: true},
 	attackBonus: {type: String, optional: true},
 	maxPrepared: {type: String, optional: true},
-	color:       {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"},
+	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"},
 	"settings.showUnprepared": {type: Boolean, defaultValue: true},
 });
 

rpg-docs/Model/Character/Spells.js

@@ -16,7 +16,7 @@ Schemas.Spell = new SimpleSchema({
 	ritual:		 {type: Boolean, defaultValue: false},
 	level:		 {type: Number, defaultValue: 0},
 	school:      {type: String, defaultValue: "Abjuration", allowedValues: magicSchools},
-	color:       {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"}
+	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
 });
 
 Spells.attachSchema(Schemas.Spell);

rpg-docs/Model/Inventory/Containers.js

@@ -9,7 +9,7 @@ Schemas.Container = new SimpleSchema({
 	weight:		{type: Number, min: 0, defaultValue: 0, decimal: true},
 	value:		{type: Number, min: 0, defaultValue: 0, decimal: true},
 	description:{type: String, optional: true},
-	color:      {type: String, allowedValues: _.keys(colorOptions), defaultValue: "brown"}
+	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
 });
 
 Containers.attachSchema(Schemas.Container);

rpg-docs/Model/Inventory/Items.js

@@ -15,7 +15,7 @@ Schemas.Item = new SimpleSchema({
 		allowedValues: ["none", "head", "armor", "arms", "hands", "held", "feet"]
 	},
 	equipped: 	{type: Boolean, defaultValue: false},
-	color:       {type: String, allowedValues: _.keys(colorOptions), defaultValue: "green"}
+	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
 });
 
 Items.attachSchema(Schemas.Item);

rpg-docs/client/globalHelpers/colorClass.js

@@ -3,5 +3,5 @@ Template.registerHelper("colorClass", function(color){
 });
 
 Template.registerHelper("hexColor", function(color){
-	return colorOptions[color].color;
+	return getHexColor(color);
 });

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

@@ -58,7 +58,17 @@ paper-button {
 }
 
 .card {
-	margin: 4px;
+	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;
+	
+	width: 100%;
+	
 	padding: 16px;
 	font-size: 14px;
 	border-radius: 2px;
@@ -66,7 +76,7 @@ paper-button {
 }
 
 .card.double {
-	width: 332px;
+	padding: 0;
 }
 
 .card paper-button {

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

@@ -1,38 +1,3 @@
-#stats {
-	padding: 4px;
-}
-
-#stats, #stats .abilityFlex, #stats .statsFlex{
-	display: flex !important;
-	justify-content: center;
-	align-items: stretch;
-	flex-wrap: wrap;
-}
-
-#stats .card {
-	flex-grow: 1;
-	max-width: 480px;
-}
-
-#stats .abilityFlex{
-	flex-basis: 642px;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
-
-#stats .statsFlex{
-	min-width: 152px;
-	flex-basis: 0px;
-	flex-grow: 1;
-}
-
-.attribute.card, .skill.card {
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	text-align: center;
-}
-
 .card-top {
 	flex-grow: 1;
 	padding: 16px;

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

@@ -1,5 +1,7 @@
 <template name="stats">
-	<div id="stats" class="scroll-y" fit>
-		{{> abilityCards}}
+	<div class="scroll-y" fit>
+		<div id="stats" class="containers" >
+			{{> abilityCards}}
+		</div>
 	</div>
 </template>

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

@@ -1,6 +1,6 @@
 Template.features.helpers({
 	features: function(){
-		var features = Features.find({charId: this._id}, {sort: {name: 1}});
+		var features = Features.find({charId: this._id}, {sort: {color: 1, name: 1}});
 		return features;
 	},
 	hasUses: function(){

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

@@ -1,12 +1,15 @@
 .containers {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 4px;
+	-webkit-column-width: 300px;
+	   -moz-column-width: 300px;
+	        column-width: 300px;
+	-webkit-column-gap: 8px;
+	   -moz-column-gap: 8px;
+	        column-gap: 8px;
+	padding: 8px;
 }
 
 .container {
-	width: 332px;
-	flex-grow: 1;
+
 }
 
 .containerTop {

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

@@ -45,8 +45,8 @@
 						</div>
 					</paper-shadow>
 				{{/each}}
-				<div class="fab-buffer"></div>
 			</div>
+			<div class="fab-buffer"></div>
 		</div>
 		<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">
 			<paper-fab-menu-item id="addItem" icon="note-add" color="#d23f31" tooltip="Item"></paper-fab-menu-item>

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

@@ -4,10 +4,10 @@ Template.inventory.created = function(){
 
 Template.inventory.helpers({
 	containers: function(){
-		return Containers.find({charId: this._id}, {sort: {name: 1}})
+		return Containers.find({charId: this._id}, {sort: {color: 1, name: 1}})
 	},
 	items: function(charId, containerId){
-		return Items.find({charId: charId, equipped: false, container: containerId })
+		return Items.find({charId: charId, equipped: false, container: containerId }, {sort: {color: 1, name: 1}})
 	},
 	armor: function(){
 		return Items.findOne({ charId: this._id, equipped: true, equipmentSlot: "armor" })

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

@@ -1,10 +1,10 @@
 var colorMap = {
-	description: "indigo",
-	personality: "blue",
-	ideals: "light-blue",
-	bonds: "cyan",
-	flaws: "teal",
-	backstory: "green"
+	description: "e",
+	personality: "f",
+	ideals: "g",
+	bonds: "h",
+	flaws: "i",
+	backstory: "j"
 }
 
 Template.persona.helpers({
@@ -12,7 +12,7 @@ Template.persona.helpers({
 		var char = Characters.findOne(this._id, {fields: {name: 1, gender: 1, alignment: 1, race:1}})
 		char._id += "details";
 		char.title = char.name;
-		char.color = "deep-purple";
+		char.color = "d";
 		return char;
 	},
 	characterField: function(field, title){

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

@@ -53,8 +53,8 @@
 						</div>
 					</paper-shadow>
 				{{/each}}
-				<div class="fab-buffer"></div>
 			</div>
+			<div class="fab-buffer"></div>
 		</div>
 	</div>
 	<paper-fab-menu id="inventoryAddMenu" icon="add" closeIcon="close" duration="0.3">

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

@@ -13,7 +13,7 @@ var spellLevels = [
 
 Template.spells.helpers({
 	spellLists: function(){
-		return SpellLists.find({charId: this._id});
+		return SpellLists.find({charId: this._id}, {sort: {color: 1, name: 1}});
 	},
 	spellCount: function(list, charId){
 		if(list.settings.showUnprepared){
@@ -25,7 +25,7 @@ Template.spells.helpers({
 		}
 	},
 	spells: function(listId, charId){
-		return Spells.find( {charId: charId, listId: listId, level: this.level} );
+		return Spells.find( {charId: charId, listId: listId, level: this.level}, {sort: {color: 1, name: 1}} );
 	},
 	levels: function(){
 		return spellLevels;

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

@@ -2,8 +2,8 @@
 	<paper-dropdown-menu class="colorDropdown {{colorClass color}}" label="Color">
 		<paper-dropdown layered class="dropdown">
 			<core-menu class="menu"  selected={{color}}>
-				{{#each colorKeys}}
-					<paper-item name={{this}} class="containerMenuItem {{colorClass this}}">{{this}}</paper-item>
+				{{#each colors}}
+					<paper-item name={{key}} class="containerMenuItem {{colorClass key}}">{{className}}</paper-item>
 				{{/each}}
 			</core-menu>
 		</paper-dropdown>

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

@@ -1,5 +1,5 @@
 Template.colorDropdown.helpers({
-	colorKeys: function(){
-		return _.keys(colorOptions);
+	colors: function(){
+		return colorOptions;
 	}
-});
+});

rpg-docs/lib/constants/colorOptions.js

@@ -1,33 +1,51 @@
-colorOptions = {
-	"red": {whiteText: true, color: "#F44336"},
-	"pink": {whiteText: true, color: "#E91E63"},
-	"purple": {whiteText: true, color: "#9C27B0"},
-	"deep-purple": {whiteText: true, color: "#673AB7"},
-	"indigo": {whiteText: true, color: "#3F51B5"},
-	"blue": {whiteText: true, color: "#2196F3"},
-	"light-blue": {whiteText: true, color: "#03A9F4"},
-	"cyan": {whiteText: true, color: "#00BCD4"},
-	"teal": {whiteText: true, color: "#009688"},
-	"green": {whiteText: true, color: "#4CAF50"},
-	"light-green": {whiteText: true, color: "#8BC34A"},
-	"lime": {whiteText: false, color: "#CDDC39"},
-	"yellow": {whiteText: false, color: "#FFEB3B"},
-	"amber": {whiteText: false, color: "#FFC107"},
-	"orange": {whiteText: false, color: "#FF9800"},
-	"deep-orange": {whiteText: true, color: "#FF5722"},
-	"grey": {whiteText: true, color: "#9E9E9E"}, //spec says no white text
-	//"blue-grey": {whiteText: true, color: "#607D8B"},
-	"brown": {whiteText: true, color: "#795548"},
-	"black": {whiteText: true, color: "#000000"},
-};
+colorOptions = [
+	{key: "a", className: "red", whiteText: true, color: "#F44336"},
+	{key: "b", className: "pink", whiteText: true, color: "#E91E63"},
+	{key: "c", className: "purple", whiteText: true, color: "#9C27B0"},
+	{key: "d", className: "deep-purple", whiteText: true, color: "#673AB7"},
+	{key: "e", className: "indigo", whiteText: true, color: "#3F51B5"},
+	{key: "f", className: "blue", whiteText: true, color: "#2196F3"},
+	{key: "g", className: "light-blue", whiteText: true, color: "#03A9F4"},
+	{key: "h", className: "cyan", whiteText: true, color: "#00BCD4"},
+	{key: "i", className: "teal", whiteText: true, color: "#009688"},
+	{key: "j", className: "green", whiteText: true, color: "#4CAF50"},
+	{key: "k", className: "light-green", whiteText: true, color: "#8BC34A"},
+	{key: "l", className: "lime", whiteText: false, color: "#CDDC39"},
+	{key: "m", className: "yellow", whiteText: false, color: "#FFEB3B"},
+	{key: "n", className: "amber", whiteText: false, color: "#FFC107"},
+	{key: "o", className: "orange", whiteText: false, color: "#FF9800"},
+	{key: "p", className: "deep-orange", whiteText: true, color: "#FF5722"},
+	{key: "q", className: "grey", whiteText: true, color: "#9E9E9E"}, //spec says no white text
+	//{key: "r", className: "blue-grey", whiteText: true, color: "#607D8B"},
+	{key: "s", className: "brown", whiteText: true, color: "#795548"},
+	{key: "t", className: "black", whiteText: true, color: "#000000"},
+];
+
+var colorOptionMap = _.pluck(colorOptions, "key");
 
 getColorClass = function(key){
 	if(!key){
-		return "brown white-text"
+		return "brown white-text";
 	}
-	var colorClass = key;
-	if(colorOptions[key].whiteText){
+	var index = _.indexOf(colorOptionMap, key);
+	if(index == -1){
+		return "brown white-text";
+	}
+	var option = colorOptions[index];
+	var colorClass = option.className;
+	if(option.whiteText){
 		colorClass += " white-text";
 	}
 	return colorClass;
 }
+
+getHexColor = function(key) {
+	if(!key){
+		return "#000";
+	}
+	var index = _.indexOf(colorOptionMap, key);
+	if(index === -1){
+		return "#000";
+	}
+	return colorOptions[index].color;
+}