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.
This commit is contained in:
Manolo Bevia
parent
3997440944
commit
c19df41bfd
9 changed files with 411 additions and 37 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -35,18 +35,4 @@
|
|||
</#if>
|
||||
</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>
|
||||
</nav>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue