optimisation d'affichage des tables (monstres, sorts, objets magiques) pour les mobiles

.gitignore

@@ -3,3 +3,5 @@ docs/.vuepress/dist
 tmp/
 import/
 regex
+package-lock.json
+yarn.lock

docs/.vuepress/public/.well-known/assetlinks.json

@@ -1,5 +0,0 @@
-[{
-      "relation": ["delegate_permission/common.handle_all_urls"],
-      "target" : { "namespace": "android_app", "package_name": "fr.heros_et_dragons.twa",
-                   "sha256_cert_fingerprints": [": 25:82:3F:F7:25:C0:53:A3:C6:C6:A1:D3:D9:F0:55:EE:08:A9:F9:BD:D0:FC:50:24:F1:99:8D:39:75:E0:76:3A"] }
-    }]

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

@@ -40,6 +40,7 @@
       hide-default-footer
       show-expand
       @click:row="onClickRow"
+      mobile-breakpoint="0"
     >
 
       <template v-slot:expanded-item="{ headers, item }">
@@ -97,13 +98,11 @@ export default {
       ],
       page: 1,
       pageCount: 0,
-      headers: [
+      showColumn: {
-        { text: "", align: 'center', sortable: false, value: 'isInTreasureChest' },
+        type: true,
-        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        rarity: true,
-        { text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
+        attunement: true,
-        { text: "Rareté", align: 'start', sortable: false, value: 'frontmatter.rarity' },
+      }
-        { text: "Harmonisation", align: 'start', sortable: false, value: 'frontmatter.attunement' },
-      ],
     }
   },
 
@@ -115,6 +114,23 @@ export default {
       hasAttunement: state => state.magicItemFilters.hasAttunement,
     }),
 
+    headers() {
+      let headers = [
+        { text: "", align: 'center', sortable: false, value: 'isInTreasureChest' },
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+      ]
+      if (this.showColumn.school && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' })
+      }
+      if (this.showColumn.castingTime && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Rareté", align: 'start', sortable: false, value: 'frontmatter.rarity' })
+      }
+      if (this.showColumn.duration && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Harmonisation", align: 'start', sortable: false, value: 'frontmatter.attunement' })
+      }
+      return headers
+    },
+
     selectedTypes() {
       let result = []
       for (let type of this.types) {

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

@@ -45,6 +45,7 @@
       hide-default-footer
       show-expand
       @click:row="onClickRow"
+      mobile-breakpoint="0"
     >
 
       <template v-slot:expanded-item="{ headers, item }">
@@ -112,16 +113,13 @@ export default {
       ],
       page: 1,
       pageCount: 0,
-      headers: [
+      showColumn: {
-        { text: "", align: 'center', sortable: false, value: 'isInBestiary' },
+        type: true,
-        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        size: true,
-        { text: "ID", align: 'center', sortable: true, value: 'frontmatter.challenge' },
+        subtype: true,
-        { text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
+        environments: true,
-        { text: "Taille", align: 'center', sortable: false, value: 'frontmatter.size' },
+        dungeonTypes: true,
-        { text: "Sous-type", align: 'start', sortable: false, value: 'frontmatter.subtype' },
+      },
-        { text: "Environnements", align: 'start', sortable: false, value: 'frontmatter.environments' },
-        { text: "Type de donjons", align: 'start', sortable: false, value: 'frontmatter.dungeonTypes' },
-      ],
       challenges: CHALLENGES
     }
   },
@@ -136,6 +134,30 @@ export default {
       dungeonTypes: state => state.monsterFilters.dungeonTypes,
     }),
 
