litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-3299: Refactored markup for manage proxy pages

Browse source
This commit is contained in:
manolobevia 2011-11-11 20:53:06 +00:00
parent 2dd79c60c6
commit 4f268588f3
2 changed files with 137 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

162
webapp/web/css/account/account.css
View file

@ -327,9 +327,33 @@ a.disable-delete {
} }
/* MANAGE PROXY ------> */ /* 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 { .proxy-profile {
width: 930px; width: 930px;
background-color: #eaeae8; /*background-color: #eaeae8;*/
background-color: #F7F7F4;
border-radius: 10px; border-radius: 10px;
-moz-border-radius: 10px; -moz-border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
@ -346,12 +370,9 @@ a.disable-delete {
-webkit-border-radius: 0; -webkit-border-radius: 0;
padding-top: 1.3em; padding-top: 1.3em;
} }
.proxy-profile legend { /*.list-proxy-profile:nth-child(2n-1) {
display: block; background-color: #F7F7F4;
border: 0; }*/
padding-left: 20px;
color: #064D68;
}
.proxy { .proxy {
width: 430px; width: 430px;
float: left; float: left;
@ -365,51 +386,8 @@ a.disable-delete {
padding-right: 1em; padding-right: 1em;
margin-bottom: 1em; margin-bottom: 1em;
} }
.proxy-profile .submit { #add-relation p.search-status,
clear: both; #list-relation p.search-status{
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 {
margin-top: -10px; margin-top: -10px;
font-size: .8em; font-size: .8em;
color: #7F8993; color: #7F8993;
@ -417,29 +395,79 @@ p.search-status {
height: 20px; height: 20px;
} }
.proxy-item { #list-relation label {
margin-left: 20px; color: #064D68;
margin-top: 20px; 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) { #add-relation p.proxy-info,
background-color: #fff; #list-relation p.proxy-info {
padding-left: 110px;
padding-top: 15px;
} }
/*section.proxy-profile:nth-child(0) { #add-relation p.proxy-info-profile,
background-color: #eaeae8 !important; #list-relation p.proxy-info-profile {
}*/ padding-left: 75px;
#search-proxy p { padding-top: 5px;
margin-top: .3em; margin-bottom: 0;
font-size: .8em; }
span.class-label {
color: #7F8993;
}
a.remove-proxy {
font-size: .9em;
} }
a.remove-proxyUri { a.remove-proxyUri {
font-size: .9em; font-size: .9em;
} }
li.proxyInfoElement { a.remove-proxyUri {
padding-bottom: 1em; 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; clear: both;
padding-left: 20px; float: left;
margin-left: 1.5em;
margin-bottom: 1em;
}
.proxy-item {
margin-left: 20px;
margin-top: 20px;
} }

80
webapp/web/templates/freemarker/body/manageproxies/manageProxies-list.ftl
View file

@ -21,19 +21,20 @@
<p></p> <p></p>
</section> </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"> <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"> <form id="add-relation" action="${formUrls.create}" method="POST">
<fieldset class="proxy"> <fieldset class="proxy">
<legend>Select editors</legend> <legend>Select editors</legend>
<section name="proxyProxiesPanel" role="section"> <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> <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. --> <#-- 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. Each proxy will be shown using the HTML inside this div.
It must contain at least: It must contain at least:
@ -41,15 +42,15 @@
-- a hidden input field with templatePart="uriField" -- a hidden input field with templatePart="uriField"
--> -->
<div name="template" style="display: none"> <div name="template" style="display: none">
<li> <li role="listitem">
<img class="photo-profile" width="90" alt="%label%" src="%imageUrl%"> <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> %label% | <span class="class-label">%classLabel%</span>
<br /> <br />
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a> <a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<input type="hidden" name="proxyUri" value="%uri%" > <input type="hidden" name="proxyUri" value="%uri%" >
</div> </p>
</li> </li>
</div> </div>
</ul> </ul>
@ -60,11 +61,13 @@
<legend>Select profiles</legend> <legend>Select profiles</legend>
<section name="proxyProfilesPanel" role="region"> <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> <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. --> <#-- 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. Each proxy will be shown using the HTML inside this element.
It must contain at least: It must contain at least:
@ -72,27 +75,26 @@
-- a hidden input field with templatePart="uriField" -- a hidden input field with templatePart="uriField"
--> -->
<div name="template" style="display: none"> <div name="template" style="display: none">
<li> <li role="listitem">
<img class="photo-profile" width="60" alt="%label%" src="%imageUrl%"> <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 /> <br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
<a class='remove-proxy' href="." templatePart="remove">Remove selection</a> </p>
</div>
<input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" role="input" />
<input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" > </li>
</li>
</div> </div>
</ul> </ul>
</section> </section>
</fieldset> </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> </form>
</section> </section>
<#if page.last != 0>
<h4>Profile editors</h4> <h4 class="profile-editors">Profile editors</h4>
<section id="search-proxy" role="region"> <section id="search-proxy" role="region">
<form action="${formUrls.list}" method="POST"> <form action="${formUrls.list}" method="POST">
@ -101,24 +103,24 @@
<#if page.previous??> <#if page.previous??>
| <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}">Previous</a> | <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}">Previous</a>
</#if> </#if>
${page.current} of ${page.last}
<#if page.last != 0>
${page.current} of ${page.last}
</#if>
<#if page.next??> <#if page.next??>
<a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a> <a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
</#if> </#if>
<#if searchTerm?has_content> <#if searchTerm?has_content>
<p> <p>Search results for "<span class="blue">${searchTerm}</span>" | <a href="${formUrls.list}">View all profile editors</a></p>
Search results for "<span class="blue">${searchTerm}</span>" |
<a href="${formUrls.list}">View all profile editors</a>
</p>
</#if> </#if>
</form> </form>
</section> </section>
</#if>
<#list relationships as r> <#list relationships as r>
<section class="proxy-profile list-proxy-profile"> <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"> <fieldset class="proxy">
<#assign p = r.proxyInfos[0]> <#assign p = r.proxyInfos[0]>
<div class="proxy-item"> <div class="proxy-item">
@ -137,13 +139,15 @@
<legend>Add profile</legend> <legend>Add profile</legend>
<section name="proxyProfilesPanel" role="region"> <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 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 name="excludeUri" style="display: none">${r.proxyInfos[0].profileUri}<p>
<p class="selected-editors">Selected profiles:</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. --> <#-- 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> <#list r.profileInfos as p>
<div name="data" style="display: none"> <div name="data" style="display: none">
<p name="uri">${p.uri}</p> <p name="uri">${p.uri}</p>
@ -160,20 +164,20 @@
-- a hidden input field with templatePart="uriField" -- a hidden input field with templatePart="uriField"
--> -->
<div name="template" style="display: none"> <div name="template" style="display: none">
<li> <li role="listitem">
<img class="photo-profile" width="60" alt="%label%" src="%imageUrl%"> <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> <br /><a class='remove-proxy' href="." templatePart="remove">Remove selection</a>
</div> </p>
</li> </li>
<input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" > <input type="hidden" name="profileUri" templatePart="uriField" value="%uri%" role="input" />
</div> </div>
</ul> </ul>
</section> </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> </fieldset>
</form> </form>
</section> </section>