From 5d6e57b896f539836afb9f101c50b9f83ef47e3c Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 25 Sep 2015 12:49:48 +0200
Subject: [PATCH] Wrap cards in padded divs to make columns behave

---
 rpg-docs/client/style/cards.scss              | 27 +++++-------
 .../views/character/features/features.html    | 44 +++++++++++--------
 .../views/character/inventory/inventory.html  | 12 ++++-
 .../views/character/journal/journal.html      | 24 +++++-----
 .../views/character/persona/persona.html      | 18 +++++---
 .../client/views/character/spells/spells.html | 10 +++--
 .../stats/abilityCards/abilityCards.html      |  4 +-
 .../character/stats/hitDice/hitDice.html      | 12 ++---
 .../client/views/character/stats/stats.html   |  6 +++
 9 files changed, 94 insertions(+), 63 deletions(-)

diff --git a/rpg-docs/client/style/cards.scss b/rpg-docs/client/style/cards.scss
index 344a76a8..1b0503b3 100644
--- a/rpg-docs/client/style/cards.scss
+++ b/rpg-docs/client/style/cards.scss
@@ -3,17 +3,24 @@
 $thickColumnWidth: 304px;
 $thinColumnWidth: 240px;
 
-//Column layouts of cards
+//Column layout
 .column-container {
 	@include column-fill(balance);
-	@include column-gap(8px);
+	@include column-gap(0px);
 	@include column-width($thickColumnWidth);
-	padding: 8px;
+	padding: 4px;
 
 	&.thin-columns {
 		@include column-count(4);
 		@include column-width($thinColumnWidth);
 	}
+	& > div {
+		padding: 4px;
+		//stop divs breaking over multiple columns
+		-webkit-column-break-inside: avoid;
+		page-break-inside: avoid;
+		break-inside: avoid;
+	}
 }
 
 //Cards
@@ -21,20 +28,6 @@ $thinColumnWidth: 240px;
 	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;
