From 893addc075f754d28d04ac656a23727f6f8b77f0 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 5 Mar 2021 19:36:12 +0100 Subject: [PATCH] Refactored the CSS and template Improved visuals to match similar components. The CSS classes now use a common prefix and are no longer nested unless required. --- com.woltlab.wcf/templates/unfurlUrl.tpl | 22 +-- .../lib/data/unfurl/url/UnfurlUrl.class.php | 10 ++ .../data/unfurl/url/UnfurlUrlAction.class.php | 1 + .../install/files/style/ui/unfurlUrl.scss | 133 +++++++++--------- 4 files changed, 91 insertions(+), 75 deletions(-) diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl index 0331a63126..80576d2a73 100644 --- a/com.woltlab.wcf/templates/unfurlUrl.tpl +++ b/com.woltlab.wcf/templates/unfurlUrl.tpl @@ -1,13 +1,17 @@ {if $object->status == "SUCCESSFUL"} -
- url appendClassname=false isUgc=true}> - getImageUrl()|empty} style="background-image: url('{$object->getImageUrl()}')"{/if}>
-
-
{$object->title}
-
{$object->description}
-
{$object->getHost()}
-
- +
+ + getImageUrl()|empty} style="background-image: url('{$object->getImageUrl()}')"{/if}>
+
+
{$object->title}
+
{$object->description}
+
{$object->getHost()}
+
+ url appendClassname=false isUgc=true}> {else} url isUgc=true}>{$object->url} diff --git a/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrl.class.php b/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrl.class.php index 8e8460c96d..aea01b6fef 100644 --- a/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrl.class.php +++ b/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrl.class.php @@ -90,6 +90,16 @@ class UnfurlUrl extends DatabaseObject return null; } + public function hasCoverImage(): bool + { + return $this->imageType == self::IMAGE_COVER && !empty($this->getImageUrl()); + } + + public function hasSquaredImage(): bool + { + return $this->imageType == self::IMAGE_SQUARED && !empty($this->getImageUrl()); + } + /** * Returns the unfurl url object for a given url. * diff --git a/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrlAction.class.php b/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrlAction.class.php index 6342425194..9f808c3007 100644 --- a/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrlAction.class.php +++ b/wcfsetup/install/files/lib/data/unfurl/url/UnfurlUrlAction.class.php @@ -49,6 +49,7 @@ class UnfurlUrlAction extends AbstractDatabaseObjectAction if (!$object) { $returnValues = (new self([], 'create', [ 'data' => [ + 'imageUrl' => '', 'url' => $this->parameters['data']['url'], 'urlHash' => \sha1($this->parameters['data']['url']), ], diff --git a/wcfsetup/install/files/style/ui/unfurlUrl.scss b/wcfsetup/install/files/style/ui/unfurlUrl.scss index 655fbc0149..5ffcb94cdd 100644 --- a/wcfsetup/install/files/style/ui/unfurlUrl.scss +++ b/wcfsetup/install/files/style/ui/unfurlUrl.scss @@ -1,90 +1,91 @@ -.unfurlCard { +.unfurlUrlCard { background-color: $wcfContentBackground; + border-radius: 3px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + color: $wcfContentText; display: inline-block; - margin: 20px 0; - white-space: nowrap; - - @include screen-md-up { - max-width: 700px; - } + margin: 10px 0; + max-width: 100%; + overflow: hidden; + position: relative; + width: 600px; - @include screen-sm-down { - max-width: 100%; + &.unfurlUrlCardCoverImage { + > :first-child:not(:last-child) { + min-height: 150px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + } } - > a { - color: $wcfContentText; + &.unfurlUrlCardSquaredImage { + display: flex; - .unfurlInformation { + > :first-child:not(:last-child) { + flex: 0 0 auto; + height: 128px !important; + width: 128px !important; + margin: 10px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; position: relative; - padding: 10px 20px 20px; } - .urlTitle { - display: block; + > :last-child { + flex: 1 1 auto; overflow: hidden; - text-overflow: ellipsis; - - @include wcfFontHeadline; - } - - .urlDescription { - white-space: normal; + padding-left: 10px; } - .urlHost { - @include wcfFontSmall; - float: right; - color: $wcfContentDimmedText; - bottom: 5px; - position: absolute; - right: 5px; - - img { - height: 12px !important; + @include screen-sm-down { + > :first-child:not(:last-child) { + display: none; } } } +} - &.unfurlLargeContentImage { - min-width: 300px; +.unfurlUrlInformation { + position: relative; + padding: 10px 10px 25px 10px; +} - > a > :first-child:not(:last-child) { - min-height: 150px; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - position: relative; - } - } +.unfurlUrlTitle { + @include wcfFontHeadline; + @include wcfFontBold; + + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} - &.unfurlSquaredContentImage { - > a { - display: flex; +.unfurlUrlDescription { + color: $wcfContentDimmedText; + margin-top: 10px; +} - > :first-child:not(:last-child) { - flex: 0 0 auto; - height: 128px !important; - width: 128px !important; - margin: 10px; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - position: relative; - } +.unfurlUrlHost { + @include wcfFontSmall; - > :last-child { - flex: 1 1 auto; - overflow: hidden; - padding-left: 10px; - } + bottom: 5px; + color: $wcfContentDimmedText; + float: right; + position: absolute; + right: 5px; - @include screen-sm-down { - > :first-child:not(:last-child) { - display: none; - } - } - } + img { + height: 12px !important; } } + +.unfurlUrlLink { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} -- 2.20.1