Some layout for resizing images in media db.

This commit is contained in:
Matthias Mees 2013-01-05 22:39:44 +01:00
parent 6578d99845
commit be1e58013b
2 changed files with 44 additions and 26 deletions

View File

@ -267,39 +267,46 @@
//-->
</script>
{if $print_RESIZE_BLAHBLAH}<span class="msg_notice"><span class="icon-info-circle"></span> {$print_RESIZE_BLAHBLAH}</span>{/if}
{if $print_ORIGINAL_SIZE}<span class="msg_notice"><span class="icon-info-circle"></span> {$print_ORIGINAL_SIZE}</span>{/if}
{if $print_RESIZE_BLAHBLAH}<h2>{$print_RESIZE_BLAHBLAH}</h2>{/if}
{if $print_ORIGINAL_SIZE}<span class="block_level standalone">{$print_ORIGINAL_SIZE}</span>{/if}
<h2>{$CONST.HERE_YOU_CAN_ENTER_BLAHBLAH}</h2>
<span class="msg_notice image_resize_hint"><span class="icon-info-circle"></span> {$CONST.HERE_YOU_CAN_ENTER_BLAHBLAH}</span>
<form name="serendipityScaleForm" action="?" method="GET">
{$formtoken}
<input name="serendipity[adminModule]" type="hidden" value="images">
<input name="serendipity[adminAction]" type="hidden" value="scale">
<input name="serendipity[fid]" type="hidden" value="{$get.fid}">
<div class="clearfix">
<form id="serendipityScaleForm" name="serendipityScaleForm" action="?" method="GET">
{$formtoken}
<input name="serendipity[adminModule]" type="hidden" value="images">
<input name="serendipity[adminAction]" type="hidden" value="scale">
<input name="serendipity[fid]" type="hidden" value="{$get.fid}">
<fieldset>
<legend><span>{$CONST.NEWSIZE}</span></legend>
<fieldset>
<legend><span>{$CONST.NEWSIZE}</span></legend>
<div class="form_field">
<label for="resize_width">Width</label> {* i18n *}
<input id="resize_width" name="serendipity[width]" type="text" onchange="rescale('width' , value);" value="{$img_width}">
<div class="form_field">
<label for="resize_width">Width</label> {* i18n *}
<input id="resize_width" name="serendipity[width]" type="text" onchange="rescale('width' , value);" value="{$img_width}">
</div>
<div class="form_field">
<label for="resize_height">Height</label> {* i18n *}
<input id="resize_height" name="serendipity[height]" type="text" onchange="rescale('height', value);" value="{$img_height}">
</div>
</fieldset>
<div class="form_check">
<input id="resize_keepprops" name="auto" type="checkbox" checked="checked">
<label for="resize_keepprops">{$CONST.KEEP_PROPORTIONS}</label>
</div>
<div class="form_field">
<label for="resize_height">Height</label> {* i18n *}
<input id="resize_height" name="serendipity[height]" type="text" onchange="rescale('height', value);" value="{$img_height}">
<div class="form_buttons">
<input name="scale" type="button" value="{$CONST.IMAGE_RESIZE}" onclick="if (confirm('{$CONST.REALLY_SCALE_IMAGE}')) document.serendipityScaleForm.submit();">
</div>
</fieldset>
</form>
<div class="form_check">
<input id="resize_keepprops" name="auto" type="checkbox" checked="checked">
<label for="resize_keepprops">{$CONST.KEEP_PROPORTIONS}</label>
<div id="serendipityScaleImg">
<img src="{$file}" name="serendipityScaleImg" style="width: {$img_width}px; height: {$img_height}px;" alt="">
</div>
<input name="scale" type="button" value="{$CONST.IMAGE_RESIZE}" onclick="if (confirm('{$CONST.REALLY_SCALE_IMAGE}')) document.serendipityScaleForm.submit();">
</form>
<img src="{$file}" name="serendipityScaleImg" style="width: {$img_width}px; height: {$img_height}px;" alt="">
</div>
{/if}
{if $case_default}
{if $showML_def}{$showML_def}{/if}

View File

@ -883,6 +883,7 @@ summary { cursor: pointer; }
}
#template_select article,
#serendipityScaleImg img,
.media_file,
.media_file_preview img { border: 1px solid #ddd; }
@ -907,7 +908,10 @@ summary { cursor: pointer; }
.template_info,
.template_info dl,
fieldset p,
.media_file_meta { margin: 0; }
.media_file_meta,
.image_resize_hint p { margin: 0; }
.image_resize_hint p { display: inline; }
.actions li { margin: 0 .4em 0 0; }
@ -1103,12 +1107,19 @@ fieldset p,
}
#template_select article,
#serendipityScaleForm,
#serendipityScaleImg,
.media_file {
float: left;
margin: 0 2% 1em 0;
width: 48%;
}
#serendipityScaleImg {
overflow: hidden;
margin-top: 2.25em;
}
.media_file header { overflow: hidden; }
#image_directory_edit_form>.clearfix>div {