update profile vcard to implement the cover image

3 files changed, 63 insertions, 58 deletions

diff --git a/view/css/widgets.css b/view/css/widgets.css
index 6b5ef3986..6f5a90aa5 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -231,6 +231,30 @@ a.wikilist {
 	display: none !important;
 }
 
+/* vcard */
+
+.vcard-card {
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
+}
+
+.vcard {
+	word-wrap: break-word;
+}
+
+.profile-edit-side-link {
+	opacity: 0;
+	filter:alpha(opacity=0);
+}
+
+.card:hover .profile-edit-side-link {
+	opacity: 1;
+	filter:alpha(opacity=100);
+}
+
+#profile-cover-text {
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
+}
+
 /* contact block */
 .contact-block-div .oneway-overlay {
 	font-size: .9rem;
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index fc5416eaa..18973e30c 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -404,29 +404,6 @@ footer {
 	margin-bottom: 10px;
 }
 
-.fn {
-	font-weight: bold;
-	font-size: 1rem;
-}
-
-.vcard-card {
-	background-color: rgba(var(--bs-body-bg-rgb), .7);
-}
-
-.vcard {
-	word-wrap: break-word;
-}
-
-.profile-edit-side-link {
-	opacity: 0;
-	filter:alpha(opacity=0);
-}
-
-.card:hover .profile-edit-side-link {
-	opacity: 1;
-	filter:alpha(opacity=100);
-}
-
 #hide-friends-yes-label,
 #hide-friends-no-label {
 	margin-left: 125px;
diff --git a/view/tpl/profile_vcard.tpl b/view/tpl/profile_vcard.tpl
index beec6b3a0..4c3875fa7 100644
--- a/view/tpl/profile_vcard.tpl
+++ b/view/tpl/profile_vcard.tpl
@@ -1,49 +1,53 @@
 <div class="rounded mb-3 vcard-card h-card">
 	<div class="card mb-2">
-		<div class="row">
-			<div class="col-4" style="width: fit-content;">
-				<div id="profile-photo-wrapper">
-					<img class="rounded-start u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 6rem; height:6rem;">
-				</div>
-			</div>
-			<div class="col-7 m-1 p-0">
-				{{if $editmenu.multi}}
-				<div class="dropdown float-end">
-					<a class="profile-edit-side-link float-end" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
-					<div class="dropdown-menu dropdown-menu-end" role="menu">
-						{{foreach $editmenu.menu.entries as $e}}
-						<a href="profiles/{{$e.id}}" class="dropdown-item"><img class="menu-img-1" src='{{$e.photo}}'> {{$e.profile_name}}</a>
-						{{/foreach}}
-						{{if $editmenu.menu.cr_new}}
-						<a href="profiles/new" id="profile-listing-new-link" class="dropdown-item">{{$editmenu.menu.cr_new}}</a>
-						{{/if}}
-					</div>
-				</div>
-				{{elseif $editmenu}}
-				<a class="profile-edit-side-link float-end" href="{{$editmenu.edit.0}}" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
-				{{/if}}
-
-				<div class="text-truncate lh-sm">
-					<strong class="fn p-name">{{$profile.fullname}}{{if $profile.online}}<i class="fa fa-fw fa-asterisk text-danger ps-2" title="{{$profile.online}}"></i>{{/if}}</strong>
+		<div id="profile-cover-wrapper" class="position-relative">
+			<img class="img-fluid rounded-top" src="{{$cover.url}}" alt="" style="">
+			{{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}}
+			</a>
+			{{/if}}
+			<div id="profile-cover-text" class="p-2 position-absolute bottom-0 w-100">
+				<div class="text-truncate h3 lh-sm">
+					<strong class="text-white fn p-name">{{$profile.fullname}}{{if $profile.online}}<i class="fa fa-fw fa-asterisk text-danger ps-2" title="{{$profile.online}}"></i>{{/if}}</strong>
 				</div>
 				<div class="text-truncate">
-					<span class="text-muted p-adr">{{$profile.reddress}}</span>
+					<span class="text-white p-adr">{{$profile.reddress}}</span>
 				</div>
-				{{if $connect}}
-				<div class="mt-2">
-					<a href="{{$connect_url}}" class="btn btn-success btn-sm" rel="nofollow">
-						<i class="fa fa-plus"></i> {{$connect}}
-					</a>
+			</div>
+			{{if $editmenu.multi}}
+			<div class="dropdown position-absolute bottom-0 end-0 m-2">
+				<a class="profile-edit-side-link text-white" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
+				<div class="dropdown-menu dropdown-menu-end" role="menu">
+					{{foreach $editmenu.menu.entries as $e}}
+					<a href="profiles/{{$e.id}}" class="dropdown-item"><img class="menu-img-1" src='{{$e.photo}}'> {{$e.profile_name}}</a>
+					{{/foreach}}
+					{{if $editmenu.menu.cr_new}}
+					<a href="profiles/new" id="profile-listing-new-link" class="dropdown-item">{{$editmenu.menu.cr_new}}</a>
+					{{/if}}
 				</div>
-				{{/if}}
 			</div>
+			{{elseif $editmenu}}
+			<div class="position-absolute bottom-0 end-0 m-2">
+				<a class="profile-edit-side-link text-white" href="{{$editmenu.edit.0}}" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
+			</div>
+			{{/if}}
+		</div>
+		<div class="d-flex justify-content-start">
+			<div class="rounded rounded-end-0 rounded-top-0">
+				<img class="rounded rounded-end-0 rounded-top-0 u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 6rem; height:6rem;">
+			</div>
+			{{if $profile.pdesc}}
+			<div class="m-2 text-break">{{$profile.pdesc}}</div>
+			{{else}}
+			<div class="m-2">
+			<span class="opacity-50">{{$no_pdesc}}</span>
+			</div>
+			{{/if}}
 		</div>
 	</div>
 	{{if $details}}
 	<div class="vcard ps-2 pe-2">
-		{{if $profile.pdesc}}
-		<div class="mb-2">{{$profile.pdesc}}</div>
-		{{/if}}
 		{{if $location}}
 		<dl class="mb-0 pb-1">
 			<dt class="location-label">{{$location}}</dt>