From 66fb2a04e6f6ba8aa8eae3554363e0eed9e9c595 Mon Sep 17 00:00:00 2001
From: joshuaruesweg <ruesweg@woltlab.com>
Date: Tue, 23 Feb 2021 13:17:21 +0100
Subject: [PATCH] Add unfurlUrl template

---
 com.woltlab.wcf/templates/unfurlUrl.tpl       | 14 +++
 .../install/files/style/ui/unfurlUrl.scss     | 90 +++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 com.woltlab.wcf/templates/unfurlUrl.tpl
 create mode 100644 wcfsetup/install/files/style/ui/unfurlUrl.scss

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
new file mode 100644
index 0000000000..6e304430b2
--- /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
index 0000000000..69c8db0367
--- /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
-- 
2.20.1