From 6240c329977bcc493b8f691dd444db7a3385c093 Mon Sep 17 00:00:00 2001
From: "waffle.lord" <waffle.lord@hotmail.com>
Date: Thu, 12 Sep 2024 15:26:20 -0400
Subject: [PATCH] mobile constraints WIP

---
 resources/views/livewire/user-stack.blade.php   | 13 ++++++++++++-
 resources/views/livewire/user/profile.blade.php | 14 +++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/resources/views/livewire/user-stack.blade.php b/resources/views/livewire/user-stack.blade.php
index fd3058e..a5d3e61 100644
--- a/resources/views/livewire/user-stack.blade.php
+++ b/resources/views/livewire/user-stack.blade.php
@@ -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">
         <h2 class="text-2xl">{{$label}}</h2>
     </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">
         @foreach($users->slice(0, $limit) as $user)
+            {{-- User Badge --}}
             <div class="relative group">
                 <a href="{{$user->profileUrl()}}"
                    class="rounded-full -ml-6 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
@@ -18,6 +26,7 @@
             </div>
         @endforeach
         @if($users->count() > $limit)
+            {{-- Count Badge --}}
             <div class="relative group">
                 <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>
         @endif
     </div>
+    @endif
     @if($users->count() > $limit)
+        {{-- View all button --}}
         <div class="flex justify-center items-center">
             <button wire:click="toggleViewAll">view all</button>
         </div>
diff --git a/resources/views/livewire/user/profile.blade.php b/resources/views/livewire/user/profile.blade.php
index 115cc6d..a802043 100644
--- a/resources/views/livewire/user/profile.blade.php
+++ b/resources/views/livewire/user/profile.blade.php
@@ -66,11 +66,19 @@
             <p>{{__("Member Since")}} {{ $user->created_at->format("M d, h:m a") }}</p>
         </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>
                 {{-- Mobile Dropdown --}}
-                <div class="sm:hidden">
+                <div class="sm:hidden m-4">
                     <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">
                         <option value="wall">{{ __('Wall') }}</option>
@@ -126,7 +134,7 @@
                 @endswitch
             </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">
                 <livewire:user-stack :parentUserName="$user->name" :label="__('Followers')" :users="$followers"/>
             </div>