From 193d5eec50e15659163ef4eb34cea18ebb9fb7b5 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 16 Aug 2022 13:40:58 +0200
Subject: [PATCH] Changed slot cards to column layout

---
 app/imports/ui/components/ColumnLayout.vue    |  4 +--
 .../character/characterSheetTabs/BuildTab.vue |  4 +--
 app/imports/ui/creature/slots/SlotCard.vue    |  3 +-
 .../ui/creature/slots/SlotCardsToFill.vue     | 29 +++++++++++--------
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/app/imports/ui/components/ColumnLayout.vue b/app/imports/ui/components/ColumnLayout.vue
index 42e1a9a3..de3e1448 100644
--- a/app/imports/ui/components/ColumnLayout.vue
+++ b/app/imports/ui/components/ColumnLayout.vue
@@ -18,7 +18,7 @@ export default {
 };
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
 	.column-layout {
 		column-count: 12;
 		column-fill: balance;
@@ -35,7 +35,7 @@ export default {
 		transform: translateZ(0);
 		padding: 4px;
 	}
-	.column-layout >>> > div {
+	.column-layout > div, .column-layout > span > div {
     /*
       Table and width set because firefox does not support break-inside: avoid
     */
diff --git a/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue b/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue
index 7b530263..f3da3e0c 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue
@@ -9,9 +9,7 @@
       </v-col>
     </v-row>
     <v-row dense>
-      <v-col cols="12">
-        <slot-cards-to-fill :creature-id="creatureId" />
-      </v-col>
+      <slot-cards-to-fill :creature-id="creatureId" />
     </v-row>
     <v-row dense>
       <v-col
diff --git a/app/imports/ui/creature/slots/SlotCard.vue b/app/imports/ui/creature/slots/SlotCard.vue
index 16f33e1c..73c52813 100644
--- a/app/imports/ui/creature/slots/SlotCard.vue
+++ b/app/imports/ui/creature/slots/SlotCard.vue
@@ -6,7 +6,6 @@
     :style="`border: solid 1px ${accentColor};`"
     hover
     class="slot-card d-flex flex-column"
-    style="max-width: 400px;"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @click="$emit('click')"
@@ -17,7 +16,7 @@
     <v-card-title>
       {{ model.name }}
     </v-card-title>
-    <v-card-text>
+    <v-card-text v-if="model.description">
       <property-description
         text
         :model="model.description"
diff --git a/app/imports/ui/creature/slots/SlotCardsToFill.vue b/app/imports/ui/creature/slots/SlotCardsToFill.vue
index b2137955..2c2d873c 100644
--- a/app/imports/ui/creature/slots/SlotCardsToFill.vue
+++ b/app/imports/ui/creature/slots/SlotCardsToFill.vue
@@ -1,26 +1,30 @@
 <template>
-  <div class="slots-to-fill">
-    <v-slide-y-transition
+  <column-layout wide-columns class="slots-to-fill">
+    <v-fade-transition
       group
       leave-absolute
+      hide-on-leave
     >
-      <slot-card
+      <div
         v-for="slot in slots"
         :key="slot._id"
-        :model="slot"
-        class="ma-1"
-        hover
-        style="display: inline-block !important; transition: all 0.3s !important;"
-        @ignore="ignoreSlot(slot._id)"
-        @click="fillSlot(slot._id)"
-      />
-    </v-slide-y-transition>
-  </div>
+        style="transition: all 0.3s !important"
+      >
+        <slot-card
+          :model="slot"
+          hover
+          @ignore="ignoreSlot(slot._id)"
+          @click="fillSlot(slot._id)"
+        />
+      </div>
+    </v-fade-transition>
+  </column-layout>
 </template>
 
 <script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import SlotCard from '/imports/ui/creature/slots/SlotCard.vue';
+import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js';
 import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
 import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
@@ -28,6 +32,7 @@ import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 export default {
   components: {
     SlotCard,
+    ColumnLayout,
   },
   inject: {
     context: { default: {} }