From 4d3a48d1c192ed54dfabaea5e251ddd083070b21 Mon Sep 17 00:00:00 2001
From: Mario <mario@mariovavti.com>
Date: Sun, 7 May 2023 12:47:13 +0000
Subject: cropper fixup

---
 view/tpl/cropcover.tpl     |  4 ++--
 view/tpl/profile_vcard.tpl | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/view/tpl/cropcover.tpl b/view/tpl/cropcover.tpl
index ba91a2cce..eda6a7ba8 100644
--- a/view/tpl/cropcover.tpl
+++ b/view/tpl/cropcover.tpl
@@ -15,8 +15,8 @@ var image = document.getElementById('croppa');
 var cropper = new Cropper(image, {
 	aspectRatio: 2.75 / 1,
 	viewMode: 1,
-	preview: '.crop-preview',
-	  crop: function(e) {
+	preview: '#cover-photo-wrapper, .crop-preview',
+	crop: function(e) {
 		$( '#x1' ).val(e.detail.x);
 		$( '#y1' ).val(e.detail.y);
 		$( '#x2' ).val(e.detail.x + e.detail.width);
diff --git a/view/tpl/profile_vcard.tpl b/view/tpl/profile_vcard.tpl
index bbdb781c5..8276a1b72 100644
--- a/view/tpl/profile_vcard.tpl
+++ b/view/tpl/profile_vcard.tpl
@@ -1,7 +1,9 @@
 <div class="rounded mb-3 vcard-card h-card">
 	<div class="card mb-2">
-		<div id="profile-cover-wrapper" class="position-relative">
-			<img class="img-fluid rounded-top" src="{{$cover.url}}" alt="" style="">
+		<div class="position-relative">
+			<div id="cover-photo-wrapper" class="overflow-hidden w-100 rounded-top">
+				<img class="img-fluid rounded-top" src="{{$cover.url}}" alt="" style="">
+			</div>
 			{{if $connect}}
 			<a href="{{$connect_url}}" class="btn btn-success btn-sm m-2 position-absolute end-0" rel="nofollow">
 				<i class="fa fa-plus"></i> {{$connect}}
@@ -34,13 +36,13 @@
 			{{/if}}
 		</div>
 		<div class="d-flex">
-			<div class="bg-body-secondary rounded rounded-end-0 rounded-top-0" style="">
+			<div id="profile-photo-wrapper" class="bg-body-secondary rounded rounded-end-0 rounded-top-0" style="min-width: 5rem; min-height: 5rem;">
 				<img class="rounded rounded-end-0 rounded-top-0 u-photo" src="{{$profile.thumb}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 5rem; height: 5rem;">
 			</div>
 			{{if $profile.pdesc}}
 			<div class="m-2 small text-break">{{$profile.pdesc}}</div>
 			{{else}}
-			<div class="m-2">
+			<div class="m-2 small">
 				<span class="opacity-50">{{$no_pdesc}}</span>
 			</div>
 			{{/if}}
-- 
cgit v1.2.3