tabelle marco ferrari

public/css/style.css

@@ -16678,3 +16678,96 @@ div.dt-container div.dt-length label {
     background-color: #e9ecef;
     color: #495057;
 }
+
+/* CSS Ferrari - Modifiche UI */
+#home_logo {
+    height: 70px;
+  }
+
+  #sidebar--wrapper {
+    height: calc(100dvh - 86px);
+  }
+
+  #sidebar--wrapper #filter--section {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  #card--dashboard {
+    padding-block: 10px;
+    margin: 0;
+    overflow: auto;
+    height: calc(100dvh - 86px);
+    max-width: 100vw;
+  }
+
+  body:has(#filter--section.filterWrapper_open) #card--dashboard {
+    max-width: calc(100vw - 250px);
+  }
+
+  .row > [wire\:id] {
+    padding-inline: 0;
+  }
+
+  #resume-table {
+    width: 100% !important;
+    max-width: 100% !important;
+    padding: 0;
+    border: none;
+    max-height: calc(100dvh - 86px) !important;
+    /* overflow: auto; */
+}
+
+  #resume-table.course_list-table {
+    height: calc(100dvh - (86px + 80px)) !important;
+  }
+
+  #resume-table.records-table {
+    height: calc(100dvh - (86px + 195px)) !important;
+  }
+
+  #card--dashboard:has(.showFilter.filter_shown) #resume-table.course_list-table {
+    height: calc(100dvh - (86px + 80px + 212px)) !important;
+  }
+
+  #resume-table.course_list-table > .row {
+    margin: 0;
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    padding: 10px 0;
+    border-top: 1px solid;
+    z-index: 100;
+    background-color: white;
+  }
+  table.tablesaw thead:has(tr+tr) tr:first-child th {
+    padding-bottom: 0;
+  }
+
+  table.tablesaw thead:has(tr+tr) tr:last-child th {
+    padding-top: 0;
+  }
+
+  table.tableHead thead {
+    top: -10px !important;
+  }
+
+  .course_list-table table.tableHead thead,
+  .records-table table.tableHead thead {
+    top: 0 !important;
+  }
+
+  #btn-back-to-top,
+  #btn-back-to-bottom {
+    bottom: 10px;
+    right: 10px;
+    padding: 7px;
+    width: 40px;
+    height: 40px;
+  }
+
+  #btn-back-to-bottom {
+    top: unset;
+    right: 60px;
+  }
+  /* END CSS Ferrari - Modifiche UI */

resources/views/layouts/app.blade.php

@@ -138,7 +138,7 @@
     <div class="row header--gestionale">
         <div class="header--gestionale_logo">
             <a href="/dashboard" class="d-flex align-items-center pb-2 pt-2">
-                <img src="{{env('LOGO2', env('LOGO', ''))}}" class="img-fluid" alt="logo madonnella"/>
+                <img src="{{env('LOGO2', env('LOGO', ''))}}" id="home_logo" class="img-fluid" alt="logo madonnella"/>
             </a>
         </div>
         <div class="header--gestionale_pageTitle d-flex align-items-center justify-content-between">
@@ -221,7 +221,7 @@
                     <i class="ico--ui hamburger--menu"></i>
             </a>
 
-            <div class="d-flex flex-column align-items-center align-items-sm-start min-vh-100 offcanvas-lg offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+            <div class="d-flex flex-column align-items-center align-items-sm-start offcanvas-lg offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                 @if(false)
                     <a href="/dashboard" class="d-flex align-items-center pb-2 pt-2 mb-md-0 me-md-auto text-white text-decoration-none">
                         <img src="{{env('LOGO2', env('LOGO', ''))}}" class="fs-5 d-none d-sm-inline img-fluid" alt="logo madonnella"  style="max-width:200px"/>
@@ -359,7 +359,7 @@
         </div>
 
         <button id="open-filter" onclick="pcsh1()"></button>
-        
+
 
         <div class="col">
             <div class="row h-100">

resources/views/livewire/course_list.blade.php

@@ -9,35 +9,41 @@
     </header>
 
 
