Added new features for VITRO home page:

-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.

webapp/themes/vitro/css/vitroTheme.css

@@ -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;

webapp/themes/vitro/templates/identity.ftl

@@ -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>

webapp/themes/vitro/templates/menu.ftl

@@ -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>

webapp/themes/vitro/templates/page-home.ftl

@@ -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>

webapp/themes/vitro/templates/page.ftl

@@ -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}

webapp/web/css/login.css

@@ -59,11 +59,21 @@ p.request-account {
     font-size: .8em;
 }
 h3.internal-auth {
-    margin-left: 38px;
+    margin-left: 20px;
-    color: #5F6464;
     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;

webapp/web/js/login/loginUtils.js

@@ -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();
+    });
+    
 });

webapp/web/js/vitroUtils.js

@@ -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; 
+     });
 });

webapp/web/templates/freemarker/widgets/widget-login.ftl

@@ -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,12 +45,16 @@
        
         <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>
+                <#assign infoClassHide = 'class="vivoAccount"'/>
-                <p class="or-auth">or</p>
+            
+                <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>
             
+            <div ${infoClassHide} ${infoClassShow}>
+            
                 <label for="loginName">Email</label>
                 <input id="loginName" name="loginName" class="text-field focus" type="text" value="${loginName!}" autocapitalize="off" required autofocus />
 
@@ -53,12 +62,15 @@
                 <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 -->