+    headers() {
+      let headers = [
+        { text: "", align: 'center', sortable: false, value: 'isInBestiary' },
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        { text: "ID", align: 'center', sortable: true, value: 'frontmatter.challenge' }
+      ]
+      if (this.showColumn.type && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' })
+      }
+      if (this.showColumn.size && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Taille", align: 'center', sortable: false, value: 'frontmatter.size' })
+      }
+      if (this.showColumn.subtype && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Sous-type", align: 'start', sortable: false, value: 'frontmatter.subtype' })
+      }
+      if (this.showColumn.environments && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Environnements", align: 'start', sortable: false, value: 'frontmatter.environments' })
+      }
+      if (this.showColumn.dungeonTypes && this.$vuetify.breakpoint.mdAndUp) {
+        headers.push({ text: "Type de donjons", align: 'start', sortable: false, value: 'frontmatter.dungeonTypes' })
+      }
+      return headers
+    },
+
     selectedTypes() {
       let result = []
       for (let type of this.types) {

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

@@ -11,8 +11,8 @@
 
     <h1>Grimoire</h1>
 
-    <div><strong>Colonnes affichées :</strong></div>
+    <div class="columns-toggles d-md-flex d-none align-center mb-2">
-    <div class="columns-toggles d-flex mb-2">
+      <div><strong>Colonnes affichées :</strong></div>
       <v-checkbox
         class="mt-0 mr-4"
         v-model="showColumn.school"
@@ -112,6 +112,7 @@
       hide-default-footer
       show-expand
       @click:row="onClickRow"
+      mobile-breakpoint="0"
     >
 
       <template v-slot:expanded-item="{ headers, item }">
@@ -191,18 +192,6 @@ export default {
       ],
       page: 1,
       pageCount: 0,
-      // headers: [
-      //   { text: "", align: 'center', sortable: false, value: 'isInSpellBook' },
-      //   { text: "Nom", align: 'start', sortable: true, value: 'title' },
-      //   { text: "Niveau", align: 'center', sortable: true, value: 'frontmatter.level' },
-      //   { text: "École", align: 'start', sortable: false, value: 'frontmatter.school' },
-      //   { text: "Temps d'incantation", align: 'start', sortable: false, value: 'frontmatter.casting_time' },
-      //   { text: "Durée", align: 'start', sortable: false, value: 'frontmatter.duration' },
-      //   { text: "Concentration", align: 'center', sortable: false, value: 'frontmatter.concentration' },
-      //   { text: "Rituel", align: 'center', sortable: false, value: 'frontmatter.ritual' },
-      //   { text: "Composantes", align: 'center', sortable: false, value: 'frontmatter.components' },
-      //   { text: "Description", align: 'start', sortable: false, value: 'frontmatter.description' },
-      // ],
       showColumn: {
         school: true,
         castingTime: true,
@@ -234,25 +223,25 @@ export default {
         { text: "Nom", align: 'start', sortable: true, value: 'title' },
         { text: "Niveau", align: 'center', sortable: true, value: 'frontmatter.level' }
       ]
-      if (this.showColumn.school) {
+      if (this.showColumn.school && this.$vuetify.breakpoint.mdAndUp) {
         headers.push({ text: "École", align: 'start', sortable: false, value: 'frontmatter.school' })
       }
-      if (this.showColumn.castingTime) {
+      if (this.showColumn.castingTime && this.$vuetify.breakpoint.mdAndUp) {
         headers.push({ text: "Temps d'incantation", align: 'start', sortable: false, value: 'frontmatter.casting_time' })
       }
-      if (this.showColumn.duration) {
+      if (this.showColumn.duration && this.$vuetify.breakpoint.mdAndUp) {
         headers.push({ text: "Durée", align: 'start', sortable: false, value: 'frontmatter.duration' })
       }
-      if (this.showColumn.concentration) {
+      if (this.showColumn.concentration && this.$vuetify.breakpoint.mdAndUp) {
         headers.push({ text: "Concentration", align: 'center', sortable: false, value: 'frontmatter.concentration' })
       }
-      if (this.showColumn.ritual) {
+      if (this.showColumn.ritual && this.$vuetify.breakpoint.mdAndUp) {
         headers.push({ text: "Rituel", align: 'center', sortable: false, value: 'frontmatter.ritual' })
       }
-      if (this.showColumn.components) {
+      if (this.showColumn.components && this.$vuetify.breakpoint.mdAndUp) {
         headers.push({ text: "Composantes", align: 'center', sortable: false, value: 'frontmatter.components' })
       }
-      if (this.showColumn.description) {
+      if (this.showColumn.description && this.$vuetify.breakpoint.mdAndUp) {
         headers.push({ text: "Description", align: 'start', sortable: false, value: 'frontmatter.description' })
       }
       return headers
@@ -291,31 +280,7 @@ export default {
     spells() {
       let results = this.$pagination.pages
 
-      // JSON Migration Generation
+      // Filter concentration
-      // console.log(results)
-      // let json = []
-      // for (var spell of results) {
-      //   json.push({
-      //     'nom':spell.frontmatter.title,
-      //     'ecole':spell.frontmatter.school,
-      //     'niveau':spell.frontmatter.level,
-      //     'portee':spell.frontmatter.range,
-      //     'duree':spell.frontmatter.duration,
-      //     'temps_incantation':spell.frontmatter.casting_time,
-      //     'composante_v':spell.frontmatter.components.material,
-      //     'composante_s':spell.frontmatter.components.somatic,
-      //     'composante_m':spell.frontmatter.components.material,
-      //     'composante_m_description':spell.frontmatter.components.materials,
-      //     'concentration':spell.frontmatter.concentration,
-      //     'rituel':spell.frontmatter.ritual,
-      //     'description':spell.rawContent,
-      //     'resume':spell.frontmatter.description,
-      //     'source':spell.frontmatter.source,
-      //   })
-      // }
-      // console.log(json)
-
-      // Filter concetration
       if (this.mustBeConcentration !== undefined) {
         results = results.filter(item => {
           return item.frontmatter.concentration === this.mustBeConcentration

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

@@ -6,17 +6,19 @@ main.content {
   }
 }
 
-.column-count-2 {
+@media screen and (min-width: $breakpointMD) {
-  column-count: 2;
+  .column-count-2 {
-  column-gap: 25pt;
+    column-count: 2;
-}
+    column-gap: 25pt;
-.column-count-3 {
+  }
-  column-count: 3;
+  .column-count-3 {
-  margin-bottom: 12px;
+    column-count: 3;
-}
+    margin-bottom: 12px;
-.column-count-4 {
+  }
-  column-count: 4;
+  .column-count-4 {
-  margin-bottom: 12px;
+    column-count: 4;
+    margin-bottom: 12px;
+  }
 }
 
 * {