spt/forge
spt/forge
0
0
Fork 0
mirror of https://github.com/sp-tarkov/forge.git synced 2025-02-13 04:30:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

User Profile Follow Component Mobile Optimization

Browse Source
This commit is contained in:
Refringe 2024-10-05 14:32:25 -04:00
parent 80f3da13b9
commit 18ce8754c2
Signed by: Refringe
SSH Key Fingerprint: SHA256:t865XsQpfTeqPRBMN2G6+N8wlDjkgUCZF3WGW6O9N/k
4 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Livewire/User/FollowCard.php
View File

@ -50,7 +50,7 @@ class FollowCard extends Component
* The maximum number of users to display on the card. * The maximum number of users to display on the card.
*/ */
#[Locked] #[Locked]
public int $limit = 5; public int $limit = 4;
/** /**
* Whether to show all users in a model dialog. * Whether to show all users in a model dialog.

6
resources/views/livewire/user/follow-card.blade.php
View File

@ -13,8 +13,8 @@
@foreach ($followUsers->take($limit) as $user) @foreach ($followUsers->take($limit) as $user)
{{-- User Badge --}} {{-- User Badge --}}
<div class="relative group"> <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"> <a href="{{ $user->profileUrl() }}" class="rounded-full -ml-7 z-20 bg-[#ebf4ff] h-16 w-16 flex justify-center items-center border">
<img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="h-full w-full rounded-full" /> <img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="h-16 w-16 rounded-full" />
</a> </a>
<div class="absolute bottom-full -ml-3 left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100"> <div class="absolute bottom-full -ml-3 left-1/2 transform -translate-x-1/2 mb-2 w-max px-2 py-1 text-sm text-white bg-gray-700 rounded shadow-lg opacity-0 group-hover:opacity-100">
{{ $user->name }} {{ $user->name }}
@ -52,7 +52,7 @@
@foreach ($followUsers as $user) @foreach ($followUsers as $user)
<div class="flex group/item dark:hover:bg-gray-950 items-center p-2 pr-3 rounded-md"> <div class="flex group/item dark:hover:bg-gray-950 items-center p-2 pr-3 rounded-md">
<a href="{{ $user->profileUrl() }}" class="flex-shrink-0 w-16 h-16 items-center"> <a href="{{ $user->profileUrl() }}" class="flex-shrink-0 w-16 h-16 items-center">
<img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="block w-full h-full rounded-full" /> <img src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" class="block w-16 h-16 rounded-full" />
</a> </a>
<div class="flex flex-col w-full pl-3"> <div class="flex flex-col w-full pl-3">
<a href="{{ $user->profileUrl() }}" class="text-2xl group-hover/item:underline group-hover/item:text-white">{{ $user->name }}</a> <a href="{{ $user->profileUrl() }}" class="text-2xl group-hover/item:underline group-hover/item:text-white">{{ $user->name }}</a>

6
resources/views/livewire/user/follow-cards.blade.php
View File

@ -3,11 +3,11 @@
'authFollowIds' => collect(), 'authFollowIds' => collect(),
]) ])
<div class="w-full max-w-sm"> <div class="grid grid-cols-2 w-full gap-6">
<div class="flex w-full max-w-sm"> <div class="col-span-full md:col-span-1 lg:col-span-2 flex w-full">
<livewire:user.follow-card relationship="followers" :profile-user="$profileUser" :auth-follow-ids="$authFollowIds" /> <livewire:user.follow-card relationship="followers" :profile-user="$profileUser" :auth-follow-ids="$authFollowIds" />
</div> </div>
<div class="flex w-full max-w-sm"> <div class="col-span-full md:col-span-1 lg:col-span-2 flex w-full">
<livewire:user.follow-card relationship="following" :profile-user="$profileUser" :auth-follow-ids="$authFollowIds" /> <livewire:user.follow-card relationship="following" :profile-user="$profileUser" :auth-follow-ids="$authFollowIds" />
</div> </div>
</div> </div>

10
resources/views/user/show.blade.php
View File

@ -37,11 +37,6 @@
</div> </div>
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8"> <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
{{-- Mobile Follows --}}
<div class="lg:hidden flex flex-col justify-top items-center">
<livewire:user.follow-cards :profile-user="$user" />
</div>
{{-- Left Column --}} {{-- Left Column --}}
<div x-data="{ selectedTab: window.location.hash ? window.location.hash.substring(1) : 'wall' }" x-init="$watch('selectedTab', (tab) => {window.location.hash = tab})" class="lg:col-span-3 flex flex-col gap-6"> <div x-data="{ selectedTab: window.location.hash ? window.location.hash.substring(1) : 'wall' }" x-init="$watch('selectedTab', (tab) => {window.location.hash = tab})" class="lg:col-span-3 flex flex-col gap-6">
@ -104,8 +99,9 @@
</div> </div>
</div> </div>
{{-- Desktop Follows --}} {{-- Right Column --}}
<div class="max-lg:hidden flex flex-col justify-top items-center gap-6"> <div class="col-span-1 flex flex-col justify-top items-center">
{{-- Follows --}}
<livewire:user.follow-cards :profile-user="$user" /> <livewire:user.follow-cards :profile-user="$user" />
</div> </div>
</div> </div>