Working on show/hide for screen sizes

app/Http/Livewire/PdfSlot.php

@@ -52,7 +52,7 @@ class PdfSlot extends Component
 
     public function getPdf()
     {        
-        // $this->pdf =  $this->entity->fullscreenPdfViewer($this->invitation);
+        $this->pdf = $this->entity->fullscreenPdfViewer($this->invitation);
     }
 
     public function render()
@@ -125,20 +125,20 @@ class PdfSlot extends Component
 
         if($this->entity_type == 'invoice' || $this->entity_type == 'recurring_invoice') {
             foreach($this->settings->pdf_variables->invoice_details as $variable) 
-                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
     
         }
         elseif($this->entity_type == 'quote'){
             foreach($this->settings->pdf_variables->quote_details as $variable)
-                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
         }
         elseif($this->entity_type == 'credit') {
             foreach($this->settings->pdf_variables->credit_details as $variable)
-                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
         }
         elseif($this->entity_type == 'purchase_order'){
             foreach($this->settings->pdf_variables->purchase_order_details as $variable)
-                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
+                $entity_details .= "<div class='flex px-3 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
         }
             
         return $this->convertVariables($entity_details);
@@ -147,10 +147,13 @@ class PdfSlot extends Component
 
     private function getUserName()
     {
-        if($this->entity_type == 'purchase_order') {
+        $name = ctrans('texts.details');
+
+        if($this->entity_type == 'purchase_order' && isset($this->settings->pdf_variables->vendor_details[0])) {
             $name = $this->settings->pdf_variables->vendor_details[0];
 
-        } else {
+        } elseif(isset($this->settings->pdf_variables->client_details[0])) {
+
             $name = $this->settings->pdf_variables->client_details[0];
         }
                 

resources/views/portal/ninja2020/components/html-viewer.blade.php

@@ -34,10 +34,6 @@ span {
             {!! $company_details !!}
         </div>
 
-        <!-- <div id="company-address"  class="mx-auto">
-            {!! $company_address !!}
-        </div> -->
-
     </div>
 
     <div class="border-fuchsia-600 border-b-2 pb-3 mt-3">
@@ -47,7 +43,7 @@ span {
     </div>
 
 
-    <div id="user-details" class="mt-3 px-3 border-b-2 border-fuschia-600"> 
+    <div id="user-details" class="mt-3 px-3 border-b-2 border-fuschia-600 flex flex-col items-end"> 
 
         <div x-data="{ show_user: false }" class="mb-3">
 
@@ -80,8 +76,8 @@ span {
                     <td>
                         <div class="product-information">
                             <div class="item-details">
-                                <p class="px-2 mt-2">{{ $product['quantity'] }} × {{ $product['cost'] }}</p> 
+                                <p class="mt-2">{{ $product['quantity'] }} × {{ $product['cost'] }}</p> 
-                                <p class="overflow-ellipsis overflow-hidden px-2 mb-2">{{ $product['notes'] }}</p>
+                                <p class="overflow-ellipsis overflow-hidden px-1 mb-2">{{ $product['notes'] }}</p>
                             </div>
                         </div>
                     </td>
@@ -93,10 +89,10 @@ span {
     </div>
     @endif 
     @if($services->count() > 0)
-    <div id="task-details" class="py-6 mr-5 ml-5">
+    <div id="task-details" class="py-6 mr-3 ml-3">
         <table width="100%">
             <thead>
-                <tr class="border-bottom>
+                <tr class="border-bottom">
                     <th style="text-align:left; width:70%; padding-left:2px;">Service</th>
                     <th style="text-align:right; width:30%; padding-right:2px;">Amount</th>
                 </tr>
@@ -107,8 +103,8 @@ span {
                     <td>
                         <div class="">
                             <div class="">
-                                <p class="px-2 mt-2">{{ $service['quantity'] }} × {{ $service['cost'] }}</p> 
+                                <p class="mt-2">{{ $service['quantity'] }} × {{ $service['cost'] }}</p> 
-                                <p class="overflow-ellipsis overflow-hidden px-2 mb-2">{{ $service['notes'] }}</p>
+                                <p class="overflow-ellipsis overflow-hidden px-1 mb-2">{{ $service['notes'] }}</p>
                             </div>
                         </div>
                     </td>
@@ -119,7 +115,7 @@ span {
         </table>
     </div>
     @endif
-    <div id="totals" class="mb-10 mr-5 ml-5">
+    <div id="totals" class="mb-10 mr-3 ml-3">
         <table width="100%">
             <thead>
             </thead>
@@ -132,7 +128,7 @@ span {
                             </div>
                         </div>
                     </td>
-                    <td style="text-align:right; padding-right:2px;" class="text-lg">{{ $amount }}</td>
+                    <td style="text-align:right; padding-right:10px;" class="text-lg">{{ $amount }}</td>
                 </tr>
                  <tr style="display: table-row;">
                     <td>
@@ -142,7 +138,7 @@ span {
                             </div>
                         </div>
                     </td>
-                    <td style="text-align:right; padding-right:2px;" class="text-lg">{{ $balance }}</td>
+                    <td style="text-align:right; padding-right:10px;" class="text-lg">{{ $balance }}</td>
                 </tr>
             </tbody>
         </table>

resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php

@@ -1,44 +1,51 @@
-<div wire:init="getPdf()">
+<div>
-    @if($pdf)
+<div class="hidden lg:block">
-    <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe>
+  <div wire:init="getPdf()">
-    @else
+      @if($pdf)
-    <div class="flex mt-4 place-items-center">
+      <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe>
-        <span class="loader m-auto"></span>
+      @else
-        <style type="text/css">
+      <div class="flex mt-4 place-items-center">
-        .loader {
+          <span class="loader m-auto"></span>
-        width: 48px;
+          <style type="text/css">
-        height: 48px;
+          .loader {
-        border-radius: 50%;
+          width: 48px;
-        position: relative;
+          height: 48px;
-        animation: rotate 1s linear infinite
+          border-radius: 50%;
-      }
+          position: relative;
-      .loader::before , .loader::after {
+          animation: rotate 1s linear infinite
-        content: "";
+        }
-        box-sizing: border-box;
+        .loader::before , .loader::after {
-        position: absolute;
+          content: "";
-        inset: 0px;
+          box-sizing: border-box;
-        border-radius: 50%;
+          position: absolute;
-        border: 5px solid #454545;
+          inset: 0px;
-        animation: prixClipFix 2s linear infinite ;
+          border-radius: 50%;
-      }
+          border: 5px solid #454545;
-      .loader::after{
+          animation: prixClipFix 2s linear infinite ;
-        border-color: #FF3D00;
+        }
-        animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
+        .loader::after{
-        inset: 6px;
+          border-color: #FF3D00;
-      }
+          animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
-      @keyframes rotate {
+          inset: 6px;
-        0%   {transform: rotate(0deg)}
+        }
-        100%   {transform: rotate(360deg)}
+        @keyframes rotate {
-      }
+          0%   {transform: rotate(0deg)}
-      @keyframes prixClipFix {
+          100%   {transform: rotate(360deg)}
-          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+        }
-          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+        @keyframes prixClipFix {
-          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+            0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+            25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+            50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-      }
+            75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-        </style>
+            100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
-    </div>
+        }
-    @endif
+          </style>
+      </div>
+      @endif
+  </div>
+</div>
+
+<div class="hidden md:block">
+@include('portal.ninja2020.components.html-viewer')
+</div>
 </div>
-    @include('portal.ninja2020.components.html-viewer')