optimisation mobile + filtres des monstres + seo

docs/.vuepress/theme/components/Monster.vue

@@ -139,7 +139,8 @@ import {
   getModifier,
   displayAbilityScore,
   getProficiencyBonus,
-  displayChallenge
+  displayChallenge,
+  displayMonsterTypeSizeAlignment
 } from '@theme/util/monsterHelpers'
 
 import {stats} from '../../data/stats.js'
@@ -184,22 +185,7 @@ export default {
     getProficiencyBonus () { return getProficiencyBonus(this.monster.challenge) },
 
     displayMonsterTypeSizeAlignment () {
-      let result = ''
-      if (this.monster.isSwarm) {
-        result = 'Nuée de taille '+ this.monster.size + ' composée ' + stats.monsterTypes[this.monster.type].swarm
-        if (this.monster.subtype) {
-          result += ' (' + this.monster.subtype + ')'
-        }
-        result += ' de taille ' + this.monster.swarmSize
-      } else {
-        result = this.monster.type
-        if (this.monster.subtype) {
-          result += ' (' + this.monster.subtype + ')'
-        }
-        result += ' de taille ' + this.monster.size
-      }
-      result += ', ' + this.monster.alignment
-      return result
+      return displayMonsterTypeSizeAlignment(this.monster)
     },
 
     displaySavingThrowBonus (ability) {

docs/.vuepress/theme/components/MonsterFilters.vue

@@ -28,7 +28,21 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
 
+      <v-expansion-panel>
+        <v-expansion-panel-header>Environnements</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetEnvironments" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(environment, idx) in environments" v-model="environment.value" :label="environment.label" dense class="ma-0" @change="switchEnvironment" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
 
+      <v-expansion-panel>
+        <v-expansion-panel-header>Types de donjons</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetDungeonTypes" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(dungeonType, idx) in dungeonTypes" v-model="dungeonType.value" :label="dungeonType.label" dense class="ma-0" @change="switchDungeonType" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
 
     </v-expansion-panels>
 
@@ -75,6 +89,24 @@ export default {
         this.$store.commit('monsterFilters/setSizes', newValue)
       }
     },
+
+    environments: {
+      get () {
+        return this.$store.state.monsterFilters.environments
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setEnvironments', newValue)
+      }
+    },
+
+    dungeonTypes: {
+      get () {
+        return this.$store.state.monsterFilters.dungeonTypes
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setDungeonTypes', newValue)
+      }
+    },
   },
 
   methods: {
@@ -96,7 +128,27 @@ export default {
           list.push(this.sizes[i].label)
         }
       }
-      setUrlParams('raretes', list)
+      setUrlParams('tailles', list)
+    },
+
+    switchEnvironment () {
+      let list = []
+      for (var i = 0; i < this.environments.length; i++) {
+        if (this.environments[i].value) {
+          list.push(this.environments[i].label)
+        }
+      }
+      setUrlParams('environnements', list)
+    },
+
+    switchDungeonType () {
+      let list = []
+      for (var i = 0; i < this.dungeonTypes.length; i++) {
+        if (this.dungeonTypes[i].value) {
+          list.push(this.dungeonTypes[i].label)
+        }
+      }
+      setUrlParams('donjons', list)
     },
 
     setColor (value, compare, color) {
@@ -115,16 +167,30 @@ export default {
       this.$store.commit('monsterFilters/resetSizes')
       this.switchSize()
     },
+
+    resetEnvironments () {
+      this.$store.commit('monsterFilters/resetEnvironments')
+      this.switchEnvironment()
+    },
+
+    resetDungeonTypes () {
+      this.$store.commit('monsterFilters/resetDungeonTypes')
+      this.switchDungeonType()
+    },
   },
 
   mounted () {
     this.$store.dispatch('monsterFilters/reset')
 
-    let selectedSizes = getUrlParameter(window.location.href, "raretes").split(",")
+    let selectedSizes = getUrlParameter(window.location.href, "tailles").split(",")
     let selectedTypes = getUrlParameter(window.location.href, "types").split(",")
+    let selectedEnvironments = getUrlParameter(window.location.href, "environnements").split(",")
+    let selectedDungeonTypes = getUrlParameter(window.location.href, "donjons").split(",")
 
     setListMutation(selectedTypes, this.$store, 'monsterFilters/setTypesFromList')
     setListMutation(selectedSizes, this.$store, 'monsterFilters/setSizesFromList')
+    setListMutation(selectedEnvironments, this.$store, 'monsterFilters/setEnvironmentsFromList')
+    setListMutation(selectedDungeonTypes, this.$store, 'monsterFilters/setDungeonTypesFromList')
   }
 }
 </script>

docs/.vuepress/theme/components/NavDrawer.vue

@@ -71,6 +71,16 @@
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+      <v-list-item v-if="$vuetify.breakpoint.mdAndDown" @click.stop="$store.commit('setIsOpenAboutDialog', true)">
+        <v-list-item-icon>
+          <v-icon>mdi-information</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>
+            À propos
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
     </v-list>
   </v-navigation-drawer>
 </template>

docs/.vuepress/theme/components/Navbar.vue

@@ -7,12 +7,12 @@
     <SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
     <v-spacer />
-    <v-btn @click.stop="aboutDialog = true" icon><v-icon>mdi-information</v-icon></v-btn>
+    <v-btn v-if="$vuetify.breakpoint.lgAndUp" @click.stop="$store.commit('setIsOpenAboutDialog', true)" icon><v-icon>mdi-information</v-icon></v-btn>
     <v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
       <v-icon>{{ rightDrawerIcon }}</v-icon>
     </v-btn>
 
-    <v-dialog v-model="aboutDialog" max-width="600">
+    <v-dialog v-model="$store.state.isOpenAboutDialog" max-width="600">
       <v-card>
         <v-card-title class="headline">À propos de H&D DRS</v-card-title>
 
@@ -30,7 +30,6 @@
 
 <script>
 import SRDSearchBox from '@theme/components/search/SRDSearchBox.vue'
-// import NavLinks from '@theme/components/NavLinks.vue'
 
 export default {
   name: 'Navbar',
@@ -62,7 +61,7 @@ export default {
     rightDrawerIcon() {
       if (this.inRightDrawer == 'pageToc') {
         return 'mdi-format-list-bulleted'
-      } else if (this.inRightDrawer == 'spellFilters' || this.inRightDrawer == 'magicItemFilters') {
+      } else if (this.inRightDrawer == 'spellFilters' || this.inRightDrawer == 'monsterFilters' || this.inRightDrawer == 'magicItemFilters') {
         return 'mdi-filter-variant'
       }
       return 'mdi-menu'

docs/.vuepress/theme/components/search/SRDSearchBox.vue

@@ -34,6 +34,7 @@
 import matchQuery from './match-query'
 import { displaySchoolLevel } from '@theme/util/spellHelpers'
 import { displayItemMeta } from '@theme/util/magicItemHelpers'
+import { displayMonsterTypeSizeAlignment } from '@theme/util/monsterHelpers'
 
 /* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
 export default {
@@ -118,6 +119,12 @@ export default {
               title: p.title,
               path: p.path
             }))
+          } else if (p.pid && p.pid == 'monster') {
+            res.push(Object.assign({}, p, {
+              subtitle: displayMonsterTypeSizeAlignment(p.frontmatter, true, false),
+              title: p.title,
+              path: p.path
+            }))
           } else {
             res.push(p)
           }