From 6caa69cc113f064656da9c39f167a005ef257636 Mon Sep 17 00:00:00 2001
From: Maxime Moraine <mmoraine@bearstech.com>
Date: Wed, 22 Apr 2020 14:23:59 +0200
Subject: [PATCH] meilleure adaptation mobile

---
 .../theme/layouts/CreateMagicItemLayout.vue   |  18 +--
 .../theme/layouts/CreateMonsterLayout.vue     | 115 ++++++++++++++----
 .../theme/layouts/CreateSpellLayout.vue       |  30 ++---
 .../theme/layouts/MagicItemLayout.vue         |  12 +-
 .../theme/layouts/MagicItemsLayout.vue        |  10 +-
 .../.vuepress/theme/layouts/MonsterLayout.vue |  12 +-
 .../theme/layouts/MonstersLayout.vue          |  10 +-
 .../theme/layouts/MySpellsLayout.vue          |  10 +-
 docs/.vuepress/theme/layouts/SpellLayout.vue  |  12 +-
 docs/.vuepress/theme/layouts/SpellsLayout.vue |  10 +-
 10 files changed, 162 insertions(+), 77 deletions(-)

diff --git a/docs/.vuepress/theme/layouts/CreateMagicItemLayout.vue b/docs/.vuepress/theme/layouts/CreateMagicItemLayout.vue
index 6f86356..79bce76 100644
--- a/docs/.vuepress/theme/layouts/CreateMagicItemLayout.vue
+++ b/docs/.vuepress/theme/layouts/CreateMagicItemLayout.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="create-magic-item">
-    <div class="d-flex align-center mb-4 d-print-none">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
-      <v-btn color="primary" depressed link to="/liste-objets-magiques/">Liste des objets magiques</v-btn>
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/liste-objets-magiques/">Liste des objets magiques</v-btn>
+      </div>
     </div>
 
     <h1 class="d-print-none">Création de sort</h1>
@@ -21,16 +23,16 @@
     </div>
 
     <v-row>
-      <v-col class="d-print-none" :col="6">
+      <v-col class="d-print-none" :cols="12" :md="6">
 
         <v-row>
-          <v-col>
+          <v-col :cols="12" :sm="4">
             <v-text-field label="Nom" outlined dense v-model="magicItem.title"></v-text-field>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="4">
             <v-select :items="types" label="Type" outlined dense v-model="magicItem.frontmatter.type"></v-select>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="4">
             <v-select :items="rarities" label="Rareté" outlined dense v-model="magicItem.frontmatter.rarity"></v-select>
           </v-col>
         </v-row>
diff --git a/docs/.vuepress/theme/layouts/CreateMonsterLayout.vue b/docs/.vuepress/theme/layouts/CreateMonsterLayout.vue
index 43eb9f2..04b8fa5 100644
--- a/docs/.vuepress/theme/layouts/CreateMonsterLayout.vue
+++ b/docs/.vuepress/theme/layouts/CreateMonsterLayout.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="create-monster">
-    <div class="d-flex align-center mb-4 d-print-none">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
-      <v-btn color="primary" depressed link to="/bestiaire/">Bestiaire</v-btn>
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/bestiaire/">Bestiaire</v-btn>
+      </div>
     </div>
 
     <h1 class="d-print-none">Création de monstre/PNJ</h1>
@@ -21,16 +23,16 @@
     </div>
 
     <v-row>
-      <v-col class="d-print-none" :col="6">
+      <v-col class="d-print-none" :cols="12" :md="6">
 
         <v-row>
-          <v-col>
+          <v-col :cols="12" :sm="4">
             <v-text-field label="Nom" placeholder="Elfe noir" outlined dense v-model="monster.title"></v-text-field>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="4">
             <v-select :items="sizes" item-text="label" item-value="abbr" label="Taille" outlined dense v-model="monster.frontmatter.size" @change="selectMonsterSize"></v-select>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="4">
             <v-select :items="challenges" item-text="label" item-value="value" label="Dangerosité" persistent-hint :hint="challengeHint" outlined dense v-model="monster.frontmatter.challenge"></v-select>
           </v-col>
         </v-row>
@@ -55,17 +57,33 @@
         </v-row>
 
         <v-row>
