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

NIHVIVO-1073 Fairly significant refactoring of markup and styles for menu pages. Got rid of duplication between the default template and template for people class group.

Browse source
This commit is contained in:
nac26 2011-01-26 14:26:32 +00:00
parent f7e126cf50
commit abb2228b9b
4 changed files with 98 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
webapp/web/css/menupage/menupage.css
View file

@ -3,86 +3,63 @@
@charset "UTF-8"; @charset "UTF-8";
/* CSS Document */ /* CSS Document */
/* VISUAL GRAPH FOAF:PERSON------> */ /* VISUAL GRAPH-----> */
#intro-menupage{ #menupage-intro{
clear: both; clear: both;
width: 100%; width: 100%;
margin: 1em auto; margin: 1em auto;
/* padding-top: 30px; nac26: not sure we need all this space up top*/ /* padding-top: 30px; nac26: not sure we need all this space up top*/
/* margin-bottom: 30px;*/ /* margin-bottom: 30px;*/
} }
#intro-menupage h3{ #menupage-intro h3{
padding: 0 25px 15px 0; padding: 0 25px 15px 0;
padding-bottom: 20px; padding-bottom: 20px;
} }
#content-foaf-person{ #menupage-content{
float: left;
width: 64%;
margin-bottom: 30px;
}
#content-foaf-person h4{
padding: 20px 25px 12px 0;
}
ul#foaf-person-childClasses{
float: left;
width: 265px;
margin-left: 45px;
}
ul#foaf-person-childClasses li{
display: block;
height: 35px;
line-height: 35px;
}
ul#foaf-person-childClasses li:last-child{
border-bottom: 0;
}
ul#foaf-person-childClasses a{
display: block;
padding-left: 15px;
width: 265px;
height: 35px;
}
#foaf-person-graph{
float: right;
width: 270px;
height: 270px;
}
/* VISUAL GRAPH CLASS:GENERIC (ORGANIZATION, RESEARCH, EVENT) ------> */
#content-generic-class{
float: left; float: left;
width: 90%; width: 90%;
margin-bottom: 30px; margin-bottom: 30px;
} }
#content-generic-class h3{ #menupage-content.people{
width: 68%;
}
#menupage-content h3{
padding: 0 25px 15px 0; padding: 0 25px 15px 0;
} }
#content-generic-class h4{ #menupage-content h4{
padding: 20px 25px 12px 0; padding: 20px 25px 12px 0;
} }
ul#vgraph-childClasses{ ul#vgraph-classes{
float: left; float: left;
width: 265px; width: 265px;
margin-left: 35px; margin-left: 35px;
} }
ul#vgraph-childClasses li{ ul#vgraph-classes li{
display: block; display: block;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
} }
ul#vgraph-childClasses li:last-child { ul#vgraph-classes li:last-child {
border-bottom: 0; border-bottom: 0;
} }
ul#vgraph-childClasses a{ ul#vgraph-classes a{
display: block; display: block;
padding-left: 15px; padding-left: 15px;
width: 265px; width: 265px;
height: 35px; height: 35px;
} }
#generic-class-graph{ #menupage-graph{
float: right; float: right;
width: 500px; width: 500px;
height: 283px; height: 283px;
padding-right: 20px; padding-right: 20px;
border: 1px dotted #ccc;
}
#menupage-graph.people{
width: 270px;
height: 270px;
padding-right: 0;
border: none;
} }
/* FIND BY ------> */ /* FIND BY ------> */
#find-by{ #find-by{
@ -215,45 +192,45 @@ ul#find-filters a{
margin-bottom: 27px; margin-bottom: 27px;
} }
/* BROWSE CLASSES ------> */ /* BROWSE CLASSES ------> */
ul#browse-childClasses{ ul#browse-classes{
float: left; float: left;
width: 255px; width: 255px;
margin-left: 15px; margin-left: 15px;
margin-bottom: 20px; margin-bottom: 20px;
} }
ul#browse-childClasses li{ ul#browse-classes li{
display: block; display: block;
width: 264px; width: 245px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
ul#browse-childClasses li:last-child{ ul#browse-classes li:last-child{
border-bottom: 0; border-bottom: 0;
} }
ul#browse-childClasses a{ ul#browse-classes a{
display: block; display: block;
padding-left: 20px; padding-left: 20px;
width: 264px; width: 264px;
height: 35px; height: 35px;
} }
/* ALPHA BROWSE------> */ /* ALPHA BROWSE------> */
ul#alpha-browse-childClass{ ul#alpha-browse-individuals{
float: left; float: left;
width: 620px; width: 620px;
padding-left: 10px; padding-left: 10px;
list-style: none; list-style: none;
} }
ul#alpha-browse-childClass li{ ul#alpha-browse-individuals li{
float: left; float: left;
margin-right: 4px; margin-right: 4px;
padding-top: 8px; padding-top: 8px;
} }
ul#alpha-browse-childClass li:last-child{ ul#alpha-browse-individuals li:last-child{
border-bottom: 0; border-bottom: 0;
} }
ul#alpha-browse-childClass a{ ul#alpha-browse-individuals a{
display: block; display: block;
height: 35px; height: 35px;
margin-left: 0; margin-left: 0;
@ -261,7 +238,7 @@ ul#alpha-browse-childClass a{
width: 10px; width: 10px;
} }
/* BROWSE INDIVIDUALS------> */ /* BROWSE INDIVIDUALS------> */
#individuals-in-childClass{ #individuals-in-class{
float: right; float: right;
width: 68%; width: 68%;
padding-bottom: 30px; padding-bottom: 30px;
@ -269,37 +246,77 @@ ul#alpha-browse-childClass a{
margin-right: 17px; margin-right: 17px;
min-height: 170px; min-height: 170px;
} }
#individuals-in-childClass h3{ #individuals-in-class ul{
padding: 10px 0 10px 30px;
}
#individuals-in-childClass ul{
list-style: none; list-style: none;
} }
#individuals-in-childClass li{ li.individual {
width: 90%; width: 90%;
padding: 20px 0; padding: 20px 0;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
overflow: hidden; overflow: hidden;
} }
#individuals-in-childClass li img{ li.individual img{
float: left; float: left;
margin-right: 20px; margin-right: 20px;
} }
#individuals-in-childClass li h1{ li.individual h1{
padding: 0; padding: 0;
line-height: 1.2; line-height: 1.2;
font-weight: bold; font-weight: bold;
} }
#individuals-in-childClass li h1.thumb{ li.individual h1.thumb{
padding-top: 30px; padding-top: 30px;
} }
#individuals-in-childClass span.title{ #individuals-in-class span.title{
display: block; display: block;
margin: 0.8em 0 0 0; margin: 0.8em 0 0 0;
font-size: 0.8em; font-size: 0.8em;
line-height: 1; line-height: 1;
} }
#individuals-in-childClass span.org{ #individuals-in-class span.org{
display: block; display: block;
}
nav.pagination{
margin: 0.3em 0 0 1.4em;
}
nav.pagination h3{
display: inline;
margin: 0 0.3em 0 0;
padding: 0;
font-size: 1.1em;
color: #666;
}
nav.pagination ul{
display: inline;
}
nav.pagination li{
display: inline-block;
margin: 0;
/* padding: 0.1em 0.6em;*/
border: none;
}
nav.pagination li.selected{
padding: 0 0.6em;
color: #fff;
background: #333;
}
nav.pagination li a{
padding: 0.1em 0.6em;
border: none;
}
nav.pagination li a:hover{
background: #ddd;
border: none;
}
nav.pagination li.selected a{
color: #fff;
}
nav.pagination li.selected a:hover{
background: #333;
}
nav.pagination .round{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
} }

