From 59fa5bcd8c12494e4b6a7bb7b82249773c123fc8 Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Fri, 15 May 2020 13:54:43 +0200
Subject: [PATCH] Improved spacing on cards

---
 app/imports/ui/components/ToolbarCard.vue     | 36 ++++---
 .../characterSheetTabs/InventoryTab.vue       | 76 ++++++++-------
 .../characterSheetTabs/SpellsTab.vue          | 93 +++++++++----------
 .../character/characterSheetTabs/TreeTab.vue  | 31 ++++---
 .../components/inventory/ContainerCard.vue    | 16 ++--
 .../components/spells/SpellListCard.vue       | 16 ++--
 6 files changed, 140 insertions(+), 128 deletions(-)

diff --git a/app/imports/ui/components/ToolbarCard.vue b/app/imports/ui/components/ToolbarCard.vue
index 8497d32b..2fe102d7 100644
--- a/app/imports/ui/components/ToolbarCard.vue
+++ b/app/imports/ui/components/ToolbarCard.vue
@@ -1,18 +1,21 @@
 <template lang="html">
-  <v-card :hover="hasClickListener" @click="$emit('click')">
-  	<v-toolbar
-			flat
-			:style="`transform: none; ${hasToolbarClickListener ? 'cursor: pointer;' : ''}`"
-			:color="color"
-			:dark="isDark"
-			@click="$emit('toolbarclick')"
-		>
-  		<slot name="toolbar"/>
-  	</v-toolbar>
-		<div
-		>
-			<slot/>
-		</div>
+  <v-card
+    :hover="hasClickListener"
+    class="toolbar-card"
+    @click="$emit('click')"
+  >
+    <v-toolbar
+      flat
+      :style="`transform: none; ${hasToolbarClickListener ? 'cursor: pointer;' : ''}`"
+      :color="color"
+      :dark="isDark"
+      @click="$emit('toolbarclick')"
+    >
+      <slot name="toolbar" />
+    </v-toolbar>
+    <div>
+      <slot />
+    </div>
   </v-card>
 </template>
 
@@ -41,5 +44,8 @@
 	};
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
+.toolbar-card .v-toolbar__title {
+  font-size: 14px;
+}
 </style>
diff --git a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
index 5b11c98f..8a37079e 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue
@@ -1,14 +1,15 @@
 <template lang="html">
-	<div class="inventory">
-		<column-layout>
-			<v-card>
-				<v-switch
-					v-model="organize"
-					label="Organize"
-					class="justify-end"
-					style="margin: 16px 24px -16px;"
-				/>
-				<!-- Equipping things isn't implemented yet
+  <div class="inventory">
+    <column-layout>
+      <div>
+        <v-card>
+          <v-card-text>
+            <v-switch
+              v-model="organize"
+              label="Organize"
+              class="justify-end"
+            />
+            <!-- Equipping things isn't implemented yet
 				<creature-properties-tree
 					:root="{collection: 'creatures', id: creatureId}"
 					:filter="{
@@ -22,26 +23,31 @@
 				/>
 				<v-divider/>
 				-->
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: {$ne: true},
-						type: {$in: ['item']},
-						'ancestors.id': {$nin: containerIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="inventory"
-				/>
-			</v-card>
-			<div v-for="container in containersWithoutAncestorContainers" :key="container._id">
-				<container-card
-					:model="container"
-					:organize="organize"
-				/>
-			</div>
-		</column-layout>
-	</div>
+            <creature-properties-tree
+              :root="{collection: 'creatures', id: creatureId}"
+              :filter="{
+                equipped: {$ne: true},
+                type: {$in: ['item']},
+                'ancestors.id': {$nin: containerIds}
+              }"
+              :organize="organize"
+              group="inventory"
+              @selected="e => clickProperty(e)"
+            />
+          </v-card-text>
+        </v-card>
+      </div>
+      <div
+        v-for="container in containersWithoutAncestorContainers"
+        :key="container._id"
+      >
+        <container-card
+          :model="container"
+          :organize="organize"
+        />
+      </div>
+    </column-layout>
+  </div>
 </template>
 
 <script>
