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

Added new features for VITRO home page:

Browse source 
-Filtered search based in class groups (It needs to be wired. Just added HTML/CSS/JS)
-Class group stats (It needs to be wired. Just added HTML/CSS/JS)
-Improveed UX for signing when there is external authorization

Removed search box located in header in homepage.
This commit is contained in:
Manolo Bevia 2013-04-11 15:09:23 -04:00
parent 3997440944
commit c19df41bfd
9 changed files with 411 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
webapp/themes/vitro/css/vitroTheme.css
View file

@ -622,6 +622,12 @@ body.login #login {
padding-top: 18px;
border-bottom: none;
}
h3.internal-auth {
color: #5E6363;
}
h3.internal-auth:hover {
color: #47B6D0;
}
#error-alert {
margin: 0 12px;
margin-bottom: 12px;
@ -742,6 +748,106 @@ p.password-note {
margin-right:-10px;
height:34px;
}
/* SEARCH HOME------> */
#search-home {
margin-top: 2em;
}
#search-home h3 {
padding-left: 24px;
}
#search-homepage {
position: relative;
padding-left: 24px;
}
#search-home-field {
width: 530px;
height: 44px;
background: url(../images/search-field-and-button.gif) 0 0 no-repeat;
}
#search-home-field input.search {
text-decoration: none;
background-color: transparent;
color: #fff;
font-size: 18px;
border: none;
padding-left: 13px;
padding-top: 8px;
cursor: pointer;
}
span.search-filter-selected {
display: none;
}
input.search-homepage {
float: left;
height: 20px;
border: 0;
font-size: 18px;
margin-left: 4px;
margin-top: 2px;
background-color: #f9fafa;
margin-right: 40px;
margin-top: 2px;
width: 351px;
background: url('../images/limit-search.png') no-repeat;
background-position: right;
opacity: .7;
}
a.filter-search {
position: absolute;
vertical-align: middle;
display: inline-block;
width: 39px;
height: 43px;
z-index: 9999;
top: 0;
right: 135px;
z-index: 9999;
}
.filter-default {
background: url(../images/filteredSearch.gif) 0 0 no-repeat;
}
.filter-active {
background: url(../images/filteredSearchActive.gif) 0 0 no-repeat;
}
#filter-search-nav {
position: absolute;
width: 184px;
background-color: #2d3535;
color: #fff;
top: 0;
right: 135px;
background-color: #2d3535;
color: #fff;
z-index: 9998;
display: none;
list-style-type: none;
}
#filter-search-nav li {
padding-left: 0;
margin-left: 0;
list-style-type: none;
background-image: none;
}
#filter-search-nav {
z-index: 9998;
}
#filter-search-nav a.active {
color: #fff;
}
#filter-search-nav a {
font-size: 17px;
display: block;
margin-left: 15px;
margin-right: 15px;
border-bottom: 1px dotted #4f5656;
color: #fff;
padding-top: 8px;
padding-bottom: 8px;
text-decoration: none;
color: #1483A4;
}
/* BROWSE ------> */
#browse {
background-color: #f7f5f0;
@ -801,6 +907,82 @@ ul#browse-classgroups a.selected span.count-classes,
ul#browse-classgroups a:hover span.count-classes {
color: #fff;
}
/* HOME STATS-----> */
#home-stats {
margin-top: 1em;
width: 921px;
height: 213px;
border-top: 1px dotted #dbe3e3; /* stroke */
border-bottom: 1px dotted #dbe3e3; /* stroke */
background-color: #fff; /* layer fill content */
float: left;
}
#home-stats h4 {
margin-top: 0;
width: 64px;
height: 34px;
border-top: 1px solid rgba(220,228,227,.42); /* stroke */
border-bottom: 1px solid rgba(220,228,227,.42); /* stroke */
background-color: #395d7f; /* layer fill content */
border-bottom: 2px solid #62b6d7;
color: #fff;
font-size: 18px;
text-align: center;
margin-left: 35px;
padding: 0;
line-height: 35px;
}
#stats {
margin: 0 auto;
width: 875px;
}
#stats li {
float: left;
width: 108px;
height: 102px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background: #5e6363 url(../images/stats-bg.png) repeat-x 0 0;
color: #fff;
margin-top: 35px;
margin-right: 25px;
}
#stats p {
color: #fff;
}
#stats li a {
text-decoration: none;
}
#stats li a:hover {
opacity: .5;
}
#stats li:first-child {
margin-left: 50px;
}
#stats .stats-count {
text-align: center;
font-size: 42px;
margin: 0;
padding-top: 30px;
}
#stats .stats-count span {
color: #fff;
font-size: 18px;
padding-left: 2px;
opacity: .5;
}
#stats .stats-type {
font-size: 13px;
text-align: center;
margin: 0;
margin-top: 13px;
}
/* FOOTER------> */
footer {
clear: both;

14
webapp/themes/vitro/templates/identity.ftl
View file

@ -36,17 +36,3 @@
</ul>
</nav>
<section id="search" role="region">
<fieldset>
<legend>Search form</legend>
<form id="search-form" action="${urls.search}" name="search" role="search" accept-charset="UTF-8" method="POST">
<div id="search-field">
<input type="text" name="querytext" class="search-vitro" value="${querytext!}" autocapitalize="off" />
<input type="submit" value="Search" class="search">
</div>
</form>
</fieldset>
</section>
</header>

2
webapp/themes/vitro/templates/menu.ftl
View file

@ -1,5 +1,7 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
</header>
<nav role="navigation">
<ul id="main-nav" role="list">
<#list menu.items as item>

43
webapp/themes/vitro/templates/page-home.ftl
View file

@ -26,11 +26,52 @@
<li>Build a public web site to display your data</li>
<li>Search your data</li>
</ul>
<section id="search-home" role="region">
<h3>Search VITRO <span class="search-filter-selected">filteredSearch</span></h3>
<fieldset>
<legend>Search form</legend>
<form id="search-homepage" action="${urls.search}" name="search-home" role="search" method="post" >
<div id="search-home-field">
<input type="text" name="querytext" class="search-homepage" value="${querytext!}" autocapitalize="off" />
<input type="submit" value="Search" class="search" />
</div>
<a class="filter-search filter-default" href="#" title="Filter search"><span class="displace">filter search</span></a>
<ul id="filter-search-nav">
<li><a class="active" href="">All</a></li>
<li><a href="">People</a></li>
<li><a href="">Organizations</a></li>
<li><a href="">Research</a></li>
<li><a href="">Events</a></li>
<li><a href="">Topics</a></li>
</ul>
</form>
</fieldset>
</section> <!-- #search-home -->
</section> <!-- #intro -->
<@widget name="login" />
<@allClassGroups vClassGroups! />
<#--<@allClassGroups vClassGroups! />-->
<section id="home-stats">
<h4>Stats</h4>
<ul id="stats">
<li><a href="#"><p class="stats-count">19<span>k</span></p><p class="stats-type">People</p></a></li>
<li><a href="#"><p class="stats-count">128<span>k</span></p><p class="stats-type">Research</p></a></li>
<li><a href="#"><p class="stats-count">22<span>k</span></p><p class="stats-type">Organizations</p></a></li>
<li><a href="#"><p class="stats-count">29<span>k</span></p><p class="stats-type">Events</p></a></li>
<li><a href="#"><p class="stats-count">1.9<span>k</span></p><p class="stats-type">Topics</p></a></li>
<li><a href="#"><p class="stats-count">6.5<span>k</span></p><p class="stats-type">Activities</p></a></li>
</ul>
</section>
<#include "footer.ftl">
</body>

13
webapp/themes/vitro/templates/page.ftl
View file

@ -11,6 +11,19 @@
<body class="${bodyClasses!}">
<#include "identity.ftl">
<section id="search" role="region">
<fieldset>
<legend>Search form</legend>
<form id="search-form" action="${urls.search}" name="search" role="search" accept-charset="UTF-8" method="POST">
<div id="search-field">
<input type="text" name="querytext" class="search-vitro" value="${querytext!}" autocapitalize="off" />
<input type="submit" value="Search" class="search">
</div>
</form>
</fieldset>
</section>
<#include "menu.ftl">
${body}

14
webapp/web/css/login.css
View file

@ -59,11 +59,21 @@ p.request-account {
font-size: .8em;
}
h3.internal-auth {
margin-left: 38px;
color: #5F6464;
margin-left: 20px;
font-size: 1em;
margin-bottom: 0;
padding-bottom: 0;
text-decoration: none;
cursor: hand;
cursor: pointer;
text-align: center;
line-height: 1.4em;
}
.vivoAccount {
display: none;
}
#vivoAccountError {
display: block;
}
.formFieldAlert {
border: 2px solid #900;

5
webapp/web/js/login/loginUtils.js
View file

@ -11,4 +11,9 @@ $(document).ready(function(){
// fade in error alerts
$('section#error-alert').css('display', 'none').fadeIn(1500);
// toggle vivo account authentication form
$('h3.internal-auth').click(function() {
$('.vivoAccount').toggle();
});
});

123
webapp/web/js/vitroUtils.js
View file

@ -9,4 +9,127 @@ $(document).ready(function(){
// fade in flash-message when user logs out
jQuery('section#flash-message').css('display', 'none').fadeIn(1500);
/////////////////////////////
// Home search fiter
// Toggle filter select list
var $searchFilterList = $('#filter-search-nav');
var $selectedFilter;
var $queryToSend;
var $queryToSendAll = true;
var $isFilterOpen = false;
console.log("Filter is open = " + $isFilterOpen);
$('a.filter-search').click(function(e) {
e.preventDefault();
if (!$isFilterOpen) {
console.log("Filer is close = " + $isFilterOpen);
//Change button filter state to selected
//$(this).css('background','url(../../themes/vivo-cornell/images/filteredSearchActive.gif) no-repeat right top');
$(this).removeClass('filter-default');
$(this).addClass('filter-active');
//Reveal filter select list
$searchFilterList.css('display','block');
$isFilterOpen = true;
console.log("open");
} else {
//Change button filter state to default
//$('a.filter-search').css('background','url(../../themes/vivo-cornell/images/filteredSearch.gif) no-repeat right top');
$(this).removeClass('filter-active');
$(this).addClass('filter-default');
//Hide filter select list
$searchFilterList.css('display','none');
$isFilterOpen = false;
console.log("close");
}
});
// Collect users' selection
$('#filter-search-nav li').each(function(index){
$(this).click(function(ev){
ev.preventDefault();
if ($(this).text() == 'All') {
$queryToSendAll = true;
//Selected filter feedback
$('.search-filter-selected').text('');
console.log("ALL");
} else {
//Selected filter feedback
$('.search-filter-selected').text($(this).text()).fadeIn('slow');
$queryToSendAll = false;
}
//Hide filter select list
$searchFilterList.css('display','none');
//Change button filter state to default
//$('a.filter-search').css('background','url(../../themes/vivo-cornell/images/filteredSearch.gif) no-repeat right top');
$('a.filter-search').removeClass('filter-active');
$('a.filter-search').addClass('filter-default');
$selectedFilter = $(this).text();
$isFilterOpen = false;
console.log("$queryToSend " + $selectedFilter);
});
});
//When focus, hide filter select list and change filter button state to default
$('input.search-homepage').focus(function(){
$('input.search-homepage').css({
'background' : 'none',
'opacity' : 1
});
if (!$isFilterOpen) {
$isFilterOpen = false;
}else {
//Hide filter select list
$('#filter-search-nav').hide();
//Change button filter state to default
//$('a.filter-search').css('background','url(../../themes/vivo-cornell/images/filteredSearch.gif) no-repeat right top');
$('a.filter-search').removeClass('filter-active');
$('a.filter-search').addClass('filter-default');
$isFilterOpen = false;
}
console.log("HIDE input value ") ;
});
$('#search-homepage').submit(function(){
if ($queryToSendAll) {
$filterType = '';
}else {
$filterType = '&classgroup=http://vivoweb.org/ontology/vitroClassGroup' + $selectedFilter;
}
$queryToSend = 'querytext=' + $('input.search-homepage').val() + $filterType;
console.log("Query to send: " + $queryToSend);
return false;
});
});

40
webapp/web/templates/freemarker/widgets/widget-login.ftl
View file

@ -15,6 +15,9 @@
</#macro>
<#macro loginForm>
<#assign infoClassHide = ''/>
<#assign infoClassShow = ''/>
<#-- Don't display the JavaScript required to edit message on the home page even if JavaScript is unavailable -->
<#if currentServlet != 'home'>
<noscript>
@ -33,6 +36,8 @@
</#if>
<#if errorMessage??>
<#assign infoClassShow = ' id="vivoAccountError"'/>
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alert="Error alert icon" />
<p class="login-alert">${errorMessage}</p>
</section>
@ -40,25 +45,32 @@
<form role="form" id="login-form" action="${formAction}" method="post" name="login-form" />
<#if externalAuthUrl??>
<p class="external-auth"><a class="blue button" href="${externalAuthUrl}" title="external authentication name">${externalAuthName}</a></p>
<p class="or-auth">or</p>
<#assign infoClassHide = 'class="vivoAccount"'/>
<p class="external-auth"><a class="blue button" href="${externalAuthUrl}" title="external authentication name">${externalAuthName}</a></p>
<!--<p class="or-auth">or</p>-->
<h3 class="internal-auth"><!--Log in using your--> <b>or</b> ${siteName} account</h3>
<h3 class="internal-auth" >Log in using your ${siteName} account</h3>
</#if>
<label for="loginName">Email</label>
<input id="loginName" name="loginName" class="text-field focus" type="text" value="${loginName!}" autocapitalize="off" required autofocus />
<div ${infoClassHide} ${infoClassShow}>
<label for="loginPassword">Password</label>
<input id="loginPassword" name="loginPassword" class="text-field" type="password" required />
<label for="loginName">Email</label>
<input id="loginName" name="loginName" class="text-field focus" type="text" value="${loginName!}" autocapitalize="off" required autofocus />
<p class="submit"><input name="loginForm" class="green button" type="submit" value="Log in"/></p>
<#-- NC: remember me won't be ready for r1.2
<input class="checkbox-remember-me" name="remember-me" type="checkbox" value="" />
<label class="label-remember-me" for="remember-me">Remember me</label> -->
<#-- mb863: forgot password and request an account won't be part of VIVO r1.2
<p class="forgot-password"><a href="#" title="forgot password">Forgot your password?</a></p>
<p class="request-account"><a class="blue button" href="#" title="request an account">Request an account</a> </p> -->
<label for="loginPassword">Password</label>
<input id="loginPassword" name="loginPassword" class="text-field" type="password" required />
<p class="submit"><input name="loginForm" class="green button" type="submit" value="Log in"/></p>
<#-- NC: remember me won't be ready for r1.2
<input class="checkbox-remember-me" name="remember-me" type="checkbox" value="" />
<label class="label-remember-me" for="remember-me">Remember me</label> -->
<#-- mb863: forgot password and request an account won't be part of VIVO r1.2
<p class="forgot-password"><a href="#" title="forgot password">Forgot your password?</a></p>
<p class="request-account"><a class="blue button" href="#" title="request an account">Request an account</a> </p> -->
</div>
</form>
</section><!-- #log-in -->