20
webapp/web/templates/freemarker/body/menupage/menupage.ftl
View file

@ -3,29 +3,29 @@
<#include "menupage-checkForData.ftl"> <#include "menupage-checkForData.ftl">
<#if !noData> <#if !noData>
<section id="intro-menupage" role="region"> <section id="menupage-intro" role="region">
<h3>${page.title}</h3> <h3>${page.title}</h3>
<section id="content-generic-class" role="region"> <section id="menupage-content" role="region">
<#-- This will allow us to keep menupage.ftl generic and keep vivo-specific extensions in VIVO --> <#-- This will allow us to keep menupage.ftl generic and keep vivo-specific extensions in VIVO -->
<#if visualizationLink??> <#if visualizationLink??>
${visualizationLink} ${visualizationLink}
</#if> </#if>
<h4>Visual Graph</h4> <h4>Visual Graph</h4>
<#include "menupage-vClassesInClassgroup.ftl"> <#include "menupage-vClassesInClassgroup.ftl">
<section id="generic-class-graph" role="region"> <section id="menupage-graph" role="region">
<img src="${urls.images}/menupage/visual-graph-generic-class.jpg" width="500" height="283" alt ="" /> <img src="${urls.images}/menupage/visual-graph-generic-class.jpg" width="500" height="283" alt ="" />
</section> </section>
</section> </section>
</section> </section>
<#include "menupage-browse.ftl"> <#include "menupage-browse.ftl">
${stylesheets.add("/css/menupage/menupage.css")} ${stylesheets.add("/css/menupage/menupage.css")}
<#include "menupage-scripts.ftl"> <#include "menupage-scripts.ftl">
<#else> <#else>
${noDataNotification} ${noDataNotification}

