Table improvements (#33)

* Hide alignment until xl * Move monster type above sources, hide (difficulty) label until xl * Reorder columns to make more sense
fantasycalendar · Oct 22, 2023 · dc931af · dc931af
1 parent 667c67d
commit dc931af
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 24 deletions.
diff --git a/src/components/MonsterTable.vue b/src/components/MonsterTable.vue
@@ -145,6 +145,10 @@ onBeforeMount(() => {
               class="table-cell w-64"
               @sort="setSortBy($event)"
             />
+            <MonsterTableHeading
+              label="Alignment"
+              class="hidden xl:table-cell w-32 text-right pr-4"
+            />
             <MonsterTableHeading
               label="Size"
               sorts-column="size"
@@ -153,14 +157,6 @@ onBeforeMount(() => {
               class="table-cell w-32"
               @sort="setSortBy($event)"
             />
-            <MonsterTableHeading
-              label="CR"
-              sorts-column="cr.numeric"
-              :sort-by="sortBy"
-              :sort-by-desc="sortByDesc"
-              @sort="setSortBy($event)"
-              class="hidden sm:table-cell w-32"
-            />
             <MonsterTableHeading
               label="Type"
               sorts-column="type"
@@ -170,8 +166,12 @@ onBeforeMount(() => {
               @sort="setSortBy($event)"
             />
             <MonsterTableHeading
-              label="Alignment"
-              class="hidden lg:table-cell w-32 text-right pr-4"
+              label="CR"
+              sorts-column="cr.numeric"
+              :sort-by="sortBy"
+              :sort-by-desc="sortByDesc"
+              @sort="setSortBy($event)"
+              class="hidden sm:table-cell w-32"
             />
           </tr>
         </thead>

diff --git a/src/components/MonsterTableRow.vue b/src/components/MonsterTableRow.vue
@@ -35,6 +35,11 @@ const encounter = useEncounter();
           {{ tag.toLowerCase() }}
         </Badge>
       </span>
+      <dt class="sr-only sm:hidden">Type</dt>
+      <dd
+        class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden"
+        v-text="monster.type"
+      ></dd>
       <dl class="font-normal">
         <dt class="sr-only">Sources</dt>
         <dd class="mt-1 truncate text-gray-500 dark:text-gray-400">
@@ -48,13 +53,12 @@ const encounter = useEncounter();
             "
           ></span>
         </dd>
-        <dt class="sr-only sm:hidden">Type</dt>
-        <dd
-          class="mt-1 truncate text-gray-500 dark:text-gray-400 lg:hidden"
-          v-text="monster.type"
-        ></dd>
       </dl>
     </td>
+    <td
+      class="hidden px-3 pl-2 pr-4 text-sm text-gray-500 dark:text-gray-300 xl:table-cell w-32 text-right"
+      v-text="monster.alignment.string"
+    ></td>
     <td
       class="px-3 py-2 text-sm text-gray-500 dark:text-gray-300 table-cell w-32 max-w-32 truncate"
     >
@@ -92,6 +96,10 @@ const encounter = useEncounter();
         ></dd>
       </dl>
     </td>
+    <td
+      class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32"
+      v-text="monster.type"
+    ></td>
     <td
       class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 sm:table-cell w-32"
     >
@@ -114,17 +122,9 @@ const encounter = useEncounter();
           v-text="
             ' (' + encounter.getDifficultyFromExperience(monster.cr.exp) + ')'
           "
-          class="text-xs"
+          class="text-xs hidden xl:inline"
         ></span>
       </span>
     </td>
-    <td
-      class="hidden px-3 py-2 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32"
-      v-text="monster.type"
-    ></td>
-    <td
-      class="hidden px-3 pl-2 pr-4 text-sm text-gray-500 dark:text-gray-300 lg:table-cell w-32 text-right"
-      v-text="monster.alignment.string"
-    ></td>
   </tr>
 </template>