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 3d85f6bafb6890654135aa0a672fdf768fc1633d..0258cc8ad762634a768bcd3486cf09fae83c90ed 100644 (file)
--- 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 f02fc763a5126d60b59690f563c18df56a361315..8f3ee3409a149db52e7e39cb07fc7e68a1c8231f 100644 (file)
--- 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;
-}