-    <div class="row" style="margin-top: 10px; margin-bottom:10px;">
-        <div class="col-md-4">
-            <div class="col-md ">
-                <div class="dt-buttons btn-group flex-wrap">
-                    <div class="btn-group">
-                        <button class="btn btn-secondary buttons-collection" wire:click="export()" style="color:black !important">ESPORTA</button>
+    <div class="dt-container">
+
+        <div class="row" style="margin-top: 10px; margin-bottom:10px;">
+            <div class="col-md-4">
+                <div class="col-md ">
+                    <div class="dt-buttons btn-group flex-wrap">
+                        <div class="btn-group">
+                            <button class="btn btn-secondary buttons-collection" wire:click="export()" style="color:black !important">ESPORTA</button>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="col-md-4">
-            <div class="row">
-                <div class="col-md-4" style="text-align:right">Visualizza</div>
-                <div class="col-md-4">
-                    <select name="tablesaw-350_length" aria-controls="tablesaw-350" class="form-select form-select-sm" id="dt-length-0" wire:model="pageLength">
-                        <option value="10">10</option>
-                        <option value="25">25</option>
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="100000">Tutti</option>
-                    </select>
-                </div>
-                <div class="col-md-3">elementi</div>
+            <div class="col-md-4">
+                <!-- <div class="row"> -->
+                    <div class="dt-length">
+                        <label class="align-items-center d-flex dt-length-0 flex-row gap-2 justify-content-center">
+                            Visualizza
+                            <!-- <div class="col-md-4"> -->
+                                <select name="tablesaw-350_length" aria-controls="tablesaw-350" class="form-select form-select-sm m-0" id="dt-length-0" wire:model="pageLength">
+                                    <option value="10">10</option>
+                                    <option value="25">25</option>
+                                    <option value="50">50</option>
+                                    <option value="100">100</option>
+                                    <option value="100000">Tutti</option>
+                                </select>
+                            <!-- </div> -->
+                            <!-- <div class="col-md-3">elementi</div> -->
+                            elementi
+                        </label>
+                    </div>
+                <!-- </div> -->
+            </div>
+            <div class="col-md-4" style="text-align:right">
+                <a href="#" class="showHideFilter btn--ui" ><i class="fa-solid fa-sliders"></i></a><br>
             </div>
-        </div>
-        <div class="col-md-4" style="text-align:right">
-            
-            <a href="#" class="showHideFilter btn--ui" style="width:100px; float:right;"><i class="fa-solid fa-sliders"></i></a>
-            <input type="text" wire:model="search" class="form-control" style="width:200px; float:right;margin-right:10px;">
         </div>
     </div>
 
@@ -159,7 +165,8 @@
         </div>
     </div>
 
-    <section id="resume-table" class="scrollTable" style="margin-top:10px;">
+    <!-- <section id="resume-table" class="scrollTable" style="margin-top:10px;"> -->
+    <section id="resume-table" class="scrollTable course_list-table" style="margin-top:10px;">
         <div class="compare--chart_wrapper d-none"></div>
 
 
@@ -221,15 +228,15 @@
                 </tbody>
                 <tfoot id="checkall-target">
                     <tr>
-                        <th class="sticky-col-header first-zero"></th>
-                        <th class="sticky-col-header first-col"></th>
-                        <th class="sticky-col-header second-col"></th>
-                        <th class="sticky-col-header third-col"></th>
+                        <th class="sticky-col-header first-zero" style="border-bottom:none;"></th>
+                        <th class="sticky-col-header first-col" style="border-bottom:none;"></th>
+                        <th class="sticky-col-header second-col" style="border-bottom:none;"></th>
+                        <th class="sticky-col-header third-col" style="border-bottom:none;"></th>
                         @foreach($totS as $yyy)
                             @if (isset($yyy))
-                                <th style="padding-left:5px !important;padding-right:5px !important;">{!!$yyy!!}</th>
+                                <th style="padding-left:5px !important;padding-right:5px !important;border-bottom:none;">{!!$yyy!!}</th>
                             @else
-                                <th style="padding-left:5px !important;padding-right:5px !important;">aa</th>
+                                <th style="padding-left:5px !important;padding-right:5px !important;border-bottom:none;">aa</th>
                             @endif
                         @endforeach
 
@@ -568,11 +575,13 @@
                 {
                     isFilter = false;
                     $(".showFilter").hide();
+                    $(".showFilter").removeClass("filter_shown");
                 }
                 else
                 {
                     isFilter = true;
                     $(".showFilter").show();
+                    $(".showFilter").addClass("filter_shown");
                 }
             });
         } );
@@ -1228,15 +1237,6 @@
             @this.newPayment(selectedCourseId, months.toString(), selectedMemberId, selectedMemberCourseId, subscription);
         }
 
