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

NIHVIVO-641: Added accessibility, organized and cleaned up individual.css, Also, I have been themming individual display and wiring freemarker data

Browse source
This commit is contained in:
mb863 2010-12-15 19:25:24 +00:00
parent 833b58cd19
commit b636bf868c
6 changed files with 363 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

42
webapp/web/templates/freemarker/body/individual/individual--foaf-person.ftl
View file

@ -1,7 +1,7 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<section id="individual-intro-person" class="vcard">
<div id="individual-intro-left-content"> <img class="individual-photo2" src="${urls.images}/individual/individual--foaf-person.png" /><!-- mb863 get rid off div-->
<section id="left-side"> <img class="individual-photo2" src="${urls.images}/individual/individual--foaf-person.png" /><!-- mb863 get rid off div-->
<nav>
<ul id ="individual-tools-people">
<li><a class="picto-font picto-uri" href="#">j</a></li>
@ -21,9 +21,9 @@
<li><a href="#">&lt;core:URLLink&gt;</a></li>
</ul>
</nav>
</div>
</section>
<div id="individual-intro-right-content"><!-- mb863 get rid off div-->
<section id="individual-info">
<header>
<h1 class="fn">Hayworth, Rita<span class="preferred-title">Actress, dancer</span></h1>
@ -37,9 +37,9 @@
<p class="individual-overview">Born Margarita Carmen Cansino in Brooklyn, New York City, she was the daughter of flamenco dancer Eduardo Cansino, Sr., who was himself a Sephardic Jewish Spaniard from Castilleja de la Cuesta (Seville), and Ziegfeld girl Volga Hayworth who was of Irish and English descent. She was raised as a Roman Catholic. Her father wanted her to become a dancer while her mother hoped she would become an actress. Her grandfather, Antonio Cansino [+]</p>
<h2>Roles</h2>
<h2>Research Areas</h2>
<ul id ="individual-roles">
<ul id ="individual-areas">
<li><a href="#">Researcher (5)</a></li>
<li><a href="#">Principal Investigator (3)</a></li>
<li><a href="#">Teacher (2)</a></li>
@ -91,27 +91,27 @@
<section class="property-groups">
<h2><a name="affiliations"></a>Affiliation</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">In ante neque, adipiscing ut aliquet in, dictum eu est. Suspendisse lobortis nulla at ligula dictum et tincidunt nunc accumsan. Integer molestie faucibus lacinia. Integer lacinia, nisl a lobortis vehicula, nisl turpis molestie tortor, nec commodo augue erat ac enim. Aenean ac mauris risus. Donec vehicula eleifend purus ac porta. Fusce quis massa eu urna dignissim consequat rutrum quis libero. Donec pellentesque orci ac massa ornare facilisis. Aenean fringilla sem at enim tristique at ultrices lorem dapibus. Nulla ultricies laoreet sem ut tincidunt. Donec sit amet eros at lorem suscipit ultricies. Suspendisse nunc sem, vestibulum ac gravida a, sodales non purus. Curabitur sodales ultricies lectus et auctor. In in mi vel eros tempor hendrerit volutpat eu libero. Curabitur aliquam adipiscing bibendum. Suspendisse vel nibh sit amet tortor gravida viverra a sed neque. Curabitur bibendum turpis vel dui gravida sed rhoncus magna euismod. Etiam euismod, dui non hendrerit varius, elit lorem interdum risus, ultricies rutrum elit felis ac ante. Phasellus porttitor tempus tortor id dictum. Vestibulum in nulla vitae lectus porta placerat quis vel dolor.</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
@ -126,27 +126,27 @@
<section class="property-groups">
<h2><a name="research"></a>Research</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">In ante neque, adipiscing ut aliquet in, dictum eu est. Suspendisse lobortis nulla at ligula dictum et tincidunt nunc accumsan. Integer molestie faucibus lacinia. Integer lacinia, nisl a lobortis vehicula, nisl turpis molestie tortor, nec commodo augue erat ac enim. Aenean ac mauris risus. Donec vehicula eleifend purus ac porta. Fusce quis massa eu urna dignissim consequat rutrum quis libero. Donec pellentesque orci ac massa ornare facilisis. Aenean fringilla sem at enim tristique at ultrices lorem dapibus. Nulla ultricies laoreet sem ut tincidunt. Donec sit amet eros at lorem suscipit ultricies. Suspendisse nunc sem, vestibulum ac gravida a, sodales non purus. Curabitur sodales ultricies lectus et auctor. In in mi vel eros tempor hendrerit volutpat eu libero. Curabitur aliquam adipiscing bibendum. Suspendisse vel nibh sit amet tortor gravida viverra a sed neque. Curabitur bibendum turpis vel dui gravida sed rhoncus magna euismod. Etiam euismod, dui non hendrerit varius, elit lorem interdum risus, ultricies rutrum elit felis ac ante. Phasellus porttitor tempus tortor id dictum. Vestibulum in nulla vitae lectus porta placerat quis vel dolor.</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">
@ -162,22 +162,22 @@
<section class="property-groups">
<h2><a name="teaching"></a>Teaching</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">
@ -192,11 +192,11 @@
<section class="property-groups">
<h2><a name="publications"></a>Publications</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">

