tonyair/silverstripe-simple
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-simple synced 2024-10-22 11:05:50 +02:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT overlapping menu, css, search-results styling

Browse Source
This commit is contained in:
Sara Tusar 2012-05-09 17:16:21 +02:00
parent 770ffce7d4
commit a3dc1471cd
9 changed files with 140 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
css/layout.css
View File

@ -1,4 +1,4 @@
header:after, .main:after, #Root:after {height:0;content:".";display:block;clear:both;visibility:hidden;} header:after, .main:after, #Root:after, .search-bar:after, header .inner:after {height:0;content:".";display:block;clear:both;visibility:hidden;}
body{margin:0; background:#ededed; min-width:240px;-webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;} body{margin:0; background:#ededed; min-width:240px;-webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;}
.ie7 body, .ie8 body{min-width:860px;} .ie7 body, .ie8 body{min-width:860px;}
@ -14,7 +14,7 @@ a.btn:hover{background:#d80000; color:#fff;}
.content ul{margin:20px 0 20px 30px;} .content ul{margin:20px 0 20px 30px;}
.content li{line-height:22px; margin-bottom:5px; list-style-type:disc;} .content li{line-height:22px; margin-bottom:5px; list-style-type:disc;}
.content-container h1{font-size:36px; border-bottom:1px solid #e5e5e5; padding-bottom:7px; margin:0 0 23px 0;} .content-container h1 {font-size:36px; border-bottom:1px solid #e5e5e5; padding-bottom:6px; margin:0 0 23px 0; line-height:45px;}
.content-container h1 span.amp{font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-style:italic;} .content-container h1 span.amp{font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-style:italic;}
.content-container h2{font-size:25px; margin-bottom:15px; padding-top:15px;} .content-container h2{font-size:25px; margin-bottom:15px; padding-top:15px;}
.content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;} .content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;}
@ -24,59 +24,40 @@ a.btn:hover{background:#d80000; color:#fff;}
.brand h1{margin:0; padding:0; font-size:50px; font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color:#fff; font-weight:600; font-stretch:normal; line-height:1em;} .brand h1{margin:0; padding:0; font-size:50px; font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color:#fff; font-weight:600; font-stretch:normal; line-height:1em;}
.brand, .brand:hover{color:#fff;} .brand, .brand:hover{color:#fff;}
/* Log in Form */ .search-bar form input.action, .header .primary li a, .footer a{-moz-transition:color 0.2s; -webkit-transition:color 0.2s; transition:color 0.2s;}
#MemberLoginForm_LoginForm fieldset { border:none; padding-left:0px;}
#MemberLoginForm_LoginForm fieldset #Email label {margin-top:7px;}
#MemberLoginForm_LoginForm fieldset #Email input.text {border:1px solid #e5e5e5; border-radius:4px; color:#888; background:#ededed; margin:0;}
#MemberLoginForm_LoginForm fieldset #Email input.text:focus {outline:none; background:#fff;}
#MemberLoginForm_LoginForm fieldset #Password label {margin-top:7px;}
#MemberLoginForm_LoginForm fieldset #Password input.text {border:1px solid #e5e5e5; border-radius:4px; color:#888; background:#ededed; margin:0;}
#MemberLoginForm_LoginForm fieldset #Password input.text:focus {outline:none; background:#fff;}
#MemberLoginForm_LoginForm .Actions input {cursor:pointer; text-align:center; color:#fff; background-color:#888; border:none; border-radius:4px; font-size: 13px;
font-weight: bold; margin: 5px 0; padding:5px; font-family:"HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;}
/* Search Form */ /* Search Form */
.search-bar {position:absolute; right:0; top:18px; max-width: 1100px; margin: 0 auto; padding: 0 30px 0 0;} .search-bar {position:absolute; right:30px; top:32px;}
.search-dropdown-icon {display:none;} .search-dropdown-icon {display:none;}
.search-bar .search-bubble-arrow {display:none;} .search-bar form fieldset {position:relative; padding:0; margin:0;}
.search-bar form {margin:10px 0 0 0; float:right; width:200px;} .search-bar form input.text {width:155px; padding-left:10px; padding-right:35px; color:#888; margin:0; border:none; border-radius:20px; background:#fff; font-family:Arial, Helvetica, sans-serif;}
.search-bar form fieldset {position:relative; padding:0; margin:0; border:none;} .search-bar form input.active{color:#000;}
.search-bar form div.field {margin:0;} .search-bar form input.action {font-size:15px; position:absolute; right:3px; top:-1px; cursor:pointer; border:none; padding:5px; background:none;font-family:'WebSymbolsRegular'; color:#848484;}
.search-bar form div.field .middleColumn {float:none; width:100%; position:relative;} .search-bar form input.action:hover {color:#000;}
.search-bar form input.text {width:155px; padding-left:10px; padding-right:35px; color:#888; margin:0; border:0px; border-radius:20px; background:#fff; border:1px solid #161616;}
.search-bar form input.action {display:block; font-size:0; line-height:0; background:transparent url(../images/search-icon.png) 5px 6px no-repeat; text-indent:-9999em; position:absolute; right:0px; cursor:pointer; height:32px; width:35px; border:none;
border-top-left-radius:4px; border-bottom-left-radius:4px; padding:0;}
.search-bar form input.action:active {background:transparent url(../images/search-icon-active.png) 5px 6px no-repeat;}
.search-bar form input:focus, .header textarea:focus {outline:none;} .search-bar form input:focus, .header textarea:focus {outline:none;}
/* navigation visible when menu items overflow the 1100px width and when users don't have javascript enabled*/ .header .primary ul{float:right; margin:23px -12px 0 0;}
.header .primary li{float:left; padding-bottom:20px; margin:0 5px; position:relative; white-space:nowrap;}
.header .primary ul {float:right; margin:24px -15px 0 0; white-space:normal; padding:0;} .header .primary li a{color:#888; font-size:15px; font-family:Helvetica, Arial, sans-serif; padding:6px 8px; font-weight:bold; display:block; }
.header .primary ul li{float:left; margin:0 0 10px 6px; padding-bottom:0; background-image:none; list-style-type:none;} .header .primary li a:hover{color:#fff;}
.header .primary ul li.current a, .header .primary ul li.section a{background-color:#525252;}
.header .primary li a{letter-spacing:1px; color:#888; font-size:15px; font-family:Helvetica, Arial, sans-serif; padding:6px 8px; border-radius:4px; font-weight:bold; display:block; -moz-transition:color 0.2s; -webkit-transition:color 0.2s; transition:color 0.2s;}
.header .primary li a:hover{color:#fff;}
.header .primary li .nav-arrow {display:none;}
.header .primary li.section a, .header .primary li.current a{color:#fff;} .header .primary li.section a, .header .primary li.current a{color:#fff;}
.header .primary li.section:after, .header .primary li.current:after{content:'}'; display:block; position:absolute; left:50%; margin-left:-7px; bottom:-6px; font-family:'WebSymbolsRegular'; font-size:28px; color:#fff; text-align:center; line-height:20px;}
/* fancy javascript initiated menu - for when menu items fit within the 1100px width (nowrap)*/
/* when navigation and logo overlap tablet-nav is initialized */
.header .primary ul.standard-nav{float:right; margin:24px -15px 0 0; white-space:nowrap;} .tablet-nav .header .inner{padding-top:20px;}
.header .primary ul.standard-nav .menu-bubble-arrow {display:none;} .tablet-nav .header .primary ul {float:left; clear:both; margin:20px 0 4px -12px; white-space:nowrap;}
.header .primary .standard-nav li{float:left; padding-bottom:20px; margin:0 5px;} .tablet-nav .header .primary ul li{margin-bottom:10px; padding-bottom:0; white-space:nowrap;}
.header .primary .standard-nav li .nav-arrow {display:none;} .tablet-nav .header .primary ul li a{-moz-transition:none; -webkit-transition:none; transition:none;}
.header .primary .standard-nav li.section, .header .primary li.current {background:url(../images/selected.png) center bottom no-repeat;} .tablet-nav .header .primary ul li.current a, .tablet-nav .header .primary ul li.section a{background-color:#525252; border-radius:4px;}
.header .primary ul.standard-nav li.current a, .header .primary ul.standard-nav li.section a {background:none;} .tablet-nav .header .primary li.section:after, .tablet-nav .header .primary li.current:after{display:none;}
.tablet-nav .footer .right{float:left; width:100%;}
.header .nav-open-button {display:none;} .header .nav-open-button {display:none;}
.inner{max-width:1100px; margin:0 auto; padding:0 30px;} .inner{max-width:1100px; margin:0 auto; padding:0 30px;}
.ie6 .inner {width:960px;} .ie6 .inner {width:960px;}
.main{background:#fff; padding:50px 0 60px;} .main{background:#fff; padding:50px 0 60px;}
aside{float:left; width:20%; margin-top:17px;} aside{float:left; width:23%; margin-top:17px;}
.secondary h3{font-size:20px; color:#b8b7b7; margin:0 0 8px 0;} .secondary h3{font-size:20px; color:#b8b7b7; margin:0 0 8px 0;}
.secondary {border-bottom:1px solid #e5e5e5;} .secondary {border-bottom:1px solid #e5e5e5;}
@ -86,73 +67,73 @@ aside{float:left; width:20%; margin-top:17px;}
.secondary li:hover .arrow{left:6px;} .secondary li:hover .arrow{left:6px;}
.secondary li a{padding:8px 0; display:block; width:100%; text-transform:uppercase; letter-spacing:2px; font-size:11px; color:#333; line-height:17px; font-family:'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;} .secondary li a{padding:8px 0; display:block; width:100%; text-transform:uppercase; letter-spacing:2px; font-size:11px; color:#333; line-height:17px; font-family:'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;}
.secondary li .text {padding-left:28px; display:block;} .secondary li .text {padding-left:28px; display:block;}
.secondary li.section, .secondary li.current{background-color:#f9f9f9;} .secondary li.section, .secondary li.current{background-color:#f7f7f7;}
.secondary li.section a, .secondary li.current a{color:#000;} .secondary li.section a, .secondary li.current a{color:#000;}
.content-container{float:right; width:75%; padding-bottom:20px;} .content-container{float:right; width:73%; padding-bottom:20px;}
.no-sidebar .content-container{float:left;} .no-sidebar .content-container{float:left;}
.header{background:#161616;} .header{background:#161616;}
.header .inner{padding-top:55px; position:relative;} .header .inner{padding-top:55px; position:relative;}
/* Search Results */ /* Search Results */
.searchResults h1 { font-size:36px; margin-bottom:15px;} .searchResults h1 { font-size:36px; margin-bottom:15px;}
.searchResults p.searchQuery {color:#333; margin-bottom:10px;} .searchResults p.searchQuery {color:#333; margin-bottom:10px;}
.searchResults ul#SearchResults {padding:0;}
.searchResults ul#SearchResults {padding:0px;} .searchResults ul#SearchResults li {border-top:1px solid #e5e5e5; padding:20px 0; list-style-type:none;}
.searchResults ul#SearchResults li {border-top:1px solid #e5e5e5; padding:20px 0 0 20px; margin-bottom:20px; list-style-type:none;} .searchResults ul#SearchResults p {margin-bottom:12px;}
.searchResults ul#SearchResults p {font-size:1.1em; font-weight:normal; line-height:2em;} .searchResults ul#SearchResults a.searchResultHeader {font-size:16px; font-weight:bold; margin-bottom:6px; display:block;}
.searchResults ul#SearchResults a.searchResultHeader {font-size:1.3em; font-weight:bold; text-decoration:none; margin:20px 0 8px 0;} .searchResults #PageNumbers {border-top:1px solid #e5e5e5; padding-top:20px;}
.searchResults ul#SearchResults a {text-decoration:none;} .searchResults #PageNumbers a{padding:0 5px;}
.searchResults #PageNumbers {border-top:1px solid #e5e5e5;padding-top:20px;}
.searchResults #PageNumbers .pagination {float:left;} .searchResults #PageNumbers .pagination {float:left;}
.searchResults #PageNumbers p {float:right;} .searchResults #PageNumbers p {float:right;}
.searchResults #PageNumbers .next {margin-left:20px;} .searchResults #PageNumbers .next, .searchResults #PageNumbers .prev{font-size:14px;}
.searchResults #PageNumbers .prev {margin-right:20px;} .searchResults #PageNumbers .next {margin-left:15px;}
.searchResults #PageNumbers .prev {margin-right:15px;}
/* Footer */ /* Footer */
.footer{color:#999; background:#ededed; padding:20px 0; font-size:11px; line-height:22px;} .footer{color:#999; background:#ededed; padding:20px 0; font-size:11px; line-height:22px;}
.footer a{color:#999;} .footer a{color:#999;}
.footer .left{float:left; color:#000; display:block; margin-bottom:20px;} .footer a:hover{color:#000;}
.footer .left{float:left; color:#000; display:block; margin-bottom:10px;}
.footer .right{float:right; display:block;} .footer .right{float:right; display:block;}
.footer span{padding:0 3px; color:#bbb;} .footer span{padding:0 3px; color:#bbb;}
.footer .primary, .footer .primary ul{display:inline; margin:0; padding:0;} .footer .primary, .footer .primary ul{display:inline; margin:0; padding:0;}
.footer .primary li{display:inline;} .footer .primary li{display:inline;}
/*.ie6 .footer .primary li, .ie7 .footer .primary li{display:inline; zoom:1; margin-right:10px;}*/ .ie6 .footer .primary li, .ie7 .footer .primary li{display:inline; zoom:1; margin-right:10px;}
.footer .primary li:after{padding:0 3px 0 5px; content:'/'; color:#999;} .footer .primary li:after{padding:0 3px 0 5px; content:'/'; color:#999;}
.footer .primary li:last-child:after{content:'';} .footer .primary li:last-child:after{content:'';}
.footer .arrow{padding:0 8px 0 5px; color:#b80000; font-size:13px;} .footer .arrow{padding:0 8px 0 5px; color:#b80000; font-size:13px;}
.footer .primary .nav-open-button {display:none;} .footer .primary .nav-open-button {display:none;}
.footer .primary ul#nav .menu-bubble-arrow {display:none;} .footer .primary ul#nav .menu-bubble-arrow {display:none;}
#media-query-trigger{display:none; visibility:hidden;}
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.content img{width:97%; height:auto; margin:0 0 20px;} .content img{width:97%; height:auto; margin:0 0 20px;}
.header .primary ul {margin-left:-12px; -webkit-padding-start: 0px;} .header .primary ul {margin-left:-12px; -webkit-padding-start: 0px;}
} }
@media only screen and (max-width: 700px) { /* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) {
#media-query-trigger{ visibility:visible;}
.brand{float:none; display:inline-block; margin-left:22px; margin-bottom:24px;} .brand{float:none; display:inline-block; margin-left:22px; margin-bottom:24px;}
.brand h1{font-size:40px;} .brand h1{font-size:40px;}
.header {padding:0px;} .header {padding:0px;}
.header .inner{padding:20px 0 0 0;} .header .inner{padding:20px 0 0 0;}
.header .primary {}
.header .primary .nav-open-button {z-index:100; width:20px; height:20px; position:absolute; right:20px; top:30px; display:block; cursor:pointer; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed;} .header .primary .nav-open-button {z-index:100; width:20px; height:20px; position:absolute; right:20px; top:30px; display:block; cursor:pointer; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed;}
.header .primary ul {z-index:10; position:relative; background:#e5e5e5; display:none; float:left; margin:0; padding:0; width:100%; white-space:normal; } .header .primary ul {z-index:10; position:relative; display:none; float:left; margin:0 !important; padding:0; white-space:normal; width:100%;}
.header .primary ul#nav li {border-radius:0; width:100%; margin:0; float:none; background:none; position:relative;} .header .primary ul li {width:100%; margin:0 !important; float:none; background:none; position:relative; text-shadow:0 1px #fff;}
.header .primary ul#nav li .nav-arrow {display:block; position:absolute; right:20px; top:0px; font-family:'WebSymbolsRegular'; font-size:12px; color:#999; text-align:center; vertical-align:middle; line-height:38px;} .header .primary ul li:after {content:'\003e'; display:block; position:absolute; right:20px; top:0px; font-family:'WebSymbolsRegular'; font-size:14px; color:#999; text-align:center; vertical-align:middle; line-height:38px;}
.header .primary ul#nav li:last-child a {border-bottom:none;} .header .primary ul li a, .header .primary ul li.current a, .header .primary ul li.section a{padding:10px 0 10px 22px; font-weight:bold; border-bottom:1px solid #bbb; color:#434343; border-radius:0 !important; background:#e7e7e7 !important;}
.header .primary ul#nav li a {border-radius:0; padding:10px 0 10px 22px; font-weight:normal; border-bottom:1px solid #bbb;} .header .primary ul li a:hover{color:inherit;}
.header .primary ul#nav li a:hover {color:#525252;}
.header .primary ul#nav li.current a, .header .primary ul#nav li.section a{background-color:#999; color:#fff;}
.header .primary ul#nav li.current .nav-arrow, .header .primary ul#nav li.section .nav-arrow {display:none;}
/* Search Form */ /* Search Form */
.search-bar {width:100%; position:relative; top:0; right:0; display:none; padding:20px 0; height:32px; margin:0; background-color:#ededed;} .search-bar {width:100%; position:relative; top:0; right:0; display:none; padding:20px 0; margin:0; background-color:#E7E7E7;}
.search-dropdown-icon {display:block; cursor:pointer; width:20px; height:20px; position:absolute; right:60px; top:32px; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-align:center; line-height:20px;} .search-dropdown-icon {display:block; cursor:pointer; width:20px; height:20px; position:absolute; right:60px; top:32px; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-align:center; line-height:20px;}
.search-bar .search-bubble-arrow {display:block; height:20px; width:20px;position:absolute; right:62px; top:-12px; font-family:'WebSymbolsRegular'; font-size:20px; color:#e5e5e5; text-align:center; line-height:20px;} .search-bar form {margin:0; width:100%;}
.search-bar form {display:none; margin:0; height:32px;} .search-bar form fieldset {padding:0 18px; left:0; right:0; position:relative;}
.search-bar form fieldset {padding:0 18px; position:absolute; left:0; right:0;} .search-bar div.field{margin-bottom:0;}
.search-bar form input.text {width:auto; position:absolute; right:0; left:0; border:1px solid #e5e5e5; background:#fff;} .search-bar form input.text {width:93%; padding:8px 7% 8px 0; text-indent:15px; position:relative; display:block; right:0; left:0; border:1px solid #e5e5e5; background:#fff; font-size:17px;}
.search-bar form input.action {right:20px;} .search-bar form input.action {right:24px; top:2px; font-size:18px;}
/* Main Content */ /* Main Content */
.main{padding:20px 0 45px;} .main{padding:20px 0 45px;}
@ -161,11 +142,13 @@ aside{float:left; width:20%; margin-top:17px;}
.content-container p{font-size:14px; line-height:23px;} .content-container p{font-size:14px; line-height:23px;}
p.intro{font-size:19px; line-height:27px;} p.intro{font-size:19px; line-height:27px;}
.main .inner{padding:0 22px;} .main .inner{padding:0 22px;}
/* Secondry Nav */ /* Secondry Nav */
.secondary li a{line-height:24px;} .secondary li a{line-height:24px;}
.secondary li .arrow{line-height:26px;} .secondary li .arrow{line-height:26px;}
/* Footer */ /* Footer */
.footer .right{float:left; padding-top:14px; width:100%;} .footer .right{float:left; width:100%;}
} }

BIN
images/search-icon-active.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 392 B

BIN
images/search-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 383 B

BIN
images/selected.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 168 B

143
javascript/script.js
View File

@ -2,81 +2,86 @@ jQuery.noConflict();
(function($) {     (function($) {    
   $(document).ready(function() {    $(document).ready(function() {
        var searchBarButton = $("span.search-dropdown-icon");
/* turns on specific styling when main nav items are less than the width of the header otherwise it defaults to mediaquery multiline styling */ var searchBar = $('div.search-bar');
function toggleNavigationClassByWidth(){ var menuButton = $("span.nav-open-button");
           var primaryNavigation = $('.primary').first(); var menu = $('.header .primary ul');
           var mainNavigation = $(primaryNavigation).find('ul').first(); var mobile = false;
var changed = false;
           if(primaryNavigation.outerWidth() > mainNavigation.outerWidth()) {
              mainNavigation.addClass("standard-nav"); //if the nav ul fits within its container the standard styling is applied $('body').append('<div id="media-query-trigger"></div>');
           }
           else { function menuWidthCheck() {
              mainNavigation.removeClass("standard-nav"); var header_w = $('header .inner').width();
           } var elements_w = menu.width() + $('.brand').width();
       }
        if ((header_w < elements_w) || ($(window).width() <= 768)) {
       var resizeTimer; //constantly checks for the size of the browser window so correct style is applied. $('body').addClass('tablet-nav');
       $(window).resize(function(){ }
           clearTimeout(resizeTimer); else {
           resizeTimer = setTimeout(toggleNavigationClassByWidth, 100); $('body').removeClass('tablet-nav');
       }).load(function(){ }
           clearTimeout(resizeTimer);
           resizeTimer = setTimeout(toggleNavigationClassByWidth, 100); mobile_old = mobile;
       }); if ($('#media-query-trigger').css('visibility') == 'hidden') {
mobile = false;
/* show/hide search form when window width less than 700px */ }
$('span.search-dropdown-icon').on('click',function() { else {
if ($(window).width() < 700) { // checks for width of window - if it is less than 700px mobile = true;
if ($('div.search-bar').is(":hidden")){ //checks if ul#nav is hidden }
$('div.search-bar').slideDown('fast'); // slides the Search bar down
$('div.search-bar form').fadeIn(500); // Fades the Search form in if (mobile_old != mobile) {
return false; changed = true;
} else { }
$('div.search-bar').slideUp('fast'); // slides the Search bar up else {
$('div.search-bar form').hide(); // Fades the Search form out changed = false;
return false; }
}
menuWidthCheck();
$(window).resize(function() {
console.log($(window).innerWidth());
menuWidthCheck();
if (!mobile) {
menu.show();
searchBar.show();
}
else {
if (changed) {
menu.hide();
searchBar.hide();
} }
} }
}); });
/* show/hide main nav menu when window width less than 700px */ /* toggle navigation and search in mobile view */
$('span.nav-open-button').on('click',function() { searchBarButton.click(function() {
if ($(window).width() < 700) { // checks for width of window - if it is less than 700px menu.slideUp();
if ($('ul#nav').is(":hidden")){ //checks if ul#nav is hidden searchBar.slideToggle('fast');
$('ul#nav').slideDown('fast'); // slides the nav menu down
$('header span.menu-bubble-arrow').show(); // shows the nav menu arrow
return false;
} else {
$('ul#nav').slideUp('fast'); // slides the nav menu up
$('header span.menu-bubble-arrow').removeAttr("style"); // hides the nav menu arrow
return false;
}
}
});
/* clears any inline styles when window is resized above 700px */
$(window).resize(function () {
if ($(this).width() >= 700) {
$('div.search-bar').removeAttr("style");
$('ul#nav').removeAttr("style");
$('div.search-bar form').removeAttr("style");
$('span.search-bubble-arrow').removeAttr("style");
}
}); });
menuButton.click(function() {
searchBar.slideUp();
menu.slideToggle('fast');
});
/* removes text from search form on focus and replaces it on unfocus - if text is entered then it does not get replaced with default on unfocus */ /* removes text from search form on focus and replaces it on unfocus - if text is entered then it does not get replaced with default on unfocus */
$('#SearchForm_SearchForm_Search').each(function() { $('#SearchForm_SearchForm_action_results').val('L');
var default_value = this.value; var searchField = $('#SearchForm_SearchForm_Search');
$(this).focus(function() { var default_value = searchField.val();
if(this.value == default_value) { searchField.focus(function() {
this.value = ''; $(this).addClass('active');
} if(searchField.val() == default_value) {
}); searchField.val('');
$(this).blur(function() { }
if(this.value == '') { });
this.value = default_value; searchField.blur(function() {
} if(searchField.val() == '') {
}); searchField.val(default_value);
}); }
});
   });    });
}(jQuery)); }(jQuery));

1
templates/Includes/Header.ss
View File

@ -7,7 +7,6 @@
<span class="search-dropdown-icon">L</span> <span class="search-dropdown-icon">L</span>
<div class="search-bar"> <div class="search-bar">
$SearchForm $SearchForm
<span class="search-bubble-arrow">}</span>
</div> </div>
<% end_if %> <% end_if %>
<% include Navigation %> <% include Navigation %>

4
templates/Includes/Navigation.ss
View File

@ -1,8 +1,8 @@
<nav class="primary"> <nav class="primary">
<span class="nav-open-button">²</span> <span class="nav-open-button">²</span>
<ul id="nav"> <ul>
<% loop Menu(1) %> <% loop Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a><span class="nav-arrow"> > </span></li> <li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
<% end_loop %> <% end_loop %>
</ul> </ul>
</nav> </nav>

4
templates/Layout/Page_results.ss
View File

@ -29,7 +29,7 @@
<div id="PageNumbers"> <div id="PageNumbers">
<div class="pagination"> <div class="pagination">
<% if Results.NotFirstPage %> <% if Results.NotFirstPage %>
<a class="prev" href="$Results.PrevLink" title="View the previous page">←</a> <a class="prev" href="$Results.PrevLink" title="View the previous page">&larr;</a>
<% end_if %> <% end_if %>
<span> <span>
<% control Results.Pages %> <% control Results.Pages %>
@ -41,7 +41,7 @@
<% end_control %> <% end_control %>
</span> </span>
<% if Results.NotLastPage %> <% if Results.NotLastPage %>
<a class="next" href="$Results.NextLink" title="View the next page">→</a> <a class="next" href="$Results.NextLink" title="View the next page">&rarr;</a>
<% end_if %> <% end_if %>
</div> </div>
<p>Page $Results.CurrentPage of $Results.TotalPages</p> <p>Page $Results.CurrentPage of $Results.TotalPages</p>

10
templates/Page.ss
View File

@ -11,15 +11,15 @@ Change it, enhance it and most importantly enjoy it!
<!--<![endif]--> <!--<![endif]-->
<!--[if IE 6 ]><html lang="$ContentLocale" class="ie ie6"><![endif]--> <!--[if IE 6 ]><html lang="$ContentLocale" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="$ContentLocale" class="ie ie7"><![endif]--> <!--[if IE 7 ]><html lang="$ContentLocale" class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="$ContentLocale" class="ie ie8"><![endif]--> <!--[if IE 8 ]><html lang="$ContentLocale" class="ie ie8"><![endif]--><head>
<head>
<% base_tag %> <% base_tag %>
<title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title> <title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
$MetaTags(false) $MetaTags(false)
<link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
<link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
@ -33,7 +33,7 @@ Change it, enhance it and most importantly enjoy it!
</div> </div>
</div> </div>
<% include Footer %> <% include Footer %>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script> <% require javascript(http://code.jquery.com/jquery-1.7.2.js) %>
<script src="$ThemeDir/javascript/script.js"></script> <% require javascript(themes/simple/javascript/script.js) %>
</body> </body>
</html> </html>