fix: update print css style

teritorio · Oct 5, 2023 · 54fc504 · 54fc504
1 parent 6c6ca5d
commit 54fc504
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 11 deletions.
diff --git a/components/Layout/Header.vue b/components/Layout/Header.vue
@@ -7,7 +7,7 @@
       :logo-url="theme && theme.logo_url"
     />
 
-    <div class="tw-flex tw-justify-end">
+    <div class="tw-flex tw-justify-end print:tw-hidden">
       <slot></slot>
       <NavMenu :entries="navMenuEntries" />
     </div>

diff --git a/components/Layout/PoiLayout.vue b/components/Layout/PoiLayout.vue
@@ -11,7 +11,7 @@
       <div v-if="icon" class="tw-flex tw-justify-center">
         <TeritorioIconBadge :color-fill="colorFill" size="2xl" :picto="icon" />
       </div>
-      <h1 class="print:pb-8">{{ name }}</h1>
+      <h1 class="print:tw-pb-4">{{ name }}</h1>
       <slot name="actions"></slot>
       <slot name="body"></slot>
       <Footer :attributions="settings.attributions">
@@ -101,10 +101,4 @@ export default defineNuxtComponent({
   margin-top: 1.2rem;
   margin-bottom: 0.7rem;
 }
-
-@media print {
-  #headerbuttons {
-    display: none;
-  }
-}
 </style>
diff --git a/components/PoisCard/PoisDeck.vue b/components/PoisCard/PoisDeck.vue
@@ -6,7 +6,7 @@
       :key="item.properties.metadata.id"
       :poi="item"
       :class="[
-        'tw-grow-1',
+        'tw-grow-1 poi-deck',
         !isFavorite(item.properties.metadata.id) &&
           'tw-bg-zinc-200 tw-opacity-70',
       ]"

diff --git a/components/PoisDetails/Carousel.vue b/components/PoisDetails/Carousel.vue
@@ -10,7 +10,7 @@
     <v-carousel
       :show-arrows="false"
       :hide-delimiter-background="true"
-      class="mb-14"
+      class="tw-mb-14 print:tw-mb-6"
       :height="smallScreen ? 300 : 500"
     >
       <v-carousel-item v-for="(image, i) in images" :key="i">

diff --git a/components/PoisDetails/FieldsGroup.vue b/components/PoisDetails/FieldsGroup.vue
@@ -6,7 +6,7 @@
           field.group !== undefined &&
           !isListEmpty(field.fields, properties, geom)
         "
-        class="block"
+        class="block print:tw-mb-2"
       >
         <div v-if="field.display_mode === 'standard'">
           <FieldsHeader
@@ -28,6 +28,7 @@
           v-else-if="field.display_mode === 'card'"
           :color-fill="colorFill"
           :icon="field.icon"
+          class="print:tw-hidden"
         >
           <FieldsHeader
             v-if="fieldTranslateK(field.group)"
@@ -153,4 +154,9 @@ export default defineNuxtComponent({
 .block {
   margin-bottom: 3rem;
 }
+@media print {
+  .block {
+    margin-bottom: 0.5rem !important;
+  }
+}
 </style>
diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
@@ -28,6 +28,7 @@
     </template>
     <template #actions>
       <Share
+        class="print:tw-hidden"
         :title="poi.properties.name"
         :href="
           poi.properties.editorial &&

diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue
@@ -186,3 +186,18 @@ export default defineNuxtComponent({
   @extend .font-light;
 }
 </style>
+
+<style>
+body,
+#__nuxt,
+#__layout {
+  -webkit-print-color-adjust: exact;
+}
+img,
+.poi-deck,
+#route-map {
+  page-break-before: auto;
+  page-break-after: auto;
+  page-break-inside: avoid;
+}
+</style>