-          <v-col class="d-flex align-center">
-            <v-text-field class="mr-1" label="Force" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.for"></v-text-field>
-            <v-text-field class="mr-1" label="Dextérité" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.dex"></v-text-field>
-            <v-text-field class="mr-1" label="Constitution" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.con"></v-text-field>
-            <v-text-field class="mr-1" label="Intelligence" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.int"></v-text-field>
-            <v-text-field class="mr-1" label="Sagesse" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.sag"></v-text-field>
-            <v-text-field class="mr-0" label="Charisme" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.cha"></v-text-field>
+          <v-col class="subtitle-2" :cols="12">
+            Caractéristiques
+          </v-col>
+          <v-col class="d-flex align-center" :cols="4" :sm="2">
+            <v-text-field label="Force" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.for"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="4" :sm="2">
+            <v-text-field label="Dextérité" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.dex"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="4" :sm="2">
+            <v-text-field label="Constitution" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.con"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="4" :sm="2">
+            <v-text-field label="Intelligence" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.int"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="4" :sm="2">
+            <v-text-field label="Sagesse" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.sag"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="4" :sm="2">
+            <v-text-field label="Charisme" type="number" min="1" outlined dense v-model="monster.frontmatter.abilityScores.cha"></v-text-field>
           </v-col>
         </v-row>
 
         <v-row>
+          <v-col class="subtitle-2" :cols="12">
+            Défenses
+          </v-col>
           <v-col class="d-flex align-center">
             <v-text-field label="Dés de vie" type="number" min="1" outlined dense v-model="monster.frontmatter.hitDiceCount"></v-text-field>
             <v-switch class="my-0 mx-1" v-model="customHitDieSize" label="Dé de vie personnalisé" dense @change="switchCustomHitDizeSize"></v-switch>
@@ -83,50 +101,99 @@
         </v-row>
 
         <v-row>
-          <v-col class="d-flex align-center">
-            <v-select class="mr-1" multiple clearable :items="abilities" item-text="label" item-value="value" label="Jets de sauvegarde" outlined dense v-model="monster.frontmatter.savingThrows"></v-select>
-            <v-select class="mr-1" multiple clearable return-object :items="skills" item-text="label" item-value="value" label="Compétences" outlined dense v-model="selectedSkillsProficient" @change="selectSkill"></v-select>
-            <v-select class="mr-1" multiple clearable :items="selectedSkillsProficient" item-text="label" item-value="value" label="Compétences expert" outlined dense v-model="selectedSkillsExpert" @change="selectSkillExpert"></v-select>
+          <v-col class="subtitle-2" :cols="12">
+            Maîtrises
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :sm="4">
+            <v-select multiple clearable :items="abilities" item-text="label" item-value="value" label="Jets de sauvegarde" outlined dense v-model="monster.frontmatter.savingThrows"></v-select>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :sm="4">
+            <v-select multiple clearable return-object :items="skills" item-text="label" item-value="value" label="Compétences" outlined dense v-model="selectedSkillsProficient" @change="selectSkill"></v-select>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :sm="4">
+            <v-select multiple clearable :items="selectedSkillsProficient" item-text="label" item-value="value" label="Compétences expert" outlined dense v-model="selectedSkillsExpert" @change="selectSkillExpert"></v-select>
           </v-col>
         </v-row>
+
         <v-row>
-          <v-col class="d-flex align-center flex-wrap">
+          <v-col class="subtitle-2" :cols="12">
+            Résistances et vulnérabilités
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :md="3">
             <v-select class="mr-1" multiple clearable :items="conditions" label="Immunité états spéciaux" outlined dense v-model="monster.frontmatter.conditionImmunities"></v-select>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :md="3">
             <v-select class="mr-1" multiple clearable :items="damageTypes" label="Vulnérabilité au dégâts" outlined dense v-model="monster.frontmatter.damageTypeVulnerabilities"></v-select>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :md="3">
             <v-select class="mr-1" multiple clearable :items="damageTypes" label="Résistance au dégâts" outlined dense v-model="monster.frontmatter.damageTypeResistances"></v-select>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :md="3">
             <v-select class="mr-1" multiple clearable :items="damageTypes" label="Immunité au dégâts" outlined dense v-model="monster.frontmatter.damageTypeImmunities"></v-select>
           </v-col>
         </v-row>
 
         <v-row>
-          <v-col class="d-flex align-center">
+          <v-col class="subtitle-2" :cols="12">
+            Déplacements
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
             <v-text-field class="mr-1" label="Au sol" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.walk"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
             <v-text-field class="mr-1" label="Escalade" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.climb"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
             <v-text-field class="mr-1" label="Fouissement" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.burrow"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
             <v-text-field class="mr-1" label="Nage" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.swim"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
             <v-text-field class="mr-1" label="Vol" type="number" min="0" outlined dense v-model="monster.frontmatter.movement.fly"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :sm="4" :lg="2">
             <v-switch class="my-0" v-model="monster.frontmatter.movement.hover" label="Vol stationnaire" dense></v-switch>
           </v-col>
         </v-row>
 
         <v-row>
