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

NIHVIVO-556: Making name selectors and markup consistent (using dash in between words VS camel notation), adding more aria roles, shortening selector names, just continuing cleaning markup for templates and optimizing css files.

Browse source
This commit is contained in:
mb863 2010-11-24 18:26:04 +00:00
parent 534face143
commit da905d48c2
7 changed files with 109 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
themes/vivo-basic/css/screen.css
View file

@ -783,7 +783,7 @@ padding-top:36px;
/* styles for error alerts */
#errorAlert{
#error-alert{
color:#900;
padding:0px;
margin-bottom:5px;
@ -792,7 +792,7 @@ padding-top:36px;
}
#errorAlert img{
#error-alert img{
float:left;
margin:0;
padding:0;
@ -801,7 +801,7 @@ padding-top:36px;
}
#errorAlert p{
#error-alert p{
padding-left:30px;
font-size:0.9em;

6
themes/vivo-basic/css/uploadImages.css
View file

@ -99,7 +99,7 @@
}
/* styles for error alerts */
#errorAlert{
#error-alert{
color:#900;
padding:0px;
margin-bottom:5px;
@ -108,14 +108,14 @@
}
#errorAlert img{
#error-alert img{
float:left;
margin:0;
padding:0;
vertical-align:middle;
}
#errorAlert p{
#error-alert p{
padding-left:35px;
font-size:0.9em;
line-height:30px;

10
themes/vivo-basic/templates/page.ftl
View file

@ -25,14 +25,14 @@ ${stylesheets.addFromTheme("/css/screen.css")}
<hr class="hidden" />
<div id="contentwrap">
<div id="contentwrap">
<#if flash?has_content>
<div id="flash-message">
<section id="flash-message" role="alert">
${flash}
</div>
</#if>
</section>
</#if>
<div id="content">
<div id="content">
${body}
</div> <!-- content -->
</div> <!-- contentwrap -->

6
themes/wilma/css/uploadImages.css
View file

@ -64,19 +64,19 @@
padding: 15px;
}
/* styles for error alerts */
#errorAlert {
#error-alert {
color: #900;
padding: 0px;
margin-bottom: 5px;
height: 30px;
}
#errorAlert img {
#error-alert img {
float: left;
margin: 0;
padding: 0;
vertical-align: middle;
}
#errorAlert p {
#error-alert p {
padding-left: 35px;
font-size: 0.9em;
line-height: 30px;

59
themes/wilma/css/wilma.css
View file

