Working : images : enhance display

This commit is contained in:
gmorel
2013-09-26 15:26:45 +02:00
parent dcd7d6dd4f
commit 0cdd960cb1
3 changed files with 46 additions and 23 deletions

View File

@@ -74,8 +74,10 @@ $(function($){
e.preventDefault(); e.preventDefault();
var $this = $(this); var $this = $(this);
var $parent = $this.parent(); var $parent = $this.parent();
$parent.find('a').remove(); var $greatParent = $parent.parent();
$parent.append('<div class="loading" ></div>');
$greatParent.append('<div class="loading" ></div>');
$greatParent.find('.btn-group').remove();
var $url = $this.attr("href"); var $url = $this.attr("href");
var errorMessage = $this.attr("data-error-message"); var errorMessage = $this.attr("data-error-message");
$.ajax({ $.ajax({
@@ -89,8 +91,7 @@ $(function($){
} }
} }
}).done(function(data) { }).done(function(data) {
$parent.parents('tr').remove(); $greatParent.remove();
$(".image-manager .message").html( $(".image-manager .message").html(
data data
); );

View File

@@ -288,4 +288,29 @@
line-height: 30px; line-height: 30px;
padding-left: 40px; padding-left: 40px;
width: auto; width: auto;
} }
.existing-image .col-sm-6{
position: relative;
margin-bottom: 30px;
.btn-group{
position: absolute;
bottom: 5px;
right: 20px;
}
.loading{
position: absolute;
bottom: 5px;
right: 20px;
display: block;
line-height: 1;
padding: 0;
margin: 0 auto;
z-index: 2;
width: 30px;
height: 30px;
}
}

View File

@@ -9,25 +9,22 @@ Parameters:
*} *}
{ifloop rel="image"} {ifloop rel="image"}
<table class="table table-striped table-condensed table-left-aligned"> <div class="row">
{loop type="image" name="image" source="{$imageType}" order="manual-reverse" source_id="{$parentId}" width="200" height="100" resize_mode="borders"} {loop type="image" name="image" source="{$imageType}" order="manual-reverse" source_id="{$parentId}" width="200" height="100" resize_mode="borders"}
<tr> <div class="col-sm-6 col-md-3" >
<td> <a href="{url path="/admin/image/type/$imageType/$ID/update"}" alt="{intl l='Update this image'}" class="thumbnail">
<a href="{url path="/admin/image/type/$imageType/$ID/update"}" alt="{intl l='Update this image'}"> <img src="{$IMAGE_URL}" alt="{$TITLE}">
<img src="{$IMAGE_URL}" alt="{$TITLE}" class="img-thumbnail"> </a>
<div class="btn-group" >
<a class="image-update-btn btn btn-default btn-xs" href="{url path="/admin/image/type/$imageType/$ID/update"}" data-error-message="{intl l='Please retry'}">
<span class="glyphicon glyphicon-edit"></span>
</a> </a>
</td> <a class="image-delete-btn btn btn-default btn-xs" href="{url path="/admin/image/type/$imageType/delete/$ID"}" data-error-message="{intl l='Please retry'}">
<td> <span class="glyphicon glyphicon-trash"></span>
<div class="btn-group"> </a>
<a class="image-update-btn btn btn-default btn-xs" href="{url path="/admin/image/type/$imageType/$ID/update"}" data-error-message="{intl l='Please retry'}"> </div>
<span class="glyphicon glyphicon-edit"></span> </div>
</a>
<a class="image-delete-btn btn btn-default btn-xs" href="{url path="/admin/image/type/$imageType/delete/$ID"}" data-error-message="{intl l='Please retry'}">
<span class="glyphicon glyphicon-trash"></span>
</a>
</div>
<td>
</tr>
{/loop} {/loop}
</table> </div>
{/ifloop} {/ifloop}