feat: css for print #18 (#63)

README.md

@@ -25,16 +25,16 @@ The web application target multiple devices: smartphones, desktops, and large to
 Full entry points documentation available on [api.yml](public/api.yaml) and on server at [http://localhost:3000/api.yaml](http://localhost:3000/api.yaml).
 
 * Main Map:
-* Full page: `/`, `/{poi_Id}`, `/{category_ids}/` and `/{category_ids}/{poi_id}`.
-* Parameters:
-* `boundary`: an alternative boundary key from settings `polygons_extra`.
-* Embedded: `/embedded/`, same subpath and parameters as full page.
+  * Full page: `/`, `/{poi_Id}`, `/{category_ids}/` and `/{category_ids}/{poi_id}`.
+    * Parameters:
+      * `boundary`: an alternative boundary key from settings `polygons_extra`.
+  * Embedded: `/embedded/`, same subpath and parameters as full page.
 * POI:
-* details: `/poi/{id}/details`.
+  * details: `/poi/{id}/details`.
 * POIs:
-* map only: `/pois/{ids}/map`.
+  * map only: `/pois/{ids}/map`.
 * Categories
-* list of POIs of a category: `/category/{id}`
+  * list of POIs of a category: `/category/{id}`
 
 ### Sitemap & WPA
 * `/manifest.webmanifest`

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>

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">

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',
       ]"

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">

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>

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>

components/PoisList/CategorySelector.vue

@@ -86,7 +86,7 @@ export default defineNuxtComponent({
     ] {
       const menuIndex: { [key: number]: MenuItem } = {}
       this.menuItems
-        .filter((menuItem) => !menuItem.hidden)
+        .filter((menuItem) => menuItem.menu_group)
         .forEach((menuItem) => {
           menuIndex[menuItem.id] = menuItem
         })

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>

plugins/vido-config.ts

@@ -4,11 +4,16 @@ import { VidoConfig, VidosConfig } from '~/utils/types-config'
 
 export function vidoConfigResolve(
   host: string,
+  matchedHost: string,
   vidoHostConfig: VidosConfig
 ): VidoConfig {
-  return {
-    ...(vidoHostConfig[host] || vidoHostConfig['']),
+  const vido = { ...vidoHostConfig[matchedHost] }
+  if (matchedHost.startsWith('*.')) {
+    vido.API_PROJECT = host.split('.')[1]
+    vido.API_THEME = host.split('.')[0]
   }
+
+  return vido
 }
 
 export function vidoConfig(
@@ -30,10 +35,16 @@ export function vidoConfig(
   host = host?.split(':')[0]
 
   const vidoHostConfig = vidos()
-  if (!(host in vidoHostConfig) && !('' in vidoHostConfig)) {
-    throw new Error(`Not configured host "${host}"`)
+  const matchedHost = Object.keys(vidoHostConfig).find(
+    (availableHost) =>
+      availableHost == host ||
+      (availableHost.startsWith('*.') &&
+        host.endsWith(availableHost.substring(1)))
+  )
+  if (!matchedHost && !('' in vidoHostConfig)) {
+    throw new Error(`Not matching host "${host}"`)
   }
-  return vidoConfigResolve(host, vidoHostConfig)
+  return vidoConfigResolve(host, matchedHost || '', vidoHostConfig)
 }
 
 export default defineNuxtPlugin((_nuxtApp) => {

stores/menu.ts

@@ -55,19 +55,15 @@ export const menuStore = defineStore('menu', {
     apiMenuCategory: (state: State): ApiMenuCategory[] | undefined => {
       return state.menuItems === undefined
         ? undefined
-        : (Object.values(state.menuItems).filter(
-            (menuItem) => menuItem.category !== undefined
-          ) as ApiMenuCategory[])
+        : (Object.values(state.menuItems) as ApiMenuCategory[])
     },
 
     selectedCategories: (state: State): ApiMenuCategory[] | undefined => {
       return state.menuItems === undefined
         ? undefined
         : (state.selectedCategoryIds
             .map((selectedCatagoryId) => state.menuItems![selectedCatagoryId])
-            .filter(
-              (menuItems) => menuItems !== undefined
-            ) as ApiMenuCategory[])
+            .filter((menuItems) => menuItems) as ApiMenuCategory[])
     },
   },
 

tailwind.config.js

@@ -29,6 +29,9 @@ module.exports = {
       flexBasis: {
         max: 'max-content',
       },
+      screens: {
+        print: { raw: 'print' },
+      },
     },
   },
   plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],