✨ [feat-18] init css on print

teritorio · Feb 13, 2023 · 37dd7f0 · 37dd7f0
1 parent bd376f8
commit 37dd7f0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 4 deletions.
diff --git a/components/Layout/Header.vue b/components/Layout/Header.vue
@@ -9,7 +9,7 @@
 
     <div class="flex justify-end">
       <slot />
-      <NavMenu :entries="navMenuEntries" />
+      <NavMenu :entries="navMenuEntries" class="print:hidden" />
     </div>
   </header>
 </template>

diff --git a/components/Layout/PoiLayout.vue b/components/Layout/PoiLayout.vue
@@ -11,7 +11,7 @@
       <div class="flex justify-center">
         <TeritorioIconBadge :color-fill="colorFill" size="2xl" :picto="icon" />
       </div>
-      <h1>{{ name }}</h1>
+      <h1 class="print:pb-8">{{ name }}</h1>
       <slot name="actions"></slot>
       <slot name="body"></slot>
       <Footer :attributions="settings.attributions">
@@ -100,4 +100,10 @@ export default Vue.extend({
   margin-top: 1.2rem;
   margin-bottom: 0.7rem;
 }
+
+@media print {
+  #headerbuttons {
+    display: none;
+  }
+}
 </style>
diff --git a/components/PoisDetails/FieldsGroup.vue b/components/PoisDetails/FieldsGroup.vue
@@ -16,6 +16,7 @@
       v-else-if="group.display_mode === 'card'"
       :color-fill="colorFill"
       :icon="group.icon"
+      class="print:hidden"
     >
       <FieldsHeader :recursion-stack="recursionStack">
         {{ title }}

diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
@@ -12,15 +12,15 @@
         :aria-label="
           isFavorite ? $tc('poiCard.favoriteOn') : $tc('poiCard.favoriteOff')
         "
-        :class="['w-11 h-11', 'mr-3 sm:mr-9']"
+        :class="['w-11 h-11', 'mr-3 sm:mr-9', 'print: hidden']"
         @click.stop="toggleFavorite"
       >
         <FavoriteIcon :is-active="isFavorite" :color-line="colorLine" />
       </IconButton>
       <IconButton
         :href="mapURL"
         :aria-label="$tc('poiCard.backToMap')"
-        :class="['w-11 h-11', 'mr-3 sm:mr-9']"
+        :class="['w-11 h-11', 'mr-3 sm:mr-9', 'print:hidden']"
         @click="!mapURL && $router.go(-1)"
       >
         <TeritorioIcon picto="map" class="text-zinc-800" />
@@ -34,6 +34,7 @@
           poi.properties.editorial['website:details']
         "
         :color-line="colorLine"
+        class="print:hidden"
       />
     </template>
     <template #body>

diff --git a/pages/poi/_id/details.vue b/pages/poi/_id/details.vue
@@ -182,3 +182,16 @@ export default Vue.extend({
   @extend .font-light;
 }
 </style>
+<style>
+body {
+  -webkit-print-color-adjust: exact;
+}
+
+@media print {
+  html,
+  body {
+    width: 210mm;
+    height: 297mm;
+  }
+}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -18,6 +18,9 @@ module.exports = {
       flexBasis: {
         max: 'max-content',
       },
+      screens: {
+        print: { raw: 'print' },
+      },
     },
   },
   plugins: [