From 4f268588f362e5427ad8a77a27481f4ebd59966e Mon Sep 17 00:00:00 2001
From: manolobevia <manolobevia@440791e1-c2bf-4c1e-ad7c-caf3f8b0ebe8>
Date: Fri, 11 Nov 2011 20:53:06 +0000
Subject: [PATCH] NIHVIVO-3299: Refactored markup for manage proxy pages

---
 webapp/web/css/account/account.css            | 162 ++++++++++--------
 .../body/manageproxies/manageProxies-list.ftl |  80 +++++----
 2 files changed, 137 insertions(+), 105 deletions(-)

diff --git a/webapp/web/css/account/account.css b/webapp/web/css/account/account.css
index e2372d99c..f9e4a45df 100644
--- a/webapp/web/css/account/account.css
+++ b/webapp/web/css/account/account.css
@@ -327,9 +327,33 @@ a.disable-delete {
 }
 
 /* MANAGE PROXY ------>  */
+
+section.proxy-profile h4 {
+    padding-left: 20px;
+    padding-top: 20px;
+}
+#add-relation legend{
+    display: none;
+}
+.proxy-profile .acSelector {
+    margin-left: 20px;
+}
+#add-relation label {
+    margin-left: 20px;
+}
+#add-relation input.pos-submit {
+    float: right;
+    margin-right: 1em;
+    margin-bottom: 1em;
+    background-color: #317e95;
+}
+#add-relation input.pos-submit:hover {
+    background-color: #87b4c1;
+}
 .proxy-profile {
     width: 930px;
-    background-color: #eaeae8;
+    /*background-color: #eaeae8;*/
+    background-color: #F7F7F4;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
@@ -346,12 +370,9 @@ a.disable-delete {
     -webkit-border-radius: 0;
     padding-top: 1.3em;
 }
-.proxy-profile legend {
-    display: block;
-    border: 0;
-    padding-left: 20px;
-    color: #064D68;
-}
+/*.list-proxy-profile:nth-child(2n-1) {
+    background-color: #F7F7F4;
+}*/
 .proxy {
     width: 430px;
     float: left;
@@ -365,51 +386,8 @@ a.disable-delete {
     padding-right: 1em;
     margin-bottom: 1em;
 }
-.proxy-profile .submit {
-    clear: both;
-    float: left;
-    margin-left: 1.5em;
-    margin-bottom: 1em;
-}
-.proxy-profile .pos-submit {
-    float: right;
-    margin-right: 1em;
-    margin-bottom: 1em;
-    background-color: #317e95;
-}
-.proxy-profile .acSelector {
-    margin-top: 10px;
-    margin-left: 20px;
-}
-#search-proxy {
-    border-top: 1px solid #E1E5E7;
-    border-bottom: 1px solid #E1E5E7;
-    padding: 10px;
-    padding-top: 20px;
-}
-#search-proxy h4 {
-    margin-bottom: 0;
-}
-/*.proxy-profile .proxyInfoElement {
-    margin-left: 20px;
-}*/
-p.selected-editors {
-    padding-top: 1.2em;
-    border-top: 1px solid #E0DFDF;
-    padding-left: 1.2em;
-}
-a.remove-proxy {
-    font-size: .9em;
-}
-.proxy-info {
-    padding-left: 1em; 
-    vertical-align: middle;
-}
-span.class-label {
-    color: #7F8993;
-}
-
-p.search-status {
+#add-relation p.search-status,
+#list-relation p.search-status{
     margin-top: -10px;
     font-size: .8em;
     color: #7F8993;
@@ -417,29 +395,79 @@ p.search-status {
     height: 20px;
     
 }
-.proxy-item {
-    margin-left: 20px;
-    margin-top: 20px;
+#list-relation label {
+    color: #064D68;
+    padding-left: 20px;
+}
+li.proxyInfoElement {
+    padding-bottom: 1em;
+    clear: both;
+    padding-left: 20px;
+}
+#list-relation li {
+    padding-bottom: 30px;
+}
+p.selected-editors {
+    padding-top: 1.2em;
+    border-top: 1px solid #E0DFDF;
+    padding-left: 1.2em;
+}
+img.photo-proxy {
+    border: 2px solid #DDE4E3;
+    float: left;
 }