diff --git a/rpg-docs/client/views/character/features/features.html b/rpg-docs/client/views/character/features/features.html
index 165bd73a..2eb7b57b 100644
--- a/rpg-docs/client/views/character/features/features.html
+++ b/rpg-docs/client/views/character/features/features.html
@@ -12,8 +12,9 @@
 				{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
 				<!--superiorityDice-->
 				{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
-				
+
 				<!--Attacks-->
+				<div>
 				<paper-shadow class="card">
 					<div class="top white">
 						Attacks
@@ -48,8 +49,10 @@
 						{{/each}}
 					</div>
 				</paper-shadow>
+				</div>
 
 				<!--Proficiencies-->
+				<div>
 				<paper-shadow class="card">
 					<div class="white top">
 						Proficiencies
@@ -75,13 +78,15 @@
 						{{/each}}
 					</div>
 				</paper-shadow>
+				</div>
 
 				<!--features-->
 				{{#each features}}
+					<div>
 					<paper-shadow class="card featureCard"
 								  hero-id="main" {{detailHero}}>
-						<div class="top {{colorClass}} subhead" 
-							 layout horizontal 
+						<div class="top {{colorClass}} subhead"
+							 layout horizontal
 							 hero-id="toolbar" {{detailHero}}>
 							<div flex hero-id="title" {{detailHero}}>
 								{{name}}
@@ -94,7 +99,7 @@
 							{{#if canEnable}}
 								<core-tooltip label="Feature enabled"
 											  position="left">
-									<paper-checkbox class="enabledCheckbox" 
+									<paper-checkbox class="enabledCheckbox"
 													checked={{enabled}}
 													disabled={{#unless canEditCharacter charId}}true{{/unless}}>
 									</paper-checkbox>
@@ -108,29 +113,30 @@
 						{{/if}}
 						{{#if hasUses}}
 							<div layout horizontal center end-justified>
-								<paper-button class="useFeature" 
+								<paper-button class="useFeature"
 											  disabled={{noUsesLeft}}>
 									Use
 								</paper-button>
-								<paper-button class="resetFeature" 
+								<paper-button class="resetFeature"
 											  disabled={{usesFull}}>
 									Reset
 								</paper-button>
 							</div>
 						{{/if}}
 					</paper-shadow>
+					</div>
 				{{/each}}
 			</div>
 			<div class="fab-buffer"></div>
 		</div>
 		{{#if canEditCharacter _id}}
-			<paper-fab id="addFeature" 
-					   class="floatyButton" 
-					   icon="add" 
-					   title="Add" 
-					   role="button" 
-					   tabindex="0" 
-					   aria-label="Add" 
+			<paper-fab id="addFeature"
+					   class="floatyButton"
+					   icon="add"
+					   title="Add"
+					   role="button"
+					   tabindex="0"
+					   aria-label="Add"
 					   hero-id="main"></paper-fab>
 		{{/if}}
 	</div>
@@ -138,15 +144,16 @@
 
 <template name="resource">
 	{{#if characterCalculate "attributeBase" char._id name}}
-		<paper-shadow class="card" 
+	<div>
+		<paper-shadow class="card"
 					  hero-id="main" {{detailHero name char._id}}
 					  layout horizontal>
-			<div class="left {{getColor}} display1 white-text" 
+			<div class="left {{getColor}} display1 white-text"
 				 hero-id="toolbar" {{detailHero name char._id}}
 				 layout horizontal center>
 				<div style="margin-right: 8px;">
-					<paper-icon-button class="resourceUp" 
-									   icon="arrow-drop-up" 
+					<paper-icon-button class="resourceUp"
+									   icon="arrow-drop-up"
 									   disabled={{cantIncrement}}>
 					</paper-icon-button>
 					<paper-icon-button class="resourceDown"
@@ -157,10 +164,11 @@
 				<div>{{characterCalculate "attributeValue" char._id name}}</div>
 				<!--<div>/{{char.attributeBase name}}</div>-->
 			</div>
-			<div class="right clickable" 
+			<div class="right clickable"
 				 flex layout horizontal center>
 				{{title}}
 			</div>
 		</paper-shadow>
+	</div>
 	{{/if}}
 </template>
diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html
index ff90d82c..55647237 100644
--- a/rpg-docs/client/views/character/inventory/inventory.html
+++ b/rpg-docs/client/views/character/inventory/inventory.html
@@ -3,6 +3,7 @@
 		<div id="inventory" class="scroll-y" fit>
 			<div class="column-container">
 				<!--Net Worth-->
+				<div>
 				<paper-shadow class="card">
 					<div class="white top" layout horizontal center>
 						<div class="subhead" flex>
@@ -13,7 +14,9 @@
 						</div>
 					</div>
 				</paper-shadow>
+				</div>
 				<!--Weight Carried-->
+				<div>
 				<paper-shadow class="card"
 							  hero-id="main" {{detailHero "weightCarried" _id}}>
 					<div class="top green white-text weightCarried"
@@ -48,7 +51,9 @@
 					</div>
 					{{/if}}
 				</paper-shadow>
+				</div>
 				<!--Equipment-->
+				<div>
 				<paper-shadow class="card equipmentContainer">
 					<div class="white top" layout horizontal center>
 						<div class="subhead" flex>
@@ -76,7 +81,9 @@
 						{{/each}}
 					</div>
 				</paper-shadow>
+				</div>
 				<!--Carried Items-->
+				<div>
 				<paper-shadow class="card carriedContainer">
 					<div class="white top" layout horizontal center>
 						<div class="subhead" flex>
@@ -95,8 +102,10 @@
 						{{/each}}
 					</div>
 				</paper-shadow>
+				</div>
 				{{#each containers}}
-					<paper-shadow class="card itemContainer" 
+					<div>
+					<paper-shadow class="card itemContainer"
 								  hero-id="main" {{detailHero}}>
 						<div class="top {{colorClass}}"
 							 hero-id="toolbar" {{detailHero}}
@@ -124,6 +133,7 @@
 							{{/each}}
 						</div>
 					</paper-shadow>
+					</div>
 				{{/each}}
 			</div>
 			<div class="fab-buffer"></div>
diff --git a/rpg-docs/client/views/character/journal/journal.html b/rpg-docs/client/views/character/journal/journal.html
index 2f69fb6e..7a1fe7bf 100644
--- a/rpg-docs/client/views/character/journal/journal.html
+++ b/rpg-docs/client/views/character/journal/journal.html
@@ -3,7 +3,7 @@
 		<div id="journal" class="scroll-y" fit>
 			<div class="column-container">
 				<!--Experience Table-->
-				<paper-shadow class="card experiencesCard"
+				<div><paper-shadow class="card experiencesCard"
 							  hero-id="main" {{detailHero}}>
 					<div class="top white subhead"
 						 hero-id="toolbar" {{detailHero}}
@@ -37,9 +37,9 @@
 							</paper-button>
 						</div>
 					{{/if}}
-				</paper-shadow>
+				</paper-shadow></div>
 				<!--Class Table-->
-				<paper-shadow class="card"
+				<div><paper-shadow class="card"
 							  hero-id="main" {{detailHero}}>
 					<div class="white top"
 						 hero-id="toolbar" {{detailHero}}
@@ -78,9 +78,10 @@
 							</div>
 						{{/each}}
 					</div>
-				</paper-shadow>
+				</paper-shadow></div>
 				<!--Notes-->
 				{{#each notes}}
+				<div>
 					<paper-shadow class="card"  hero-id="main" {{detailHero}}>
 						<div class="top {{colorClass}} noteTop subhead"
 							 hero-id="toolbar" {{detailHero}}
@@ -89,18 +90,19 @@
 						</div>
 						<div class="bottom">{{#markdown}}{{description}}{{/markdown}}</div>
 					</paper-shadow>
+				</div>
 				{{/each}}
 			</div>
 			<div class="fab-buffer"></div>
 		</div>
 	</div>
 	{{#if canEditCharacter _id}}
-	<paper-fab id="addNote" 
-				   class="floatyButton" 
-				   icon="add" 
-				   title="Add" 
-				   role="button" 
-				   tabindex="0" 
+	<paper-fab id="addNote"
+				   class="floatyButton"
+				   icon="add"
+				   title="Add"
+				   role="button"
+				   tabindex="0"
 				   hero-id="main"></paper-fab>
 	{{/if}}
-</template>
\ No newline at end of file
+</template>
diff --git a/rpg-docs/client/views/character/persona/persona.html b/rpg-docs/client/views/character/persona/persona.html
index b1762e50..748e9051 100644
--- a/rpg-docs/client/views/character/persona/persona.html
+++ b/rpg-docs/client/views/character/persona/persona.html
@@ -3,6 +3,7 @@
 		<div id="persona" class="scroll-y" fit>
 			<div class="column-container">
 				{{#with characterDetails}}
+				<div>
 					<paper-shadow class="card"
 								  hero-id="main" {{detailHero "details" _id}}>
 						{{#unless picture}}
@@ -32,13 +33,15 @@
 							</div>
 						</div>
 					</paper-shadow>
+				</div>
 				{{/with}}
-				{{> containerCard characterField "description" "Description"}}
-				{{> containerCard characterField "personality" "Personality Traits"}}
-				{{> containerCard characterField "ideals" "Ideals"}}
-				{{> containerCard characterField "bonds" "Bonds"}}
-				{{> containerCard characterField "flaws" "Flaws"}}
-				{{> containerCard characterField "backstory" "Background"}}
+				<div>{{> containerCard characterField "description" "Description"}}</div>
+				<div>{{> containerCard characterField "personality" "Personality Traits"}}</div>
+				<div>{{> containerCard characterField "ideals" "Ideals"}}</div>
+				<div>{{> containerCard characterField "bonds" "Bonds"}}</div>
+				<div>{{> containerCard characterField "flaws" "Flaws"}}</div>
+				<div>{{> containerCard characterField "backstory" "Background"}}</div>
+				<div>
 				<paper-shadow class="card">
                     <div class="white top subhead">
                       Languages
@@ -49,6 +52,7 @@
 						{{/each}}
 					</div>
 				</paper-shadow>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -70,4 +74,4 @@
 		</div>
 		<div class="bottom">{{#markdown}}{{> UI.contentBlock}}{{/markdown}}</div>
 	</paper-shadow>
-</template>
\ No newline at end of file
+</template>
diff --git a/rpg-docs/client/views/character/spells/spells.html b/rpg-docs/client/views/character/spells/spells.html
index f6d68b4f..c657ae5e 100644
--- a/rpg-docs/client/views/character/spells/spells.html
+++ b/rpg-docs/client/views/character/spells/spells.html
@@ -1,9 +1,10 @@
 <template name="spells">
 	<div fit>
 		<div id="spells" class="scroll-y" fit>
-			<div style="padding: 4px;" 
+			<div style="padding: 4px;"
 				 layout horizontal start wrap>
 				{{#if hasSlots}}
+				<div>
 					<paper-shadow class="card"
 								  style="margin: 4px;"
 								  hero-id="main" {{detailHero}}>
@@ -33,8 +34,10 @@
 							{{/if}}{{/each}}
 						</div>
 					</paper-shadow>
+				</div>
 				{{/if}}
 				{{#each spellLists}}
+				<div>
 					<paper-shadow class="card spellList" flex
 								  hero-id="main" {{detailHero}}
 								  style="margin: 4px;">
@@ -92,7 +95,7 @@
 												<div class="tall spell item"
 													 hero-id="main" {{detailHero}}
 													 layout horizontal center>
-													<core-icon icon="social:whatshot" 
+													<core-icon icon="social:whatshot"
 															   style="color: {{hexColor color}};
 																	  margin-right: 16px;"
 															   ></core-icon>
@@ -123,6 +126,7 @@
 							{{/each}}
 						</div>
 					</paper-shadow>
+				</div>
 				{{/each}}
 			</div>
 			<div class="fab-buffer"></div>
@@ -144,4 +148,4 @@
 			</core-tooltip>
 		{{/fabMenu}}
 	{{/if}}
-</template>
\ No newline at end of file
+</template>
diff --git a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
index d044bc55..f82ffe0c 100644
--- a/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
+++ b/rpg-docs/client/views/character/stats/abilityCards/abilityCards.html
@@ -1,5 +1,6 @@
 <template name="abilityMiniCard">
-	<paper-shadow class="card abilityMiniCard clickable" 
+	<div>
+	<paper-shadow class="card abilityMiniCard clickable"
 				  hero-id="main" {{detailHero ability ../_id}}
 				  layout horizontal>
 		<div class="left white-text {{color}}"
@@ -11,4 +12,5 @@
 			{{title}}
 		</div>
 	</paper-shadow>
+	</div>
 </template>
diff --git a/rpg-docs/client/views/character/stats/hitDice/hitDice.html b/rpg-docs/client/views/character/stats/hitDice/hitDice.html
index 0cbfbab8..7e41d789 100644
--- a/rpg-docs/client/views/character/stats/hitDice/hitDice.html
+++ b/rpg-docs/client/views/character/stats/hitDice/hitDice.html
@@ -1,14 +1,15 @@
 <template name="hitDice">
 	{{#if characterCalculate "attributeBase" ../_id name}}
-		<paper-shadow class="card hit-dice" hero-id="main" 
-					  {{detailHero name ../_id}} 
+		<div>
+		<paper-shadow class="card hit-dice" hero-id="main"
+					  {{detailHero name ../_id}}
 					  layout horizontal>
-			<div class="left green display1 white-text" 
+			<div class="left green display1 white-text"
 				 hero-id="toolbar" {{detailHero name ../_id}}
 				 layout horizontal>
 				<div>
-					<paper-icon-button class="resourceUp" 
-									   icon="arrow-drop-up" 
+					<paper-icon-button class="resourceUp"
+									   icon="arrow-drop-up"
 									   disabled={{cantIncrement}}>
 					</paper-icon-button>
 					<paper-icon-button class="resourceDown"
@@ -29,5 +30,6 @@
 				Hit Dice
 			</div>
 		</paper-shadow>
+		</div>
 	{{/if}}
 </template>
diff --git a/rpg-docs/client/views/character/stats/stats.html b/rpg-docs/client/views/character/stats/stats.html
index afff375b..6aeff4c7 100644
--- a/rpg-docs/client/views/character/stats/stats.html
+++ b/rpg-docs/client/views/character/stats/stats.html
@@ -27,6 +27,7 @@
 			{{>hitDice name="d10HitDice" diceNum="10" char=this}}
 			{{>hitDice name="d12HitDice" diceNum="12" char=this}}
 			<!--Saving Throws-->
+			<div>
 			<paper-shadow class="card">
 				<div class="top white subhead">
 					Saving Throws
@@ -40,7 +41,9 @@
 					{{> skillRow name="Charisma" skill="charismaSave"}}
 				</div>
 			</paper-shadow>
+			</div>
 			<!--Skills-->
+			<div>
 			<paper-shadow class="card">
 				<div class="top white subhead">
 					Skills
@@ -66,11 +69,13 @@
 					{{> skillRow name="Survival" skill="survival"}}
 				</div>
 			</paper-shadow>
+			</div>
 		</div>
 	</div>
 </template>
 
 <template name="statCard">
+	<div>
 	<paper-shadow class="card statCard clickable" hero-id="main" {{detailHero stat ../_id}} layout horizontal>
 		<div class="left display1 white-text {{color}}"
 			 hero-id="toolbar" {{detailHero stat ../_id}}>
@@ -84,4 +89,5 @@
 			{{name}}
 		</div>
 	</paper-shadow>
+	</div>
 </template>