From 46ee0b3a842cab8733a9c6255c663c12c48db49c Mon Sep 17 00:00:00 2001
From: manolobevia <manolobevia@440791e1-c2bf-4c1e-ad7c-caf3f8b0ebe8>
Date: Mon, 7 Nov 2011 18:00:32 +0000
Subject: [PATCH]  NIHVIVO-3213: more work on layout, css, markup

---
 webapp/web/css/account/account.css            |  84 +++++++-
 .../body/manageproxies/manageProxies-list.ftl | 201 ++++++++----------
 2 files changed, 176 insertions(+), 109 deletions(-)

diff --git a/webapp/web/css/account/account.css b/webapp/web/css/account/account.css
index d5543d18e..2036e2b89 100644
--- a/webapp/web/css/account/account.css
+++ b/webapp/web/css/account/account.css
@@ -294,7 +294,7 @@ a.disable-delete {
 .photo-profile {
     border: 2px solid #DDE4E3;
 }
-.proxyInfoElement {
+#edit-myProxy .proxyInfoElement {
     padding-top: .8em;
     border-bottom: 1px dotted #E0DFDF;
     padding-bottom: 1em;
@@ -304,6 +304,7 @@ a.disable-delete {
     font-size: .8em;
     color: #7F8993;
     padding-left: 10px;
+    height: 20px;
 }
 #edit-myProxy p.selected-editors {
     padding-top: 1.2em;
@@ -318,4 +319,83 @@ a.disable-delete {
 }
 #edit-myProxy span.class-label {
     color: #7F8993;
-}
\ No newline at end of file
+}
+
+/* MANAGE PROXY ------>  */
+#relate-proxy-profiles {
+    width: 930px;
+    background-color: #F7F7F4;
+    border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 20px;
+}
+#relate-proxy-profiles legend {
+    display: block;
+    border: 0;
+    padding-left: 20px;
+}
+.relate-proxy {
+    width: 450px;
+    float: left;
+    padding-right: 10px;
+}
+.relate-profile {
+    width: 430px;
+    float: right;
+    border-left: 1px dotted #E0DFDF;
+    padding-left: 10px;
+    
+}
+#relate-proxy-profiles .submit {
+    clear: both;
+    float: right;
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+
+#relate-proxy-profiles .acSelector {
+    margin-top: 10px;
+    margin-left: 20px;
+}
+
+
+#search-proxy {
+    border-top: 1px solid #E1E5E7;
+    border-bottom: 1px solid #E1E5E7;
+    padding: 10px;
+}
+
+#search-proxy h4 {
+    margin-bottom: 0;
+}
+
+
+#relate-proxy-profiles .proxyInfoElement {
+    margin-left: 20px;
+}
+
+p.selected-editors {
+    padding-top: 1.2em;
+    border-top: 1px solid #E0DFDF;
+}
+a.remove-proxy {
+    font-size: .9em;
+}
+.proxy-info {
+    padding-left: 1em; 
+    vertical-align: middle;
+}
+span.class-label {
+    color: #7F8993;
+}
+
+
+
+
+
+
+
+
+
diff --git a/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl b/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
index a48742af8..45b17403c 100644
--- a/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
+++ b/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
@@ -15,7 +15,7 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
         <#if message.success?? > 
             <p>The operation was successful.</p>
         </#if>
-	
+    
         <#if message.failure?? >
             <p> The operation was unsuccessful. Full details can be found in the system log.</p>
         </#if>
@@ -25,25 +25,24 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
 <h4>Relate proxy self editors and profiles</h4>
 
 <section id="relate-proxy-profiles">
-    
-<form action="${formUrls.create}" method="POST">
+    <form action="${formUrls.create}" method="POST">
     <fieldset class="relate-proxy">
         <legend>Select proxies</legend>
         
-    <div name="proxyProxiesPanel">
-        <p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
-        <p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
+        <div name="proxyProxiesPanel">
+            <input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name" role="input" />
+            <p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'>&nbsp;</span></p>
         
-        <#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
-        <div name="proxyData">
+            <#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
+            <div name="proxyData">
             <#-- 
                 Each proxy will be shown using the HTML inside this div.
                 It must contain at least:
                 -- a link with templatePart="remove"
                 -- a hidden input field with templatePart="uriField"  
             -->
-            <div name="template" style="display: none">
-                <table>
+                <div name="template" style="display: none">
+                    <table>
                     <tr>
                         <td>
                             <img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
@@ -60,14 +59,10 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
             </div>
         </div>
     </div>
- </fieldset>
+    </fieldset>
     
-    
-    
-    
-    
-    
-  <fieldset class="relate-profile">
+
+    <fieldset class="relate-profile">
       <legend>Select profiles</legend>  
 
       <div class="edit-myProxy" name="proxyProfilesPanel">
@@ -106,108 +101,100 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
                     </div>
                 </div>
 
- </fieldset>
+            </fieldset>
     
-    <input class="submit" type="submit" name="createRelationship" value="Save" />
-    
-</form>
-
-
-
+            <p><input class="submit" type="submit" name="createRelationship" value="Save" /></p>
+    </form>
 </section>
 
