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,49 +23,47 @@
     >
       <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-card
               v-for="node in libraryNodes"
               :key="node._id"
+              hover
+              ripple
+              class="slot-card layout column justify-end"
+              :class="{'selected': node._id === (selectedNode && selectedNode._id)}"
+              :dark="node._id === (selectedNode && selectedNode._id)"
+              @click="selectedNode = node"
             >
-              <v-card
+              <v-img
-                hover
+                v-if="node.picture"
-                ripple
+                :src="node.picture"
-                class="slot-card"
+                :height="200"
-                :class="{'primary': node._id === (selectedNode && selectedNode._id)}"
+                contain
-                :dark="node._id === (selectedNode && selectedNode._id)"
+                class="slot-card-image"
-                @click="selectedNode = node"
+              />
-              >
+              <v-card-title primary-title>
-                <v-img
+                <tree-node-view
-                  v-if="node.picture"
+                  class="mr-2 title mb-0"
-                  :src="node.picture"
+                  :class="{'theme--dark': node._id === (selectedNode && selectedNode._id)}"
-                  :height="200"
+                  :hide-icon="node.picture"
-                  contain
+                  :model="node"
+                  :color="node.color"
                 />
-                <v-card-title primary-title>
+              </v-card-title>
-                  <div>
+              <v-card-text
-                    <h3 class="title mb-0">
+                v-if="node.description"
-                      <tree-node-view
+                class="pt-0"
-                        class="mr-2"
+              >
-                        :class="{'theme--dark': node._id === (selectedNode && selectedNode._id)}"
+                <property-description
-                        :hide-icon="node.picture"
+                  class="slot-card-text line-clamp"
-                        :model="node"
+                  :string="node.description"
-                        :color="node.color"
+                />
-                      />
+              </v-card-text>
-                    </h3>
+            </v-card>
-                    <property-description
+          </section>
-                      :string="model.description"
+          <div class="layout row justify-center align-stretch">
-                      :calculations="model.descriptionCalculations"
-                      :inactive="model.inactive"
-                    />
-                  </div>
-                </v-card-title>
-              </v-card>
-            </div>
-          </column-layout>
-          <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,
 	},
@@ -270,9 +266,17 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.slot-card {
+  .slot-card {
-  max-width: 500px;
+    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';