From 87980012707ddb265f0315440e874705e285d384 Mon Sep 17 00:00:00 2001
From: Matthias Mees <mm@yellowled.de>
Date: Wed, 5 Dec 2012 11:27:55 +0100
Subject: [PATCH] Proper markup for media upload form; also modified jQuery
 code by @garvinhicking to clone label elements as well.

---
 serendipity_editor.js                 | 14 ++++++---
 templates/2k11/admin/media_upload.tpl | 41 +++++++++++----------------
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/serendipity_editor.js b/serendipity_editor.js
index 5a224c2d..8ca8690f 100644
--- a/serendipity_editor.js
+++ b/serendipity_editor.js
@@ -580,19 +580,25 @@ function addUploadField() {
     fields.attr('id', 'upload_form_' + upload_fieldcount);
     fields.css('display', 'block');
 
-    userfile       = jQuery('.uploadform_userfile',         fields);
-    targetfilename = jQuery('.uploadform_target_filename',  fields);
-    targetdir      = jQuery('.uploadform_target_directory', fields);
-    columncount    = jQuery('.uploadform_column_count',     fields);
+    userfile             = jQuery('.uploadform_userfile',               fields);
+    userfile_label       = jQuery('.uploadform_userfile_label',         fields);
+    targetfilename       = jQuery('.uploadform_target_filename',        fields);
+    targetfilename_label = jQuery('.uploadform_target_filename_label',  fields);
+    targetdir            = jQuery('.uploadform_target_directory',       fields);
+    targetdir_label      = jQuery('.uploadform_target_directory_label', fields);
+    columncount          = jQuery('.uploadform_column_count',           fields);
 
     userfile.attr('id', 'userfile_' + upload_fieldcount);
     userfile.attr('name', 'serendipity[userfile][' + upload_fieldcount + ']');
+    userfile_label.attr('for', 'userfile_' + upload_fieldcount);
 
     targetfilename.attr('id', 'target_filename_' + upload_fieldcount);
     targetfilename.attr('name', 'serendipity[target_filename][' + upload_fieldcount + ']');
+    targetfilename_label.attr('for', 'target_filename_' + upload_fieldcount);
 
     targetdir.attr('id', 'target_directory_' + upload_fieldcount);
     targetdir.attr('name', 'serendipity[target_directory][' + upload_fieldcount + ']');
+    targetdir_label.attr('for', 'target_directory_' + upload_fieldcount);
 
     columncount.attr('id', 'column_count_' + upload_fieldcount);
     columncount.attr('name', 'serendipity[column_count][' + upload_fieldcount + ']');
diff --git a/templates/2k11/admin/media_upload.tpl b/templates/2k11/admin/media_upload.tpl
index de1044c1..c4cc5747 100644
--- a/templates/2k11/admin/media_upload.tpl
+++ b/templates/2k11/admin/media_upload.tpl
@@ -30,39 +30,32 @@
                     <option value="hotlink">{$CONST.FETCH_METHOD_HOTLINK}</option>
                 </select>
             </div>
-            <span class="standout"> {$CONST.WORD_OR} </span>
+            <span class="standalone">{$CONST.WORD_OR}</span>
         </div>
 
-        <!-- WARNING: Do not change spacing or breaks below. If you do, the JavaScript childNodes need to be edited. Newlines count as nodes! -->
         <div id="upload_template">
-        <table style="margin-top: 35px" id="upload_table" class="image_add_local">
-            <tr>
-                <td nowrap='nowrap'>{$CONST.ENTER_MEDIA_UPLOAD}</td>
-                <td><input class="input_file uploadform_userfile" id="userfile_1" name="serendipity[userfile][1]" onchange="checkInputs();" type="file"></td>
-            </tr>
+            <div class="form_field">
+                <label for="userfile_1" class="uploadform_userfile_label">{$CONST.ENTER_MEDIA_UPLOAD}</label>
+                <input id="userfile_1" class="uploadform_userfile" name="serendipity[userfile][1]" type="file" onchange="checkInputs();">
+            </div>
 
-            <tr>
-                <td align="center" colspan="2"><br></td>
-            </tr>
+            <div class="form_field">
+                <label for="target_filename_1" class="uploadform_target_filename_label">{$CONST.SAVE_FILE_AS} <span class="input-desc image-upload">{$CONST.PLAIN_ASCII_NAMES}</span></label>
+                <input id="target_filename_1" class="uploadform_target_filename" name="serendipity[target_filename][1]" type="text" value="">
+            </div>
 
-            <tr>
-                <td>{$CONST.SAVE_FILE_AS}</td>
-                <td><input class="input_textbox uploadform_target_filename" type="text" id="target_filename_1" name="serendipity[target_filename][1]" value="" size="40"><span class="input-desc image-upload">{$CONST.PLAIN_ASCII_NAMES}</span></td>
-            </tr>
-
-            <tr>
-                <td>{$CONST.STORE_IN_DIRECTORY}</td>
-                <td><select class="uploadform_target_directory" id="target_directory_1" name="serendipity[target_directory][1]">
+            <div class="form_select">
+                <label for="target_directory_1"class="uploadform_target_directory_label">{$CONST.STORE_IN_DIRECTORY}</label>
+                <select id="target_directory_1" class="uploadform_target_directory" name="serendipity[target_directory][1]">
                     <option value="">{$CONST.BASE_DIRECTORY}</option>
                     {foreach from=$media.folders item="folder"}
                     <option{if $media.only_path == $folder.relpath} selected{/if} value="{$folder.relpath}">{'&nbsp;'|@str_repeat:($folder.depth*2)} {$folder.name}</option>
                     {/foreach}
-                    </select>
-                </td>
-            </tr>
-       </table>
-       <div id="ccounter"><input class="uploadform_column_count" type="hidden" name="serendipity[column_count][1]" id="column_count_1" value="true" /></div>
-       </div>
+                </select>
+            </div>
+
+            <div id="ccounter"><input id="column_count_1" class="uploadform_column_count" type="hidden" name="serendipity[column_count][1]" value="true"></div>
+        </div>
 
        <div id="debug">
        </div>