mirfalah-tech
/
pasca
Watch 10
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

responsive table

master
azri 11 hours ago
parent
cb58bdf301
commit
aae886835e
2 changed files with 14 additions and 13 deletions
Unified View Show Diff Stats
  1. 8
    7
      resources/views/agency.blade.php
  2. 6
    6
      resources/views/agency_performance.blade.php

+ 8
- 7
resources/views/agency.blade.php View File

22 
             </div>
 22 
             </div>
23 
         </div>
 23 
         </div>
24
24
25 
-        <div class="flex" style="gap:10px">
26 
-            <div class="relative w-fit">
25 
+        <div class="flex flex-col lg:flex-row gap-2 w-full">
26 
+            <div class="relative w-full lg:w-fit">
27 
                 <input type="text" placeholder="Carian"
 27 
                 <input type="text" placeholder="Carian"
28 
                     class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
 28 
                     class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
29 
-                <div class="pointer-events-none absolute text-gray-500 text-xs" style="top: 50%; transform: translateY(-50%); right:10px">
29 
+                <div class="pointer-events-none absolute text-gray-500 text-xs"
30 
+                    style="top: 50%; transform: translateY(-50%); right:10px">
30 
                     <i class="fas fa-search"></i>
 31 
                     <i class="fas fa-search"></i>
31 
                 </div>
 32 
                 </div>
32 
             </div>
 33 
             </div>
33
34
34 
-            <div class="relative w-fit">
35 
+            <div class="relative w-full lg:w-fit">
35 
                 <select
 36 
                 <select
36 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
 37 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
37 
                     <option value="all" selected>Agensi</option>
 38 
                     <option value="all" selected>Agensi</option>
40 
                 </select>
 41 
                 </select>
41 
             </div>
 42 
             </div>
42
43
43 
-            <div class="relative w-fit">
44 
+            <div class="relative w-full lg:w-fit">
44 
                 <select
 45 
                 <select
45 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
 46 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
46 
                     <option value="all" selected>Status Prestasi</option>
 47 
                     <option value="all" selected>Status Prestasi</option>
49 
                     <option value="3">Baik</option>
 50 
                     <option value="3">Baik</option>
50 
                 </select>
 51 
                 </select>
51 
             </div>
 52 
             </div>
52 
-
53 
         </div>
 53 
         </div>
54
54
55 
+
55 
         <div class="border rounded">
 56 
         <div class="border rounded">
56 
             <h5 class="font-semibold m-5">Senarai Agensi</h5>
 57 
             <h5 class="font-semibold m-5">Senarai Agensi</h5>
57 
             <div class="overflow-x-auto overflow-hidden rounded-[10px]">
 58 
             <div class="overflow-x-auto overflow-hidden rounded-[10px]">
58 
-                <table class="w-full text-sm text-left text-gray-700 border-collapse">
59 
+                <table class="min-w-[800px] text-sm text-left text-gray-700 border-collapse">
59 
                     <thead>
 60 
                     <thead>
60 
                         <tr>
 61 
                         <tr>
61 
                             <th class="text-xs px-4 py-2">Bil</th>
 62 
                             <th class="text-xs px-4 py-2">Bil</th>

+ 6
- 6
resources/views/agency_performance.blade.php View File

22 
             </div>
 22 
             </div>
23 
         </div>
 23 
         </div>
24
24
25 
-        <div class="flex" style="gap:10px">
26 
-            <div class="relative w-fit">
25 
+        <div class="flex flex-col lg:flex-row gap-2 w-full">
26 
+            <div class="relative w-full lg:w-fit">
27 
                 <input type="text" placeholder="Carian"
 27 
                 <input type="text" placeholder="Carian"
28 
                     class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
 28 
                     class="w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500" />
29 
                 <div class="pointer-events-none absolute text-gray-500 text-xs"
 29 
                 <div class="pointer-events-none absolute text-gray-500 text-xs"
32 
                 </div>
 32 
                 </div>
33 
             </div>
 33 
             </div>
34
34
35 
-            <div class="relative w-fit">
35 
+            <div class="relative w-full lg:w-fit">
36 
                 <select
 36 
                 <select
37 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
 37 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
38 
                     <option value="all" selected>Agensi</option>
 38 
                     <option value="all" selected>Agensi</option>
41 
                 </select>
 41 
                 </select>
42 
             </div>
 42 
             </div>
43
43
44 
-            <div class="relative w-fit">
44 
+            <div class="relative w-full lg:w-fit">
45 
                 <select
 45 
                 <select
46 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
 46 
                     class="appearance-none w-full pl-4 pr-10 py-1 px-5 border border-gray-300 rounded-lg text-sm text-gray-700 cursor-pointer bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500">
47 
                     <option value="all" selected>Status Prestasi</option>
 47 
                     <option value="all" selected>Status Prestasi</option>
50 
                     <option value="3">Baik</option>
 50 
                     <option value="3">Baik</option>
51 
                 </select>
 51 
                 </select>
52 
             </div>
 52 
             </div>
53 
-
54 
         </div>
 53 
         </div>
55
54
55 
+
56 
         <div class="border rounded">
 56 
         <div class="border rounded">
57 
             <h5 class="font-semibold m-5">Senarai Agensi</h5>
 57 
             <h5 class="font-semibold m-5">Senarai Agensi</h5>
58 
             <div class="overflow-x-auto overflow-hidden rounded-[10px]">
 58 
             <div class="overflow-x-auto overflow-hidden rounded-[10px]">
59 
-                <table class="w-full text-sm text-left text-gray-700 border-collapse">
59 
+                <table class="min-w-[800px] text-sm text-left text-gray-700 border-collapse">
60 
                     <thead>
 60 
                     <thead>
61 
                         <tr>
 61 
                         <tr>
62 
                             <th class="text-xs px-4 py-2">Bil</th>
 62 
                             <th class="text-xs px-4 py-2">Bil</th>

Write Preview
Loading…
Cancel
Save