NIHVIVO-1316: Created temporary freemarker template. Once I have the controller ready I will wire data from the controller to the body template.

This commit is contained in:
mb863 2010-11-09 21:54:32 +00:00
parent 57ff1c461b
commit a564987e3c
15 changed files with 569 additions and 0 deletions

View file

@ -0,0 +1,359 @@
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
@charset "UTF-8";
/* CSS Document */
/* <------ INDIVIDUAL INTRO FOR ANY CLASS*/
#individual-intro {
width:920px;
margin:0 auto;
margin-top:35px;
margin-bottom:30px;
}
#individual-intro h1{
font-size:22px;
color:#2485ae;
padding-bottom:24px;
}
#individual-intro span.preferred-title {
font-size:18px;
color:#5e6363;
padding-left:10px;
margin-left:10px;
border-left:1px solid #5e6363;
}
/* <------ INDIVIDUAL INTRO FOR PERSON*/
#individual-intro-person {
float:left;
width:700px;
margin-top:35px;
border-right:1px solid #edf0ed;
margin-bottom:30px;
}
/* <------ INDIVIDUAL INTRO LEFT CONTENT */
#individual-intro-left-content {
width:166px;
float:left;
padding-left:27px;
padding-right:34px;
}
#individual-intro-left-content img.individual-photo2 {
width:160px;
height:160px;
border:7px solid #ebebeb;
}
ul#individual-tools-people {
margin-top:5px;
height:27px;
padding-bottom:20px;
overflow:hidden;
border-bottom:1px solid #e8ece9;
color: #b2d15a;
}
ul#individual-tools-people li {
position:relative;
display:block;
padding-right:14px;
float:left;
}
ul#individual-tools-people li a{
color: #b2d15a;
}
ul#individual-tools {
margin-top:-18px; /*not good adding negative margin*/
height:38px;
overflow:hidden;
float:left;
width:150px;
color: #b2d15a;
}
ul#individual-tools li {
position:relative;
display:block;
padding-right:14px;
float:left;
line-height:27px;
}
ul#individual-tools li a{
color: #b2d15a;
}
.picto-font {
font-family: 'Pictos';
}
.picto-uri {
font-size:27px;
}
.picto-pdf {
font-size:27px;
}
.picto-share {
font-size:27px;
}
.icon-rdf {
position:absolute;
font-size:18px;
top:16px;
}
.picto-email {
font-size:22px;
color:#aeb1b1;
padding-right: 5px;
}
#individual-intro-left-content a.email {
font-size:14px;
color: #5f6464;
display:block;
margin-top:15px;
}
#individual-intro-left-content a.tel {
font-size:14px;
color: #5f6464;
display:block;
margin-top:15px;
}
.icon-phone {
vertical-align:middle;
padding-right:5px;
}
ul#individual-urls {
list-style:url(../../images/individual/arrow-grey.gif);
margin-left:10px;
float:left;
margin-bottom: 30px;
}
ul#individual-urls li {
font-size:14px;
line-height:1.2em;
}
ul#individual-urls li a {
color:#2485ae;
}
ul#individual-urls-people {
margin-top:20px;
list-style:url(../../images/individual/arrow-grey.gif);
padding-left:24px;
}
ul#individual-urls-people li {
font-size:14px;
line-height:1.2em;
}
ul#individual-urls-people li a {
color:#2485ae;
}
/* <------ INDIVIDUAL RIGHT CONTENT */
#individual-intro-right-content {
width:400px;
float:left;
padding:60px 0 0 10px;
color:#5e6363;
}
#individual-intro-right-content h1.fn {
font-size:22px;
color:#2485ae;
padding-bottom:24px;
}
h1.fn .preferred-title {
font-size:18px;
color:#5e6363;
padding-left:10px;
margin-left:10px;
border-left:1px solid #5e6363;
}
#individual-intro-right-content h2 {
font-size:18px;
font-weight:normal;
padding-bottom:18px;
}
ul#individual-positions {
font-size:16px;
padding-bottom:24px;
list-style:url(../../images/individual/arrow-green.gif);
padding-left:20px;
}
ul#individual-positions li {
line-height:1.2em;
}
ul#individual-positions li a {
color:#2485ae;
}
.individual-overview {
font-size:16px;
padding-bottom:32px;
line-height:1.3em;
}
ul#individual-roles {
font-size:16px;
padding-bottom:24px;
}
ul#individual-roles li {
float:left;
border-right:1px solid #5e6363;
padding-right:10px;
padding-left:10px;
}
ul#individual-roles li:first-child {
padding-left:0;
}
ul#individual-roles li:last-child {
border-right:none;
}
ul#individual-roles li {
float:left;
border-right:1px solid #5e6363;
padding-right:10px;
padding-left:10px;
}
ul#individual-roles li a {
color:#2485ae;
}
/* <------ INDIVIDUAL VISUALIZATION */
#publications-visualization {
margin-top:35px;
float:right;
width:226px;
}
/* <------ SPARKLINES */
#sparklines-publications {
width:184px;
padding:0 20px 45px 20px;
}
#sparklines-publications h3 {
padding-top:10px;
font-size:20px;
color:#2485ae;
margin-bottom:10px;
}
.publication-year-range {
display:block;
padding-top:5px;
font-size:14px;
}
a.all-vivo-publications {
font-size:14px;
color:#5e6363;
}
/* <------ COAUTHORS */
#co-authors {
padding:0 20px 30px 20px;
}
img.co-author {
border:2px solid #ebebeb;
margin-right:5px;
margin-bottom:5px;
}
#co-authors h3 {
font-size:20px;
color:#2485ae;
margin-bottom:10px;
}
#co-authors ul {
}
#co-authors ul li {
display:block;
float:left;
}
p.view-all-coauthors {
clear:both;
width: 200px;
font-size:14px;
text-align:left;
}
/* PROPERTY GROUP MENU------> */
#property-group-menus {
clear:both;
width:920px;
height:46px;
border:1px solid #dfebe5;
margin:0 auto;
margin-bottom:10px;
background:#f1f2ee;
}
#property-group-menus ul {
display:block;
color:#5e6363;
font-size:16px;
}
#property-group-menus li {
float:left;
line-height:46px;
padding-right:15px;
padding-left:15px;
background:url(../../images/individual/separator-property-group-nav.jpg) right 10px no-repeat;
}
#property-group-menus a {
color:#5e6363;
}
#property-group-menus a:hover {
color:#002b44;
}
#property-group-menus li:fisrt-child {
padding-left:0;
}
#property-group-menus li:last-child {
background:none;
}
/* PROPERTY GROUPS------> */
.property-groups {
clear:both;
width:920px;
border:1px solid #dfebe5;
margin:0 auto;
margin-bottom:10px;
background:#fff;
margin-bottom:20px;
overflow:hidden;
}
section.property-groups h2 {
padding: 20px 25px 12px 35px;
font-size: 20px;
color: #2485ae;
font-weight:normal;
/*background:url(../../images/individual/arrow-down.gif) 120px 24px no-repeat;*/
}
article.property-group-item {
width:852px;
margin:0 auto;
border:1px solid #dfe6e5;
margin-bottom:20px;
}
article.property-group-item h3 {
border-bottom:1px solid #dfe6e5;
background:#fafaf9;
font-size:17px;
color:#8aa149;
padding:10px 20px 10px 20px;
}
article.property-group-item .data-property {
background:#fff;
font-size:16px;
color:#5e6363;
padding:10px 20px 10px 20px;
line-height:1.2em;
}
article.property-group-item ul.object-property {
background:#fff;
font-size:16px;
color:#5e6363;
padding:10px 20px 10px 20px;
}
article.property-group-item ul.object-property li {
line-height:1.2em;
padding-bottom:10px;
}
article.property-group-item ul.object-property li a {
color: #2485ae;
}
/* MISCELLANEOUS------> */
.blue {
color:#2485ae;
}
.grey {
color:#5e6363;
}
.green {
color:#b2d15a;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 737 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,210 @@
<#-- $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.home}/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>
<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>
</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.home}/images/individual/phone-icon.gif" />555 567 7878</a>
<nav>
<ul id ="individual-urls-people">
<li><a href="#">&lt;core:PrimaryURLLink&gt;</a></li>
<li><a href="#">&lt;core:URLLink&gt;</a></li>
<li><a href="#">&lt;core:URLLink&gt;</a></li>
<li><a href="#">&lt;core:URLLink&gt;</a></li>
</ul>
</nav>
</div>
<div id="individual-intro-right-content"><!-- mb863 get rid off div-->
<header>
<h1 class="fn">Hayworth, Rita<span class="preferred-title">Actress, dancer</span></h1>
<h2>Current Positions</h2>
<ul id ="individual-positions">
<li><a href="#">Dancing in heaven with other famous people</a></li>
<li><a href="#">Sabbatic year for ever</a></li>
</ul>
</header>
<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>
<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>
</div>
</section>
<section id="publications-visualization">
<section id="sparklines-publications">
<header><img src="${urls.home}/images/individual/sparkline.gif" />
<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">
<header>
<h3><span class="grey">10 </span>Co-Authors</h3>
</header>
<ul>
<li><a href="#"><img class="co-author" src="${urls.home}/images/individual/Bacall.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.home}/images/individual/Bogart.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.home}/images/individual/Gable.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.home}/images/individual/Grant.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.home}/images/individual/Leigh.jpg" /></a></li>
<li><a href="#"><img class="co-author" src="${urls.home}/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">
<ul>
<li><a href="#propertyGroup1">Affiliations</a></li>
<li><a href="#publications">Publications</a></li>
<li><a href="#research">Research</a></li>
<li><a href="#teaching">Teaching</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#background">Background</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#identity">Identity</a></li>
<li><a href="#other">Other</a></li>
</ul>
</nav>
<section class="property-groups">
<h2><a name="affiliations"></a>Affiliation</h2>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<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">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<ul class="object-property">
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
</ul>
</article>
</section>
<section class="property-groups">
<h2><a name="research"></a>Research</h2>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<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">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<ul class="object-property">
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
</ul>
</article>
</section>
<section class="property-groups">
<h2><a name="teaching"></a>Teaching</h2>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<ul class="object-property">
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
</ul>
</article>
</section>
<section class="property-groups">
<h2><a name="publications"></a>Publications</h2>
<article class="property-group-item">
<h3>property-label</h3>
<p class="data-property">data property</p>
</article>
<article class="property-group-item">
<h3>property-label</h3>
<ul class="object-property">
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
<li><a href="#">&lt;object property&gt;</a> | Moniker</li>
</ul>
</article>
</section>