-
-<form action="${formUrls.list}" method="POST">
-<div>
-    <p>Proxy self editors</p>
-    <p>
-        <input type="text" name="searchTerm" >
-        <input type="submit" name="searchBytProxy" value="Search">
-    </p>    
-</div>
-
-<p>
-    <#if page.previous??>
-        <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}}">Previous</a>
-    </#if>
-    ${page.current} of ${page.last}
-    <#if page.next??>
-        <a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
-    </#if>
-</p> 
+<section id="search-proxy" role="region">
+    <form action="${formUrls.list}" method="POST">
+        <h4>Proxy self editors</h4>
+            <input type="text" name="searchTerm" role="input" />
+            <input class="submit" type="submit" name="searchBytProxy" value="Search" role="button" /> | 
+ 
+            <#if page.previous??>
+                <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}}">Previous</a>
+            </#if>
+            ${page.current} of ${page.last}
+            <#if page.next??>
+                <a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
+            </#if>
+    </form>
+</section>
 
 <#list relationships as r>
     <form action="${formUrls.edit}" method="POST">
-    	<table style="width: 100%;">
-    		<tr>
-    		    <td style="border: thin solid black; width: 50%;">
-                    <#assign p = r.proxyInfos[0]>
-                    <table><tr>
-                        <td>
-                            <img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}">
-                        </td>
-                        <td class="proxyInfoElement">
-                            ${p.label}} |
-                            <span class="class-label">${p.classLabel}</span>
-                            <br>
-                            <input type="hidden" value="${p.uri}" name="proxyUri">
-                        </td>
-                    </tr></table>
+    <table style="width: 100%;">
+        <tr>
+            <td style="border: thin solid black; width: 50%;">
+                <#assign p = r.proxyInfos[0]>
+                <table><tr>
+                    <td>
+                        <img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}">
+                    </td>
+                    <td class="proxyInfoElement">
+                        ${p.label}} |
+                        <span class="class-label">${p.classLabel}</span>
+                        <br>
+                        <input type="hidden" value="${p.uri}" name="proxyUri">
+                    </td>
+                </tr></table>
 
-                    <input type="submit" name="deleteProxy" value="Delete this proxy" />
-    		    </td>
+                <input type="submit" name="deleteProxy" value="Delete this proxy" />
+            </td>
 
-    		    <td style="border: thin solid black">
-        		    <div id="edit-myProxy" name="proxyProfilesPanel">
-                        <p>Add profile</p>
-                        <p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
-                        <p class="search-status">
-                            <span name='proxySelectorSearchStatus' 
-                                  moreCharsText='type more characters' 
-                                  noMatchText='no match'>&nbsp;</span>
-                        </p>
+            <td style="border: thin solid black">
+                <div id="edit-myProxy" name="proxyProfilesPanel">
+                    <p>Add profile</p>
+                    <p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
+                    <p class="search-status">
+                        <span name='proxySelectorSearchStatus' 
+                              moreCharsText='type more characters' 
+                              noMatchText='no match'>&nbsp;</span>
+                    </p>
 
-                        <p class="selected-editors">Selected profiles:</p>
-            
-                        <#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
-                        <div name="proxyData">
-                            <#list r.profileInfos as p>
-                                <div name="data" style="display: none">
-                                    <p name="uri">${p.uri}</p>
-                                    <p name="label">${p.label}</p>
-                                    <p name="classLabel">${p.classLabel}</p>
-                                    <p name="imageUrl">${p.imageUrl}</p>
-                                </div>
-                            </#list>
-
-                            <#-- 
-                                Each proxy will be shown using the HTML inside this element.
-                                It must contain at least:
-                                -- a link with templatePart="remove"
-                                -- a hidden input field with templatePart="uriField"  
-                            -->
-                            <div name="template" style="display: none">
-                                <table>
-                                    <tr>
-                                        <td>
-                                            <img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
-                                        </td>
-                                        <td class="proxy-info">
-                                            %label% | <span class="class-label">%classLabel%</span>
-                                            <br />
-                                            <a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
-                                        </td>
-                                    </tr>
-                                </table>
-                                <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
+                    <p class="selected-editors">Selected profiles:</p>
+        
+                    <#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
+                    <div name="proxyData">
+                        <#list r.profileInfos as p>
+                            <div name="data" style="display: none">
+                                <p name="uri">${p.uri}</p>
+                                <p name="label">${p.label}</p>
+                                <p name="classLabel">${p.classLabel}</p>
+                                <p name="imageUrl">${p.imageUrl}</p>
                             </div>
+                        </#list>
+
+                        <#-- 
+                            Each proxy will be shown using the HTML inside this element.
+                            It must contain at least:
+                            -- a link with templatePart="remove"
+                            -- a hidden input field with templatePart="uriField"  
+                        -->
+                        <div name="template" style="display: none">
+                            <table>
+                                <tr>
+                                    <td>
+                                        <img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
+                                    </td>
+                                    <td class="proxy-info">
+                                        %label% | <span class="class-label">%classLabel%</span>
+                                        <br />
+                                        <a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
+                                    </td>
+                                </tr>
+                            </table>
+                            <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
                         </div>
                     </div>
-                    <input type="submit" name="modifyProfileList" value="Save changes to profiles" />
-    		    </td>
-    		</tr>
-        </table>
-    </form>
+                </div>
+                <input type="submit" name="modifyProfileList" value="Save changes to profiles" />
+            </td>
+        </tr>
+    </table>
+</form>
 </#list>
 
 <script type="text/javascript">