From 3c7271a620576832a593c48571b2e10e782d754a Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 4 Jun 2021 13:45:09 +0200 Subject: [PATCH] Improved UX and visuals of embedded URLs The link now has a proper title and the tab focus will highlight the headline. --- com.woltlab.wcf/templates/unfurlUrl.tpl | 3 +-- .../install/files/style/ui/unfurlUrl.scss | 25 +++++++++++-------- 2 files changed, 16 insertions(+), 12 deletions(-) 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 @@ {/if}
-
{$object->title}
+ url appendClassname=false isUgc=$enableUgc}>{$object->title}
{$object->description}
{$object->getHost()}
- url appendClassname=false isUgc=$enableUgc}> {/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; -} -- 2.20.1