36
webapp/web/templates/freemarker/body/individual/individual--generic-class.ftl
View file

@ -34,27 +34,27 @@
<section class="property-groups">
<h2><a name="propertyGroup1"></a>propertyGroup1</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">In ante neque, adipiscing ut aliquet in, dictum eu est. Suspendisse lobortis nulla at ligula dictum et tincidunt nunc accumsan. Integer molestie faucibus lacinia. Integer lacinia, nisl a lobortis vehicula, nisl turpis molestie tortor, nec commodo augue erat ac enim. Aenean ac mauris risus. Donec vehicula eleifend purus ac porta. Fusce quis massa eu urna dignissim consequat rutrum quis libero. Donec pellentesque orci ac massa ornare facilisis. Aenean fringilla sem at enim tristique at ultrices lorem dapibus. Nulla ultricies laoreet sem ut tincidunt. Donec sit amet eros at lorem suscipit ultricies. Suspendisse nunc sem, vestibulum ac gravida a, sodales non purus. Curabitur sodales ultricies lectus et auctor. In in mi vel eros tempor hendrerit volutpat eu libero. Curabitur aliquam adipiscing bibendum. Suspendisse vel nibh sit amet tortor gravida viverra a sed neque. Curabitur bibendum turpis vel dui gravida sed rhoncus magna euismod. Etiam euismod, dui non hendrerit varius, elit lorem interdum risus, ultricies rutrum elit felis ac ante. Phasellus porttitor tempus tortor id dictum. Vestibulum in nulla vitae lectus porta placerat quis vel dolor.</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">
@ -70,27 +70,27 @@
<section class="property-groups">
<h2><a name="propertyGroup2"></a>propertyGroup2</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">In ante neque, adipiscing ut aliquet in, dictum eu est. Suspendisse lobortis nulla at ligula dictum et tincidunt nunc accumsan. Integer molestie faucibus lacinia. Integer lacinia, nisl a lobortis vehicula, nisl turpis molestie tortor, nec commodo augue erat ac enim. Aenean ac mauris risus. Donec vehicula eleifend purus ac porta. Fusce quis massa eu urna dignissim consequat rutrum quis libero. Donec pellentesque orci ac massa ornare facilisis. Aenean fringilla sem at enim tristique at ultrices lorem dapibus. Nulla ultricies laoreet sem ut tincidunt. Donec sit amet eros at lorem suscipit ultricies. Suspendisse nunc sem, vestibulum ac gravida a, sodales non purus. Curabitur sodales ultricies lectus et auctor. In in mi vel eros tempor hendrerit volutpat eu libero. Curabitur aliquam adipiscing bibendum. Suspendisse vel nibh sit amet tortor gravida viverra a sed neque. Curabitur bibendum turpis vel dui gravida sed rhoncus magna euismod. Etiam euismod, dui non hendrerit varius, elit lorem interdum risus, ultricies rutrum elit felis ac ante. Phasellus porttitor tempus tortor id dictum. Vestibulum in nulla vitae lectus porta placerat quis vel dolor.</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">
@ -106,22 +106,22 @@
<section class="property-groups">
<h2><a name="propertyGroup3"></a>propertyGroup3</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">
@ -137,12 +137,12 @@
<section class="property-groups">
<h2><a name="propertyGroup4"></a>propertyGroup4</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">
@ -158,12 +158,12 @@
<section class="property-groups">
<h2><a name="propertyGroupN"></a>propertyGroupN</h2>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<article class="property-group">
<h3>property-label</h3>
<ul class="object-property">

82
webapp/web/templates/freemarker/body/individual/individual.ftl
View file

