Initial design changes to list attachments. Added lightbox_me to view images
diff --git a/Allura/allura/nf/allura/css/site_style.css b/Allura/allura/nf/allura/css/site_style.css
index f86b19d..366a5f8 100644
--- a/Allura/allura/nf/allura/css/site_style.css
+++ b/Allura/allura/nf/allura/css/site_style.css
@@ -2203,46 +2203,51 @@
}
/* Attachments */
-.attachment_images {
- overflow: auto;
+
+
+div.attachment_holder {
+ padding-left: 5px;
}
-div.attachment_thumb {
- float: left;
- margin: .5em;
- margin-right: 1.5em;
- position: relative;
- padding: 10px;
+div.attachment_item{
+ border-radius: 6px;
+ display: inline-block;
+ vertical-align: bottom;
+ box-sizing: border-box;
+ border: 1px solid #e5e5e5;
+ width: 120px;
+ height: 100%;
+ margin-bottom: 2px;
}
-div.attachment_thumb .delete_attachment .pic {
- position: absolute;
- top: 0;
- left: 100px;
+
+.attachment_item .attachment_toolbar{
+ border-radius-top: 5px;
+ background-color: #f5f5f5;
+ padding: 5px;
}
-div.attachment_thumb .file {
- position: absolute;
- top: 0;
- right: -40px;
+
+.attachment_item .attachment_toolbar .btn{
+ float: none;
+ margin-right: 2px;
+ background: rgb(235,235,235);
+ font-weight: bold;
+ color: rgb(69,69,69);
+ font-size: 0.8em;
}
-div.attachment_thumb .file_type {
- border: 1px solid #ccc;
- display: block;
- height: 100px;
- width: 100px;
- position: relative;
- text-transform: uppercase;
- text-align: center;
- font-weight: bold;
- font-size: 1.2em;
- margin-bottom: .5em;
- background: #ccc;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, to(#cccccc), from(white));
- background-image: -moz-linear-gradient(100% 100% 90deg, #cccccc, white 100%);
+
+.attachment_item .attachment-name {
+ background-color: #fafafa;
+ padding: 5px;
}
-div.attachment_thumb .file_type span {
- display: block;
- margin-top: 45px;
- color: #666;
+
+.attachment_item img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.attachment_item .attachment_thumbnail {
+ padding: 5px;
}
/* Cards */
diff --git a/Allura/allura/templates/widgets/post_widget.html b/Allura/allura/templates/widgets/post_widget.html
index ce6be9d..22131ae 100644
--- a/Allura/allura/templates/widgets/post_widget.html
+++ b/Allura/allura/templates/widgets/post_widget.html
@@ -98,29 +98,38 @@
</div>
{% endif %}
{% if value.attachments and (not pending or moderator) %}
- <div style="padding-left: 5px;">
- <strong>Attachments</strong>
- <div class="clear"></div>
+ <div class="attachment_holder">
{% for att in value.attachments %}
- <div class="attachment_thumb">
- <form method="POST" action="{{att.url()}}">
+ <div class="attachment_item">
{% if att.is_image() %}
- <a href="{{att.url()}}"><img src="{{att.url()}}/thumb" alt="Thumbnail"/></a>
- <br/>
- <a href="{{att.url()}}">{{att.filename}}</a>
- {% if h.has_access(value, 'moderate')()%}
- <br>
- <input class="submit delete_attachment pic" type="submit" value="X"/>
- {% endif %}
+ <div class="attachment_thumbnail">
+ <a class="lightbox" data-src="{{att.url()}}" href="{{att.url()}}">
+ <img src="{{att.url()}}/thumb" alt="Thumbnail"/>
+ </a>
+ </div>
+ <div class="attachment-name">
+ <i class="fa fa-picture-o" aria-hidden="true"></i>
{% else %}
- <a href="{{att.url()}}">{{att.filename}}</a>
- {% if h.has_access(value, 'moderate')()%}
- <input class="submit delete_attachment file" type="submit" value="X"/>
- {% endif %}
+ <div class="attachment-name">
+ <i class="fa fa-file-o" aria-hidden="true"></i>
{% endif %}
- <input type="hidden" name="delete" value="True">
- {{lib.csrf_token()}}
- </form>
+ <a href="{{att.url()}}">{{att.filename}}</a>
+ </div>
+ <div class="attachment_toolbar">
+ <form method="POST" action="{{att.url()}}">
+ {% if h.has_access(value, 'moderate')()%}
+ <a href="javascript: void(0)" onclick="$(this).closest('form').submit();" title="Remove Attachment"" class="btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
+ <span><i class="fa fa-trash-o" aria-hidden="true"></i></span>
+ </a>
+ {% endif %}
+
+ <a href="http://localhost:8080/p/test/tickets/1/#dd1a" download title="Download File" class="btn ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
+ <span><i class="fa fa-download" aria-hidden="true"></i></span>
+ </a>
+ <input type="hidden" name="delete" value="True">
+ {{lib.csrf_token()}}
+ </form>
+ </div>
</div>
{% endfor %}
</div>
@@ -161,6 +170,11 @@
</li>
</ul>
</div>
+ <!-- lightbox_me div that will dynamically load attachment image -->
+ <div id="lightbox" style="display:none; height: 90%">
+ <img style="width: inherit; height: inherit; display: block; margin-left: auto; margin-right: auto;" src="#">
+ </div>
+
</div>
{% block extra_css %}
@@ -170,3 +184,33 @@
}
</style>
{% endblock %}
+
+{% block extra_js %}
+<script type="text/javascript">
+
+ $(document).ready( function(){
+ //lightbox_me script to create lightbox of attached images
+ $('.lightbox').click(function(e) {
+ var image_source = $(this).data("src");
+ var image = $('#lightbox').find('img:first');
+ image.attr("src", image_source);
+
+ $('#lightbox').lightbox_me({
+ centered: true,
+ onLoad: function() {
+
+ }
+ });
+
+ e.preventDefault();
+ });
+ });
+
+ function deleteAttachment()
+ {
+ document.forms["myform"].submit();
+ }
+
+</script>
+
+{% endblock %}
\ No newline at end of file