@@ -51,17 +57,17 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 import ContainerCard from '/imports/ui/properties/components/inventory/ContainerCard.vue';
 
 export default {
+	components: {
+		ColumnLayout,
+		CreaturePropertiesTree,
+		ContainerCard,
+	},
 	props: {
 		creatureId: String,
 	},
 	data(){ return {
 		organize: false,
 	}},
-	components: {
-		ColumnLayout,
-		CreaturePropertiesTree,
-		ContainerCard,
-	},
 	meteor: {
 		containers(){
 			return CreatureProperties.find({
diff --git a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
index 413a9c06..b692b88b 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue
@@ -1,47 +1,39 @@
 <template lang="html">
-	<div class="spells">
-		<column-layout>
-			<v-card>
-				<v-switch
-					v-model="organize"
-					label="Organize"
-					class="justify-end"
-					style="margin: 16px 24px -16px;"
-				/>
-				<!-- Equipping things isn't implemented yet
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: true,
-						type: 'spell',
-						'ancestors.id': {$nin: spellListIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="spells"
-				/>
-				<v-divider/>
-				-->
-				<creature-properties-tree
-					:root="{collection: 'creatures', id: creatureId}"
-					:filter="{
-						equipped: {$ne: true},
-						type: 'spell',
-						'ancestors.id': {$nin: spellListIds}
-					}"
-					@selected="e => clickProperty(e)"
-					:organize="organize"
-					group="spells"
-				/>
-			</v-card>
-			<div v-for="spellList in spellListsWithoutAncestorSpellLists" :key="spellList._id">
-				<spellList-card
-					:model="spellList"
-					:organize="organize"
-				/>
-			</div>
-		</column-layout>
-	</div>
+  <div class="spells">
+    <column-layout>
+      <div>
+        <v-card>
+          <v-card-text>
+            <v-switch
+              v-model="organize"
+              label="Organize"
+              class="justify-end"
+            />
+            <creature-properties-tree
+              :root="{collection: 'creatures', id: creatureId}"
+              :filter="{
+                equipped: {$ne: true},
+                type: 'spell',
+                'ancestors.id': {$nin: spellListIds}
+              }"
+              :organize="organize"
+              group="spells"
+              @selected="e => clickProperty(e)"
+            />
+          </v-card-text>
+        </v-card>
+      </div>
+      <div
+        v-for="spellList in spellListsWithoutAncestorSpellLists"
+        :key="spellList._id"
+      >
+        <spellList-card
+          :model="spellList"
+          :organize="organize"
+        />
+      </div>
+    </column-layout>
+  </div>
 </template>
 
 <script>
@@ -51,17 +43,20 @@ import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/Crea
 import SpellListCard from '/imports/ui/properties/components/spells/SpellListCard.vue';
 
 export default {
-	props: {
-		creatureId: String,
-	},
-	data(){ return {
-		organize: false,
-	}},
 	components: {
 		ColumnLayout,
 		CreaturePropertiesTree,
 		SpellListCard,
 	},
+	props: {
+		creatureId: {
+      type: String,
+      required: true,
+    }
+	},
+	data(){ return {
+		organize: false,
+	}},
 	meteor: {
 		spellLists(){
 			return CreatureProperties.find({
diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
index 69d3d1c9..636d4532 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -9,7 +9,7 @@
       data-id="creature-tree-card"
     >
       <div
-        class="layout column"
+        class="layout column justify-start"
         :style="
           $vuetify.breakpoint.mdAndUp &&
             'width: 320px; flex-shrink: 0; flex-grow: 0;'
@@ -27,22 +27,23 @@
             :disabled="organizeDisabled"
             style="flex-grow: 0; height: 32px;"
           />
+          <v-combobox
+            ref="searchBox"
+            slot="extension"
+            v-model="filterString"
+            :items="filterOptions"
+            prepend-inner-icon="search"
+            class="mx-4"
+            hide-no-data
+            hide-selected
+            multiple
+            clearable
+            small-chips
+            deletable-chips
+          />
         </v-toolbar>
-        <v-combobox
-          ref="searchBox"
-          v-model="filterString"
-          :items="filterOptions"
-          prepend-inner-icon="search"
-          class="mx-4"
-          hide-no-data
-          hide-selected
-          multiple
-          clearable
-          small-chips
-          deletable-chips
-        />
         <creature-properties-tree
-          class="pt-0 flex"
+          class="pt-2 flex"
           style="overflow-y: auto;"
           :root="{collection: 'creatures', id: creatureId}"
           :organize="organize"
diff --git a/app/imports/ui/properties/components/inventory/ContainerCard.vue b/app/imports/ui/properties/components/inventory/ContainerCard.vue
index d14f8f46..d4831bc5 100644
--- a/app/imports/ui/properties/components/inventory/ContainerCard.vue
+++ b/app/imports/ui/properties/components/inventory/ContainerCard.vue
@@ -10,13 +10,15 @@
       </v-toolbar-title>
       <v-spacer />
     </template>
-    <creature-properties-tree
-      :root="{collection: 'creatureProperties', id: model._id}"
-      :filter="{type: {$in: ['container', 'item', 'folder']}}"
-      :organize="organize"
-      group="inventory"
-      @selected="e => clickProperty(e)"
-    />
+    <v-card-text>
+      <creature-properties-tree
+        :root="{collection: 'creatureProperties', id: model._id}"
+        :filter="{type: {$in: ['container', 'item', 'folder']}}"
+        :organize="organize"
+        group="inventory"
+        @selected="e => clickProperty(e)"
+      />
+    </v-card-text>
   </toolbar-card>
 </template>
 
diff --git a/app/imports/ui/properties/components/spells/SpellListCard.vue b/app/imports/ui/properties/components/spells/SpellListCard.vue
index 299ea2d6..b3a3a9c4 100644
--- a/app/imports/ui/properties/components/spells/SpellListCard.vue
+++ b/app/imports/ui/properties/components/spells/SpellListCard.vue
@@ -10,13 +10,15 @@
       </v-toolbar-title>
       <v-spacer />
     </template>
-    <creature-properties-tree
-      :root="{collection: 'creatureProperties', id: model._id}"
-      :filter="{type: {$in: ['spellList', 'spell', 'folder']}}"
-      :organize="organize"
-      group="spells"
-      @selected="e => clickProperty(e)"
-    />
+    <v-card-text>
+      <creature-properties-tree
+        :root="{collection: 'creatureProperties', id: model._id}"
+        :filter="{type: {$in: ['spellList', 'spell', 'folder']}}"
+        :organize="organize"
+        group="spells"
+        @selected="e => clickProperty(e)"
+      />
+    </v-card-text>
   </toolbar-card>
 </template>