10
webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl
View file

@ -6,7 +6,7 @@
<h2>Browse by</h2> <h2>Browse by</h2>
<nav role="navigation"> <nav role="navigation">
<ul id="browse-childClasses"> <ul id="browse-classes">
<#list vClassGroup as vClass> <#list vClassGroup as vClass>
<#------------------------------------------------------------ <#------------------------------------------------------------
Need to replace vClassCamel with full URL that allows function Need to replace vClassCamel with full URL that allows function
@ -22,18 +22,18 @@
</ul> </ul>
<nav role="navigation"> <nav role="navigation">
<#assign alphabet = ["A", "B", "C", "D", "E", "F", "G" "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] /> <#assign alphabet = ["A", "B", "C", "D", "E", "F", "G" "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] />
<ul id="alpha-browse-childClass"> <ul id="alpha-browse-individuals">
<li><a href="#" class="selected" data-alpha="all">All</a></li> <li><a href="#" class="selected" data-alpha="all">All</a></li>
<#list alphabet as letter> <#list alphabet as letter>
<li><a href="#" data-alpha="${letter?lower_case}" title="Browse all individuals whose names start with ${letter}">${letter}</a></li> <li><a href="#" data-alpha="${letter?lower_case}" title="Browse all individuals whose name starts with ${letter}">${letter}</a></li>
</#list> </#list>
</ul> </ul>
</nav> </nav>
</nav> </nav>
<section id="individuals-in-childClass" role="region"> <section id="individuals-in-class" role="region">
<ul role="list"> <ul role="list">
<#-- Will be populated dynamically via AJAX request -->
</ul> </ul>
</section> </section>
</section> </section>

4
webapp/web/templates/freemarker/body/partials/menupage/menupage-vClassesInClassgroup.ftl
View file

@ -3,11 +3,11 @@
<#-- Template for rendering the classes in a class group for menupages --> <#-- Template for rendering the classes in a class group for menupages -->
<nav role="navigation"> <nav role="navigation">
<ul id="vgraph-childClasses" role="list"> <ul id="vgraph-classes" role="list">
<#list vClassGroup as vClass> <#list vClassGroup as vClass>
<#-- Only display vClasses with individuals --> <#-- Only display vClasses with individuals -->
<#if (vClass.entityCount > 0)> <#if (vClass.entityCount > 0)>
<li role="listitem"><a href="#browse-by" title="Browse all people in this class" data-uri="${vClass.URI}">${vClass.name} <span class="count-classes">(${vClass.entityCount})</span></a></li> <li role="listitem"><a href="#browse-by" title="Browse all individuals in this class" data-uri="${vClass.URI}">${vClass.name} <span class="count-classes">(${vClass.entityCount})</span></a></li>
</#if> </#if>
</#list> </#list>
</ul> </ul>