Added basic draft for attachments

diff --git a/com.woltlab.wcf/templates/attachments.tpl b/com.woltlab.wcf/templates/attachments.tpl
index 0f68496554a88ce7b4c8e4939a187c6458a84b71..d540477c1a79e6c37b520b781a8deb588f37ead7 100644 (file)
--- 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 (file)
index 0000000..9188181
--- /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;
+               }
+       }
+}