NIHVIVO-3213: more work on layout, css, markup

This commit is contained in:
manolobevia 2011-11-07 18:00:32 +00:00
parent 1932e6a402
commit 46ee0b3a84
2 changed files with 176 additions and 109 deletions

View file

@ -294,7 +294,7 @@ a.disable-delete {
.photo-profile { .photo-profile {
border: 2px solid #DDE4E3; border: 2px solid #DDE4E3;
} }
.proxyInfoElement { #edit-myProxy .proxyInfoElement {
padding-top: .8em; padding-top: .8em;
border-bottom: 1px dotted #E0DFDF; border-bottom: 1px dotted #E0DFDF;
padding-bottom: 1em; padding-bottom: 1em;
@ -304,6 +304,7 @@ a.disable-delete {
font-size: .8em; font-size: .8em;
color: #7F8993; color: #7F8993;
padding-left: 10px; padding-left: 10px;
height: 20px;
} }
#edit-myProxy p.selected-editors { #edit-myProxy p.selected-editors {
padding-top: 1.2em; padding-top: 1.2em;
@ -318,4 +319,83 @@ a.disable-delete {
} }
#edit-myProxy span.class-label { #edit-myProxy span.class-label {
color: #7F8993; 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;
}

View file

@ -15,7 +15,7 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/sm
<#if message.success?? > <#if message.success?? >
<p>The operation was successful.</p> <p>The operation was successful.</p>
</#if> </#if>
<#if message.failure?? > <#if message.failure?? >
<p> The operation was unsuccessful. Full details can be found in the system log.</p> <p> The operation was unsuccessful. Full details can be found in the system log.</p>
</#if> </#if>
@ -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> <h4>Relate proxy self editors and profiles</h4>
<section id="relate-proxy-profiles"> <section id="relate-proxy-profiles">
<form action="${formUrls.create}" method="POST">
<form action="${formUrls.create}" method="POST">
<fieldset class="relate-proxy"> <fieldset class="relate-proxy">
<legend>Select proxies</legend> <legend>Select proxies</legend>
<div name="proxyProxiesPanel"> <div name="proxyProxiesPanel">
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p> <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'>&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. -->
<div name="proxyData"> <div name="proxyData">
<#-- <#--
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:
-- a link with templatePart="remove" -- a link with templatePart="remove"
-- 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">
<table> <table>
<tr> <tr>
<td> <td>
<img class="photo-profile" width="90" alt="%label%" src="%imageUrl%"> <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> </div>
</div> </div>
</fieldset> </fieldset>
<fieldset class="relate-profile">
<fieldset class="relate-profile">
<legend>Select profiles</legend> <legend>Select profiles</legend>
<div class="edit-myProxy" name="proxyProfilesPanel"> <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>
</div> </div>
</fieldset> </fieldset>
<input class="submit" type="submit" name="createRelationship" value="Save" /> <p><input class="submit" type="submit" name="createRelationship" value="Save" /></p>
</form>
</form>
</section> </section>
<section id="search-proxy" role="region">
<form action="${formUrls.list}" method="POST"> <form action="${formUrls.list}" method="POST">
<div> <h4>Proxy self editors</h4>
<p>Proxy self editors</p> <input type="text" name="searchTerm" role="input" />
<p> <input class="submit" type="submit" name="searchBytProxy" value="Search" role="button" /> |
<input type="text" name="searchTerm" >
<input type="submit" name="searchBytProxy" value="Search"> <#if page.previous??>
</p> <a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}}">Previous</a>
</div> </#if>
${page.current} of ${page.last}
<p> <#if page.next??>
<#if page.previous??> <a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
<a href="${formUrls.list}?pageIndex=${page.previous}&searchTerm=${searchTerm}}">Previous</a> </#if>
</#if> </form>
${page.current} of ${page.last} </section>
<#if page.next??>
<a href="${formUrls.list}?pageIndex=${page.next}&searchTerm=${searchTerm}">Next</a>
</#if>
</p>
<#list relationships as r> <#list relationships as r>
<form action="${formUrls.edit}" method="POST"> <form action="${formUrls.edit}" method="POST">
<table style="width: 100%;"> <table style="width: 100%;">
<tr> <tr>
<td style="border: thin solid black; width: 50%;"> <td style="border: thin solid black; width: 50%;">
<#assign p = r.proxyInfos[0]> <#assign p = r.proxyInfos[0]>
<table><tr> <table><tr>
<td> <td>
<img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}"> <img class="photo-profile" width="90" src="${p.imageUrl}" alt="${p.label}">
</td> </td>
<td class="proxyInfoElement"> <td class="proxyInfoElement">
${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" /> <input type="submit" name="deleteProxy" value="Delete this proxy" />
</td> </td>
<td style="border: thin solid black"> <td style="border: thin solid black">
<div id="edit-myProxy" name="proxyProfilesPanel"> <div id="edit-myProxy" name="proxyProfilesPanel">
<p>Add profile</p> <p>Add profile</p>
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p> <p><input type="text" name="proxySelectorAC" class="acSelector" size="35" value="Select an existing last name"></p>
<p class="search-status"> <p class="search-status">
<span name='proxySelectorSearchStatus' <span name='proxySelectorSearchStatus'
moreCharsText='type more characters' moreCharsText='type more characters'
noMatchText='no match'>&nbsp;</span> noMatchText='no match'>&nbsp;</span>
</p> </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. --> <#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
<div name="proxyData"> <div name="proxyData">
<#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>
<p name="label">${p.label}</p> <p name="label">${p.label}</p>
<p name="classLabel">${p.classLabel}</p> <p name="classLabel">${p.classLabel}</p>
<p name="imageUrl">${p.imageUrl}</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>
</#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 type="submit" name="modifyProfileList" value="Save changes to profiles" />
</tr> </td>
</table> </tr>
</form> </table>
</form>
</#list> </#list>
<script type="text/javascript"> <script type="text/javascript">