feat: print css

ietf-tools · Nov 22, 2024 · ce143e9 · ce143e9
1 parent 4c1dc17
commit ce143e9
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 22 deletions.
diff --git a/client/components/Alert.vue b/client/components/Alert.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'rounded border border-l-4 px-3 py-2 my-5 ',
+      'rounded border border-l-4 px-3 py-2 my-5 print:border-black print:bg-white',
       props.variant === 'warning' &&
         'bg-pink-100 dark:bg-red-950 border-red-600',
       props.variant === 'info' &&
@@ -12,6 +12,7 @@
       level="2"
       style-level="4"
       :class="[
+        'print:border-black print:text-black',
         props.variant === 'warning' && 'text-red-700 dark:text-red-200',
         props.variant === 'info' && 'text-yellow-750 dark:text-yellow-300'
       ]"

diff --git a/client/components/IndexSubheader.vue b/client/components/IndexSubheader.vue
@@ -2,11 +2,11 @@
   <div class="container mx-auto">
     <div class="absolute pointer-events-none inset-0 overflow-hidden">
       <GraphicsIETFMotif
-        class="absolute w-[90vw] h-[90vh] -left-[10vw] -top-[20vh]"
+        class="absolute w-[90vw] h-[90vh] -left-[10vw] -top-[20vh] print:hidden"
         :opacity="0.04"
       />
       <GraphicsIETFMotif
-        class="absolute w-[40vw] h-[40vh] left-[57vw] md:left-[47vw] xl:left-[37vw] top-[17vh]"
+        class="absolute w-[40vw] h-[40vh] left-[57vw] md:left-[47vw] xl:left-[37vw] top-[17vh] print:hidden"
         :opacity="0.04"
       />
     </div>

diff --git a/client/components/RFCDocumentBody.vue b/client/components/RFCDocumentBody.vue
@@ -1,28 +1,31 @@
 <template>
   <GraphicsIETFMotif
-    class="absolute mt-8 -mb-[600px] left-0 w-[80vw] h-[80vh] max-h-[600px]"
+    class="absolute mt-8 -mb-[600px] left-0 w-[80vw] h-[80vh] max-h-[600px] print:hidden"
     :opacity="0.02"
   />
 
   <Breadcrumbs :breadcrumb-items="breadcrumbItems" />
 
   <button
     type="button"
-    class="fixed right-0 rounded-l bg-white dark:bg-black border border-gray-200 align-middle flex items-center p-1 pr-2 lg:hidden"
+    class="fixed right-0 rounded-l bg-white dark:bg-black border border-gray-200 align-middle flex items-center p-1 pr-2 lg:hidden print:hidden"
     aria-label="Open details modal"
     @click="isModalOpen = true"
   >
     <GraphicsExpandSidebar class="inline-block mr-1" />
     Info
   </button>
 
-  <Heading level="1" class="mb-2 px-1 xs:px-0">
+  <Heading level="1" class="mb-2 px-1 xs:px-0 print:px-0">
     {{ rfcId.type }} {{ rfcId.number }}
   </Heading>
 
   <RFCMobileBanner :rfc-id="rfcId" :is-fixed="true" />
 
-  <p v-if="props.intro" class="px-1 xs:px-0 mb-2 text-base lg:text-xl">
+  <p
+    v-if="props.intro"
+    class="px-1 xs:px-0 mb-2 text-base lg:text-xl print:px-0"
+  >
     {{ props.intro }}
   </p>
 
@@ -38,7 +41,7 @@
       <HeadlessPopover class="inline align-middle">
         <HeadlessPopoverButton
           aria-label="Details of category"
-          class="inline-block text-blue-300 dark:text-blue-100 p-2 ml-1"
+          class="inline-block text-blue-300 dark:text-blue-100 p-2 ml-1 print:text-black"
         >
           <GraphicsQuestionMarkCircle />
         </HeadlessPopoverButton>

diff --git a/client/components/RFCDocumentSidebar.vue b/client/components/RFCDocumentSidebar.vue
@@ -24,7 +24,7 @@
         </div>
       </HeadlessDialogPanel>
     </HeadlessDialog>
-    <div class="hidden lg:block">
+    <div class="hidden lg:block print:block">
       <RFCTabs
         ref="desktopRFCTabs"
         v-model:selected-tab="selectedTab"

diff --git a/client/components/RFCMobileBanner.vue b/client/components/RFCMobileBanner.vue
@@ -2,7 +2,7 @@
   <div
     :class="[
       'flex flex-row w-full justify-between items-center py-1 bg-[#002D3CE5] text-white dark:bg-black dark:border',
-      props.isFixed && 'fixed bottom-0 left-0 right-0 lg:hidden'
+      props.isFixed && 'fixed bottom-0 left-0 right-0 lg:hidden print:hidden'
     ]"
   >
     <div

diff --git a/client/components/Renderable.vue b/client/components/Renderable.vue
@@ -7,16 +7,13 @@
   </template>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { isVNode } from 'vue'
+import type { VNode } from 'vue'
 
-defineProps({
-  /**
-   * Definitions of columns and their labels
-   **/
-  val: {
-    type: [String, Object],
-    required: true
-  }
-})
+type Props = {
+  val: string | VNode
+}
+
+defineProps<Props>()
 </script>
diff --git a/client/components/SectionHeader.vue b/client/components/SectionHeader.vue
@@ -4,11 +4,11 @@
       class="absolute pointer-events-none inset-0 overflow-hidden text-white"
     >
       <GraphicsIETFMotif
-        class="absolute w-[90vw] h-[90vh] -left-[5vw] -top-[20vh]"
+        class="absolute w-[90vw] h-[90vh] -left-[5vw] -top-[20vh] print:hidden"
         :opacity="0.04"
       />
       <GraphicsIETFMotif
-        class="absolute w-[40vw] h-[40vh] left-[67vw] md:left-[57vw] xl:left-[47vw] top-[2vh]"
+        class="absolute w-[40vw] h-[40vh] left-[67vw] md:left-[57vw] xl:left-[47vw] top-[2vh] print:hidden"
         :opacity="0.1"
       />
     </div>