-.edit-proxy-profiles {
 
+img.photo-profile {
+    border: 1px solid #DDE4E3;
+    float: left;
 }
-section.list-proxy-profile:nth-child(2n) {
-    background-color: #fff;
+#add-relation p.proxy-info,
+#list-relation p.proxy-info {
+    padding-left: 110px;
+    padding-top: 15px;
 }
-/*section.proxy-profile:nth-child(0) {
-      background-color: #eaeae8 !important;
-}*/
-#search-proxy p {
-    margin-top: .3em;
-    font-size: .8em;
+#add-relation p.proxy-info-profile,
+#list-relation p.proxy-info-profile {
+    padding-left: 75px;
+    padding-top: 5px;
+    margin-bottom: 0;
+}
+span.class-label {
+    color: #7F8993;
+}
+a.remove-proxy {
+    font-size: .9em;
 }
 a.remove-proxyUri {
     font-size: .9em;
 }
 
-li.proxyInfoElement {
-    padding-bottom: 1em;
+a.remove-proxyUri {
+    font-size: .9em;
+}
+h4.profile-editors {
+    margin-left: 10px;
+}
+#search-proxy {
+    border-top: 1px solid #E1E5E7;
+    padding: 10px;
+    padding-top: 20px;
+}
+#search-proxy h4 {
+    margin-bottom: 0;
+}
+
+#search-proxy p {
+    margin-top: .3em;
+    font-size: .8em;
+}
+.proxy-profile .submit {
     clear: both;
-    padding-left: 20px;
+    float: left;
+    margin-left: 1.5em;
+    margin-bottom: 1em;
+}
+.proxy-item {
+    margin-left: 20px;
+    margin-top: 20px;
 }
\ No newline at end of file
diff --git a/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl b/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
index d6f1d0e8e..1aa954d14 100644
--- a/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
+++ b/webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
@@ -21,19 +21,20 @@
     <p></p>
 </section>
 
-<h4 class="grey">Relate profile editors and profiles <img src="${urls.images}/iconInfo.png" alt="info icon" title="The editors you select on the left hand side will have the ability to edit the VIVO profiles you select on the right hand side. You can select multiple editors and multiple profiles, but you must select a minimum of 1 each." /></h4>
-
 <section class="proxy-profile">
+    <h4>Relate profile editors and profiles <img src="${urls.images}/iconInfo.png" alt="info icon" title="The editors you select on the left hand side will have the ability to edit the VIVO profiles you select on the right hand side. You can select multiple editors and multiple profiles, but you must select a minimum of 1 each." /></h4>
+    
     <form id="add-relation" action="${formUrls.create}" method="POST">
         <fieldset class="proxy">
             <legend>Select editors</legend>
-    
+            
             <section name="proxyProxiesPanel" role="section">
-                <input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name" role="input" />
+                <label for="selectProfileEditors">Select editors</label>
+                <input id="selectProfileEditors" 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. -->
-                <ul name="proxyData">
+                <ul name="proxyData" role="navigation">
                 <#-- 
                     Each proxy will be shown using the HTML inside this div.
                     It must contain at least:
@@ -41,15 +42,15 @@
                     -- a hidden input field with templatePart="uriField"  
                 -->
                     <div name="template" style="display: none">
-                        <li>
-                            <img class="photo-profile" width="90" alt="%label%" src="%imageUrl%">
+                        <li role="listitem">
+                            <img class="photo-proxy" width="90" alt="%label%" src="%imageUrl%">
                     
-                            <div class="proxy-info">
+                            <p class="proxy-info">
                                 %label% | <span class="class-label">%classLabel%</span>
                                 <br />
                                 <a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
                                 <input type="hidden" name="proxyUri" value="%uri%" >
-                            </div>
+                            </p>
                         </li>
                     </div>
                 </ul>
@@ -60,11 +61,13 @@
           <legend>Select profiles</legend>  
       
           <section name="proxyProfilesPanel" role="region">