@ -118,6 +118,7 @@ ul#header-nav a:active {
height:38px;
top:40px;
right:10px;
padding-top:5px;
}
#search-field {
width:396px;
@ -190,6 +191,7 @@ ul#main-nav {
background: #fff;
min-height: 450px;
padding: 20px;
overflow:hidden;
}
/* INTRO ------> */
#intro {
@ -216,12 +218,9 @@ ul#main-nav {
font-size: 14px;
color: #b2d15a;
}
/* LOG IN------> */
/* Login container on home page */
#login-container {
/* LOG IN------> */
#login {
float: right;
}
#log-in-form {
width:314px;
border:1px solid #e8ece9;
margin-right:25px;
@ -229,41 +228,40 @@ ul#main-nav {
margin-bottom:30px;
overflow:hidden;
}
#log-in-form h2 {
#login h2 {
font-size: 22px;
color: #2485ae;
padding-left:15px;
padding-top:18px;
border-bottom:none;
}
#errorAlert {
padding:12px 10px 10px 10px;
width:294px;
border-top:1px dotted #a12424;
border-left:1px dotted #a12424;
border-right:1px dotted #a12424;
#error-alert {
margin:0 12px;
padding:12px;
padding-bottom:25px;
border:1px dotted #a12424;
}
#errorAlert img {
#error-alert img {
float:left;
margin:0;
padding:0;
vertical-align:middle;
}
#errorAlert p {
#error-alert p {
padding-left:40px;
font-size:0.9em;
line-height: 1.3em;
color:#a12424;
padding-top:5px;
}
#log-in-form label {
#login-form label {
display:block;
color: #5e6363;
padding-top:20px;
padding-left:38px;
font-size:14px;
}
#log-in-form input.text-field {
#login-form input.text-field {
border:0;
font-size:14px;
padding:5px;
@ -277,22 +275,22 @@ ul#main-nav {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#log-in-form input.text-field:focus {
#login-form input.text-field:focus {
border:1px solid rgba(57, 138, 172, 0.5);
background-color: rgba(57, 138, 172, 0.1);
}
#log-in-form p.submit {
#login-form p.submit {
width:100px;
height:40px;
margin-top:20px;
margin-left:38px;
}
#log-in-form p.submit-password{
#login-form p.submit-password{
height:40px;
margin-top:20px;
margin-left:38px;
}
#log-in-form input.checkbox-remember-me {
#login-form input.checkbox-remember-me {
float:left;
height:14px;
width:14px;
@ -301,7 +299,7 @@ background-color: rgba(57, 138, 172, 0.1);
margin-top:33px;
margin-left:20px;
}
#log-in-form label.label-remember-me {
#login-form label.label-remember-me {
display:block;
float:right;
color: #5e6363;
@ -343,6 +341,7 @@ p.passwordNote{
border:1px dotted #E2C822;
background-color:#FFF9D7;
padding:0.8em;
margin-bottom:20px;
}
/* HOME SEARCH ------> */
#search-home {
@ -401,7 +400,7 @@ input.search-home-vivo {
font-size: 20px;
}
/* BROWSE CLASS GROUPS ------> */
ul#browse-classGroups {
ul#browse-classgroups {
float: left;
width: 200px;
border: 1px solid #dde4e3;
@ -412,7 +411,7 @@ ul#browse-classGroups {
margin-top: 10px;
padding-top: 10px;
}
ul#browse-classGroups li {
ul#browse-classgroups li {
display: block;
border-bottom: 1px solid #dde4e3;
font-size: 18px;
@ -420,10 +419,10 @@ ul#browse-classGroups li {
height: 35px;
line-height: 35px;
}
ul#browse-classGroups li:last-child {
ul#browse-classgroups li:last-child {
border-bottom: none
}
ul#browse-classGroups a {
ul#browse-classgroups a {
display: block;
padding-left: 15px;
width: 200px;
@ -431,15 +430,15 @@ ul#browse-classGroups a {
color: #5e6363;
text-decoration: none;
}
ul#browse-classGroups a:hover {
ul#browse-classgroups a:hover {
background: url(../images/arrow.gif) 0 12px no-repeat;
color: #2ea0cf;
}
ul#browse-classGroups a.selected {
ul#browse-classgroups a.selected {
color: #2ea0cf;
background: url(../images/arrow.gif) 0 12px no-repeat;
}
ul#browse-classGroups .count-classes {
ul#browse-classgroups .count-classes {
font-size: 14px
}
/* BROWSE CLASSES IN CLASS GROUP ------> */
@ -511,7 +510,7 @@ ul#class-group-list .count-individuals {
height: 400px;
border: 1px solid #dfe6e6;
background: #f7f9f9;
padding-bottom: 30px;
padding-bottom: 50px;
}
#highlights h4 {
width: 13%;
@ -621,7 +620,7 @@ p.summary time {
font-weight: normal;
}
/* LATEST PUBLICATIONS ------> */
article.latest-publications-item {
#latest-publications article {
width: 232px;
height: 35px;
background: url(../images/icon-pub.png) 0 0 no-repeat;

89
themes/wilma/templates/page-home.ftl
View file

@ -10,6 +10,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>${title}</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
${stylesheets.addFromTheme("/css/screen.css")}
<#include "stylesheets.ftl">
@ -34,23 +36,23 @@
</#if>-->
<nav role="navigation">
<ul id="header-nav">
<ul id="header-nav" role="list">
<#if user.loggedIn>
<li><span class="pictos-arrow-10">U</span> ${user.loginName}</li>
<li><a href="${urls.logout}">Log out</a></li>
<li role="listitem"><span class="pictos-arrow-10">U</span> ${user.loginName}</li>
<li role="listitem"><a href="${urls.logout}">Log out</a></li>
<#if user.hasSiteAdminAccess>
<li><a href="${urls.siteAdmin}">Site Admin</a></li>
<li role="listitem"><a href="${urls.siteAdmin}">Site Admin</a></li>
</#if>
<#else>
<li><a title="log in to manage this site" href="${urls.login}">Log in</a></li>
<li role="listitem"><a title="log in to manage this site" href="${urls.login}">Log in</a></li>
</#if>
<#-- List of links that appear in submenus, like the header and footer. -->
<li><a href="${urls.about}">About</a></li>
<li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li>
<li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
<li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul>
</nav>
@ -58,7 +60,7 @@
<fieldset>
<legend>Search form</legend>
<form id="searchForm" action="${urls.search}" name="searchForm" role="search">
<form id="search-form" action="${urls.search}" name="search-form" role="search">
<#if user.showFlag1SearchField>
<select id="search-form-modifier" name="flag1" class="form-item" >
<option value="nofiltering" selected="selected">entire database (${user.loginName})</option>
@ -69,8 +71,7 @@
</#if>
<div id="search-field">
<input type="text" name="querytext" class="search-vivo" value="${querytext!}" />
<a class ="submit" href="javascript:document.searchForm.submit();">Search</a>
<!-- <input class ="submit" name="submit" type="submit" value="Search" /> -->
<a class ="submit" href="javascript:document.search-form.submit();" role="button">Search</a>
</div>
</form>
</fieldset>
@ -78,14 +79,14 @@
</header>
<nav role="navigation">
<ul id="main-nav">
<ul id="main-nav" role="list">
<#list tabMenu.items as item>
<li><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
<li role="listitem"><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
</#list>
</ul>
</nav>
<div id="wrapper-content">
<div id="wrapper-content" role="main">
<#if flash?has_content>
<section id="flash-message" role="alert">
${flash}
@ -111,36 +112,34 @@
</section> <!-- #search-home -->
</section> <!-- #intro -->
<section id="login-container" role="region">
<@widget name="login" />
</section>
<@widget name="login" />
<section id="browse" role="region">
<h4>Browse</h4>
<ul id="browse-classGroups">
<li><a class="selected" href="#">People<span class="count-classes"> (1,280)</span></a></li>
<li><a href="#">Courses<span class="count-classes"> (1,300)</span></a></li>
<li><a href="#">Activities<span class="count-classes"> (980)</span></a></li>
<li><a href="#">Topics<span class="count-classes"> (345)</span></a></li>
<li><a href="#">Events<span class="count-classes"> (670)</span></a></li>
<li><a href="#">Organizations<span class="count-classes"> (440)</span></a></li>
<li><a href="#">Publications<span class="count-classes"> (670)</span></a></li>
<li><a href="#">Locations<span class="count-classes"> (903)</span></a></li>
<ul id="browse-classgroups" role="list">
<li role="listitem"><a class="selected" href="#">People<span class="count-classes"> (1,280)</span></a></li>
<li role="listitem"><a href="#">Courses<span class="count-classes"> (1,300)</span></a></li>
<li role="listitem"><a href="#">Activities<span class="count-classes"> (980)</span></a></li>
<li role="listitem"><a href="#">Topics<span class="count-classes"> (345)</span></a></li>
<li role="listitem"><a href="#">Events<span class="count-classes"> (670)</span></a></li>
<li role="listitem"><a href="#">Organizations<span class="count-classes"> (440)</span></a></li>
<li role="listitem"><a href="#">Publications<span class="count-classes"> (670)</span></a></li>
<li role="listitem"><a href="#">Locations<span class="count-classes"> (903)</span></a></li>
</ul>
<section id="browse-classes" role="navigation">
<nav>
<ul id="class-group-list">
<li><a href="#">Faculty Member<span class="count-individuals"> (18,080)</span></a></li>
<li><a class="selected" href="#">Graduate Student<span class="count-individuals"> (2,550)</span></a></li>
<li><a href="#">Librarian <span class="count-individuals"> (1,280)</span></a></li>
<li><a href="#">Non-Academic <span class="count-individuals"> (280)</span></a></li>
<li><a href="#">Non-Faculty Academic <span class="count-individuals"> (2,380)</span></a></li>
<li><a href="#">Person<span class="count-individuals"> (2,480)</span></a></li>
<li><a href="#">Postdoc <span class="count-individuals"> (1,380)</span></a></li>
<li><a href="#">Professor Emeritus<span class="count-individuals"> (680)</span></a></li>
<li><a href="#">Undergraduate Student<span class="count-individuals"> (880)</span></a></li>
<ul id="class-group-list" role="list">
<li role="listitem"><a href="#">Faculty Member<span class="count-individuals"> (18,080)</span></a></li>
<li role="listitem"><a class="selected" href="#">Graduate Student<span class="count-individuals"> (2,550)</span></a></li>
<li role="listitem"><a href="#">Librarian <span class="count-individuals"> (1,280)</span></a></li>
<li role="listitem"><a href="#">Non-Academic <span class="count-individuals"> (280)</span></a></li>
<li role="listitem"><a href="#">Non-Faculty Academic <span class="count-individuals"> (2,380)</span></a></li>
<li role="listitem"><a href="#">Person<span class="count-individuals"> (2,480)</span></a></li>
<li role="listitem"><a href="#">Postdoc <span class="count-individuals"> (1,380)</span></a></li>
<li role="listitem"><a href="#">Professor Emeritus<span class="count-individuals"> (680)</span></a></li>
<li role="listitem"><a href="#">Undergraduate Student<span class="count-individuals"> (880)</span></a></li>
</ul>
</nav>
@ -197,19 +196,19 @@
<section id="latest-publications" class="global-highlights" role="region">
<h5>LATEST PUBLICATIONS</h5>
<article class="latest-publications-item" role="article">
<article role="article">
<p class="publication-content">Solar masses<span><em>Journal</em> <time datetime="2010-02-13T20:00Z"> | December 2010</time></p>
</article>
<article class="latest-publications-item" role="article">
<article role="article">
<p class="publication-content">Link data and the Web<span><em>Article</em> <time datetime="2010-02-13T20:00Z"> | December 2010</time></p>
</article>
<article class="latest-publications-item" role="article">
<article role="article">
<p class="publication-content">Building a community<span><em>Book</em> <time datetime="2010-02-13T20:00Z"> | November 2010</time></p>
</article>
<article class="latest-publications-item" role="article">
<article role="article">
<p class="publication-content">Biology 101<span><em>Series</em> <time datetime="2010-02-13T20:00Z"> | November 2010</time></p>
</article>
@ -232,12 +231,12 @@
</p>
</#if>
<nav role="navigation">
<ul id="footer-nav">
<li><a href="${urls.about}">About</a></li>
<ul id="footer-nav" role="list">
<li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li>
<li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
<li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul>
</nav>
</footer>

48
themes/wilma/templates/page.ftl
View file

@ -10,8 +10,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>${title}</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
${stylesheets.addFromTheme("/css/screen.css")}
<#include "stylesheets.ftl">
<#include "headScripts.ftl">
@ -22,7 +25,7 @@
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" />
<![endif]-->
</head>
<body>
@ -34,22 +37,22 @@
</#if>-->
<nav role="navigation">
<ul id="header-nav">
<ul id="header-nav" role="list">
<#if user.loggedIn>
<li><span class="pictos-arrow-10">U</span> ${user.loginName}</li>
<li><a href="${urls.logout}">Log out</a></li>
<li role="listitem"><span class="pictos-arrow-10">U</span> ${user.loginName}</li>
<li role="listitem"><a href="${urls.logout}">Log out</a></li>
<#if user.hasSiteAdminAccess>
<li><a href="${urls.siteAdmin}">Site Admin</a></li>
<li role="listitem"><a href="${urls.siteAdmin}">Site Admin</a></li>
</#if>
<#else>
<li><a title="log in to manage this site" href="${urls.login}">Log in</a></li>
<li role="listitem"><a title="log in to manage this site" href="${urls.login}">Log in</a></li>
</#if>
<#-- List of links that appear in submenus, like the header and footer. -->
<li><a href="${urls.about}">About</a></li>
<li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li>
<li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
<li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul>
</nav>
@ -57,7 +60,7 @@
<fieldset>
<legend>Search form</legend>
<form id="searchForm" action="${urls.search}" name="searchForm" role="search">
<form id="search-form" action="${urls.search}" name="search-form" role="search">
<#if user.showFlag1SearchField>
<select id="search-form-modifier" name="flag1" class="form-item" >
<option value="nofiltering" selected="selected">entire database (${user.loginName})</option>
@ -70,35 +73,28 @@
<div id="search-field">
<input type="text" name="querytext" class="search-vivo" value="${querytext!}" />
<a class ="submit" href="javascript:document.searchForm.submit();">Search</a>
<a class ="submit" href="javascript:document.search-form.submit();">Search</a>
</div>
<!-- <input class ="submit" name="submit" type="submit" value="Search" /> -->
</form>
</fieldset>
</section>
</header>
<nav role="navigation">
<ul id="main-nav">
<ul id="main-nav" role="list">
<#list tabMenu.items as item>
<li><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
<li role="listitem"><a href="${item.url}" <#if item.active> class="selected" </#if>>${item.linkText}</a></li>
</#list>
</ul>
</nav>
<div id="wrapper-content">
<div id="wrapper-content" role="main">
<#if flash?has_content>
<section id="flash-message" role="alert">
${flash}
</section>
</#if>
<#-- mb863: using for now until we have controllers page.ftl to render the templates commented below-->
<#--<#include "menupage/menupage.ftl">-->
<#--<#include "menupage/menupage--classgroup-people.ftl">-->
<#--<#include "individual/individual--generic-class.ftl">-->
<#--<#include "individual/individual--foaf-person.ftl">-->
${body}
</div> <!-- #wrapper-content -->
@ -117,12 +113,12 @@
</#if>
<nav role="navigation">
<ul id="footer-nav">
<li><a href="${urls.about}">About</a></li>
<ul id="footer-nav" role="list">
<li role="listitem"><a href="${urls.about}">About</a></li>
<#if urls.contact??>
<li><a href="${urls.contact}">Contact Us</a></li>
<li role="listitem"><a href="${urls.contact}">Contact Us</a></li>
</#if>
<li><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
<li role="listitem"><a href="http://www.vivoweb.org/support" target="blank">Support</a></li>
</ul>
</nav>
</footer>