Improved spacing on cards

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>

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({

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({

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"

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>
 

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>