Improving the layout of the Files tab

diff --git a/css/admin.css b/css/admin.css
index 81658ca..bc384a8 100644 (file)
--- a/css/admin.css
+++ b/css/admin.css
@@ -3,6 +3,9 @@
     Gaslight Media Members Database Admin Styles
 
 */
+.wp-admin input[type="file"] {
+    white-space: normal;
+}
 input, select, .button {
     max-width: 100%;
 }
@@ -399,6 +402,14 @@ td.glm-nowrap {
     background-color: #eee;
     font-size: .8em;
 }
+.glm-galleryFiles .glm-galleryContainer a {
+    display: block;
+    margin-top: 10px;
+    word-wrap: break-word;
+}
+.glm-galleryFiles .glm-galleryContainer {
+    height: 5em;
+}
 .glm-galleryContainer
 {
     clear: both;
@@ -417,6 +428,12 @@ td.glm-nowrap {
         font-size: 12px;
         padding: 4px 6px;
     }
+    .glm-galleryFiles .glm-galleryContainer {
+        height: 9em;
+    }
+    .glm-galleryFiles .glm-galleryContainer > div {
+        margin-bottom: 7px;
+    }
 }
 .glm-galleryContainerFlexible
 {
@@ -492,6 +509,10 @@ td.glm-nowrap {
     width: 100%;
     resize: none;
 }
+.glm-galleryImageData input[type="checkbox"],
+.glm-galleryImageData input[type="radio"] {
+    margin-top: -1px;
+}
 .glm-ol-selected
 {
     font-weight: bold;

diff --git a/js/imageUpload/imageUpload.css b/js/imageUpload/imageUpload.css
index d82fe33..a512d6b 100644 (file)
--- a/js/imageUpload/imageUpload.css
+++ b/js/imageUpload/imageUpload.css
@@ -192,14 +192,14 @@
     border: 2px solid #000 important;
     background-color: #fff;
 }
-.glm-fileData {
+/*.glm-fileData {
     width: 70%;
     float: right;
 }
 .glm-file {
     width: 30%;
     float: left;
-}
+}*/
 .glm-imageUploadStatus
 {
     position: absolute;

diff --git a/views/admin/member/memberInfo.html b/views/admin/member/memberInfo.html
index 0b867d6..c32c2b4 100644 (file)
--- a/views/admin/member/memberInfo.html
+++ b/views/admin/member/memberInfo.html
@@ -106,7 +106,7 @@
         <a id="glm-member-info-media" data-show-table="glm-table-media" class="glm-member-info-tab nav-tab">Images/Media</a>
 <!--        <a id="glm-member-info-files" data-show-table="glm-table-files" class="glm-member-info-tab nav-tab">Files</a>-->
 <!-- Not using credit cards currently        <a id="glm-member-info-ccards" data-show-table="glm-table-ccards" class="glm-member-info-tab nav-tab">Credit Cards</a>  -->
-<!-- Not using this yet       <a id="glm-member-info-files" data-show-table="glm-table-media" class="glm-member-info-tab nav-tab">Files</a>-->
+        <a id="glm-member-info-files" data-show-table="glm-table-files" class="glm-member-info-tab nav-tab">Files</a>
 <!-- Not using this yet       <a id="glm-member-info-additional" data-show-table="glm-table-media" class="glm-member-info-tab nav-tab">Additional Data Fields</a>-->
         {if $memberUpdated}<span class="glm-notice glm-flash-updated glm-right">{$terms.term_member_cap} Profile Updated</span>{/if}
         {if $memberUpdateError}<span class="glm-error glm-flash-updated glm-right">{$terms.term_member_cap} Profile Update Error</span>{/if}
@@ -143,30 +143,30 @@
 
         <div class="glm-admin-table">
 
-            <div class="glm-row"><h4>{$terms.term_member_cap} Name:</h4><td>{$member.name}</td></div>
-            <div class="glm-row"><h4>{$terms.term_member_cap} Type:</h4><td>{$member.member_type.name}</td></div>
-            <div class="glm-row"><h4>Access:</h4><td>{$member.access.name}</td></div>
-            <div class="glm-row"><h4>Created:</h4><td>{$memberInfo.fieldData.create_time.datetime}</td></div>
-            <div class="glm-row"><h4>Last Updated:</h4><td>{$memberInfo.fieldData.modify_time.datetime}</td></div>
-            <div class="glm-row"><h4>{$terms.term_member_cap} Info Status:</h4><td>{$memberInfo.fieldData.status.name}</option></td></div>
-            <div class="glm-row"><h4>Reference Name:</h4><td>{$memberInfo.fieldData.reference_name}</td></div>
+            <div class="glm-row"><h4>{$terms.term_member_cap} Name:</h4><div>{$member.name}</<div></div>
+            <div class="glm-row"><h4>{$terms.term_member_cap} Type:</h4><div>{$member.member_type.name}</<div></div>
+            <div class="glm-row"><h4>Access:</h4><div>{$member.access.name}</<div></div>
+            <div class="glm-row"><h4>Created:</h4><div>{$memberInfo.fieldData.create_time.datetime}</<div></div>
+            <div class="glm-row"><h4>Last Updated:</h4><div>{$memberInfo.fieldData.modify_time.datetime}</<div></div>
+            <div class="glm-row"><h4>{$terms.term_member_cap} Info Status:</h4><div>{$memberInfo.fieldData.status.name}</option></<div></div>
+            <div class="glm-row"><h4>Reference Name:</h4><div>{$memberInfo.fieldData.reference_name}</<div></div>
             <div class="glm-row">
-                <td>&nbsp;</td>
-                <td>
+                <div>&nbsp;</div>
+                <div>
                     <h3>Descriptions</h3>
-                </td>
+                </div>
             </div>
-            <div class="glm-row"><h4>Description:</h4><td>{$memberInfo.fieldData.descr|escape:quotes}</td></div>
-            <div class="glm-row"><h4>Short Description:</h4><td>{$memberInfo.fieldData.short_descr}</td></div>
+            <div class="glm-row"><h4>Description:</h4><div>{$memberInfo.fieldData.descr|escape:quotes}</div></div>
+            <div class="glm-row"><h4>Short Description:</h4><div>{$memberInfo.fieldData.short_descr}</div></div>
             <div class="glm-row">
-                <td>&nbsp;</td>
-                <td>
+                <div>&nbsp;</div>
+                <div>
                     <h3>Other Information</h3>
-                </td>
+                </div>
             </div>
             <div class="glm-row">
                 <h4>Amenities</h4>
-                <td class="glm-item-container">
+                <div class="glm-item-container">
                     <!-- Amenity Selection -->
                 {if isset($memberInfo.fieldData.amenities) && $memberInfo.fieldData.amenities}
                    {foreach from=$memberInfo.fieldData.amenities item=c}
@@ -176,12 +176,12 @@
                     </div>
                     {/foreach}
                 {/if}
-                </td>
+                </div>
             </div>
-            <div class="glm-row"><h4>Notes:</h4><td>{$memberInfo.fieldData.notes}</td></div>
+            <div class="glm-row"><h4>Notes:</h4><div>{$memberInfo.fieldData.notes}</div></div>
             <div class="glm-row">
                 <h4>Image Gallery</h4>
-                <td class="glm-item-container glm-imageGalleryContainer">
+                <div class="glm-item-container glm-imageGalleryContainer">
                     <ul class="glm-galleryImages">
                     {if $haveImageGallery}
                         {foreach $imageGallery as $i}
@@ -191,11 +191,11 @@
                                     <div class="glm-statusTable">
                                         <div class="glm-row">
                                             <h4>Caption:</h4>
-                                            <td><input id="galleryImage_caption_{$i.id}" type="text" name="galleryImage_caption[{$i.id}]" value="{$i.caption}" class="glm-form-text-input-medium"></td>
-                                       </div>
+                                            <div><input id="galleryImage_caption_{$i.id}" type="text" name="galleryImage_caption[{$i.id}]" value="{$i.caption}" class="glm-form-text-input-medium"></div>
+                                        </div>
                                         <div class="glm-row">
                                             <h4>Description:</h4>
-                                            <td><textarea name="galleryImage_descr[{$i.id}]">{$i.descr}</textarea></td>
+                                            <div><textarea name="galleryImage_descr[{$i.id}]">{$i.descr}</textarea></div>
                                         </div>
                                     </div>
                                 </div>
@@ -207,8 +207,8 @@
                             </li>
                         {/foreach}
                     {/if}
-                    </div>
-                </td>
+                    </ul>
+                </div>
             </div>
         </div>
 {/if} <!-- glm_members_permit_admin_member_info_edit -->

diff --git a/views/admin/member/memberInfo/editCategory.html b/views/admin/member/memberInfo/editCategory.html
index 259bd3e..8efbadf 100644 (file)
--- a/views/admin/member/memberInfo/editCategory.html
+++ b/views/admin/member/memberInfo/editCategory.html
@@ -71,7 +71,7 @@
                         {/foreach}
                     {/if}                    
                     </div>
-                    <div class="glm-row">
+<!--                    <div class="glm-row">
                         <select id="filterCategories" name="filterCategories[]" multiple="multiple" size="1">
                             {foreach from=$availableCategories2 item=v}
                                 <option value="{$v.id}" data-parent="{$v.parent}"{if $v.selected} selected{/if}>
@@ -79,7 +79,7 @@
                                 </option>
                             {/foreach}
                         </select>
-                    </div>
+                    </div>-->
                 </div>
             </div>
             <div class="glm-row glm-admin-amenities-container">
@@ -113,11 +113,11 @@
             </div>
         </div>
 <script type="text/javascript">
-        jQuery(document).ready(function($) {
-            
-             // Expand multi-select on hover
-             $('#filterCategories').multiselect();
-             $('#exportFilterCategories').multiselect();
+    jQuery(document).ready(function($) {
+
+         // Expand multi-select on hover
+         $('#filterCategories').multiselect();
+         $('#exportFilterCategories').multiselect();
 
     });
-    </script>
+</script>

diff --git a/views/admin/member/memberInfo/editFiles.html b/views/admin/member/memberInfo/editFiles.html
index 059200f..c2cfb4c 100644 (file)
--- a/views/admin/member/memberInfo/editFiles.html
+++ b/views/admin/member/memberInfo/editFiles.html
@@ -1,111 +1,111 @@
-<table id="glm-table-files" class="glm-admin-table glm-hidden glm-member-info-table">
-    <tr>
-        <th>Files</th>
-        <td class="glm-item-container glm-filesContainer">
-            {if $memberInfoID}
-            <input type="hidden" id="filePositionOrder" name="filePositionOrder"
-                                                           value="{if $haveFiles}{foreach $files as $i name=ig}{if $i.file_name}{$i.id}{if not $smarty.foreach.ig.last},{/if}{/if}{/foreach}{/if}" />
-            <div class="glm-fileDropContainer">
-                <!-- All fields with class "glm-fileDrop" are automatically processed by imageUpload.js -->
-                <div class="glm-fileDrop glm-fileItemHidden"
-                     data-refType="{$ref_type_numb.MemberInfo}"
-                     data-recordID="{$memberInfo.fieldData.id}"
-                     data-maxFileSizeKB="2500"
-                     data-allowedTypes="application/pdf,application/msword,image/jpeg,image/png,image/gif,image/x-ms-bmp"
-                     >
-                     <!-- The contents of this div are read by imageUpload.js to use for display of upload progress. -->
-                    <div class="glm-fileUploadStatusTemplate glm-fileItemHidden">
+<div id="glm-table-files" class="glm-admin-table glm-admin-table-outer glm-hidden glm-member-info-table">
+    <h2>Files</h2>
+    
+    <div class="glm-admin-table glm-admin-table-inner-wrapper glm-small-8">
+        <div class="glm-row glm-admin-table glm-admin-table-inner">
+            <div class="glm-item-container glm-filesContainer">
+                {if $memberInfoID}
+                <input type="hidden" id="filePositionOrder" name="filePositionOrder"
+                                                               value="{if $haveFiles}{foreach $files as $i name=ig}{if $i.file_name}{$i.id}{if not $smarty.foreach.ig.last},{/if}{/if}{/foreach}{/if}" />
+                <div class="glm-fileDropContainer">
+                    <!-- All fields with class "glm-fileDrop" are automatically processed by imageUpload.js -->
+                    <div class="glm-fileDrop glm-fileItemHidden"
+                         data-refType="{$ref_type_numb.MemberInfo}"
+                         data-recordID="{$memberInfo.fieldData.id}"
+                         data-maxFileSizeKB="2500"
+                         data-allowedTypes="application/pdf,application/msword,image/jpeg,image/png,image/gif,image/x-ms-bmp"
+                         >
+                         <!-- The contents of this div are read by imageUpload.js to use for display of upload progress. -->
+                        <div class="glm-fileUploadStatusTemplate glm-fileItemHidden">
 
-                        <!-- Start of upload status pop-up template - Parameters are of the form "[name]" -->
-                        <b><u>Uploading File { thisFile } of { numbFiles }</u></b>
-                        <table class="glm-statusTable">
-                            <tr>
-                                <td class="glm-statusFileTD" rowspan="5">
-                                    <div class="glm-statusFileContainer">
+                            <!-- Start of upload status pop-up template - Parameters are of the form "[name]" -->
+                            <b><u>Uploading File { thisFile } of { numbFiles }</u></b>
+                            <table class="glm-statusTable">
+                                <div class="glm-row">
+                                    <div class="glm-statusFileTD" rowspan="5">
+                                        <div class="glm-statusFileContainer">
+                                        </div>
                                     </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><div style="float: right; margin: .2em .2em 0 0;" id="fileUploadCancel" class="button button-primary glm-right">Cancel Upload</div></td>
-                                <td class="glm-statusPrompt">Name: </td><td class="glm-statusValue">{ fileName }</td>
-                            </tr>
-                            <tr><td class="glm-statusPrompt">Type: </td><td class="glm-statusValue">{ fileType }</td></tr>
-                            <tr><td class="glm-statusPrompt">Size: </td><td class="glm-statusValue">{ fileSize }</td></tr>
-                            <tr><td class="glm-statusPrompt">Progress: </td><td class="glm-statusValue"><div class="glm-progressBarContainer"><div class="glm-progressBar"></div></div></td></tr>
-                        </table>
-                        <!-- End of template -->
+                                </div>
+                                <div class="glm-row">
+                                    <div><div style="float: right; margin: .2em .2em 0 0;" id="fileUploadCancel" class="button button-primary glm-right">Cancel Upload</div></div>
+                                    <div class="glm-statusPrompt">Name: </div><div class="glm-statusValue">{ fileName }</div>
+                                </div>
+                                <div class="glm-row"><div class="glm-statusPrompt">Type: </div><div class="glm-statusValue">{ fileType }</div></div>
+                                <div class="glm-row"><div class="glm-statusPrompt">Size: </div><div class="glm-statusValue">{ fileSize }</div></div>
+                                <div class="glm-row"><div class="glm-statusPrompt">Progress: </div><div class="glm-statusValue"><div class="glm-progressBarContainer"><div class="glm-progressBar"></div></div></div></div>
+                            </table>
+                            <!-- End of template -->
 
-                    </div>
-                    <!-- The contents of this div are read by imageUpload.js to use as a template for inserting a new file into the gallery area -->
-                    <div class="glm-fileDataTemplate glm-fileItemHidden">
+                        </div>
+                        <!-- The contents of this div are read by imageUpload.js to use as a template for inserting a new file into the gallery area -->
+                        <div class="glm-fileDataTemplate glm-fileItemHidden">
 
-                        <!--
-                            Start of new files template.
-                            Parameters are of the form "{ name }" where the spaces are required to avoid Smarty interpreting the parameters.
-                            Note that these input fields are disabled to avoid the template fields being submitted. The imageUpload.js
-                            code enables the fields when it replicates the template for a new files.
-                        -->
-                        <li id="{ id }" class="glm-galleryContainer">
-                            <div class="glm-fileData">
-                                <table class="glm-statusTable">
-                                    <tr>
-                                        <th>File Name:</th>
-                                        <td><input id="file_caption_{ id }" type="text" name="file_caption[{ id }]" value="" class="glm-form-text-input-small" disabled></td>
-                                        <td rowspan="2">
-                                            <table>
-                                                <tr><th>Delete:</th><td><input type="checkbox" name="file_delete[{ id }]" disabled></td></tr>
-                                                <tr><th colspan="2" class="glm-notice" style="font-size: 1.2em;">New Upload</th></tr>
-                                            </table>
-                                        </td>
-                                    </tr>
-                                </table>
+                            <!--
+                                Start of new files template.
+                                Parameters are of the form "{ name }" where the spaces are required to avoid Smarty interpreting the parameters.
+                                Note that these input fields are disabled to avoid the template fields being submitted. The imageUpload.js
+                                code enables the fields when it replicates the template for a new files.
+                            -->
+                            <li id="{ id }" class="glm-galleryContainer">
+                                <div class="glm-file glm-small-12 glm-large-6 glm-left">
+                                    <a target="_blank" href="{$glmPluginMediaUrl}/files/{ filename }">{ file_name }</a>
+                                </div>
+                                <div class="glm-fileData glm-small-12 glm-large-4 glm-right">
+                                    <div class="glm-statusTable">
+                                        <h4>File Name:</h4>
+                                        <div><input id="file_caption_{ id }" type="text" name="file_caption[{ id }]" value="" class="glm-form-text-input-small" disabled></div>
+                                    </div>
+                                </div>
+                                <div class="glm-fileDeleteButton glm-small-12 glm-large-2 glm-right">
+                                    <div>
+                                        <div><h4>Delete:</h4><div><input type="checkbox" name="file_delete[{ id }]" disabled></div></div>
+                                        <div><h4 class="glm-notice" style="font-size: 1.2em;">New Upload</h4></div>
+                                    </div>
+                                    <input type="hidden" name="file_position[{$i.id}]" value="{$i.position}">
+                                </div>
+                            </li>
+                            <!-- End of template -->
+
+                        </div>
+                    </div> <!-- Overlay of parent for drag/drop detection -->
+                    <div class="glm-fileUploadStatus glm-fileItemHidden"></div> <!-- Overlay for Upload Status Bars -->
+                    <div class="glm-fileDropText glm-fileItemHidden">Drag and drop new files here</div>
+                    <div class="glm-noFileDropText glm-fileItemHidden">HTML5 file drag-and-drop not supported by your browser.<br>Use "Browse" button above to upload an file.</div>
+                </div>
+                <ul class="glm-galleryFiles">
+                    <!-- Note that id in li is needed for sorting -->
+                    {if $haveFiles}
+                    {foreach $files as $i}
+                    {if $i.file_name}
+                    <li id="{$i.id}" class="glm-galleryContainer">
+                        <div class="glm-file glm-small-12 glm-large-6 glm-left" data-id="{$i.id}">
+                            <a target="_blank" href="{$glmPluginMediaUrl}/files/{$i.file_name}">{$i.name}</a>
+                        </div>
+                        <div class="glm-fileData glm-small-12 glm-large-4 glm-left">
+                            <div class="glm-statusTable">
+                                <h4>File Name:</h4>
+                                <div><input id="file_caption_{$i.id}" type="text" name="file_caption[{$i.id}]" value="{$i.caption}" class="glm-form-text-input-small"></div>
                             </div>
-                            <div class="glm-file">
-                                <a target="_blank" href="{$glmPluginMediaUrl}/files/{ filename }">{ file_name }</a>
+                        </div>
+                        <div class="glm-fileDeleteButton glm-small-12 glm-large-2 glm-right">
+                            <div>
+                                <div><h4>Delete:</h4><div><input type="checkbox" name="file_delete[{$i.id}]"></div></div>
                             </div>
-                        </li>
-                        <!-- End of template -->
+                            <input type="hidden" name="file_position[{$i.id}]" value="{$i.position}">
+                        </div>
+                        {/if}
+                    </li>
 
-                    </div>
-                </div> <!-- Overlay of parent for drag/drop detection -->
-                <div class="glm-fileUploadStatus glm-fileItemHidden"></div> <!-- Overlay for Upload Status Bars -->
-                <div class="glm-fileDropText glm-fileItemHidden">Drag and drop new files here</div>
-                <div class="glm-noFileDropText glm-fileItemHidden">HTML5 file drag-and-drop not supported by your browser.<br>Use "Browse" button above to upload an file.</div>
-            </div>
-            <ul class="glm-galleryFiles">
-                <!-- Note that id in li is needed for sorting -->
-                {if $haveFiles}
-                {foreach $files as $i}
-                {if $i.file_name}
-                <li id="{$i.id}" class="glm-galleryContainer">
-                    <div class="glm-fileData">
-                        <table class="glm-statusTable">
-                            <tr>
-                                <th>File Name:</th>
-                                <td><input id="file_caption_{$i.id}" type="text" name="file_caption[{$i.id}]" value="{$i.caption}" class="glm-form-text-input-small"></td>
-                                <td rowspan="2">
-                                    <table>
-                                        <tr><th>Delete:</th><td><input type="checkbox" name="file_delete[{$i.id}]"></td></tr>
-                                    </table>
-                                    <input type="hidden" name="file_position[{$i.id}]" value="{$i.position}">
-                                </td>
-                            </tr>
-                        </table>
-                    </div>
-                    <div class="glm-file" data-id="{$i.id}">
-                        <a target="_blank" href="{$glmPluginMediaUrl}/files/{$i.file_name}">{$i.name}</a>
-                    </div>
+                    {/foreach}
                     {/if}
-                </li>
-
-                {/foreach}
+                </ul>
+                {else}
+                <b>Note:</b> Files may only be added to {$terms.term_member} profile records that have been created.
+                You are editing information to create a new record.
+                <br>After you click "Add new {$terms.term_member}" below, you may come back here to add files.
                 {/if}
-            </ul>
-            {else}
-            <b>Note:</b> Files may only be added to {$terms.term_member} profile records that have been created.
-            You are editing information to create a new record.
-            <br>After you click "Add new {$terms.term_member}" below, you may come back here to add files.
-            {/if}
-        </td>
-    </tr>
-</table>
+            </div>
+        </div>
+    </div>
+</div>