usite-sas-bic/sirpremiumv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile table and search input UI

Browse Source 
Hides the 'entradas' label on small screens, reduces the max width of the search input for mobile, adds text-xs and break-all classes to mobile table rows for better readability, and adjusts spacing in action buttons for a more compact layout.
This commit is contained in:
Juan Felipe Duarte
2025-09-23 10:37:29 -05:00
parent 35b4f51aee
commit 6d49224d44
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ver-entrada.blade.php
+1 -1
View File
@@ -7,6 +7,6 @@
<option value="50">50</option> <option value="50">50</option>
<option value="100">100</option> <option value="100">100</option>
</select> </select>
<p class="text-xs md:text-sm my-auto">entradas</p> <p class="text-xs md:text-sm my-auto hidden md:block">entradas</p>
</div> </div>
resources/views/livewire/show-clientes.blade.php
+5 -5
View File
@@ -48,9 +48,9 @@
<div class="flex justify-between"> <div class="flex justify-between">
<x-ver-entrada /> <x-ver-entrada />
<div class="relative text-sm max-w-[200px] lg:w-auto my-2 flex lg:hidden"> <div class="relative text-sm max-w-[150px] lg:w-auto my-2 flex lg:hidden">
<input id="buscar" type="search" wire:model="buscar" placeholder="Buscar" <input id="buscar" type="search" wire:model="buscar" placeholder="Buscar"
class=" shadow-sm border-2 active:border-neutral-200 focus:ring-0 border-neutral-200 max-w-[200px] lg:w-auto rounded-md pr-7 py-1 m-auto focus:border-neutral-300 focus:outline-none focus:shadow-outline"> class=" shadow-sm border-2 active:border-neutral-200 focus:ring-0 border-neutral-200 max-w-[150px] lg:w-auto rounded-md pr-7 py-1 m-auto focus:border-neutral-300 focus:outline-none focus:shadow-outline">
<svg class="w-5 absolute top-2 right-3" xmlns="http://www.w3.org/2000/svg" version="1.1" <svg class="w-5 absolute top-2 right-3" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="w-4 absolute" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="w-4 absolute"
x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512;rotate: 90deg;" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512;rotate: 90deg;"
@@ -83,14 +83,14 @@
</x-slot> </x-slot>
<x-slot name="tbody"> <x-slot name="tbody">
@foreach ($clientes as $cliente) @foreach ($clientes as $cliente)
<tr class="table-row lg:hidden border-gray-200 text-left" x-data="{ extraInfo: false, openOption: false, isOpen1: false, isOpen2: false }"> <tr class="table-row lg:hidden border-gray-200 text-left text-xs" x-data="{ extraInfo: false, openOption: false, isOpen1: false, isOpen2: false }">
<td @click="extraInfo = true" class="relative"> <td @click="extraInfo = true" class="relative">
<div class="flex justify-between items-start gap-2"> <div class="flex justify-between items-start gap-2">
<div> <div>
<p class="font-semibold"> <p class="font-semibold">
{{ $cliente->nombre_cliente ?? ($cliente->cliente->name ?? '') }} {{ $cliente->nombre_cliente ?? ($cliente->cliente->name ?? '') }}
</p> </p>
<p> <p class="break-all">
@if (!empty($cliente->cuentas_obsoletas->unique())) @if (!empty($cliente->cuentas_obsoletas->unique()))
@foreach ($cliente->cuentas_obsoletas->unique() as $cuenta) @foreach ($cliente->cuentas_obsoletas->unique() as $cuenta)
{{ $cuenta->correo }} <br> {{ $cuenta->correo }} <br>
@@ -116,7 +116,7 @@
@endif @endif
</p> </p>
</div> </div>
<div class="flex justify-between gap-2"> <div class="flex justify-between gap-1">
<div> <div>
<p class="font-semibold capitalize"> <p class="font-semibold capitalize">
{{ $cliente->estado ?? '' }} {{ $cliente->estado ?? '' }}