Improved slot fill dialog UI, abandoned column layout in favour of wrapping flex rows

app/imports/api/creature/computation/afterComputation/embedInlineCalculations.js

@@ -1,5 +1,6 @@
 export default function embedInlineCalculations(string, calculations){
   if (!string) return '';
+  if (!calculations) return string;
   let index = 0;
   return string.replace(/\{([^{}]*)\}/g, () => {
     let comp = calculations && calculations[index++];

app/imports/ui/creature/slots/SlotFillDialog.vue

@@ -23,18 +23,16 @@
     >
       <v-fade-transition mode="out-in">
         <div v-if="libraryNodes && libraryNodes.length">
-          <column-layout
+          <section
-            wide-columns
+            class="layout row wrap justify-between"
-          >
-            <div
-              v-for="node in libraryNodes"
-              :key="node._id"
           >
             <v-card
+              v-for="node in libraryNodes"
+              :key="node._id"
               hover
               ripple
-                class="slot-card"
+              class="slot-card layout column justify-end"
-                :class="{'primary': node._id === (selectedNode && selectedNode._id)}"
+              :class="{'selected': node._id === (selectedNode && selectedNode._id)}"
               :dark="node._id === (selectedNode && selectedNode._id)"
               @click="selectedNode = node"
             >
@@ -43,29 +41,29 @@
                 :src="node.picture"
                 :height="200"
                 contain
+                class="slot-card-image"
               />
               <v-card-title primary-title>
-                  <div>
-                    <h3 class="title mb-0">
                 <tree-node-view
-                        class="mr-2"
+                  class="mr-2 title mb-0"
                   :class="{'theme--dark': node._id === (selectedNode && selectedNode._id)}"
                   :hide-icon="node.picture"
                   :model="node"
                   :color="node.color"
                 />
-                    </h3>
-                    <property-description
-                      :string="model.description"
-                      :calculations="model.descriptionCalculations"
-                      :inactive="model.inactive"
-                    />
-                  </div>
               </v-card-title>
+              <v-card-text
+                v-if="node.description"
+                class="pt-0"
+              >
+                <property-description
+                  class="slot-card-text line-clamp"
+                  :string="node.description"
+                />
+              </v-card-text>
             </v-card>
-            </div>
+          </section>
-          </column-layout>
+          <div class="layout row justify-center align-stretch">
-          <div class="layout row justify-center">
             <v-btn
               v-if="currentLimit < countAll"
               :loading="!$subReady.slotFillers"
@@ -147,14 +145,12 @@ import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import { parse, CompilationContext } from '/imports/parser/parser.js';
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
-import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 import PropertyDescription from '/imports/ui/properties/viewers/shared/PropertyDescription.vue'
 
 export default {
   components: {
 		DialogBase,
-    ColumnLayout,
     TreeNodeView,
     PropertyDescription,
 	},
@@ -272,7 +268,15 @@ export default {
 <style lang="css" scoped>
   .slot-card {
     max-width: 500px;
-  width: 100%;
+    width: 300px;
-  display: inline-block;
+    flex-grow: 1;
+    flex-shrink: 1;
+    margin: 4px;
+  }
+  .slot-card-text.line-clamp {
+    -webkit-line-clamp: 5;
+  }
+  .slot-card.selected {
+    background: #8E1B1B;
   }
 </style>

app/imports/ui/styles/lineClamp.css

@@ -0,0 +1,6 @@
+.line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

app/imports/ui/styles/stylesIndex.js

@@ -2,4 +2,5 @@ import './speedDial.css';
 import './inheritBackgrounds.css';
 import './centeredInputs.css';
 import './largeFormatInputs.css';
-import './fitAvatars.css'
+import './fitAvatars.css';
+import './lineClamp.css';