feat: css for print #18 (#63)

teritorio · Dec 4, 2023 · 20a75da · 20a75da
1 parent 7b241ac
commit 20a75da
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 6 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>{{ name }}</h1>
+      <h1 class="print:tw-pb-4">{{ name }}</h1>
       <slot name="actions"></slot>
       <slot name="body"></slot>
       <Footer :attributions="settings.attributions">

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 &&
@@ -68,7 +69,7 @@
               :extra-attributions="settings.attributions"
               :feature-ids="[id]"
               :features="[poi]"
-              class="tw-relative"
+              class="tw-relative poi-map"
               :off-map-attribution="true"
             />
           </template>

diff --git a/pages/poi/[id]/details.vue b/pages/poi/[id]/details.vue
@@ -186,3 +186,20 @@ export default defineNuxtComponent({
   @extend .font-light;
 }
 </style>
+
+<style>
+body,
+#__nuxt,
+#__layout {
+  -webkit-print-color-adjust: exact;
+}
+
+img,
+.poi-deck,
+.poi-map,
+#route-map {
+  page-break-before: auto;
+  page-break-after: auto;
+  page-break-inside: avoid;
+}
+</style>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -29,6 +29,9 @@ module.exports = {
       flexBasis: {
         max: 'max-content',
       },
+      screens: {
+        print: { raw: 'print' },
+      },
     },
   },
   plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],