From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 4 Jun 2021 11:45:09 +0000 (+0200)
Subject: Improved UX and visuals of embedded URLs
X-Git-Tag: 5.4.0_Beta_2~34
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=3c7271a620576832a593c48571b2e10e782d754a;p=GitHub%2FWoltLab%2FWCF.git

Improved UX and visuals of embedded URLs

The link now has a proper title and the tab focus will highlight the headline.
---

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
index 3d85f6bafb..0258cc8ad7 100644
--- a/com.woltlab.wcf/templates/unfurlUrl.tpl
+++ b/com.woltlab.wcf/templates/unfurlUrl.tpl
@@ -10,11 +10,10 @@
 				<img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
 			{/if}
 			<div class="unfurlUrlInformation">
-				<div class="unfurlUrlTitle">{$object->title}</div>
+				<a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
 				<div class="unfurlUrlDescription">{$object->description}</div>
 				<div class="unfurlUrlHost">{$object->getHost()}</div>
 			</div>
-			<a class="unfurlUrlLinkShadow" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}></a>
 		</div>
 	{/if}
 {else}
diff --git a/wcfsetup/install/files/style/ui/unfurlUrl.scss b/wcfsetup/install/files/style/ui/unfurlUrl.scss
index f02fc763a5..8f3ee3409a 100644
--- a/wcfsetup/install/files/style/ui/unfurlUrl.scss
+++ b/wcfsetup/install/files/style/ui/unfurlUrl.scss
@@ -61,7 +61,6 @@
 }
 
 .unfurlUrlInformation {
-	position: relative;
 	padding: 10px 10px 25px 10px;
 }
 
@@ -69,11 +68,26 @@
 	@include wcfFontHeadline;
 	@include wcfFontBold;
 
+	color: inherit;
 	display: -webkit-box;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 2;
+	
+	&::before {
+		bottom: 0;
+		content: "";
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+
+	&:hover,
+	&:focus {
+		color: inherit;
+	}
 }
 
 .unfurlUrlDescription {
@@ -86,7 +100,6 @@
 
 	bottom: 5px;
 	color: $wcfContentDimmedText;
-	float: right;
 	position: absolute;
 	right: 5px;
 
@@ -94,11 +107,3 @@
 		height: 12px !important;
 	}
 }
-
-.unfurlUrlLinkShadow {
-	bottom: 0;
-	left: 0;
-	position: absolute;
-	right: 0;
-	top: 0;
-}