@ -16,8 +16,8 @@
<#-- Manolo, please do not remove this line. Thanks! -->
<#assign propertyGroups = individual.propertyList>
<section id="individual-intro-person" class="vcard">
<div id="individual-intro-left-content">
<section id="individual-intro-person" class="vcard" role="region">
<section id="left-side" role="region">
<#-- Thumbnail -->
<#if individual.thumbUrl??>
<a href="${individual.imageUrl}"><img class="individual-photo2" src="${individual.thumbUrl}" title="click to view larger image" alt="${individual.name}" width="115" /></a>
@ -25,32 +25,32 @@
<img class="individual-photo2" src="${urls.images}/dummyImages/person.thumbnail.jpg" title = "no image" alt="placeholder image" width="115" />
</#if>
<nav>
<ul id ="individual-tools-people">
<li><a class="picto-font picto-uri" href="#">j</a></li>
<li><a class="picto-font picto-pdf" href="#">F</a></li>
<li><a class="picto-font picto-share" href="#">R</a></li>
<li><a class="icon-rdf" href="#">RDF</a></li>
<nav role="navigation">
<ul id ="individual-tools-people" role="list">
<li role="listitem"><a class="picto-font picto-uri" href="#">j</a></li>
<li role="listitem"><a class="picto-font picto-pdf" href="#">F</a></li>
<li role="listitem"><a class="picto-font picto-share" href="#">R</a></li>
<li role="listitem"><a class="icon-rdf" href="#">RDF</a></li>
</ul>
</nav>
<a class="email" href="#"><span class ="picto-font picto-email">M</span> email@cornell.edu</a> <a class="tel" href="#"><img class ="icon-phone" src="${urls.images}/individual/phone-icon.gif" />555 567 7878</a>
<a class="email" href="#"><span class ="picto-font picto-email">M</span> email@cornell.edu</a> <a class="tel" href="#"><img class ="icon-phone" src="${urls.images}/individual/phone-icon.gif" alt="phone icon" />555 567 7878</a>
<#-- Links -->
<nav>
<ul id ="individual-urls-people">
<nav role="navigation">
<ul id ="individual-urls-people" role="list">
<#if individual.links?has_content>
<@l.firstLastList>
<#list individual.links as link>
<li><a href="${link.url}">${link.anchor}</a></li>
<li role="listitem"><a href="${link.url}">${link.anchor}</a></li>
</#list>
</@l.firstLastList>
</#if>
</ul>
</nav>
</div>
</sction>
<div id="individual-intro-right-content"><!-- mb863 get rid off div-->
<section id="individual-info" role="region">
<header>
<#if relatedSubject??>
<h2>${relatedSubject.relatingPredicateDomainPublic} for ${relatedSubject.name}</h2>
@ -68,53 +68,67 @@
<h2>Current Positions</h2>
<ul id ="individual-positions">
<li><a href="#">Consectetur adipiscing elit, sed est erat.</a></li>
<li><a href="#">Mauris posuere dui quis massa.</a></li>
<ul id ="individual-positions" role="list">
<li role="listitem"><a href="#">Consectetur adipiscing elit, sed est erat.</a></li>
<li role="listitem"><a href="#">Mauris posuere dui quis massa.</a></li>
</ul>
</header>
<p class="individual-overview">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est erat, tristique non bibendum eu, mollis non est. Cras vehicula velit quis elit porta vel molestie tellus blandit. Donec eget magna dolor. Phasellus faucibus mollis lorem at dapibus. Sed ultricies lobortis mauris in volutpat. Cras mattis neque ut sapien pellentesque fringilla. Mauris posuere dui quis massa mattis id mollis nibh accumsan. [+]</p>
<h2>Roles</h2>
<h2>Research Areas</h2>
<ul id ="individual-roles">
<li><a href="#">Researcher (5)</a></li>
<li><a href="#">Principal Investigator (3)</a></li>
<li><a href="#">Teacher (2)</a></li>
<ul id ="individual-areas" role="list">
<li role="listitem"><a href="#">Researcher (5)</a></li>
<li role="listitem"><a href="#">Principal Investigator (3)</a></li>
<li role="listitem"><a href="#">Teacher (2)</a></li>
</ul>
</div>
</section>
</section>
<section id="publications-visualization">
<section id="sparklines-publications">
<section id="publications-visualization" role="region">
<section id="sparklines-publications" role="region">
<#include "individual-sparklineVisualization.ftl">
<header><img src="${urls.home}/images/individual/sparkline.gif" />
<header><img src="${urls.home}/images/individual/sparkline.gif" alt="" />
<h3><span class="grey">2</span> publications <span class="publication-year-range grey">within the last 10 years</span></h3>
</header>
<p><a class="all-vivo-publications" href="#">All VIVO publications & co-author network.</a></p>
</section>
<section id="co-authors">
<section id="co-authors" role="region">
<header>
<h3><span class="grey">10 </span>Co-Authors</h3>
</header>
<ul>
<li><a href="#"><img class="co-author" src="${urls.images}/individual/Bacall.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.images}/individual/Bogart.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.images}/individual/Gable.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.images}/individual/Grant.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.images}/individual/Leigh.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.images}/individual/Welles.jpg" /></a></li>
<ul role="list">
<li role="listitem"><a href="#"><img class="co-author" src="${urls.images}/individual/Bacall.jpg" /></a></li>
<li role="listitem"><a href="#"><img class="co-author" src="${urls.images}/individual/Bogart.jpg" /></a></li>
<li role="listitem"><a href="#"><img class="co-author" src="${urls.images}/individual/Gable.jpg" /></a></li>
<li role="listitem"><a href="#"><img class="co-author" src="${urls.images}/individual/Grant.jpg" /></a></li>
<li role="listitem"><a href="#"><img class="co-author" src="${urls.images}/individual/Leigh.jpg" /></a></li>
<li role="listitem"><a href="#"><img class="co-author" src="${urls.images}/individual/Welles.jpg" /></a></li>
</ul>
<p class="view-all-coauthors"><a class="view-all-style" href="#">View All <span class="pictos-arrow-10">4</span></a></p>
</section>
</section>
<nav id="property-group-menus" role="navigation">
<ul role="list">
<li role="listitem"><a href="#propertyGroup1">Affiliations</a></li>
<li role="listitem"><a href="#publications">Publications</a></li>
<li role="listitem"><a href="#research">Research</a></li>
<li role="listitem"><a href="#teaching">Teaching</a></li>
<li role="listitem"><a href="#service">Service</a></li>
<li role="listitem"><a href="#background">Background</a></li>
<li role="listitem"><a href="#contact">Contact</a></li>
<li role="listitem"><a href="#identity">Identity</a></li>
<li role="listitem"><a href="#other">Other</a></li>
</ul>
</nav>
<#-- Ontology properties -->
<#include "individual-properties.ftl">

