Merge pull request #2665 from brkcvn/master

Responsive control

public/css/app.css

@@ -47162,6 +47162,18 @@ html[dir='rtl'] .el-scrollbar__wrap {
     .el-range-editor.el-input__inner {
         width: 100%;
     }
+    /* apex-chart cash-flow */
+    .apex-chart-cash-flow .apexcharts-legend {
+        width: 24rem !important;
+        -ms-flex-pack: distribute !important;
+            justify-content: space-around !important;
+        padding: 0;
+    }
+
+    .apex-chart-cash-flow  .apexcharts-toolbar {
+        top: 45px !important;
+    }
+    /* apex-chart cash-flow */
   }
  /* element-ui */
 
@@ -47241,13 +47253,25 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
 
 @media only screen and (max-width: 480px) {
     .small-table-width {
-        width: 450px;
+        width: 550px;
     }
 
     .small-col {
         width: auto !important;
     }
 
+    .description-col {
+        width: 180px !important
+    }
+
+    .amount-col {
+        width: 70px !important;
+    }
+
+    .name-col {
+        width: 6rem !important
+    }
+
     .information-content {
         -webkit-transform: unset !important;
                 transform: unset !important;
@@ -49918,6 +49942,14 @@ body{
     position: absolute;
   }
 
+  .lg\:relative{
+    position: relative;
+  }
+
+  .lg\:right-0{
+    right: 0px;
+  }
+
   .lg\:right-24{
     right: 6rem;
   }
@@ -49948,6 +49980,10 @@ body{
     margin-top: 1rem;
   }
 
+  .lg\:mt-11{
+    margin-top: 2.75rem;
+  }
+
   .lg\:mt-60{
     margin-top: 15rem;
   }
@@ -50074,6 +50110,10 @@ body{
     width: 66.666667%;
   }
 
+  .lg\:w-auto{
+    width: auto;
+  }
+
   .lg\:w-1\/4{
     width: 25%;
   }
@@ -50094,10 +50134,6 @@ body{
     width: 24rem;
   }
 
-  .lg\:w-auto{
-    width: auto;
-  }
-
   .lg\:w-2\/4{
     width: 50%;
   }
@@ -50158,6 +50194,11 @@ body{
             justify-content: center;
   }
 
+  .lg\:justify-around{
+    -ms-flex-pack: distribute;
+        justify-content: space-around;
+  }
+
   .lg\:gap-16{
     gap: 4rem;
   }

resources/assets/sass/app.css

@@ -459,6 +459,17 @@ html[dir='rtl'] .el-scrollbar__wrap {
     .el-range-editor.el-input__inner {
         width: 100%;
     }
+    /* apex-chart cash-flow */
+    .apex-chart-cash-flow .apexcharts-legend {
+        width: 24rem !important;
+        justify-content: space-around !important;
+        padding: 0;
+    }
+
+    .apex-chart-cash-flow  .apexcharts-toolbar {
+        top: 45px !important;
+    }
+    /* apex-chart cash-flow */
   }
  /* element-ui */
 
@@ -529,13 +540,25 @@ html[dir="rtl"] .lines-radius-border thead td:last-child {
 
 @media only screen and (max-width: 480px) {
     .small-table-width {
-        width: 450px;
+        width: 550px;
     }
 
     .small-col {
         width: auto !important;
     }
 
+    .description-col {
+        width: 180px !important
+    }
+
+    .amount-col {
+        width: 70px !important;
+    }
+
+    .name-col {
+        width: 6rem !important
+    }
+
     .information-content {
         transform: unset !important;
         margin-top: 70px !important;

resources/views/components/documents/form/items.blade.php

@@ -4,11 +4,11 @@
             <table class="small-table-width" id="items">
                 <colgroup>
                     <col class="small-col" style="width: 24px;">
-                    <col class="small-col" style="width: 20%;">
+                    <col class="small-col name-col" style="width: 20%;">
-                    <col class="small-col" style="width: 30%;">
+                    <col class="small-col description-col" style="width: 30%;">
                     <col class="small-col" style="width: 12%;">
                     <col class="small-col" style="width: 15%;">
-                    <col class="small-col" style="width: 20%;">
+                    <col class="small-col amount-col" style="width: 20%;">
                     <col class="small-col" style="width: 24px;">
                 </colgroup>
 

resources/views/components/documents/form/line-item.blade.php

@@ -8,10 +8,10 @@
             <colgroup>
                 <col class="small-col" style="width: 24px;">
                 <col class="small-col" style="width: 20%;">
-                <col class="small-col" style="width: 30%;">
+                <col class="small-col description-col" style="width: 30%;">
                 <col class="small-col" style="width: 12%;">
                 <col class="small-col" style="width: 15%;">
-                <col class="small-col" style="width: 20%;">
+                <col class="small-col amount-col" style="width: 20%;">
                 <col class="small-col" style="width: 24px;">
             </colgroup>
 
@@ -30,7 +30,9 @@
 
                         <td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
                             @if (! $hideItemName)
-                                <span class="flex items-center text-sm" tabindex="0" v-html="row.name" v-if="row.item_id"></span>
+                                <span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">
+                                    <div v-html="row.name" class="w-20 lg:w-auto truncate"></div>
+                                </span>
 
                                 <div v-else>
                                     @stack('name_input_start')

resources/views/widgets/cash_flow.blade.php

@@ -1,48 +1,48 @@
 <div id="widget-{{ $class->model->id }}" class="w-full my-8 px-12">
     @include($class->views['header'], ['header_class' => ''])
 
-    <div class="flex flex-col lg:flex-row mt-3">
+    <div class="flex flex-col-reverse lg:flex-row mt-3">
-        <div class="w-full lg:w-11/12">
+        <div class="w-full lg:w-11/12 apex-chart-cash-flow">
             {!! $chart->container() !!}
         </div>
 
-        <div class="w-full lg:w-1/12 mt-11 space-y-2">
+        <div class="w-96 lg:w-1/12 flex flex-row lg:flex-col items-center justify-around sm:justify-start lg:mt-11 space-y-0 sm:space-y-2">
-            <div class="flex flex-col items-center justify-between text-center">
+            <div class="relative flex flex-col items-center sm:justify-between text-center">
                 <div class="flex justify-end lg:block text-lg">
                     <x-tooltip id="tooltip-cashflow-incoming" placement="top" message="{{ $totals['incoming_exact'] }}">
                         {{ $totals['incoming_for_humans'] }}
                     </x-tooltip>
                 </div>
 
-                <span class="text-green text-xs">
+                <span class="text-green text-xs hidden lg:block">
                     {{ trans('general.incoming') }}
                 </span>
 
-                <span class="material-icons mt-2">remove</span>
+                <span class="absolute lg:relative material-icons mt-2 -right-12 lg:right-0">remove</span>
             </div>
 
-            <div class="flex flex-col items-center justify-between">
+            <div class="relative flex flex-col items-center sm:justify-between">
                 <div class="flex justify-end lg:block text-lg">
                     <x-tooltip id="tooltip-cashflow-outgoing" placement="top" message="{{ $totals['outgoing_exact'] }}">
                         {{ $totals['outgoing_for_humans'] }}
                     </x-tooltip>
                 </div>
 
-                <span class="text-rose text-xs">
+                <span class="text-rose text-xs hidden lg:block">
                     {{ trans('general.outgoing') }}
                 </span>
 
-                <span class="material-icons mt-2">drag_handle</span>
+                <span class="absolute lg:relative material-icons mt-2 -right-12 lg:right-0">drag_handle</span>
             </div>
 
-            <div class="flex flex-col items-center justify-between">
+            <div class="relative flex flex-col items-center sm:justify-between">
                 <div class="flex justify-end lg:block text-lg">
                     <x-tooltip id="tooltip-cashflow-profit" placement="top" message="{{ $totals['profit_exact'] }}">
                         {{ $totals['profit_for_humans'] }}
                     </x-tooltip>
                 </div>
 
-                <span class="text-purple text-xs">{{ trans_choice('general.profits', 1) }}</span>
+                <span class="text-purple text-xs hidden lg:block">{{ trans_choice('general.profits', 1) }}</span>
             </div>
         </div>
     </div>

safelist.txt

@@ -5,5 +5,9 @@ lg:my-12
 lg:mt-4
 lg:pl-6
 lg:w-9
+lg:mt-11
+lg:relative
+lg:right-0
+lg:justify-around
 ltr:-right-1.5
 rtl:-left-1.5