Merge pull request #711 from code16/improve-print

Improve print

Author: aguingand

resources/js/Layouts/Layout.vue

@@ -248,11 +248,14 @@
             </template>
             <SidebarInset class="min-w-0">
                 <header class="flex h-14 items-center gap-4 border-b backdrop-blur-sm bg-background/90 px-4 sticky top-0 z-40 lg:px-6
-                    transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12
+                    transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 print:relative print:px-0 print:h-auto print:pb-4
                 ">
                     <template v-if="auth()?.user">
-                        <SidebarTrigger class="-ml-1 shrink-0" />
+                        <SidebarTrigger class="-ml-1 shrink-0 print:hidden" />
                     </template>
+                    <div class="text-sm hidden print:block font-semibold">
+                        {{ config('sharp.name') }}
+                    </div>
                     <Separator
                         orientation="vertical"
                         class="mr-2 data-[orientation=vertical]:h-4"

resources/js/Pages/EntityList/EntityList.vue

@@ -80,7 +80,7 @@
         </template>
 
         <div class="@container">
-            <div :class="entityList.pageAlert ? 'pt-4' : 'pt-6 @3xl:pt-10'">
+            <div class="print:pt-0" :class="entityList.pageAlert ? 'pt-4' : 'pt-6 @3xl:pt-10'">
                 <EntityListComponent
                     :entity-key="entityKey"
                     :entity-list="entityList"

resources/js/Pages/Show/Show.vue

@@ -135,7 +135,7 @@
 
         <WithCommands :commands="commands">
             <div class="@container">
-                <div :class="show.pageAlert && !show.pageAlert.sectionKey ? 'pt-4' : 'pt-6 @3xl:pt-10'">
+                <div class="print:pt-0" :class="show.pageAlert && !show.pageAlert.sectionKey ? 'pt-4' : 'pt-6 @3xl:pt-10'">
                     <template v-if="show.pageAlert && !show.pageAlert.sectionKey">
                         <div class="container">
                             <PageAlert
@@ -145,7 +145,7 @@
                         </div>
                     </template>
 
-                    <div class="grid gap-6 @3xl:gap-10">
+                    <div class="grid gap-6 @3xl:gap-10 print:gap-0">
                         <template v-for="(section, i) in sectionsWithAlwaysFirst">
                             <Section
                                 class="min-w-0"
@@ -227,7 +227,7 @@
                                                         </template>
                                                     </div>
                                                     <template v-if="i == 0">
-                                                        <div class="ml-auto flex flex-wrap -my-1 justify-end gap-2"
+                                                        <div class="ml-auto flex flex-wrap -my-1 justify-end gap-2 print:hidden"
                                                             :class="{ 'invisible': collapsed }"
                                                             role="group"
                                                             :aria-label="__('sharp::show.section_menu.aria_label', { title: show.getTitle(locale) })"

resources/js/components/StickyTop.vue

@@ -43,7 +43,8 @@
 </script>
 
 <template>
-    <div :style="{
+    <div class="print:!relative print:!top-0"
+        :style="{
             '--stacked-top': `${stackedTop}px`
         }"
         :data-stuck="stuck ? true : null"

resources/js/components/ui/RootCard.vue

@@ -8,7 +8,7 @@
     <div class="@container">
         <div :class="[noPadding ? 'px-0' : '']">
             <div class="@container/root-card mx-auto px-0 max-w-348">
-                <Card class="relative rounded-none border-x-0 *:px-4 @3xl:*:px-6 @[87rem]:border-x @[87rem]:rounded-lg" data-sticky-top-container>
+                <Card class="relative rounded-none border-x-0 *:px-4 @3xl:*:px-6 print:*:px-0 @[87rem]:border-x @[87rem]:rounded-lg print:rounded-none print:border-x-0" data-sticky-top-container>
                     <slot />
                 </Card>
             </div>

resources/js/components/ui/RootCardHeader.vue

@@ -12,7 +12,7 @@ defineProps<{
     <StickyTop class="group top-[calc(3.5rem-2px)] -mt-[2px] @[87rem]:-mx-px z-10 px-0!" :class="{
         'mb-1': !collapsed,
     }">
-        <CardHeader class="px-4 @3xl:px-6 relative border-t group-data-stuck:rounded-none @[87rem]:border-x @[87rem]:rounded-t-lg group-data-[stuck]:shadow-b-md transition-shadow border-b-0 backdrop-blur-sm bg-card/90 backdrop-filter" :class="{ ' @[87rem]:rounded-b-lg': collapsed }">
+        <CardHeader class="px-4 @3xl:px-6 relative border-t group-data-stuck:rounded-none @[87rem]:border-x @[87rem]:rounded-t-lg group-data-[stuck]:shadow-b-md transition-shadow border-b-0 backdrop-blur-sm bg-card/90 print:backdrop-blur-none print:px-0 print:rounded-none print:border-x-0" :class="{ ' @[87rem]:rounded-b-lg': collapsed }">
             <slot />
         </CardHeader>
     </StickyTop>

resources/js/components/ui/sidebar/Sidebar.vue

@@ -49,7 +49,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
   </Sheet>
 
   <div
-    v-else class="group peer hidden md:block"
+    v-else class="group peer hidden md:block print:hidden"
     :data-state="state"
     :data-collapsible="state === 'collapsed' ? collapsible : ''"
     :data-variant="variant"