54
webapp/web/templates/freemarker/body/partials/individual/individual-properties.ftl
View file

@ -4,7 +4,7 @@
<#-- RY Just a temporary fix to prevent classgroup heading from being pushed to the right edge of the page.
Feel free to redo/remove. -->
<div style="clear: both;" />
<#--><div style="clear: both;" />-->
<#list propertyGroups as group>
@ -21,37 +21,39 @@ Feel free to redo/remove. -->
<#assign groupName = "">
</#if>
<div class="property-group" id="group-${groupName}">
<section class="property-groups" role="region">
<#-- Display the group heading -->
<#if groupName?has_content>
<h3>${groupName}</h3>
<h2><a name="${groupName}"></a>${groupName}</h2
</#if>
<#-- Now list the properties in the group -->
<div class="properties">
<#list group.properties as property>
<div class="property" id="prop-${property.name}">
<#-- Property display name -->
<h4>${property.name}</h4>
<article class="property-group" role="article">
<#-- Property display name -->
<h3>${property.name}</h3>
<#-- List the statements for each property -->
<#if property.type == "data"> <#-- data property -->
<#list property.statements as statement>
<div class="data-prop-stmt-value">
${statement.value}
</div> <!-- end data-prop-stmt-value -->
</#list>
<#else> <#-- object property -->
<#if property.collatedBySubclass>
<#include "objectPropertyList-collated.ftl">
<#else>
<#include "${property.template}">
</#if>
</#if>
</div> <!-- end property -->
<#-- List the statements for each property -->
<#if property.type == "data"> <#-- data property -->
<#list property.statements as statement>
<p class="data-property">${statement.value}</p>
<!-- end data-prop-stmt-value -->
</#list>
<#else> <#-- object property -->
<#if property.collatedBySubclass>
<#include "objectPropertyList-collated.ftl">
<#else>
<ul class="object-property" role="list">
<#include "${property.template}">
</ul> <!-- end obj-prop-stmt-obj -->
</#if>
</#if>
<!-- end property -->
</article>
</#list>
</div> <!-- end properties -->
</div> <!-- end property-group -->
</#list>
<!-- end properties -->
</section> <!-- end property-group -->
</#list>

6
webapp/web/templates/freemarker/body/partials/individual/objectPropertyList-default.ftl
View file

@ -3,7 +3,5 @@
<#-- Default object property list template -->
<#list property.statements as statement>
<div class="obj-prop-stmt-obj">
<a href="${statement.object.url}">${statement.object.name}</a> ${statement.object.moniker!}
</div> <!-- end obj-prop-stmt-obj -->
</#list>
<li role="listitem"><a href="${statement.object.url}">${statement.object.name}</a> | ${statement.object.moniker!}</li>
</#list>