-              <input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name">
+              <label for="selectProfileEditors">Select profiles</label>
+              <input id="selectProfileEditors" 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 thst holds all of the proxy data and the template that shows how to display it. -->
-                <ul name="proxyData">
+                <ul name="proxyData" role="navigation">
                     <#-- 
                         Each proxy will be shown using the HTML inside this element.
                         It must contain at least:
@@ -72,27 +75,26 @@
                         -- a hidden input field with templatePart="uriField"  
                     -->
                     <div name="template" style="display: none">
-                        <li>
-                                    <img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
-                                <div class="proxy-info">
-                                    %label% | <span class="class-label">%classLabel%</span>
-                                    <br />
-                                    <a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
-                                </div>
-                        
-                        <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
-                    </li>
+                        <li role="listitem">
+                            <img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
+                            
+                            <p class="proxy-info-profile">%label% | <span class="class-label">%classLabel%</span>
+                                <br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
+                            </p>
+    
+                            <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" role="input" />
+                        </li>
                     </div>
                 </ul>
             </section>
         </fieldset>
 
-        <p><input class="submit pos-submit" type="submit" name="createRelationship" value="Save"  role="button" /></p>
+        <input class="submit pos-submit" type="submit" name="createRelationship" value="Save"  role="button" />
     </form>
 </section>
 
-<#if page.last != 0>
-<h4>Profile editors</h4>
+
+<h4 class="profile-editors">Profile editors</h4>
 
 <section id="search-proxy" role="region">
     <form action="${formUrls.list}" method="POST">
@@ -101,24 +103,24 @@
             <#if page.previous??>
                | <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}">Previous</a>
             </#if>
-            ${page.current} of ${page.last}
+            
+            <#if page.last != 0>
+                ${page.current} of ${page.last}
+            </#if>
+            
             <#if page.next??>
                 <a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
             </#if>
 
             <#if searchTerm?has_content>
-                <p>
-                    Search results for "<span class="blue">${searchTerm}</span>" | 
-                    <a href="${formUrls.list}">View all profile editors</a>
-                </p>
+                <p>Search results for "<span class="blue">${searchTerm}</span>" | <a href="${formUrls.list}">View all profile editors</a></p>
             </#if>
     </form>
 </section>
-</#if>
 
 <#list relationships as r>
 <section class="proxy-profile list-proxy-profile">
-    <form class="edit-proxy-profiles" action="${formUrls.edit}" method="POST">
+    <form id="list-relation" class="edit-proxy-profiles" action="${formUrls.edit}" method="POST">
         <fieldset class="proxy">
             <#assign p = r.proxyInfos[0]>
             <div class="proxy-item">
@@ -137,13 +139,15 @@
             <legend>Add profile</legend>
             
             <section name="proxyProfilesPanel" role="region">
-                <input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name">
+                <label for="addProfile">Add profile</label>
+                <input id="addProfile" 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>
                 <p name="excludeUri" style="display: none">${r.proxyInfos[0].profileUri}<p>
                 <p class="selected-editors">Selected profiles:</p>
     
                 <#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
-                <ul name="proxyData">
+                <ul name="proxyData" role="navigation">
                     <#list r.profileInfos as p>
                         <div name="data" style="display: none">
                             <p name="uri">${p.uri}</p>
@@ -160,20 +164,20 @@
                         -- a hidden input field with templatePart="uriField"  
                     -->
                     <div name="template" style="display: none">
-                        <li>
+                        <li role="listitem">
                             <img class="photo-profile" width="60" alt="%label%" src="%imageUrl%">
                              
-                            <div class="proxy-info">%label% | <span class="class-label">%classLabel%</span>
+                            <p class="proxy-info-profile">%label% | <span class="class-label">%classLabel%</span>
                                 <br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
-                            </div>
+                            </p>
                         </li>
                         
-                        <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" >
+                        <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" role="input" />
                     </div>
                 </ul>
             </section>
             
-            <input class="submit" type="submit" name="modifyProfileList" value="Save changes to profiles" />
+            <input class="submit" type="submit" name="modifyProfileList" value="Save changes to profiles" role="button" />
         </fieldset> 
     </form>
 </section>