COLUMNS! no more flexbox shenanigans

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;
 	}
-});
+});