Improved character sheet printing

app/imports/client/ui/components/ColumnLayout.vue

@@ -33,7 +33,6 @@ export default {
 
 .column-layout>*,
 .column-layout>span>div {
-  display: inline-block;
   break-inside: avoid;
   page-break-inside: avoid;
   margin-bottom: 8px;

app/imports/client/ui/creature/character/printedCharacterSheet/CharacterSheetPrinted.vue

@@ -109,7 +109,7 @@ export default {
         name: 'characterSheet',
         params: { id: this.creatureId},
       });
-      return new URL(props?.href, document.baseURI).href
+      return new URL(props?.href, 'https://dicecloud.com').href
     },
     level() {
       return this.variables?.level?.value;
@@ -139,7 +139,6 @@ export default {
       ].sort((a, b) => a.order - b.order);
     },
   },
-  // @ts-ignore reactiveProvide isn't defined on vue
   reactiveProvide: {
     name: 'context',
     include: ['creatureId', 'editPermission'],
@@ -278,7 +277,8 @@ export default {
 }
 
 .character-sheet-printed .column-layout>div {
-  position:relative;
+  position: relative;
+  display: inline-block;
   margin-top: 4px;
   margin-bottom: 4px;
 }
@@ -382,7 +382,8 @@ export default {
       margin: 8mm;  
   }
   body {  
-      margin: 0;  
+      margin: 0;
+      padding: 2mm;
   }
   .character-sheet-printed .page {
     width: 100%;

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedInventory.vue

@@ -102,7 +102,6 @@ export default {
       organize: false,
     }
   },
-  // @ts-ignore Meteor isn't defined on vue
   meteor: {
     containers() {
       return CreatureProperties.find({
@@ -128,7 +127,7 @@ export default {
     containersWithoutAncestorContainers() {
       return CreatureProperties.find({
         ...getFilter.descendantsOfRoot(this.creatureId),
-        $not: getFilter.descendantsOfAll(this.containers),
+        $nor: [getFilter.descendantsOfAll(this.containers)],
         type: 'container',
         removed: { $ne: true },
         inactive: { $ne: true },
@@ -151,7 +150,7 @@ export default {
     carriedItems() {
       return CreatureProperties.find({
         ...getFilter.descendantsOfRoot(this.creatureId),
-        $not: getFilter.descendantsOfAll(this.containers),
+        $nor: [getFilter.descendantsOfAll(this.containers)],
         type: 'item',
         equipped: { $ne: true },
         removed: { $ne: true },

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedSpells.vue

@@ -61,7 +61,6 @@ export default {
       organize: false,
     }
   },
-  // @ts-ignore-error Meteor not defined on vue
   meteor: {
     spellLists() {
       return CreatureProperties.find({
@@ -76,7 +75,7 @@ export default {
     spellsWithoutList() {
       return CreatureProperties.find({
         ...getFilter.descendantsOfRoot(this.creatureId),
-        $not: getFilter.descendantsOfAll(this.spellLists),
+        $nor: [getFilter.descendantsOfAll(this.spellLists)],
         type: 'spell',
         removed: { $ne: true },
         deactivatedByAncestor: { $ne: true },
@@ -91,7 +90,7 @@ export default {
     spellListsWithoutAncestorSpellLists() {
       return CreatureProperties.find({
         ...getFilter.descendantsOfRoot(this.creatureId),
-        $not: getFilter.descendantsOfAll(this.spellLists),
+        $nor: [getFilter.descendantsOfAll(this.spellLists)],
         type: 'spellList',
         removed: { $ne: true },
         inactive: { $ne: true },

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedStats.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <div class="stats">
     <div
-      class="d-flex wrap justify-space-between px-2 pt-3 pb-1"
+      class="d-flex wrap justify-space-between px-2 pt-3 pb-2"
       style="page-break-after: avoid"
     >
       <div

app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedAction.vue

@@ -4,11 +4,6 @@
     :class="cardClasses"
   >
     <div class="d-flex align-center mb-2">
-      <div class="roll-bonus">
-        <template v-if="!onHitDamage && rollBonus">
-          {{ rollBonus }}
-        </template>
-      </div>
       <div class="action-title text-center flex-grow-1">
         {{ model.name || propertyName }}
       </div>
@@ -51,28 +46,21 @@
         <markdown-text :markdown="model.summary.value || model.summary.text" />
       </template>
       <div
-        v-if="onHitDamage"
+        v-if="rollBonus"
+        class="roll-bonus"
       >
-        <span class="damage">
+        <span class="to-hit ml-2">
           {{ rollBonus }}
         </span>
         <span>
           to hit
         </span>
       </div>
-      <div v-if="onHitDamage">
-        <span class="damage">
-          {{ onHitDamage.damage }}
-        </span>
-        <span>
-          {{ onHitDamage.suffix }}
-        </span>
-      </div>
       <tree-node-list
-        v-else-if="children && children.length"
+        v-if="children && children.length"
         start-expanded
-        show-external-details
         :children="children"
+        :root="{id: model._id, collection: 'creatureProperties'}"
         @selected="e => $emit('sub-click', e)"
       />
     </div>
@@ -151,21 +139,6 @@ export default {
         'long': 'Long Action'
       }[this.model.actionType] || this.model.actionType
     },
-    onHitDamage() {
-      /**
-       * Only match a property who has exactly one to-hit child with one damage under that
-       */
-      if (this.children?.length !== 1) return;
-      if (this.children[0]?.node?.type !== 'branch') return;
-      if (this.children[0].children?.length !== 1) return;
-      if (this.children[0].children[0]?.node?.type !== 'damage') return;
-      if (this.children[0].children[0].children?.length !== 0) return;
-      const damage = this.children[0].children[0]?.node;
-      return {
-        damage: damage.value,
-        suffix: damage.damageType + (damage.damageType !== 'healing' ? ' damage ' : '')
-      };
-    },
   },
   meteor: {
     children() {
@@ -205,6 +178,10 @@ export default {
     transform 0.075s ease;
 }
 .roll-bonus {
+  color: rgba(0, 0, 0, 0.87);
+}
+.to-hit {
+  color: rgba(0, 0, 0, 0.54);
   font-size: 18pt;
   flex-basis: 24px;
 }