Add unfurlUrl template

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
new file mode 100644 (file)
index 0000000..6e30443
--- /dev/null
+++ b/com.woltlab.wcf/templates/unfurlUrl.tpl
@@ -0,0 +1,14 @@
+{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 href="{$object->url}"{if EXTERNAL_LINK_REL_NOFOLLOW || EXTERNAL_LINK_TARGET_BLANK} rel="{if EXTERNAL_LINK_REL_NOFOLLOW}nofollow{/if}{if EXTERNAL_LINK_REL_NOFOLLOW && EXTERNAL_LINK_TARGET_BLANK} {/if}{if EXTERNAL_LINK_TARGET_BLANK}noopener noreferrer{/if}"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>
+                       <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>
+{else}
+       <a href="{$object->url}" class="externalURL" {if EXTERNAL_LINK_REL_NOFOLLOW || EXTERNAL_LINK_TARGET_BLANK} rel="{if EXTERNAL_LINK_REL_NOFOLLOW}nofollow{/if}{if EXTERNAL_LINK_REL_NOFOLLOW && EXTERNAL_LINK_TARGET_BLANK} {/if}{if EXTERNAL_LINK_TARGET_BLANK}noopener noreferrer{/if}"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{$object->url}</a>
+{/if}
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/ui/unfurlUrl.scss b/wcfsetup/install/files/style/ui/unfurlUrl.scss
new file mode 100644 (file)
index 0000000..69c8db0
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/unfurlUrl.scss
@@ -0,0 +1,90 @@
+.unfurlCard {
+       background-color: $wcfContentBackground;
+       box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+       display: inline-block;
+       margin: 20px 0;
+       white-space: nowrap;
+       
+       @include screen-md-up {
+               max-width: 700px;
+       }
+       
+       @include screen-sm-down {
+               max-width: 100%;
+       }
+       
+       > a {
+               color: $wcfContentText;
+               
+               .unfurlInformation {
+                       position: relative;
+                       padding: 10px 20px 20px;
+               }
+               
+               .urlTitle {
+                       display: block;
+                       overflow: hidden;
+                       text-overflow: ellipsis;
+                       
+                       @include wcfFontHeadline;
+               }
+               
+               .urlDescription {
+                       white-space: normal;
+               }
+               
+               .urlHost {
+                       @include wcfFontSmall;
+                       float: right;
+                       color: $wcfContentDimmedText;
+                       bottom: 5px;
+                       position: absolute;
+                       right: 5px;
+                       
+                       img {
+                               height: 12px !important;
+                       }
+               }
+       }
+       
+       &.unfurlLargeContentImage {
+               min-width: 300px;
+               
+               > a > :first-child:not(:last-child) {
+                       min-height: 150px;
+                       background-position: center;
+                       background-repeat: no-repeat;
+                       background-size: cover;
+                       position: relative;
+               }
+       }
+       
+       &.unfurlSquaredContentImage {
+               > a {
+                       display: flex;
+                       
+                       > :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;
+                       }
+                       
+                       > :last-child {
+                               flex: 1 1 auto;
+                               overflow: hidden;
+                               padding-left: 10px;
+                       }
+                       
+                       @include screen-sm-down {
+                               > :first-child:not(:last-child) {
+                                       display: none;
+                               }
+                       }
+               }
+       }
+}
\ No newline at end of file