From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 12 Mar 2016 12:51:52 +0000 (+0100)
Subject: Added basic draft for attachments
X-Git-Tag: 3.0.0_Beta_1~2030^2~19
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e3b932b67f5da966d2604957f31a9630b66b5793;p=GitHub%2FWoltLab%2FWCF.git

Added basic draft for attachments
---

diff --git a/com.woltlab.wcf/templates/attachments.tpl b/com.woltlab.wcf/templates/attachments.tpl
index 0f68496554..d540477c1a 100644
--- a/com.woltlab.wcf/templates/attachments.tpl
+++ b/com.woltlab.wcf/templates/attachments.tpl
@@ -3,7 +3,7 @@
 		<section class="section attachmentThumbnailList">
 			<h2 class="sectionTitle">{lang}wcf.attachment.images{/lang}</h2>
 			
-			<ul>
+			<ul class="inlineList">
 				{content}
 					{foreach from=$attachmentList->getGroupedObjects($objectID) item=attachment}
 						{if $attachment->showAsImage() && !$attachment->isEmbedded()}
@@ -30,7 +30,7 @@
 		<section class="section attachmentFileList">
 			<h2 class="sectionTitle">{lang}wcf.attachment.files{/lang}</h2>
 				
-			<ul>
+			<ul class="inlineList">
 				{content}
 					{foreach from=$attachmentList->getGroupedObjects($objectID) item=attachment}
 						{if $attachment->showAsFile() && !$attachment->isEmbedded()}
diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
new file mode 100644
index 0000000000..91881811e7
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -0,0 +1,41 @@
+.attachmentThumbnailList,
+.attachmentFileList {
+	> ul > li:not(:last-child) {
+		margin-right: 10px;
+	}
+}
+
+.attachmentThumbnail {
+	border-radius: 3px;
+	min-height: #{$wcf_option_attachment_thumbnail_height}px;
+	min-width: #{$wcf_option_attachment_thumbnail_width}px;
+	overflow: hidden;
+	position: relative;
+	
+	&:hover > div > small {
+		height: 1.5em;
+	}
+	
+	> a {
+		display: block;
+		min-height: #{$wcf_option_attachment_thumbnail_height}px;
+		min-width: #{$wcf_option_attachment_thumbnail_width}px;
+	}
+	
+	> div {
+		background-color: rgba(0, 0, 0, .6);
+		bottom: 0;
+		color: rgb(255, 255, 255);
+		left: 0;
+		padding: 10px;
+		position: absolute;
+		right: 0;
+		
+		> small {
+			display: block;
+			height: 0;
+			overflow: hidden;
+			transition: height .12s linear;
+		}
+	}
+}