Began designing on-sheet initiative

app/imports/client/ui/creature/character/CharacterSheet.vue

@@ -30,7 +30,7 @@
       <div
         v-else
         key="character-tabs"
-        class="fill-height"
+        class="card-background"
       >
         <v-tabs-items
           :key=" '' +
@@ -38,7 +38,6 @@
             creature.settings.showTreeTab
           "
           :value="$store.getters.tabById($route.params.id)"
-          class="card-background"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
@@ -69,6 +68,7 @@
             <tree-tab :creature-id="creatureId" />
           </v-tab-item>
         </v-tabs-items>
+        <character-sheet-initiative />
       </div>
     </v-fade-transition>
     <character-sheet-fab
@@ -144,6 +144,7 @@ import CreatureLogs from '/imports/api/creature/log/CreatureLogs.js';
 import { snackbar } from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
 import CharacterSheetFab from '/imports/client/ui/creature/character/CharacterSheetFab.vue';
 import ActionsTab from '/imports/client/ui/creature/character/characterSheetTabs/ActionsTab.vue';
+import CharacterSheetInitiative from '/imports/client/ui/creature/character/CharacterSheetInitiative.vue';
 
 export default {
   components: {
@@ -156,6 +157,7 @@ export default {
     BuildTab,
     TreeTab,
     CharacterSheetFab,
+    CharacterSheetInitiative,
   },
   props: {
     creatureId: {
@@ -248,6 +250,7 @@ export default {
 <style>
 .character-sheet .v-window-item {
   min-height: calc(100vh - 96px);
+  padding-bottom: 70px;
   overflow: hidden;
 }
 </style>

app/imports/client/ui/creature/character/CharacterSheetInitiative.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="d-flex character-sheet-initiative"
+    :style="{
+      left: `${$vuetify.application.left}px`,
+      right: `${$vuetify.application.right}px`,
+      bottom: $vuetify.breakpoint.xsOnly ? '60px' : '4px',
+    }"
+  >
+    <v-card
+      v-for="c in [1,2,3,4,5]"
+      :key="c"
+      :width="48"
+      :height="64"
+      class="mx-1"
+    >
+      <v-progress-linear :value="62" />
+      <v-img src="https://picsum.photos/200/300" />
+    </v-card>
+  </div>
+</template>
+
+<script lang="js">
+
+export default {
+  
+}
+</script>
+
+<style scoped>
+.character-sheet-initiative {
+  position: fixed;
+  bottom: 0;
+  padding-right: 56px; 
+  z-index: 5;
+  overflow-x: auto;
+  overflow-y: hidden;
+  transition: .2s cubic-bezier(0.4, 0, 0.2, 1) transform,
+    .2s cubic-bezier(0.4, 0, 0.2, 1) background-color,
+    .2s cubic-bezier(0.4, 0, 0.2, 1) left,
+    .2s cubic-bezier(0.4, 0, 0.2, 1) right,
+    280ms cubic-bezier(0.4, 0, 0.2, 1) box-shadow,
+    .25s cubic-bezier(0.4, 0, 0.2, 1) max-width,
+    .25s cubic-bezier(0.4, 0, 0.2, 1) width;
+}
+</style>