Completed the stats tab, conditions not added yet

app/imports/ui/components/ColumnLayout.Story.vue

@@ -0,0 +1,24 @@
+<template lang="html">
+  <column-layout>
+		<div v-for="(height, n) in cardHeights" :key="n">
+			<v-card :height="height"/>
+		</div >
+  </column-layout>
+</template>
+
+<script>
+	import ColumnLayout from "/imports/ui/components/ColumnLayout.vue";
+	import { _ } from "meteor/underscore";
+	export default {
+		dontWrap: true,
+		data(){return{
+			cardHeights: _.times(12, n => `${_.random(100, 500)}px`),
+		}},
+		components: {
+			ColumnLayout,
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/ColumnLayout.vue

@@ -0,0 +1,29 @@
+<template lang="html" functional>
+  <div class="column-layout">
+  	<slot/>
+  </div>
+</template>
+
+<script>
+export default {
+};
+</script>
+
+<style lang="css" scoped>
+	.column-layout {
+		column-count: 4;
+		column-fill: balance;
+		column-gap: 0;
+		column-width: 240px;
+		transform: translateZ(0);
+		padding: 4px;
+	}
+	.column-layout >>> > div {
+		-webkit-backface-visibility: hidden;
+		-webkit-transform: translateX(0);
+		-webkit-column-break-inside: avoid;
+		page-break-inside: avoid;
+		break-inside: avoid;
+		padding: 4px;
+	}
+</style>

app/imports/ui/components/SkillListTile.Story.vue

@@ -17,28 +17,27 @@
 				{
 					name: 'Animal Handling',
 					proficiency: 1,
-					modifier: 4,
+					value: 4,
 				}, {
 					name: 'Deception',
 					proficiency: 0,
-					modifier: -0,
-					advantage: true,
-					disadvantage: true,
+					value: -0,
+					advantage: 0,
 				}, {
 					name: 'Intimidation',
 					proficiency: 2,
-					modifier: 6,
-					advantage: true,
+					value: 6,
+					advantage: 1,
 				}, {
 					name: 'Insight',
 					proficiency: 0.5,
-					modifier: -2,
-					disadvantage: true,
+					value: -2,
+					advantage: -1,
 				}, {
 					name: 'History',
-					conditionalBenefit: "Some cool benefit",
-					fail: true,
-					disadvantage: true,
+					conditionalBenefits: 1,
+					fail: 1,
+					advantage: -1,
 				}
 			]
 		}},

app/imports/ui/components/SkillListTile.vue

@@ -10,9 +10,9 @@
 				<span class="prof-mod">
 					{{displayedModifier}}
 				</span>
-				{{name}}<template v-if="conditionalBenefit">*</template>
-				<v-icon size="20px" v-if="advantage && !disadvantage">arrow_upward</v-icon>
-				<v-icon size="20px" v-if="!advantage && disadvantage">arrow_downward</v-icon>
+				{{name}}<template v-if="conditionalBenefits">*</template>
+				<v-icon size="20px" v-if="advantage > 0">arrow_upward</v-icon>
+				<v-icon size="20px" v-if="advantage < 0">arrow_downward</v-icon>
 			</v-list-tile-title>
 		</v-list-tile-content>
   </v-list-tile>
@@ -24,12 +24,11 @@ import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
 	props: {
 		proficiency: Number,
-		advantage: Boolean,
-		disadvantage: Boolean,
-		fail: Boolean,
-		modifier: Number,
+		advantage: Number,
+		fail: Number,
+		value: Number,
 		name: String,
-		conditionalBenefit: String,
+		conditionalBenefits: Number,
 	},
 	methods: {
 		click(e){
@@ -49,7 +48,7 @@ export default {
 			}
 		},
 		displayedModifier(){
-			let mod = this.modifier;
+			let mod = this.value;
 			if (this.fail){
 				return 'fail';
 			} else {