Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #2 from jbridson/simple-styling

ENHANCEMENT:fixed search results styling and added styling for the resul...
  • Loading branch information...
commit 770ffce7d486720470cb3ab78ec9f399974cd207 2 parents 7a5e5b8 + b116b23
@stusar stusar authored
View
0  css/Form.css → css/form.css
File renamed without changes
View
68 css/layout.css
@@ -20,7 +20,7 @@ a.btn:hover{background:#d80000; color:#fff;}
.content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;}
.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, .brand:hover{color:#fff;}
@@ -42,23 +42,23 @@ a.btn:hover{background:#d80000; color:#fff;}
.search-dropdown-icon {display:none;}
.search-bar .search-bubble-arrow {display:none;}
.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 .middleColumn {float:none; width:100%;}
-.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.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 div.field .middleColumn {float:none; width:100%; position:relative;}
+.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) center 5px no-repeat;}
-.search-bar form input:focus, .header textarea:focus {outline:none; background:#fff;}
+.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;}
/* 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 .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.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 a:hover{color:#fff;}
+.header .primary li .nav-arrow {display:none;}
.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)*/
@@ -66,6 +66,7 @@ a.btn:hover{background:#d80000; color:#fff;}
.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 .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 ul.standard-nav li.current a, .header .primary ul.standard-nav li.section a {background:none;}
@@ -95,19 +96,24 @@ aside{float:left; width:20%; margin-top:17px;}
/* Search Results */
-
.searchResults h1 { font-size:36px; margin-bottom:15px;}
.searchResults p.searchQuery {color:#333; margin-bottom:10px;}
-.searchResults ul#SearchResults {padding-left:20px;}
-.searchResults ul#SearchResults li {margin-bottom:20px; list-style-type:none;}
+.searchResults ul#SearchResults {padding:0px;}
+.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 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 #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 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 span{padding:0 3px; color:#bbb;}
.footer .primary, .footer .primary ul{display:inline; margin:0; padding:0;}
@@ -125,26 +131,28 @@ aside{float:left; width:20%; margin-top:17px;}
}
@media only screen and (max-width: 700px) {
-.brand{float:none; display:inline-block; margin-left:12px; margin-bottom:10px;}
-.brand h1{font-size:30px;}
+.brand{float:none; display:inline-block; margin-left:22px; margin-bottom:24px;}
+.brand h1{font-size:40px;}
.header {padding:0px;}
-.header .inner{padding:10px 0 0 0;}
-.header .primary {height:42px;}
-.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;
- 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);}
-.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;}
-.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;
- text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);}
-.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{width:100%; margin:0; float:none; background:none;}
-.header .primary ul#nav li a {padding:8px 0 8px 40px; font-weight:normal;}
+.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 ul {z-index:10; position:relative; background:#e5e5e5; display:none; float:left; margin:0; padding:0; width:100%; white-space:normal; }
+.header .primary ul#nav li {border-radius:0; width:100%; margin:0; float:none; background:none; position:relative;}
+.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#nav li:last-child a {border-bottom:none;}
+.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 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-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-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-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 form {display:none; float:right; margin:0 5px; height:32px;}
+.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: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 {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{padding:20px 0 45px;}
View
15 javascript/script.js
@@ -63,5 +63,20 @@ jQuery.noConflict();
$('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));
View
5 templates/Includes/Navigation.ss
@@ -1,9 +1,8 @@
<nav class="primary">
- <span class="nav-open-button">²<span class="menu-text">Menu</span></span>
+ <span class="nav-open-button">²</span>
<ul id="nav">
- <span class="menu-bubble-arrow">{</span>
<% 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 %>
</ul>
</nav>
View
32 templates/Layout/Page_results.ss
@@ -27,21 +27,23 @@
<% if Results.MoreThanOnePage %>
<div id="PageNumbers">
- <% if Results.NotLastPage %>
- <a class="next" href="$Results.NextLink" title="View the next page">Next</a>
- <% end_if %>
- <% if Results.NotFirstPage %>
- <a class="prev" href="$Results.PrevLink" title="View the previous page">Prev</a>
- <% end_if %>
- <span>
- <% control Results.Pages %>
- <% if CurrentBool %>
- $PageNum
- <% else %>
- <a href="$Link" title="View page number $PageNum">$PageNum</a>
- <% end_if %>
- <% end_control %>
- </span>
+ <div class="pagination">
+ <% if Results.NotFirstPage %>
+ <a class="prev" href="$Results.PrevLink" title="View the previous page">←</a>
+ <% end_if %>
+ <span>
+ <% control Results.Pages %>
+ <% if CurrentBool %>
+ $PageNum
+ <% else %>
+ <a href="$Link" title="View page number $PageNum" class="go-to-page">$PageNum</a>
+ <% end_if %>
+ <% end_control %>
+ </span>
+ <% if Results.NotLastPage %>
+ <a class="next" href="$Results.NextLink" title="View the next page">→</a>
+ <% end_if %>
+ </div>
<p>Page $Results.CurrentPage of $Results.TotalPages</p>
</div>
<% end_if %>
Please sign in to comment.
Something went wrong with that request. Please try again.