-          <v-col class="d-flex align-center">
+          <v-col class="subtitle-2" :cols="12">
+            Sens
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :lg="3">
             <v-text-field class="mr-1" label="Perception des vibrations" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.tremorsense"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :lg="3">
             <v-text-field class="mr-1" label="Vision aveugle" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.blindsight"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :lg="3">
             <v-text-field class="mr-1" label="Vision dans le noir" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.darkvision"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="6" :lg="3">
             <v-text-field class="mr-0" label="Vision parfaite" type="number" min="0" outlined dense v-model="monster.frontmatter.senses.truesight"></v-text-field>
           </v-col>
         </v-row>
 
         <v-row>
-          <v-col class="d-flex align-center">
+          <v-col class="subtitle-2" :cols="12">
+            Langues et communication
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :md="4">
             <v-select class="mr-1" multiple clearable :items="languages" label="Langues" outlined dense v-model="monster.frontmatter.languages"></v-select>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :md="4">
             <v-text-field class="mr-1" label="Langue personnalisée" outlined dense v-model="monster.frontmatter.customLanguage"></v-text-field>
+          </v-col>
+          <v-col class="d-flex align-center" :cols="12" :md="4">
             <v-text-field label="Télépathie" type="number" min="0" outlined dense v-model="monster.frontmatter.telepathy"></v-text-field>
           </v-col>
         </v-row>
 
         <v-row>
+          <v-col class="subtitle-2" :cols="12">
+            Capacités, Actions, Réactions et Actions légendaires
+          </v-col>
           <v-col>
             <v-textarea outlined label="Capacités, Actions, Réactions, Actions légendaires" v-model="monster.content"></v-textarea>
           </v-col>
@@ -134,7 +201,7 @@
 
       </v-col>
 
-      <v-col :col="6">
+      <v-col :cols="12" :md="6">
         <Monster :monster="monster" />
       </v-col>
     </v-row>
diff --git a/docs/.vuepress/theme/layouts/CreateSpellLayout.vue b/docs/.vuepress/theme/layouts/CreateSpellLayout.vue
index 1b60eb2..0bc7f86 100644
--- a/docs/.vuepress/theme/layouts/CreateSpellLayout.vue
+++ b/docs/.vuepress/theme/layouts/CreateSpellLayout.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="create-spell">
-    <div class="d-flex align-center mb-4 d-print-none">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
-      <v-btn color="primary" depressed link to="/grimoire/">Grimoire</v-btn>
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/grimoire/">Grimoire</v-btn>
+      </div>
     </div>
 
     <h1 class="d-print-none">Création de sort</h1>
@@ -21,34 +23,34 @@
     </div>
 
     <v-row>
-      <v-col class="d-print-none" :col="6">
+      <v-col class="d-print-none" :cols="12" :md="6">
 
         <v-row>
-          <v-col>
+          <v-col :cols="12" :lg="3">
             <v-text-field label="Nom" placeholder="Projectile magique" outlined dense v-model="spell.title"></v-text-field>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="4" :lg="3">
             <v-select :items="schools" label="École" outlined dense v-model="spell.frontmatter.school"></v-select>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="4" :lg="3">
             <v-select :items="levels" item-text="label" item-value="value" label="Niveau" outlined dense v-model="spell.frontmatter.level"></v-select>
           </v-col>
-          <v-col>
+          <v-col v:cols="12" :sm="4" :lg="3">
             <v-switch class="my-0" v-model="spell.frontmatter.ritual" label="Rituel" dense></v-switch>
           </v-col>
         </v-row>
 
         <v-row>
-          <v-col>
+          <v-col :cols="12" :sm="6" :lg="3">
             <v-text-field label="Temps d'incantation" placeholder="1 action" outlined dense v-model="spell.frontmatter.casting_time"></v-text-field>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="6" :lg="3">
             <v-text-field label="Portée" placeholder="36 m" outlined dense v-model="spell.frontmatter.range"></v-text-field>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="6" :lg="3">
             <v-text-field label="Duration" placeholder="instantanée" outlined dense v-model="spell.frontmatter.duration"></v-text-field>
           </v-col>
-          <v-col>
+          <v-col :cols="12" :sm="6" :lg="3">
             <v-switch class="my-0" v-model="spell.frontmatter.concentration" label="Concentration" dense></v-switch>
           </v-col>
         </v-row>
@@ -94,7 +96,7 @@
 
       </v-col>
 
-      <v-col :col="6">
+      <v-col :cols="12" :md="6">
         <Spell :spell="spell" />
       </v-col>
     </v-row>
