NIHVIVO-3213: and more work on layout, css, markup
This commit is contained in:
manolobevia
parent
4f177c31c9
commit
5e9b0de745
2 changed files with 160 additions and 118 deletions
|
|
@ -320,42 +320,69 @@ a.disable-delete {
|
||||||
#edit-myProxy span.class-label {
|
#edit-myProxy span.class-label {
|
||||||
color: #7F8993;
|
color: #7F8993;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MANAGE PROXY ------> */
|
/* MANAGE PROXY ------> */
|
||||||
#relate-proxy-profiles {
|
/* MANAGE PROXY ------> */
|
||||||
|
/* MANAGE PROXY ------> */
|
||||||
|
/* MANAGE PROXY ------> */
|
||||||
|
/* MANAGE PROXY ------> */
|
||||||
|
|
||||||
|
|
||||||
|
.proxy-profile {
|
||||||
width: 930px;
|
width: 930px;
|
||||||
background-color: #F7F7F4;
|
background-color: #e2e2dd;
|
||||||
border-radius: 10px;
|
/*border-radius: 10px;
|
||||||
-moz-border-radius: 10px;
|
-moz-border-radius: 10px;
|
||||||
-webkit-border-radius: 10px;
|
-webkit-border-radius: 10px;*/
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
}
|
}
|
||||||
#relate-proxy-profiles legend {
|
|
||||||
|
.bg-proxy-profile {
|
||||||
|
background-color: #F7F7F4;
|
||||||
|
border-bottom: 1px solid #e2e2dd;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.proxy-profile legend {
|
||||||
display: block;
|
display: block;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
.relate-proxy {
|
|
||||||
width: 450px;
|
.proxy-profile legend {
|
||||||
|
padding-top: 1em;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proxy {
|
||||||
|
width: 430px;
|
||||||
float: left;
|
float: left;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
.relate-profile {
|
.profile {
|
||||||
width: 430px;
|
width: 440px;
|
||||||
float: right;
|
float: right;
|
||||||
border-left: 1px dotted #E0DFDF;
|
border-left: 1px dotted #064D68;
|
||||||
padding-left: 10px;
|
padding-left: 30px;
|
||||||
|
padding-right: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
#relate-proxy-profiles .submit {
|
.proxy-profile .submit {
|
||||||
clear: both;
|
clear: both;
|
||||||
|
float: left;
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
.proxy-profile .pos-submit {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#relate-proxy-profiles .acSelector {
|
|
||||||
|
|
||||||
|
.proxy-profile .acSelector {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -371,14 +398,13 @@ a.disable-delete {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.proxy-profile .proxyInfoElement {
|
||||||
#relate-proxy-profiles .proxyInfoElement {
|
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.selected-editors {
|
p.selected-editors {
|
||||||
padding-top: 1.2em;
|
padding-top: 1.2em;
|
||||||
border-top: 1px solid #E0DFDF;
|
border-top: 1px solid #E0DFDF;
|
||||||
|
padding-left: 1.2em;
|
||||||
}
|
}
|
||||||
a.remove-proxy {
|
a.remove-proxy {
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
|
|
@ -391,6 +417,19 @@ span.class-label {
|
||||||
color: #7F8993;
|
color: #7F8993;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p.search-status {
|
||||||
|
margin-top: -10px;
|
||||||
|
font-size: .8em;
|
||||||
|
color: #7F8993;
|
||||||
|
padding-left: 25px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.proxy-item {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,9 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
|
||||||
|
|
||||||
<h4>Relate proxy self editors and profiles</h4>
|
<h4>Relate proxy self editors and profiles</h4>
|
||||||
|
|
||||||
<section id="relate-proxy-profiles">
|
<section class="proxy-profile">
|
||||||
<form action="${formUrls.create}" method="POST">
|
<form action="${formUrls.create}" method="POST">
|
||||||
<fieldset class="relate-proxy">
|
<fieldset class="proxy">
|
||||||
<legend>Select proxies</legend>
|
<legend>Select proxies</legend>
|
||||||
|
|
||||||
<div name="proxyProxiesPanel">
|
<div name="proxyProxiesPanel">
|
||||||
|
|
@ -62,48 +62,42 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
|
|
||||||
<fieldset class="relate-profile">
|
<fieldset class="profile">
|
||||||
<legend>Select profiles</legend>
|
<legend>Select profiles</legend>
|
||||||
|
|
||||||
|
<div name="proxyProfilesPanel">
|
||||||
|
<input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name">
|
||||||
|
<p class="search-status"><span name='proxySelectorSearchStatus' moreCharsText='type more characters' noMatchText='no match'> </span></p>
|
||||||
|
|
||||||
<div class="edit-myProxy" name="proxyProfilesPanel">
|
<#-- Magic div thst 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 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
|
</fieldset>
|
||||||
<p class="search-status">
|
|
||||||
<span name='proxySelectorSearchStatus'
|
|
||||||
moreCharsText='type more characters'
|
|
||||||
noMatchText='no match'> </span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
<p><input class="submit pos-submit" type="submit" name="createRelationship" value="Save" /></p>
|
||||||
<#-- Magic div thst 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 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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<p><input class="submit" type="submit" name="createRelationship" value="Save" /></p>
|
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -114,7 +108,7 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
|
||||||
<input class="submit" type="submit" name="searchBytProxy" value="Search" role="button" /> |
|
<input class="submit" type="submit" name="searchBytProxy" value="Search" role="button" /> |
|
||||||
|
|
||||||
<#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}
|
${page.current} of ${page.last}
|
||||||
<#if page.next??>
|
<#if page.next??>
|
||||||
|
|
@ -123,80 +117,89 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<#-- --------------------------------->
|
||||||
|
|
||||||
|
|
||||||
<#list relationships as r>
|
<#list relationships as r>
|
||||||
|
<section class="proxy-profile bg-proxy-profile">
|
||||||
<form action="${formUrls.edit}" method="POST">
|
<form action="${formUrls.edit}" method="POST">
|
||||||
<table style="width: 100%;">
|
<fieldset class="proxy">
|
||||||
<tr>
|
<#assign p = r.proxyInfos[0]>
|
||||||
<td style="border: thin solid black; width: 50%;">
|
<table class="proxy-item">
|
||||||
<#assign p = r.proxyInfos[0]>
|
<tr>
|
||||||
<table><tr>
|
|
||||||
<td>
|
<td>
|
||||||
<img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}">
|
<img class="photo-profile" width="120" src="${p.imageUrl}" alt="${p.label}">
|
||||||
</td>
|
</td>
|
||||||
<td class="proxyInfoElement">
|
<td class="proxyInfoElement proxy-info">
|
||||||
${p.label}} |
|
${p.label} | <span class="class-label">${p.classLabel}</span>
|
||||||
<span class="class-label">${p.classLabel}</span>
|
|
||||||
<br>
|
<br>
|
||||||
<input type="hidden" value="${p.uri}" name="proxyUri">
|
<input type="hidden" value="${p.uri}" name="proxyUri">
|
||||||
</td>
|
</td>
|
||||||
</tr></table>
|
</tr>
|
||||||
|
</table>
|
||||||
<input type="submit" name="deleteProxy" value="Delete this proxy" />
|
<#--><a href="${formUrls.edit}?deleteProxy=Delete%20proxy">Delete proxy</a>-->
|
||||||
</td>
|
<input class="submit" type="submit" name="deleteProxy" value="Delete proxy" />
|
||||||
|
</fieldset>
|
||||||
<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>
|
|
||||||
|
|
||||||
<#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
|
<fieldset class="profile">
|
||||||
<div name="proxyData">
|
<legend>Add profile</legend>
|
||||||
<#list r.profileInfos as p>
|
|
||||||
<div name="data" style="display: none">
|
<div name="proxyProfilesPanel">
|
||||||
<p name="uri">${p.uri}</p>
|
<p></p>
|
||||||
<p name="label">${p.label}</p>
|
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
|
||||||
<p name="classLabel">${p.classLabel}</p>
|
<p class="search-status">
|
||||||
<p name="imageUrl">${p.imageUrl}</p>
|
<span name='proxySelectorSearchStatus'
|
||||||
</div>
|
moreCharsText='type more characters'
|
||||||
</#list>
|
noMatchText='no match'> </span>
|
||||||
|
</p>
|
||||||
|
|
||||||
<#--
|
<p class="selected-editors">Selected profiles:</p>
|
||||||
Each proxy will be shown using the HTML inside this element.
|
|
||||||
It must contain at least:
|
<#-- Magic div that holds all of the proxy data and the template that shows how to display it. -->
|
||||||
-- a link with templatePart="remove"
|
<div name="proxyData">
|
||||||
-- a hidden input field with templatePart="uriField"
|
<#list r.profileInfos as p>
|
||||||
-->
|
<div name="data" style="display: none">
|
||||||
<div name="template" style="display: none">
|
<p name="uri">${p.uri}</p>
|
||||||
<table>
|
<p name="label">${p.label}</p>
|
||||||
<tr>
|
<p name="classLabel">${p.classLabel}</p>
|
||||||
<td>
|
<p name="imageUrl">${p.imageUrl}</p>
|
||||||
<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>
|
||||||
|
</#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>
|
||||||
</div>
|
</div>
|
||||||
<input type="submit" name="modifyProfileList" value="Save changes to profiles" />
|
</div>
|
||||||
</td>
|
<input class="submit" type="submit" name="modifyProfileList" value="Save changes to profiles" />
|
||||||
</tr>
|
</fieldset>
|
||||||
</table>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
</section>
|
||||||
</#list>
|
</#list>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var proxyContextInfo = {
|
var proxyContextInfo = {
|
||||||
baseUrl: '${urls.base}',
|
baseUrl: '${urls.base}',
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue