les sorts/monstres/objets magiques sont visibles directement depuis les listes d'un simple clic

docs/.vuepress/theme/components/MyMagicItems.vue

@@ -16,6 +16,7 @@
             :items-per-page="-1"
             hide-default-footer
             show-expand
+            @click:row="onClickRow"
           >
 
             <template v-slot:expanded-item="{ headers, item }">
@@ -113,6 +114,9 @@ export default {
         }
       }
       return false
+    },
+    onClickRow (row, item) {
+      item.expand(!item.isExpanded)
     }
   }
 }

docs/.vuepress/theme/components/MyMonsters.vue

@@ -16,6 +16,7 @@
             :items-per-page="-1"
             hide-default-footer
             show-expand
+            @click:row="onClickRow"
           >
 
             <template v-slot:expanded-item="{ headers, item }">
@@ -127,6 +128,9 @@ export default {
         }
       }
       return false
+    },
+    onClickRow (row, item) {
+      item.expand(!item.isExpanded)
     }
   }
 }

docs/.vuepress/theme/components/MySpells.vue

@@ -16,6 +16,7 @@
             :items-per-page="-1"
             hide-default-footer
             show-expand
+            @click:row="onClickRow"
           >
 
             <template v-slot:expanded-item="{ headers, item }">
@@ -188,6 +189,9 @@ export default {
         }
       }
       return false
+    },
+    onClickRow (row, item) {
+      item.expand(!item.isExpanded)
     }
   },
 }

docs/.vuepress/theme/layouts/MagicItemsLayout.vue

@@ -24,8 +24,16 @@
       :page.sync="page"
       @page-count="pageCount = $event"
       hide-default-footer
+      show-expand
+      @click:row="onClickRow"
     >
 
+      <template v-slot:expanded-item="{ headers, item }">
+        <td :colspan="headers.length" class="pa-4">
+          <MagicItem :magicItem="item" />
+        </td>
+      </template>
+
       <template v-slot:item.isInTreasureChest="{ item }">
         <v-simple-checkbox off-icon="mdi-bookmark-outline" on-icon="mdi-bookmark" @input="toggleItemInTreasureChest(item)" :value="isItemInTreasureChest(item)"></v-simple-checkbox>
       </template>
@@ -55,9 +63,10 @@
 import { mapState } from 'vuex'
 import Breadcrumb from '@theme/components/Breadcrumb'
 import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
+import MagicItem from '@theme/components/MagicItem'
 
 export default {
-  components: { Breadcrumb },
+  components: { Breadcrumb, MagicItem },
 
   data () {
     return {
@@ -161,6 +170,10 @@ export default {
     changePage (page) {
       console.log(page)
       setUrlParams("page", [page])
+    },
+
+    onClickRow (row, item) {
+      item.expand(!item.isExpanded)
     }
   },
 

docs/.vuepress/theme/layouts/MonstersLayout.vue

@@ -24,8 +24,16 @@
       :page.sync="page"
       @page-count="pageCount = $event"
       hide-default-footer
+      show-expand
+      @click:row="onClickRow"
     >
 
+      <template v-slot:expanded-item="{ headers, item }">
+        <td :colspan="headers.length" class="pa-4">
+          <Monster class="column-count-2" :monster="item" />
+        </td>
+      </template>
+
       <template v-slot:item.isInBestiary="{ item }">
         <v-simple-checkbox off-icon="mdi-bookmark-outline" on-icon="mdi-bookmark" @input="toggleMonsterInBestiary(item)" :value="isMonsterInBestiary(item)"></v-simple-checkbox>
       </template>
@@ -64,9 +72,10 @@ import { mapState } from 'vuex'
 import Breadcrumb from '@theme/components/Breadcrumb'
 import { displayChallenge } from '@theme/util/monsterHelpers'
 import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
+import Monster from '@theme/components/Monster'
 
 export default {
-  components: { Breadcrumb },
+  components: { Breadcrumb, Monster },
 
   data () {
     return {
@@ -209,6 +218,10 @@ export default {
     changePage (page) {
       console.log(page)
       setUrlParams("page", [page])
+    },
+
+    onClickRow (row, item) {
+      item.expand(!item.isExpanded)
     }
   },
 

docs/.vuepress/theme/layouts/SpellsLayout.vue

@@ -25,8 +25,16 @@
       :page.sync="page"
       @page-count="pageCount = $event"
       hide-default-footer
+      show-expand
+      @click:row="onClickRow"
     >
 
+      <template v-slot:expanded-item="{ headers, item }">
+        <td :colspan="headers.length" class="pa-4">
+          <Spell :spell="item" />
+        </td>
+      </template>
+
       <template v-slot:item.isInSpellBook="{ item }">
         <v-simple-checkbox off-icon="mdi-bookmark-outline" on-icon="mdi-bookmark" @input="toggleSpellInSpellBook(item)" :value="isSpellInSpellBook(item)"></v-simple-checkbox>
       </template>
@@ -77,9 +85,10 @@
 import { mapState } from 'vuex'
 import Breadcrumb from '@theme/components/Breadcrumb'
 import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
+import Spell from '@theme/components/Spell'
 
 export default {
-  components: { Breadcrumb },
+  components: { Breadcrumb, Spell },
 
   data () {
     return {
@@ -232,6 +241,10 @@ export default {
     changePage (page) {
       console.log(page)
       setUrlParams("page", [page])
+    },
+
+    onClickRow (row, item) {
+      item.expand(!item.isExpanded)
     }
   },
 

docs/.vuepress/theme/styles/_layout.scss

@@ -1,14 +1,12 @@
-.page.content {
-  .column-count-2 {
-    column-count: 2;
-    column-gap: 25pt;
-  }
-  .column-count-3 {
-    column-count: 3;
-    margin-bottom: 12px;
-  }
-  .column-count-4 {
-    column-count: 4;
-    margin-bottom: 12px;
-  }
+.column-count-2 {
+  column-count: 2;
+  column-gap: 25pt;
+}
+.column-count-3 {
+  column-count: 3;
+  margin-bottom: 12px;
+}
+.column-count-4 {
+  column-count: 4;
+  margin-bottom: 12px;
 }

docs/.vuepress/theme/styles/_tables.scss

@@ -74,6 +74,21 @@ table {
       }
     }
   }
+
+  .data-table {
+    table {
+      tbody {
+        tr {
+          background-color: #fff;
+          &:hover {
+            background-color: #eee !important;
+          }
+          td {
+          }
+        }
+      }
+    }
+  }
 }
 
 .theme--dark {