mobile constraints WIP

This commit is contained in:
IsWaffle 2024-09-12 15:26:20 -04:00
parent cdaddbb44f
commit 6240c32997
2 changed files with 23 additions and 4 deletions

View File

@ -1,9 +1,17 @@
<div class="w-full text-gray-600 bg-white shadow-md dark:text-gray-200 dark:bg-gray-900 rounded-xl p-4 m-4"> <div class="w-full text-gray-600 bg-white shadow-md dark:shadow-gray-950 drop-shadow-xl dark:text-gray-200 dark:bg-gray-900 rounded-xl p-4 m-4">
{{-- Card Header --}}
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<h2 class="text-2xl">{{$label}}</h2> <h2 class="text-2xl">{{$label}}</h2>
</div> </div>
@if($users->count() === 0)
<div class="flex justify-center text-sm">
<span>{{__('nothing here yet')}}</span>
</div>
@else
<div class="flex ml-6 py-2 justify-center items-center"> <div class="flex ml-6 py-2 justify-center items-center">
@foreach($users->slice(0, $limit) as $user) @foreach($users->slice(0, $limit) as $user)
{{-- User Badge --}}
<div class="relative group"> <div class="relative group">
<a href="{{$user->profileUrl()}}" <a href="{{$user->profileUrl()}}"
class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border"> class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
@ -18,6 +26,7 @@
</div> </div>
@endforeach @endforeach
@if($users->count() > $limit) @if($users->count() > $limit)
{{-- Count Badge --}}
<div class="relative group"> <div class="relative group">
<span <span
class="rounded-full -ml-6 z-20 bg-cyan-500 dark:bg-cyan-700 h-16 w-16 flex justify-center items-center border text-white">+{{$users->count()-$limit}}</span> class="rounded-full -ml-6 z-20 bg-cyan-500 dark:bg-cyan-700 h-16 w-16 flex justify-center items-center border text-white">+{{$users->count()-$limit}}</span>
@ -28,7 +37,9 @@
</div> </div>
@endif @endif
</div> </div>
@endif
@if($users->count() > $limit) @if($users->count() > $limit)
{{-- View all button --}}
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<button wire:click="toggleViewAll">view all</button> <button wire:click="toggleViewAll">view all</button>
</div> </div>

View File

@ -66,11 +66,19 @@
<p>{{__("Member Since")}} {{ $user->created_at->format("M d, h:m a") }}</p> <p>{{__("Member Since")}} {{ $user->created_at->format("M d, h:m a") }}</p>
</div> </div>
</div> </div>
<div class="grid grid-cols-4"> <div class="grid grid-cols-1 lg:grid-cols-4">
<div class="lg:hidden flex flex-col justify-top items-center">
<div class="flex w-full max-w-sm">
<livewire:user-stack :parentUserName="$user->name" :label="__('Followers')" :users="$followers"/>
</div>
<div class="flex w-full max-w-sm">
<livewire:user-stack :parentUserName="$user->name" :label="__('Following')" :users="$following"/>
</div>
</div>
<div class="flex flex-col col-span-3"> <div class="flex flex-col col-span-3">
<div> <div>
{{-- Mobile Dropdown --}} {{-- Mobile Dropdown --}}
<div class="sm:hidden"> <div class="sm:hidden m-4">
<label for="tabs" class="sr-only">{{ __('Select a tab') }}</label> <label for="tabs" class="sr-only">{{ __('Select a tab') }}</label>
<select wire:model.change="section" id="tabs" name="tabs" class="block w-full rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600"> <select wire:model.change="section" id="tabs" name="tabs" class="block w-full rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600">
<option value="wall">{{ __('Wall') }}</option> <option value="wall">{{ __('Wall') }}</option>
@ -126,7 +134,7 @@
@endswitch @endswitch
</div> </div>
</div> </div>
<div class="flex flex-col justify-top items-center"> <div class="max-lg:hidden flex flex-col justify-top items-center">
<div class="flex w-full max-w-sm"> <div class="flex w-full max-w-sm">
<livewire:user-stack :parentUserName="$user->name" :label="__('Followers')" :users="$followers"/> <livewire:user-stack :parentUserName="$user->name" :label="__('Followers')" :users="$followers"/>
</div> </div>