Merge pull request #543 from rsek/border-and-spacing-fixes

Border and spacing fixes
ben · Dec 3, 2022 · bf3f9ff · bf3f9ff
2 parents 4247f75 + 6df85f0
commit bf3f9ff
Show file tree

Hide file tree

Showing 18 changed files with 333 additions and 213 deletions.
diff --git a/src/module/rolls/preroll-dialog.ts b/src/module/rolls/preroll-dialog.ts
@@ -417,7 +417,7 @@ export class IronswornPrerollDialog extends Dialog<
 
     // Resize when expanding the "advanced" section
     html.find('details').on('toggle', (ev) => {
-      const delta = (ev.currentTarget.open ? 1 : -1) * 90
+      const delta = (ev.currentTarget.open ? 1 : -1) * 120
       const app = html.parents('.app')
       app.height((app.height() ?? 0) + delta)
     })

diff --git a/src/module/vue/components/buttons/btn-icon.vue b/src/module/vue/components/buttons/btn-icon.vue
@@ -46,6 +46,8 @@ const hasDefaultSlot = computed(() => {
   text-align: center;
   justify-content: center;
   border-radius: 0;
+  color: inherit;
+  border-width: 0;
   padding: 0.2em;
   &:not(:empty) {
     gap: 0.2em;
@@ -68,7 +70,7 @@ const hasDefaultSlot = computed(() => {
     align-content: center;
     align-items: center;
   }
-  &.text:not(.block) {
+  &.text:not(.block):not(:empty) {
     justify-content: left;
   }
 }

diff --git a/src/module/vue/components/rank-pips/rank-pips.vue b/src/module/vue/components/rank-pips/rank-pips.vue
@@ -34,6 +34,8 @@
   width: max-content;
   flex-grow: 0;
   .rank-pip {
+    margin: 0;
+    border: none;
     .pip-shape > * {
       stroke-width: var(--widget-stroke-width);
     }

diff --git a/src/module/vue/components/sf-move-category-rows.vue b/src/module/vue/components/sf-move-category-rows.vue
@@ -1,11 +1,12 @@
 <template>
   <Collapsible
+    class="list-block"
     :class="$style.wrapper"
     :toggleButtonClass="$style.toggleButton"
     :toggleTooltip="$enrichMarkdown(category.dataforgedCategory?.Description)"
     :toggleWrapperIs="`h${headingLevel}`"
     :toggleWrapperClass="$style.toggleWrapper"
-    :toggleSectionClass="$style.toggleSection"
+    :toggleSectionClass="`${$style.toggleSection} list-block-header`"
     :baseId="`move_category_${snakeCase(category.displayName)}`"
     :toggleLabel="category.displayName"
     :toggleTextClass="$style.toggleText"
@@ -17,13 +18,14 @@
         <li
           v-for="(move, i) of category.moves"
           :key="i"
-          class="nogrow"
+          class="list-block-item nogrow"
           :class="$style.listItem"
         >
           <SfMoverow
             :move="move"
             ref="children"
             :headingLevel="headingLevel + 1"
+            :class="$style.moveRow"
             :thematicColor="category.color"
           />
         </li>
@@ -42,7 +44,7 @@
 
 .wrapper {
   .thematicColorMixin();
-  border-radius: 5px;
+  border-radius: var(--ironsworn-border-radius-lg);
   background-color: var(--ironsworn-color-thematic);
 }
 
@@ -54,15 +56,9 @@
   padding: 0;
 }
 
-.listItem {
-  border-color: var(--ironsworn-color-thematic);
-  border-style: groove;
-  border-width: 1px 0 0;
-}
-
 .toggleSection {
   background-color: var(--ironsworn-color-thematic);
-  border-radius: 5px;
+  border-radius: var(--ironsworn-border-radius-lg);
   button {
     --ironsworn-color-clickable-text: var(--ironsworn-color-light);
     --ironsworn-color-clickable-text-hover: var(--ironsworn-color-light-warm);
@@ -73,6 +69,10 @@
   .textStrokeMixin( var(--ironsworn-color-dark));
   background: none;
 }
+
+.moveRow {
+  border-radius: var(--ironsworn-border-radius-lg);
+}
 </style>
 <script setup lang="ts">
 import { computed, ref } from 'vue'

diff --git a/src/module/vue/components/sf-moverow.vue b/src/module/vue/components/sf-moverow.vue
@@ -67,8 +67,8 @@
 @import '../../../styles/mixins.less';
 
 @icon_size: 1.2em;
-@border_width: 2px;
-@border_radius: 5px;
+@border_width: var(--ironsworn-border-width-lg);
+@border_radius: var(--ironsworn-border-radius-lg);
 @wrapper_spacing: 4px;
 
 .thematicColorMixin {
@@ -86,7 +86,6 @@
 
 .wrapper {
   .thematicColorMixin();
-  border-radius: @border_radius;
   padding-left: @wrapper_spacing;
   padding-right: @wrapper_spacing;
   &[aria-expanded='true'] {
@@ -124,7 +123,8 @@
   line-height: 1.25;
   font-size: var(--font-size-16);
   border-color: transparent;
-  border-width: 1px 1px 0 1px;
+  border-width: var(--ironsworn-border-width-md)
+    var(--ironsworn-border-width-md) 0 var(--ironsworn-border-width-md);
   border-style: solid;
   align-items: center;
   &:hover {

diff --git a/src/module/vue/components/sf-movesheetmoves.vue b/src/module/vue/components/sf-movesheetmoves.vue
@@ -55,16 +55,25 @@
 
 <style lang="less" module>
 .navSearch {
-  margin-top: 0.5rem;
+  margin-top: var(--ironsworn-spacer-lg);
 }
 .searchBtn {
-  padding: 6px;
+  // padding: 6px;
+  &:empty {
+    // to override default icon-button styling
+    height: var(--form-field-height);
+    width: var(--form-field-height);
+    padding: var(--ironsworn-spacer-md);
+  }
+  aspect-ratio: 1;
+  flex: 0;
 }
 .wrapper {
-  gap: 0.5rem;
+  gap: var(--ironsworn-spacer-lg);
 }
 .itemList {
   gap: var(--ironsworn-spacer-md);
+  margin: 0;
 }
 </style>
 

diff --git a/src/module/vue/components/sf-movesheetoracles.vue b/src/module/vue/components/sf-movesheetoracles.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flexcol">
-    <div class="flexrow nogrow" style="margin-top: 0.5rem">
+  <div class="flexcol" :class="$style.wrapper">
+    <div class="flexrow nogrow" :class="$style.navSearch">
       <input
         type="text"
         :placeholder="$t('IRONSWORN.Search')"
@@ -19,7 +19,7 @@
       />
     </div>
 
-    <div class="item-list scrollable flexcol">
+    <div class="item-list scrollable flexcol" :class="$style.itemList">
       <OracleTreeNode
         v-for="node in treeRoot.children"
         :key="node.displayName"
@@ -30,9 +30,15 @@
   </div>
 </template>
 
-<style lang="less" scoped>
-.item-list {
-  padding: 0 0.5rem;
+<style lang="less" module>
+.wrapper {
+  gap: var(--ironsworn-spacer-lg);
+}
+.navSearch {
+  margin-top: var(--ironsworn-spacer-lg);
+}
+.itemList {
+  padding: 0 var(--ironsworn-spacer-lg);
 }
 </style>
 

diff --git a/src/module/vue/components/site/site-moves.vue b/src/module/vue/components/site/site-moves.vue
@@ -1,59 +1,82 @@
 <template>
-  <div class="flexcol scrollable">
-    <SfMoverow
-      :move="moves.discoverASite"
-      v-if="moves.discoverASite"
-      :thematic-color="thematicColor"
-      class="nogrow"
-    />
-    <SfMoverow
-      :move="moves.delveTheDepths"
-      v-if="moves.delveTheDepths"
-      :thematic-color="thematicColor"
-      class="nogrow"
-    />
-    <SfMoverow
-      :move="moves.findAnOpportunity"
-      v-if="moves.findAnOpportunity"
-      :thematic-color="thematicColor"
-      class="nogrow"
-    />
-    <SfMoverow
-      :move="moves.revealADanger"
-      v-if="moves.revealADanger"
-      :thematic-color="thematicColor"
-      class="nogrow"
-      @oracleClick="revealADanger"
-      :oracle-disabled="!hasThemeAndDomain"
-    />
-    <SfMoverow
-      :move="moves.checkYourGear"
-      v-if="moves.checkYourGear"
-      :thematic-color="thematicColor"
-      class="nogrow"
-    />
-    <SfMoverow
-      :move="moves.locateObjective"
-      v-if="moves.locateObjective"
-      :thematic-color="thematicColor"
-      class="nogrow"
-      @rollClick="locateObjective"
-    />
-    <SfMoverow
-      :move="moves.escapeTheDepths"
-      v-if="moves.escapeTheDepths"
-      :thematic-color="thematicColor"
-      class="nogrow"
-    />
-    <SfMoverow
-      :move="moves.revealADangerAlt"
-      v-if="moves.revealADangerAlt"
-      :thematic-color="thematicColor"
-      class="nogrow"
-    />
-  </div>
+  <ul class="list-block flexcol" :class="$style.wrapper">
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.discoverASite"
+        v-if="moves.discoverASite"
+        class="nogrow"
+      />
+    </li>
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.delveTheDepths"
+        v-if="moves.delveTheDepths"
+        class="nogrow"
+      />
+    </li>
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.findAnOpportunity"
+        v-if="moves.findAnOpportunity"
+        class="nogrow"
+      />
+    </li>
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.revealADanger"
+        v-if="moves.revealADanger"
+        class="nogrow"
+        @oracleClick="revealADanger"
+        :oracle-disabled="!hasThemeAndDomain"
+      />
+    </li>
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.checkYourGear"
+        v-if="moves.checkYourGear"
+        class="nogrow"
+      />
+    </li>
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.locateObjective"
+        v-if="moves.locateObjective"
+        class="nogrow"
+        @rollClick="locateObjective"
+      />
+    </li>
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.escapeTheDepths"
+        v-if="moves.escapeTheDepths"
+        class="nogrow"
+      />
+    </li>
+    <li class="list-block-item" :class="$style.moveRowWrapper">
+      <SfMoverow
+        :move="moves.revealADangerAlt"
+        v-if="moves.revealADangerAlt"
+        class="nogrow"
+      />
+    </li>
+  </ul>
 </template>
 
+<style lang="less" module>
+.wrapper {
+  border-radius: var(--ironsworn-border-radius-lg);
+  background-color: var(--ironsworn-color-midtone-30);
+  height: max-content;
+  margin: 0;
+}
+
+.moveRowWrapper {
+  flex-grow: 0;
+  height: max-content;
+  border-color: var(--ironsworn-color-midtone-30);
+}
+</style>
+
 <script lang="ts" setup>
 import { computed, inject, reactive } from 'vue'
 import { SiteDataPropertiesData } from '../../../actor/actortypes'
@@ -75,8 +98,6 @@ const domain = computed(() => {
   return site?.value?.items.find((x) => x.type === 'delve-domain')
 })
 
-const thematicColor = 'var(--ironsworn-color-fg-30)'
-
 const hasThemeAndDomain = computed(() => {
   return !!(theme.value && domain.value)
 })

diff --git a/src/module/vue/progress-sheet.vue b/src/module/vue/progress-sheet.vue
@@ -122,30 +122,32 @@
     <!-- DESCRIPTION -->
     <MceEditor v-model="item.system.description" @save="saveDescription" />
 
-    <button
-      class="button nogrow"
+    <BtnFaicon
+      class="nogrow block"
       :class="$style.danger"
-      type="button"
+      icon="trash"
       @click="destroy"
     >
       {{ $t('IRONSWORN.DeleteItem') }}
-    </button>
+    </BtnFaicon>
   </div>
 </template>
 
 <style lang="less" module>
-button.danger {
+.danger {
+  --ironsworn-color-clickable-block-border: var(--ironsworn-color-danger);
+  --ironsworn-color-clickable-block-fg: var(--ironsworn-color-danger);
+  --ironsworn-color-clickable-block-bg: transparent;
+
+  --ironsworn-color-clickable-block-border-hover: var(--ironsworn-color-danger);
+  --ironsworn-color-clickable-block-fg-hover: var(--ironsworn-color-light);
+  --ironsworn-color-clickable-block-bg-hover: var(--ironsworn-color-danger);
+
+  margin: var(--ironsworn-spacer-md) 0 0;
   color: var(--ironsworn-color-danger);
-  border: 1px solid;
-  border-radius: 5px;
-  border-color: var(--ironsworn-color-danger);
-  transition: all ease 0.2s;
-
-  &:hover {
-    background-color: var(--ironsworn-color-danger);
-    color: var(--ironsworn-color-danger-inverted);
-    border-color: var(--ironsworn-color-danger-inverted);
-  }
+  border-width: var(--ironsworn-border-width-lg);
+  border-style: solid;
+  border-radius: var(--ironsworn-border-radius-lg);
 }
 </style>