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.

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
index 0331a63126650f12367bb2d0aacb704b627a49d1..80576d2a737df460d4079467f2a52fda3b5911c7 100644 (file)
--- a/com.woltlab.wcf/templates/unfurlUrl.tpl
+++ b/com.woltlab.wcf/templates/unfurlUrl.tpl
@@ -1,13 +1,17 @@
 {if $object->status == "SUCCESSFUL"}
-       <div class="unfurlCard {if $object->imageType == 'COVER' && !$object->getImageUrl()|empty}unfurlLargeContentImage{elseif $object->imageType == 'SQUARED' && !$object->getImageUrl()|empty}unfurlSquaredContentImage{/if}">
-               <a {anchorAttributes url=$object->url appendClassname=false isUgc=true}>
-                       <div{if !$object->getImageUrl()|empty} style="background-image: url('{$object->getImageUrl()}')"{/if}></div>
-                       <div class="unfurlInformation">
-                               <div class="urlTitle">{$object->title}</div>
-                               <div class="urlDescription">{$object->description}</div>
-                               <div class="urlHost">{$object->getHost()}</div>
-                       </div>
-               </a>
+       <div class="
+               unfurlUrlCard
+               {if $object->hasCoverImage()}unfurlUrlCardCoverImage{/if}
+               {if $object->hasSquaredImage()}unfurlUrlCardSquaredImage{/if}
+       ">
+               
+               <div{if !$object->getImageUrl()|empty} style="background-image: url('{$object->getImageUrl()}')"{/if}></div>
+               <div class="unfurlUrlInformation">
+                       <div class="unfurlUrlTitle">{$object->title}</div>
+                       <div class="unfurlUrlDescription">{$object->description}</div>
+                       <div class="unfurlUrlHost">{$object->getHost()}</div>
+               </div>
+               <a class="unfurlUrlLink" {anchorAttributes url=$object->url appendClassname=false isUgc=true}></a>
        </div>
 {else}
        <a {anchorAttributes url=$object->url isUgc=true}>{$object->url}</a>

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 8e8460c96d24e70d5121caaa2319660446026568..aea01b6fef0a31a62d5b1f8e35d95f49b44a7752 100644 (file)
--- 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 634242519425ce5b9a1fd4c5312a9cf7dc9a3772..9f808c3007bb19ba8c03e06999168a736e8b7b99 100644 (file)
--- 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 655fbc0149dd1d0cd55a3f5d22ea116dc93fd9e3..5ffcb94cdd4b91df42529dffc5106359b596f06d 100644 (file)
--- 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;
+}