From 49a36a7567ee99bbca03d862ec30799883a0db72 Mon Sep 17 00:00:00 2001
From: Maxime Moraine <maxime.moraine@gmail.com>
Date: Mon, 20 Sep 2021 17:09:42 +0200
Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20de=20l'impression=20des=20m?=
 =?UTF-8?q?onstres=20et=20des=20sorts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../.vuepress/theme/components/MyMonsters.vue |  4 ++--
 docs/.vuepress/theme/components/MySpells.vue  | 10 +++++-----
 docs/.vuepress/theme/styles/_print.scss       | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/docs/.vuepress/theme/components/MyMonsters.vue b/docs/.vuepress/theme/components/MyMonsters.vue
index 6e28896..e5e2dbe 100644
--- a/docs/.vuepress/theme/components/MyMonsters.vue
+++ b/docs/.vuepress/theme/components/MyMonsters.vue
@@ -56,8 +56,8 @@
           </v-data-table>
         </div>
 
-        <div class="d-none d-print-block column-count-2">
-          <div v-for="monster in monsters">
+        <div class="d-none d-print-block print-column-count-2 column-count-2">
+          <div class="print-monster print-break-avoid-column" v-for="monster in monsters">
             <div v-if="!isHiddenPrint(monster)">
               <h1 class="d-flex align-center">
                 <div class="mr-4">{{ monster.title }}</div>
diff --git a/docs/.vuepress/theme/components/MySpells.vue b/docs/.vuepress/theme/components/MySpells.vue
index 95d7aa4..14ce9a8 100644
--- a/docs/.vuepress/theme/components/MySpells.vue
+++ b/docs/.vuepress/theme/components/MySpells.vue
@@ -88,22 +88,22 @@
           </v-data-table>
         </div>
         <div class="d-none d-print-block">
-          <template v-for="(n, level) in 10" v-if="hasSpellOfLevel(level)">
+          <div class="print-break-avoid-page" v-for="(n, level) in 10" v-if="hasSpellOfLevel(level)">
             <h2 v-if="level == 0">Tours de magie</h2>
             <h2 v-else>Sorts de niveau {{ level }}</h2>
-            <div class="column-count-2">
+            <div class="column-count-2 print-column-count-2">
               <div v-for="spell in spells">
-                <template v-if="spell.frontmatter.level == level && !isHiddenPrint(spell)">
+                <div class="print-spell print-break-avoid-column" v-if="spell.frontmatter.level == level && !isHiddenPrint(spell)">
                   <h3 class="d-flex align-center title">
                     <div class="mr-4">{{ spell.title }}</div>
                     <v-btn class="d-print-none mr-2" small depressed link :to="{ path: '/creation-de-sort/', query: { key: spell.key } }"><v-icon left>mdi-pencil</v-icon> Modifier</v-btn>
                     <v-btn color="error" class="d-print-none" small depressed @click="removeSpell(spell)"><v-icon left>mdi-delete</v-icon> Supprimer</v-btn>
                   </h3>
                   <Spell :spell="getSpell(spell)" :isList="true" :hideTitle="true" />
-                </template>
+                </div>
               </div>
             </div>
-          </template>
+          </div>
         </div>
       </div>
       <template v-else>
diff --git a/docs/.vuepress/theme/styles/_print.scss b/docs/.vuepress/theme/styles/_print.scss
index 1c0cb56..d5a98f2 100644
--- a/docs/.vuepress/theme/styles/_print.scss
+++ b/docs/.vuepress/theme/styles/_print.scss
@@ -89,4 +89,23 @@
   main.content {
     padding: 0;
   }
+
+  .print-column-count-2 {
+    column-count: 2;
+    column-gap: 25pt;
+  }
+
+  .print-monster, .print-spell {
+    border: 1px solid #000;
+    padding: 5pt;
+    margin-bottom: 25pt;
+  }
+
+  .print-break-avoid-page {
+    break-inside: avoid-page;
+  }
+
+  .print-break-avoid-column {
+    break-inside: avoid-column;
+  }
 }