NIHVIVO-3213: more work on layout, css, markup
This commit is contained in:
manolobevia
parent
1932e6a402
commit
46ee0b3a84
2 changed files with 176 additions and 109 deletions
|
|
@ -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;
|
||||
|
|
@ -319,3 +320,82 @@ a.disable-delete {
|
|||
#edit-myProxy span.class-label {
|
||||
color: #7F8993;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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'> </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'> </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>
|
||||
|
||||
<input class="submit" type="submit" name="createRelationship" value="Save" />
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
</fieldset>
|
||||
|
||||
<p><input class="submit" type="submit" name="createRelationship" value="Save" /></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<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" /> |
|
||||
|
||||
<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>
|
||||
<#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'> </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'> </span>
|
||||
</p>
|
||||
|
||||
<p class="selected-editors">Selected profiles:</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%" >
|
||||
<#-- 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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue