mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
Working on show/hide for screen sizes
This commit is contained in:
David Bomba
parent
c33ced1d82
commit
bff7e056ba
@ -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];
|
||||
}
|
||||
|
||||
|
||||
@ -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="overflow-ellipsis overflow-hidden px-2 mb-2">{{ $product['notes'] }}</p>
|
||||
<p class="mt-2">{{ $product['quantity'] }} × {{ $product['cost'] }}</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="overflow-ellipsis overflow-hidden px-2 mb-2">{{ $service['notes'] }}</p>
|
||||
<p class="mt-2">{{ $service['quantity'] }} × {{ $service['cost'] }}</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>
|
||||
|
||||
@ -1,44 +1,51 @@
|
||||
<div wire:init="getPdf()">
|
||||
@if($pdf)
|
||||
<iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe>
|
||||
@else
|
||||
<div class="flex mt-4 place-items-center">
|
||||
<span class="loader m-auto"></span>
|
||||
<style type="text/css">
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: rotate 1s linear infinite
|
||||
}
|
||||
.loader::before , .loader::after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #454545;
|
||||
animation: prixClipFix 2s linear infinite ;
|
||||
}
|
||||
.loader::after{
|
||||
border-color: #FF3D00;
|
||||
animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
|
||||
inset: 6px;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {transform: rotate(0deg)}
|
||||
100% {transform: rotate(360deg)}
|
||||
}
|
||||
@keyframes prixClipFix {
|
||||
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)}
|
||||
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%)}
|
||||
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
@endif
|
||||
<div>
|
||||
<div class="hidden lg:block">
|
||||
<div wire:init="getPdf()">
|
||||
@if($pdf)
|
||||
<iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe>
|
||||
@else
|
||||
<div class="flex mt-4 place-items-center">
|
||||
<span class="loader m-auto"></span>
|
||||
<style type="text/css">
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: rotate 1s linear infinite
|
||||
}
|
||||
.loader::before , .loader::after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #454545;
|
||||
animation: prixClipFix 2s linear infinite ;
|
||||
}
|
||||
.loader::after{
|
||||
border-color: #FF3D00;
|
||||
animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
|
||||
inset: 6px;
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {transform: rotate(0deg)}
|
||||
100% {transform: rotate(360deg)}
|
||||
}
|
||||
@keyframes prixClipFix {
|
||||
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)}
|
||||
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%)}
|
||||
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@include('portal.ninja2020.components.html-viewer')
|
||||
|
||||
<div class="hidden md:block">
|
||||
@include('portal.ninja2020.components.html-viewer')
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user