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

View File

@@ -288,4 +288,29 @@
line-height: 30px;
padding-left: 40px;
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"}
<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"}
<tr>
<td>
<a href="{url path="/admin/image/type/$imageType/$ID/update"}" alt="{intl l='Update this image'}">
<img src="{$IMAGE_URL}" alt="{$TITLE}" class="img-thumbnail">
<div class="col-sm-6 col-md-3" >
<a href="{url path="/admin/image/type/$imageType/$ID/update"}" alt="{intl l='Update this image'}" class="thumbnail">
<img src="{$IMAGE_URL}" alt="{$TITLE}">
</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>
</td>
<td>
<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 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>
<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>
</div>
{/loop}
</table>
</div>
{/ifloop}