Feature: Adding boilerplate print styles (#538)

* Adding boilerplate print styles * hiding share buttons from print view
nasa-jpl · Aug 12, 2024 · fd40ff2 · fd40ff2
1 parent 5f1ca74
commit fd40ff2
Show file tree

Hide file tree

Showing 25 changed files with 168 additions and 84 deletions.
diff --git a/packages/common/src/scss/_print.scss b/packages/common/src/scss/_print.scss
@@ -0,0 +1,52 @@
+@media print {
+  // page setup
+  @page {
+    size: legal portrait;
+  }
+  @page :left {
+    margin-left: 0.5in;
+  }
+  @page :right {
+    margin-right: 0.5in;
+  }
+
+  // style adaptations
+  *,
+  *:before,
+  *:after,
+  *:first-letter,
+  p:first-line,
+  div:first-line,
+  blockquote:first-line,
+  li:first-line {
+    background: transparent !important;
+    color: #000 !important; /* Black prints faster:
+								   http://www.sanbeiji.com/archives/953 */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    page-break-after: avoid;
+  }
+  table,
+  figure {
+    page-break-inside: avoid;
+  }
+  main {
+    a[href]:after {
+      content: ' (' attr(href) ')';
+    }
+
+    abbr[title]:after {
+      content: ' (' attr(title) ')';
+    }
+  }
+  .container {
+    @apply max-w-none px-0;
+  }
+}
diff --git a/packages/common/src/scss/components/_BlockKeyPoints.scss b/packages/common/src/scss/components/_BlockKeyPoints.scss
@@ -1,29 +1,32 @@
 .BlockKeyPoints {
-  ul li {
-    &::before {
-      @apply bg-primary;
-      @apply inline-block;
-      @apply relative;
-      @apply mr-4;
-      @apply shrink-0;
-      @apply mt-3;
+  @media not print {
+    ul li {
+      &::before {
+        @apply bg-primary;
+        @apply inline-block;
+        @apply relative;
+        @apply mr-4;
+        @apply shrink-0;
+        @apply mt-3;
+        @apply print:hidden;
 
-      content: '';
-      width: 30px;
-      height: 2px;
-      vertical-align: middle;
-    }
-
-    .BlockText {
-      p {
-        @apply mb-2;
+        content: '';
+        width: 30px;
+        height: 2px;
+        vertical-align: middle;
+      }
 
-        @screen lg {
+      .BlockText {
+        p {
           @apply mb-2;
-        }
 
-        &:last-child {
-          @apply mb-0;
+          @screen lg {
+            @apply mb-2;
+          }
+
+          &:last-child {
+            @apply mb-0;
+          }
         }
       }
     }

diff --git a/packages/common/src/scss/styles.scss b/packages/common/src/scss/styles.scss
@@ -24,3 +24,6 @@
 
 // components
 @import 'components';
+
+// print styles
+@import 'print';
diff --git a/packages/vue/src/components/BaseButton/BaseButton.vue b/packages/vue/src/components/BaseButton/BaseButton.vue
@@ -94,7 +94,7 @@ export default defineComponent({
 <template>
   <component
     :is="tag"
-    class="BaseButton text-contrast-none"
+    class="BaseButton text-contrast-none print:border print:!border-gray-dark print:text-center"
     :class="variantClass"
     :aria-label="ariaLabel"
     :disabled="disabled"

diff --git a/packages/vue/src/components/BaseImage/BaseImage.vue b/packages/vue/src/components/BaseImage/BaseImage.vue
@@ -103,7 +103,7 @@ export default defineComponent({
     <img
       v-if="src"
       ref="BaseImage"
-      class="BaseImage"
+      class="BaseImage print:border print:border-gray-mid"
       :class="computedClass"
       :data-src="src"
       :data-srcset="srcset"

diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<BaseTagProps>(), {
 <template>
   <p
     :class="`${variantMap[props.variant]} ${sizeMap[props.size]}`"
-    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase"
+    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase print:border-none print:px-0"
   >
     <slot />
     <span class="sr-only">.</span>

diff --git a/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.vue b/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.vue
@@ -5,7 +5,7 @@
         v-if="data.url"
         ref="BlockIframeEmbed"
         loading="lazy"
-        class="w-full border-none"
+        class="w-full border-none print:!border print:border-gray-dark"
         :class="{ lazyload: !lazyNative }"
         :title="data.title"
         :data-src="data.url"
@@ -18,6 +18,7 @@
     <template v-else>
       <BaseImagePlaceholder
         v-if="data.url"
+        class="print:border print:border-gray-dark"
         aspect-ratio="16:9"
         dark-mode
       >
@@ -39,7 +40,7 @@
     </template>
     <div
       v-if="data.caption && data.caption.length > 2"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

diff --git a/packages/vue/src/components/BlockImage/BlockImageStandard.vue b/packages/vue/src/components/BlockImage/BlockImageStandard.vue
@@ -98,7 +98,7 @@ export default defineComponent({
     </MixinFancybox>
     <div
       v-if="theData && hasCaptionArea"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="theData" />
     </div>

diff --git a/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue b/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.vue
@@ -7,11 +7,11 @@
       class="mb-5"
       :data="{ heading: data.heading }"
     />
-    <ul>
+    <ul class="print:!list-disc">
       <li
         v-for="(item, index) in data.listItem"
         :key="index"
-        class="flex"
+        class="flex print:!list-item print:ml-4"
         :class="index + 1 === data.listItem.length ? 'mb-0' : 'mb-4'"
       >
         <BlockText

diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.vue
@@ -208,6 +208,7 @@ export default defineComponent({
     .BlockLinkCard__CardContent,
     .BlockLinkCard__CardArrow {
       @apply px-6;
+      @apply print:px-0;
     }
     .BaseImagePlaceholder {
       @apply bg-gray-mid-dark;

diff --git a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue
@@ -8,36 +8,38 @@
     >
       {{ data.heading }}
     </BaseHeading>
-    <div
+    <ul
       v-for="(link, index) in data.links"
       :key="index"
-      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2"
+      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2 print:list-disc print:ml-4"
     >
-      <template v-if="link.externalLink">
-        <RelatedLink
-          variant="external"
-          :href="link.externalLink"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-      <template v-else-if="link.document">
-        <RelatedLink
-          variant="document"
-          :href="link.document.url"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-      <template v-else-if="link.page">
-        <RelatedLink
-          variant="page"
-          :to="link.page.url"
-        >
-          {{ link.text }}
-        </RelatedLink>
-      </template>
-    </div>
+      <li>
+        <template v-if="link.externalLink">
+          <RelatedLink
+            variant="external"
+            :href="link.externalLink"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+        <template v-else-if="link.document">
+          <RelatedLink
+            variant="document"
+            :href="link.document.url"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+        <template v-else-if="link.page">
+          <RelatedLink
+            variant="page"
+            :to="link.page.url"
+          >
+            {{ link.text }}
+          </RelatedLink>
+        </template>
+      </li>
+    </ul>
   </div>
 </template>
 <script lang="ts">

diff --git a/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue b/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue
@@ -3,16 +3,16 @@
     :is="tag"
     :to="to"
     :href="href"
-    class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer"
+    class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer print:px-0 print:py-0 print:block"
     :target="target"
     rel="noopener"
   >
-    <span class="can-hover:group-hover:underline min-w-12 block w-auto break-words">
+    <span class="can-hover:group-hover:underline min-w-12 block w-auto break-words print:inline">
       <slot />
     </span>
     <component
       :is="icon"
-      class="text-action xl:mx-4 flex-none ml-4 text-2xl leading-normal"
+      class="text-action xl:mx-4 flex-none ml-4 text-2xl leading-normal print:inline print:text-sm print:mx-2"
       :class="variant === 'external' ? 'text-lg' : 'text-3xl'"
     />
   </component>

diff --git a/packages/vue/src/components/BlockVideo/BlockVideo.vue b/packages/vue/src/components/BlockVideo/BlockVideo.vue
@@ -10,7 +10,7 @@
 
     <div
       v-if="(data.caption && data.caption.length > 2) || data.credit"
-      class="lg:px-0 p-4 pb-0"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

diff --git a/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.vue b/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.vue
@@ -11,7 +11,7 @@
     </BaseImagePlaceholder>
     <div
       v-if="data.caption"
-      class="lg:px-0 p-4"
+      class="lg:px-0 p-4 print:pl-0"
     >
       <BaseImageCaption :data="data" />
     </div>

diff --git a/packages/vue/src/components/EventDetailHero/EventDetailHero.vue b/packages/vue/src/components/EventDetailHero/EventDetailHero.vue
@@ -21,7 +21,7 @@
         />
         <div
           v-if="startDateSplit || ongoing"
-          class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+          class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary print:hidden"
         >
           <template v-if="ongoing">
             <div class="text-subtitle">Ongoing</div>

diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.vue b/packages/vue/src/components/HeroMedia/HeroMedia.vue
@@ -25,7 +25,7 @@
         </div>
         <div
           v-if="hasCaptionArea"
-          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto"
+          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
         >
           <button
             class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
@@ -44,7 +44,7 @@
       <div
         v-if="hasCaptionArea"
         :class="captionVisibilityClass"
-        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto"
+        class="max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
       >
         <BaseImageCaption :data="theImageData || customCaption" />
       </div>

diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
@@ -12,7 +12,7 @@
       <div
         v-if="heading || link"
         :class="colStart"
-        class="lg:pl-0 col-start-1 col-end-13 px-4 mb-1"
+        class="lg:pl-0 col-start-1 col-end-13 px-4 mb-1 print:px-0"
       >
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
@@ -35,7 +35,7 @@
       </div>
       <div
         :class="colStart"
-        class="lg:pl-0 sm:col-end-11 3xl:col-end-12 col-start-1 col-end-13 pl-4 overflow-x-visible"
+        class="lg:pl-0 sm:col-end-11 3xl:col-end-12 col-start-1 col-end-13 pl-4 print:pl-0 overflow-x-visible"
       >
         <!-- Slider main container -->
         <div

diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
@@ -19,6 +19,14 @@
         <NavLogoLinks class="w-[17rem] z-20 flex flex-shrink-0 my-2 -ml-1">
           <img
             :src="LogoWhite"
+            class="print:hidden"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+          <img
+            :src="LogoColor"
+            class="hidden print:block"
             alt="JPL Logo"
             width="324"
             height="72"
@@ -119,6 +127,7 @@ import IconExternal from './../Icons/IconExternal.vue'
 import IconSearch from './../Icons/IconSearch.vue'
 import IconClose from './../Icons/IconClose.vue'
 import type { LinkObject, BreadcrumbObject } from './../../utils/mixins'
+import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import type { BreadcrumbPathObject } from '../../interfaces'
 import {
@@ -179,7 +188,8 @@ export default defineComponent({
       // This is used in transition logic to avoid distracting animations on route changes
       // without this check, the nav would swoop in/out on a route change if it was visible before the route change occured (e.g. partially scrolled up on a page)
       scrolledCurrentPage: false,
-      LogoWhite: LogoWhite
+      LogoWhite: LogoWhite,
+      LogoColor: LogoColor
     }
   },
   computed: {