NIHVIVO-3299: Refactored markup for manage proxy pages
This commit is contained in:
manolobevia
parent
2dd79c60c6
commit
4f268588f3
2 changed files with 137 additions and 105 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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'> </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'> </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'> </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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue