From be1e58013b3248a07c4ac9fe75ed2e5d922106cf Mon Sep 17 00:00:00 2001
From: Matthias Mees <mm@yellowled.de>
Date: Sat, 5 Jan 2013 22:39:44 +0100
Subject: [PATCH] Some layout for resizing images in media db.

---
 include/admin/tpl/images.inc.tpl | 57 ++++++++++++++++++--------------
 templates/2k11/admin/style.css   | 13 +++++++-
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/include/admin/tpl/images.inc.tpl b/include/admin/tpl/images.inc.tpl
index 9fd4d68c..278b89f5 100644
--- a/include/admin/tpl/images.inc.tpl
+++ b/include/admin/tpl/images.inc.tpl
@@ -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}
diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css
index 0a976df0..4f7b5672 100644
--- a/templates/2k11/admin/style.css
+++ b/templates/2k11/admin/style.css
@@ -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 {