added the cropping library
This commit is contained in:
1 parent
7a18eb6588
commit
2ee4b76599
4 files changed
+66
-40
No files matched your search
@@ -20,8 +20,8 @@
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="position-relative">
|
||||
<div class="rounded-circle border border-4 border-white shadow" style="width: 80px; height: 80px; overflow: hidden; box-shadow: 0 0 0 2px {{ $relationship->dependent->gender == 'm' ? 'rgba(147, 51, 234, 0.3)' : 'rgba(214, 51, 132, 0.3)' }} !important;">
|
||||
@if($relationship->dependent->media_gallery[0] ?? false)
|
||||
<img src="{{ $relationship->dependent->media_gallery[0] }}" alt="{{ $relationship->dependent->full_name }}" class="w-100 h-100" style="object-fit: cover;">
|
||||
@if($relationship->dependent->profile_picture)
|
||||
<img src="{{ asset('storage/' . $relationship->dependent->profile_picture) }}" alt="{{ $relationship->dependent->full_name }}" class="w-100 h-100" style="object-fit: cover;">
|
||||
@else
|
||||
<div class="w-100 h-100 d-flex align-items-center justify-content-center text-white fw-bold fs-4" style="background: linear-gradient(135deg, {{ $relationship->dependent->gender == 'm' ? '#8b5cf6 0%, #7c3aed 100%' : '#d63384 0%, #a61e4d 100%' }});">
|
||||
{{ strtoupper(substr($relationship->dependent->full_name, 0, 1)) }}
|
||||
|
||||
@@ -12,14 +12,27 @@
|
||||
<!-- Profile Picture Section -->
|
||||
<div class="mb-4 text-center">
|
||||
<div class="mb-3">
|
||||
<img src="{{ $relationship->dependent->profile_picture ? asset('storage/' . $relationship->dependent->profile_picture) : asset('images/default-avatar.png') }}"
|
||||
alt="Profile Picture"
|
||||
class="rounded-circle"
|
||||
style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #dee2e6;">
|
||||
@if($relationship->dependent->profile_picture)
|
||||
<img src="{{ asset('storage/' . $relationship->dependent->profile_picture) }}"
|
||||
alt="Profile Picture"
|
||||
class="rounded-circle"
|
||||
style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #dee2e6;">
|
||||
@else
|
||||
<div class="rounded-circle d-inline-flex align-items-center justify-content-center text-white fw-bold"
|
||||
style="width: 120px; height: 120px; font-size: 3rem; background: linear-gradient(135deg, {{ $relationship->dependent->gender == 'm' ? '#0d6efd 0%, #0a58ca 100%' : '#d63384 0%, #a61e4d 100%' }}); border: 3px solid #dee2e6;">
|
||||
{{ strtoupper(substr($relationship->dependent->full_name, 0, 1)) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#profilePictureModal">
|
||||
<i class="fas fa-camera"></i> Change Profile Picture
|
||||
</button>
|
||||
<x-takeone-cropper
|
||||
id="family_member_{{ $relationship->dependent->id }}"
|
||||
width="300"
|
||||
height="400"
|
||||
shape="square"
|
||||
folder="images/profiles"
|
||||
filename="profile_{{ $relationship->dependent->id }}"
|
||||
uploadUrl="{{ route('family.upload-picture', $relationship->dependent->id) }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('family.update', $relationship->dependent->id) }}">
|
||||
@@ -246,14 +259,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile Picture Upload Modal -->
|
||||
<x-image-upload-modal
|
||||
id="profilePictureModal"
|
||||
aspectRatio="1"
|
||||
maxSizeMB="1"
|
||||
title="Upload Profile Picture"
|
||||
uploadUrl="{{ route('family.upload-picture', $relationship->dependent->id) }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -279,6 +279,22 @@
|
||||
.nav-icon-btn.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Vertical alignment fix for navbar items */
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@stack('styles')
|
||||
|
||||
Reference in new issue
Block a user