diff --git a/docs/.vuepress/theme/layouts/MagicItemLayout.vue b/docs/.vuepress/theme/layouts/MagicItemLayout.vue
index 3b8fd24..1718bad 100644
--- a/docs/.vuepress/theme/layouts/MagicItemLayout.vue
+++ b/docs/.vuepress/theme/layouts/MagicItemLayout.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="magic-item">
-    <div class="d-flex align-center mb-4 d-print-none">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
-      <v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
-      <v-btn color="primary" class="mr-4" depressed link to="/mon-grimoire/">Mes objets magiques</v-btn>
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
+        <v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-4 mb-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mes objets magiques</v-btn>
+      </div>
     </div>
     <MagicItem :magicItem="$page" />
     <Edit />
diff --git a/docs/.vuepress/theme/layouts/MagicItemsLayout.vue b/docs/.vuepress/theme/layouts/MagicItemsLayout.vue
index 126d337..fbc9563 100644
--- a/docs/.vuepress/theme/layouts/MagicItemsLayout.vue
+++ b/docs/.vuepress/theme/layouts/MagicItemsLayout.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="magic-items">
 
-    <div class="d-flex align-center mb-4">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
-      <v-btn color="primary" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
+    <div class="d-flex flex-wrap align-center">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
+      </div>
     </div>
 
     <h1>Liste des objets magiques</h1>
diff --git a/docs/.vuepress/theme/layouts/MonsterLayout.vue b/docs/.vuepress/theme/layouts/MonsterLayout.vue
index 16609b2..e24c8f3 100644
--- a/docs/.vuepress/theme/layouts/MonsterLayout.vue
+++ b/docs/.vuepress/theme/layouts/MonsterLayout.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="monster">
-    <div class="d-flex align-center mb-4 d-print-none">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
-      <v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
-      <v-btn color="primary" class="mr-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
+        <v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4 mb-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
+      </div>
     </div>
     <Monster :monster="$page" />
     <Edit />
diff --git a/docs/.vuepress/theme/layouts/MonstersLayout.vue b/docs/.vuepress/theme/layouts/MonstersLayout.vue
index f662f61..3f6e846 100644
--- a/docs/.vuepress/theme/layouts/MonstersLayout.vue
+++ b/docs/.vuepress/theme/layouts/MonstersLayout.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="monsters">
 
-    <div class="d-flex align-center mb-4">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
-      <v-btn color="primary" depressed link to="/mon-bestiaire/">Mon bestiaire</v-btn>
+    <div class="d-flex flex-wrap align-center">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire</v-btn>
+      </div>
     </div>
 
     <h1>Bestiaire</h1>
diff --git a/docs/.vuepress/theme/layouts/MySpellsLayout.vue b/docs/.vuepress/theme/layouts/MySpellsLayout.vue
index bb3c6a1..57c352a 100644
--- a/docs/.vuepress/theme/layouts/MySpellsLayout.vue
+++ b/docs/.vuepress/theme/layouts/MySpellsLayout.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="my-spells">
-    <div class="d-flex align-center mb-4 d-print-none">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
-      <v-btn color="primary" depressed link to="/grimoire/">Grimoire</v-btn>
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/grimoire/">Grimoire</v-btn>
+      </div>
     </div>
 
     <h1>Mon grimoire</h1>
diff --git a/docs/.vuepress/theme/layouts/SpellLayout.vue b/docs/.vuepress/theme/layouts/SpellLayout.vue
index 7218ff5..c0edecc 100644
--- a/docs/.vuepress/theme/layouts/SpellLayout.vue
+++ b/docs/.vuepress/theme/layouts/SpellLayout.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="spell">
-    <div class="d-flex align-center mb-4 d-print-none">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
-      <v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-4" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
-      <v-btn color="primary" class="mr-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
+    <div class="d-flex flex-wrap align-center d-print-none">
+      <Breadcrumb class="mr-auto b-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
+        <v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-4 mb-4" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
+      </div>
     </div>
     <Spell :spell="$page" />
     <Edit />
diff --git a/docs/.vuepress/theme/layouts/SpellsLayout.vue b/docs/.vuepress/theme/layouts/SpellsLayout.vue
index c387ca2..c06203c 100644
--- a/docs/.vuepress/theme/layouts/SpellsLayout.vue
+++ b/docs/.vuepress/theme/layouts/SpellsLayout.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="spells">
 
-    <div class="d-flex align-center mb-4">
-      <Breadcrumb class="mr-auto" />
-      <v-btn color="primary" class="mr-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
-      <v-btn color="primary" depressed link to="/mon-grimoire/">Mon grimoire</v-btn>
+    <div class="d-flex flex-wrap align-center">
+      <Breadcrumb class="mr-auto mb-4" />
+      <div class="d-flex flex-wrap align-center">
+        <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
+        <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire</v-btn>
+      </div>
     </div>
 
     <h1>Grimoire</h1>