-        $( document ).ready( function(){
-
-            setMaxWidth();
-            setMaxHeight();
-            $( window ).bind( "resize", setMaxWidth );
-            $( window ).bind( "resize", setMaxHeight );
-
-        });
-
         function suspendPayment()
         {
             @this.suspendPayment(selectedCourseId, selectedMonth, selectedMemberId, selectedMemberCourseId, subscription);
@@ -1248,16 +1248,24 @@
         }
 
 
-        function setMaxWidth() {
-                 $("#resume-table").width( Math.round( $(window ).width() - size ) ) ;
-                 //$(".justify-content-between").css({"width": Math.round( $(window ).width() - size) + "px;"}); //.width( Math.round( $(window ).width() - size ) ) ;
+        // $( document ).ready( function(){
 
-            }
-            function setMaxHeight() {
-                console.log('height:' + $(window ).height() + 'px !important');
-                 //$("div.row.h-100").attr('style', 'height:' + ($(window ).height() + 50) + 'px !important');
-                 $("#resume-table").height( Math.round( $(window ).height() - 220 ) ) ;
-            }
+        //     setMaxWidth();
+        //     setMaxHeight();
+        //     $( window ).bind( "resize", setMaxWidth );
+        //     $( window ).bind( "resize", setMaxHeight );
+
+        // });
+
+        // function setMaxWidth() {
+        //     $("#resume-table").width( Math.round( $(window ).width() - size ) ) ;
+        //     //$(".justify-content-between").css({"width": Math.round( $(window ).width() - size) + "px;"}); //.width( Math.round( $(window ).width() - size ) ) ;
+        // }
+        // function setMaxHeight() {
+        //     console.log('height:' + $(window ).height() + 'px !important');
+        //     //$("div.row.h-100").attr('style', 'height:' + ($(window ).height() + 50) + 'px !important');
+        //     $("#resume-table").height( Math.round( $(window ).height() - 220 ) ) ;
+        // }
 
     </script>
 @endpush

resources/views/livewire/records.blade.php

@@ -65,7 +65,7 @@
               </div>
     </section>
 
-    <section id="resume-table"  class="scrollTable">
+    <section id="resume-table"  class="scrollTable records-table">
 
         <!--
         <canvas id="recordChart"></canvas>
@@ -90,11 +90,11 @@
                     <th scope="col" style="border-left:3px solid white;"></th>
                     @foreach($payments as $p)
                         @if($p->type == 'ALL')
-                            <th scope="col" style="text-align:right; border-left:3px solid white;">Entrate</th>
-                            <th scope="col" style="text-align:right">Uscite</th>
+                            <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
+                            <th scope="col" style="text-align:center">Uscite</th>
                         @elseif($p->type == 'IN')
-                            <th scope="col" style="text-align:right; border-left:3px solid white;">Entrate</th>
-                            <th scope="col" style="text-align:right;"></th>
+                            <th scope="col" style="text-align:center; border-left:3px solid white;">Entrate</th>
+                            <th scope="col" style="text-align:center;"></th>
 
                         @elseif($p->type == 'OUT')
                             <th style="border-left:3px solid white;"></th>
@@ -247,12 +247,12 @@
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
     <style>
 
-        #btn-back-to-top {
+#btn-back-to-top {
             background-color: #0C6197;
             color: white;
             position: fixed;
-            bottom: 20px;
-            right: 20px;
+            /* bottom: 20px; */
+            /* right: 20px; */
             display: none;
         }
 
@@ -260,8 +260,8 @@
             background-color: #0C6197;
             color: white;
             position: fixed;
-            top: 120px;
-            right: 20px;
+            /* top: 120px; */
+            /* right: 20px; */
             z-index: 9999;
             display: none;
         }
@@ -472,12 +472,12 @@
 
         });
 
-            function setMaxWidth() {
-                $("#resume-table").width( Math.round( $(window ).width() - size ) ) ;
+        function setMaxWidth() {
+                // $("#resume-table").width( Math.round( $(window ).width() - size ) ) ;
             }
 
             function setMaxHeight() {
-                 $("#resume-table").height( Math.round( $(window ).height() - 300 ) ) ;
+                //  $("#resume-table").height( Math.round( $(window ).height() - 300 ) ) ;
             }
 
             let mybuttonBottom = document.getElementById("btn-back-to-bottom");