Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ENHANCEMENT:fixed search results styling and added styling for the resul... #2

Merged
merged 5 commits into from Apr 24, 2012
Merged

ENHANCEMENT:fixed search results styling and added styling for the resul... #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
55566cf
ENHANCEMENT:fixed search results styling and added styling for the re…
Apr 9, 2012
0b946fd
BUGFIX:fixed text-indent issues with search-form in IE
Apr 10, 2012
09de6b4
ENHANCEMENT:changed styling of search box and how the mobile menu fun…
Apr 24, 2012
f66efd6
BUGFIX: renaming form.css to fix case-sensitive error
Apr 24, 2012
b116b23
BUGFIX: renaming form.css to fix case-sensitive error (second commit)
Apr 24, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
0 css/Form.css → css/form.css
View file
Open in desktop
File renamed without changes.
68 changes: 38 additions & 30 deletions css/layout.css
View file
Open in desktop
Expand Up @@ -20,7 +20,7 @@ a.btn:hover{background:#d80000; color:#fff;}
.content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;} .content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;}
.content a{border-bottom:1px dashed #b80000;} .content a{border-bottom:1px dashed #b80000;}


.brand{float:left; display:block;} .brand{float:left; display:inline-block;}
.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;}


Expand All @@ -42,30 +42,31 @@ a.btn:hover{background:#d80000; color:#fff;}
.search-dropdown-icon {display:none;} .search-dropdown-icon {display:none;}
.search-bar .search-bubble-arrow {display:none;} .search-bar .search-bubble-arrow {display:none;}
.search-bar form {margin:10px 0 0 0; float:right; width:200px;} .search-bar form {margin:10px 0 0 0; float:right; width:200px;}
.search-bar form fieldset {position:relative; padding:0; margin:0;background:#ededed; border:1px solid #888; border-radius:4px;} .search-bar form fieldset {position:relative; padding:0; margin:0; border:none;}
.search-bar form div.field {margin:0;} .search-bar form div.field {margin:0;}
.search-bar form div.field .middleColumn {float:none; width:100%;} .search-bar form div.field .middleColumn {float:none; width:100%; position:relative;}
.search-bar form input.text {text-indent:32px; float:left; color:#888; margin:0; border:0px; border-radius:4px; background:transparent;} .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 {background:transparent url(../images/search-icon.png) 5px 5px no-repeat; text-indent:-9999em; position:absolute; left:0px; cursor:pointer; height:32px; width:35px; border:none; .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;} 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) center 5px no-repeat;} .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; background:#fff;} .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*/ /* navigation visible when menu items overflow the 1100px width and when users don't have javascript enabled*/


.header .primary ul {float:right; margin:24px -15px 0 0; white-space:normal; padding:0;} .header .primary ul {float:right; margin:24px -15px 0 0; white-space:normal; padding:0;}
.header .primary ul .menu-bubble-arrow {display:none;}
.header .primary ul li{float:left; margin:0 0 10px 6px; padding-bottom:0; background-image:none; list-style-type:none;} .header .primary ul li{float:left; margin:0 0 10px 6px; padding-bottom:0; background-image:none; list-style-type:none;}
.header .primary ul li.current a, .header .primary ul li.section a{background-color:#525252;} .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{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 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;}


/* fancy javascript initiated menu - for when menu items fit within the 1100px width (nowrap)*/ /* fancy javascript initiated menu - for when menu items fit within the 1100px width (nowrap)*/


.header .primary ul.standard-nav{float:right; margin:24px -15px 0 0; white-space:nowrap;} .header .primary ul.standard-nav{float:right; margin:24px -15px 0 0; white-space:nowrap;}
.header .primary ul.standard-nav .menu-bubble-arrow {display:none;} .header .primary ul.standard-nav .menu-bubble-arrow {display:none;}
.header .primary .standard-nav li{float:left; padding-bottom:20px; margin:0 5px;} .header .primary .standard-nav li{float:left; padding-bottom:20px; margin:0 5px;}
.header .primary .standard-nav li .nav-arrow {display:none;}
.header .primary .standard-nav li.section, .header .primary li.current {background:url(../images/selected.png) center bottom no-repeat;} .header .primary .standard-nav li.section, .header .primary li.current {background:url(../images/selected.png) center bottom no-repeat;}
.header .primary ul.standard-nav li.current a, .header .primary ul.standard-nav li.section a {background:none;} .header .primary ul.standard-nav li.current a, .header .primary ul.standard-nav li.section a {background:none;}


Expand Down Expand Up @@ -95,19 +96,24 @@ aside{float:left; width:20%; margin-top:17px;}


/* 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-left:20px;} .searchResults ul#SearchResults {padding:0px;}
.searchResults ul#SearchResults li {margin-bottom:20px; 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 {font-size:1.1em; font-weight:normal; line-height:2em;} .searchResults ul#SearchResults p {font-size:1.1em; font-weight:normal; line-height:2em;}
.searchResults ul#SearchResults a.searchResultHeader {font-size:1.3em; font-weight:bold; text-decoration:none; margin:20px 0 8px 0;} .searchResults ul#SearchResults a.searchResultHeader {font-size:1.3em; font-weight:bold; text-decoration:none; margin:20px 0 8px 0;}
.searchResults ul#SearchResults a {text-decoration:none;} .searchResults ul#SearchResults a {text-decoration:none;}
.searchResults #PageNumbers {border-top:1px solid #e5e5e5;padding-top:20px;}
.searchResults #PageNumbers .pagination {float:left;}
.searchResults #PageNumbers p {float:right;}
.searchResults #PageNumbers .next {margin-left:20px;}
.searchResults #PageNumbers .prev {margin-right:20px;}


/* 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;} .footer .left{float:left; color:#000; display:block; margin-bottom:20px;}
.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;}
Expand All @@ -125,26 +131,28 @@ aside{float:left; width:20%; margin-top:17px;}
} }


@media only screen and (max-width: 700px) { @media only screen and (max-width: 700px) {
.brand{float:none; display:inline-block; margin-left:12px; margin-bottom:10px;} .brand{float:none; display:inline-block; margin-left:22px; margin-bottom:24px;}
.brand h1{font-size:30px;} .brand h1{font-size:40px;}
.header {padding:0px;} .header {padding:0px;}
.header .inner{padding:10px 0 0 0;} .header .inner{padding:20px 0 0 0;}
.header .primary {height:42px;} .header .primary {}
.primary .nav-open-button {z-index:100; position:relative; padding:6px 0; background:#525252; width:100%; height:30px; display:block; cursor:pointer; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-indent:10px; .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;}
text-align:left; line-height:30px; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);} .header .primary ul {z-index:10; position:relative; background:#e5e5e5; display:none; float:left; margin:0; padding:0; width:100%; white-space:normal; }
.primary .nav-open-button .menu-text {letter-spacing:1px; margin-left:10px; color:#fff; font-size:15px; font-family:Helvetica, Arial, sans-serif; font-weight:bold;} .header .primary ul#nav li {border-radius:0; width:100%; margin:0; float:none; background:none; position:relative;}
.primary ul#nav .menu-bubble-arrow {z-index:110; display:none; color:#525252; height:20px; width:20px;position:absolute; left:10px; top:-7px; font-family:'WebSymbolsRegular'; font-size:20px;text-align:center; line-height:20px; .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;}
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);} .header .primary ul#nav li:last-child a {border-bottom:none;}
.header .primary ul {position:relative; background:#ededed; display:none; float:left; margin:0; padding:0; width:100%; white-space:normal; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);} .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#nav li{width:100%; margin:0; float:none; background:none;}
.header .primary ul#nav li a {padding:8px 0 8px 40px; font-weight:normal;}
.header .primary ul#nav li a:hover {color:#525252;} .header .primary ul#nav li a:hover {color:#525252;}
.header .primary ul#nav li.current a, .header .primary ul#nav li.section a{border-radius:0; background-color:#999; color:#fff;} .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 {z-index:200; position:absolute; top:50px; display:none; padding:5px 0; height:32px; margin:0; background-color:#303030;-webkit-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);-moz-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);} .search-bar {width:100%; position:relative; top:0; right:0; display:none; padding:20px 0; height:32px; margin:0; background-color:#ededed;}
.search-dropdown-icon {display:block; cursor:pointer; width:20px; height:20px; position:absolute; right:10px; top:14px; 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:14px; top:-12px; font-family:'WebSymbolsRegular'; font-size:20px; color:#303030; 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 {display:none; float:right; margin:0 5px; height:32px;} .search-bar form {display:none; margin:0; height:32px;}
.search-bar form fieldset {padding:0 18px; position:absolute; left:0; right:0;}
.search-bar form input.text {width:auto; position:absolute; right:0; left:0; border:1px solid #e5e5e5; background:#fff;}
.search-bar form input.action {right:20px;}


/* Main Content */ /* Main Content */
.main{padding:20px 0 45px;} .main{padding:20px 0 45px;}
Expand Down
15 changes: 15 additions & 0 deletions javascript/script.js
View file
Open in desktop
Expand Up @@ -63,5 +63,20 @@ jQuery.noConflict();
$('span.search-bubble-arrow').removeAttr("style"); $('span.search-bubble-arrow').removeAttr("style");
} }
}); });

/* 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() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
}
});
$(this).blur(function() {
if(this.value == '') {
this.value = default_value;
}
});
});
   });    });
}(jQuery)); }(jQuery));
5 changes: 2 additions & 3 deletions templates/Includes/Navigation.ss
View file
Open in desktop
@@ -1,9 +1,8 @@
<nav class="primary"> <nav class="primary">
<span class="nav-open-button">²<span class="menu-text">Menu</span></span> <span class="nav-open-button">²</span>
<ul id="nav"> <ul id="nav">
<span class="menu-bubble-arrow">{</span>
<% loop Menu(1) %> <% loop Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li> <li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a><span class="nav-arrow"> > </span></li>
<% end_loop %> <% end_loop %>
</ul> </ul>
</nav> </nav>
32 changes: 17 additions & 15 deletions templates/Layout/Page_results.ss
View file
Open in desktop
Expand Up @@ -27,21 +27,23 @@


<% if Results.MoreThanOnePage %> <% if Results.MoreThanOnePage %>
<div id="PageNumbers"> <div id="PageNumbers">
<% if Results.NotLastPage %> <div class="pagination">
<a class="next" href="$Results.NextLink" title="View the next page">Next</a> <% if Results.NotFirstPage %>
<% end_if %> <a class="prev" href="$Results.PrevLink" title="View the previous page">←</a>
<% if Results.NotFirstPage %> <% end_if %>
<a class="prev" href="$Results.PrevLink" title="View the previous page">Prev</a> <span>
<% end_if %> <% control Results.Pages %>
<span> <% if CurrentBool %>
<% control Results.Pages %> $PageNum
<% if CurrentBool %> <% else %>
$PageNum <a href="$Link" title="View page number $PageNum" class="go-to-page">$PageNum</a>
<% else %> <% end_if %>
<a href="$Link" title="View page number $PageNum">$PageNum</a> <% end_control %>
<% end_if %> </span>
<% end_control %> <% if Results.NotLastPage %>
</span> <a class="next" href="$Results.NextLink" title="View the next page">→</a>
<% end_if %>
</div>
<p>Page $Results.CurrentPage of $Results.TotalPages</p> <p>Page $Results.CurrentPage of $Results.TotalPages</p>
</div> </div>
<% end_if %> <% end_if %>
Expand Down