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

Merge pull request #15 from clarkepaul/forms-type

Browse Source 
FIX basic updates to enhance usability and appearance of theme
This commit is contained in:
Will Rossiter 2012-10-10 00:24:29 -07:00
commit 037eac159e
6 changed files with 134 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
css/layout.css
View File

@ -62,7 +62,7 @@ body {
} }
/* Brand */ /* Brand */
.brand, .brand:hover { header .brand, header .brand:hover {
float: left; float: left;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
@ -82,34 +82,30 @@ body {
margin-bottom: 22px; margin-bottom: 22px;
} }
/* Search form */ /* TODO: make sure this is not double up from form.css */ /* Search form */
.search-bar { .search-bar {
position: absolute; position: absolute;
right: 30px; right: 28px;
top: 34px; top: 32px;
} }
.search-bar form fieldset { .search-bar #Search {
position: relative; margin: 0;
padding: 0; padding: 0;
margin: 0;
} }
.search-bar form input.text { .search-bar form input.text {
width: 155px; width: 155px;
padding:6px 35px 6px 10px; padding: 5px 34px 5px 10px;
color: #888; color: #888;
margin: 0; margin: 0;
border: none; border: none;
border-radius: 20px; border-radius: 14px;
background: #fff; background: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.search-bar form input.active {
color: #000
} }
.search-bar form input.action { .search-bar form input.action {
font-size: 15px; font-size: 14px;
position: absolute; position: absolute;
right: 3px; right: 0;
top: -1px; top: -1px;
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -117,9 +113,10 @@ body {
background: none; background: none;
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
color: #848484; color: #848484;
border-radius:0; border-radius: 0;
margin-top:0; margin: 0;
} }
.search-bar form input.active,
.search-bar form input.action:hover { .search-bar form input.action:hover {
color: #000 color: #000
} }
@ -127,14 +124,12 @@ body {
.header textarea:focus { .header textarea:focus {
outline: none outline: none
} }
#Search {
padding:0;
}
.search-dropdown-icon { .search-dropdown-icon {
display: none display: none
} }
/* NAVIGATION */ /* NAVIGATION */
/* Primary navigation */ /* Primary navigation */
@ -143,7 +138,7 @@ body {
} }
.header .primary li { .header .primary li {
float: left; float: left;
padding-bottom: 17px; padding-bottom: 14px;
margin: 0 5px; margin: 0 5px;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
@ -190,13 +185,11 @@ body {
float: left; float: left;
clear: both; clear: both;
position: relative; position: relative;
margin: 20px 0 4px -12px; margin: 20px 0 0 -13px;
white-space: nowrap; white-space: nowrap;
right: auto; right: auto;
} }
.tablet-nav .header .primary ul li { .tablet-nav .header .primary ul li {
margin-bottom: 10px;
padding-bottom: 0;
white-space: nowrap; white-space: nowrap;
} }
.tablet-nav .header .primary ul li a { .tablet-nav .header .primary ul li a {
@ -204,15 +197,6 @@ body {
-webkit-transition: none; -webkit-transition: none;
transition: none; transition: none;
} }
.tablet-nav .header .primary ul li.current a,
.tablet-nav .header .primary ul li.section a {
background-color: #525252;
border-radius: 4px;
}
.tablet-nav .header .primary li.section:after,
.tablet-nav .header .primary li.current:after {
display: none
}
.tablet-nav .footer .right { .tablet-nav .footer .right {
float: left; float: left;
width: 100%; width: 100%;
@ -252,13 +236,12 @@ body {
-webkit-transition: 0.2s; -webkit-transition: 0.2s;
transition: 0.2s; transition: 0.2s;
} }
.main .secondary li:hover .arrow { .main .secondary li a:hover .arrow {
left: 6px left: 6px
} }
.main .secondary li a { .main .secondary li a {
padding: 10px 0; padding: 10px 0;
display: block; display: block;
width: 100%;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2px;
font-size: 11px; font-size: 11px;
@ -271,9 +254,12 @@ body {
padding-left: 28px; padding-left: 28px;
display: block; display: block;
} }
.main .secondary li.current a.current {
color: #b80000;
}
.main .secondary li.section, .main .secondary li.section,
.main .secondary li.current { .main .secondary li.current {
background-color: #f7f7f7 background-color: #f1f1f1
} }
.main .secondary li.section a, .main .secondary li.section a,
.main .secondary li.current a { .main .secondary li.current a {
@ -283,6 +269,41 @@ body {
color: #aaa; color: #aaa;
} }
/* Secondary navigation 2-5 levels deep */
.main .secondary ul ul {
display: none;
}
.secondary ul li.current ul,
.secondary ul li.section ul { /* Only show child pages from selected parent */
display: block;
}
.secondary li.current ul ul {
display: none;
}
.main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
.main .secondary ul ul li a .arrow { left: 12px; }
.main .secondary ul ul li a:hover .arrow { left: 16px; }
.main .secondary ul ul ul li a { padding-left: 20px; }
.main .secondary ul ul ul li a .arrow { left: 22px; }
.main .secondary ul ul ul li a:hover .arrow { left: 26px; }
.main .secondary ul ul ul ul li a { padding-left: 30px; }
.main .secondary ul ul ul ul li a .arrow { left: 32px; }
.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }
.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }
.main .secondary li a:hover,
.main .secondary li.section a:hover,
.main .secondary li.current a:hover {
color: #b80000;
}
/* MIXED */ /* MIXED */
header:after, header:after,
@ -304,6 +325,8 @@ footer:after {
-webkit-transition: color 0.2s; -webkit-transition: color 0.2s;
transition: color 0.2s; transition: color 0.2s;
} }
.footer a.brand { color: #333; margin-left: 0; }
.footer a.brand:hover { color: #B80000; }
body h1 span.amp { body h1 span.amp {
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
font-style: italic; font-style: italic;
@ -313,17 +336,21 @@ body h1 span.amp {
/* PAGE SPECIFIC LAYOUT */ /* PAGE SPECIFIC LAYOUT */
/* Homepage */ /* Homepage */
/* Search Results */ /* TODO: Test search results styles */ /* Search Results */
.searchResults h1 { .typography .searchResults h1 {
font-size: 36px; margin-bottom: 0;
margin-bottom: 15px; padding-bottom: 0;
} border-bottom: none;
} /* TODO: Test search results styles */
.searchResults p.searchQuery { .searchResults p.searchQuery {
color: #333;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 15px;
font-weight: bold;
} }
.searchResults ul#SearchResults { .searchResults ul#SearchResults {
padding: 0 padding: 0;
margin-left: 0;
border-bottom: 1px solid #e5e5e5;
} }
.searchResults ul#SearchResults li { .searchResults ul#SearchResults li {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
@ -331,18 +358,12 @@ body h1 span.amp {
list-style-type: none; list-style-type: none;
} }
.searchResults ul#SearchResults p { .searchResults ul#SearchResults p {
margin-bottom: 12px margin-bottom: 10px
} }
.searchResults ul#SearchResults a.searchResultHeader { .searchResults #PageNumbers {
font-size: 16px; border-top: 1px solid #e5e5e5;
font-weight: bold; padding-top: 20px;
margin-bottom: 6px;
display: block;
} }
.searchResults #PageNumbers {
border-top: 1px solid #e5e5e5;
padding-top: 20px;
}
.searchResults #PageNumbers a { .searchResults #PageNumbers a {
padding: 0 5px padding: 0 5px
} }
@ -373,10 +394,10 @@ body h1 span.amp {
line-height: 22px; line-height: 22px;
} }
.footer a { .footer a {
color: #999 color: #999;
} }
.footer a:hover { .footer a:hover {
color: #000 color: #B90000
} }
.footer .left { .footer .left {
float: left; float: left;
@ -534,6 +555,13 @@ body h1 span.amp {
.header .primary ul li a:hover { .header .primary ul li a:hover {
color: inherit color: inherit
} }
.header .primary li.section:after,
.header .primary li.current:after {
display: none;
}
.tablet-nav .header nav.primary ul li {
padding: 0;
}
/* Search Form */ /* Search Form */
.search-bar { .search-bar {
@ -543,7 +571,7 @@ body h1 span.amp {
right: 0; right: 0;
display: none; display: none;
padding: 20px 0; padding: 20px 0;
margin: 0; margin: 80px 0 0;
background-color: #E7E7E7; background-color: #E7E7E7;
} }
.search-dropdown-icon { .search-dropdown-icon {
@ -693,7 +721,11 @@ body h1 span.amp {
/* Simple theme custom print styles */ /* Simple theme custom print styles */
.header, .header,
.footer { .footer,
display: none .nav-open-button,
.search-bar,
.search-dropdown-icon,
nav.primary {
display: none;
} }
} }

8
css/typography.css
View File

@ -53,8 +53,8 @@ body {
.typography h6 { .typography h6 {
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
font-weight: normal; font-weight: normal;
color: #b80000;
margin-bottom: 10px; margin-bottom: 10px;
color: #444;
} }
.typography h1 { font-size: 36px; .typography h1 { font-size: 36px;
line-height: 45px; line-height: 45px;
@ -95,9 +95,11 @@ body {
.typography a.intro { .typography a.intro {
color: #B80000; color: #B80000;
text-decoration: none; text-decoration: none;
border-bottom: 1px dashed #B80000;
} }
.typography a:hover { color: #D80000; } .typography a:hover {
color: #D80000;
border-bottom: 1px dashed #B80000;
}
.typography a:focus { } .typography a:focus { }

4
templates/Includes/Footer.ss
View File

@ -1,6 +1,8 @@
<footer class="footer" role="contentinfo"> <footer class="footer" role="contentinfo">
<div class="inner copy"> <div class="inner copy">
<div class="left">$SiteConfig.Title <span class="arrow">&rarr;</span> <% include Navigation %></div> <div class="left">
<a href="$BaseHref" class="brand" rel="home">$SiteConfig.Title</a>
<span class="arrow">&rarr;</span> <% include Navigation %></div>
<small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small> <small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
</div> </div>
</footer> </footer>

8
templates/Includes/SideBar.ss
View File

@ -3,14 +3,14 @@
<nav class="secondary"> <nav class="secondary">
<h3> <h3>
<% loop Level(1) %> <% loop Level(1) %>
$Title $Title
<% end_loop %> <% end_loop %>
</h3> </h3>
<ul> <ul>
<% loop Menu(2) %> <% loop Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">&rarr;</span><span class="text">$MenuTitle.XML</span></a></li> <% include SidebarMenu %>
<% end_loop %> <% end_loop %>
</ul> </ul>
</nav> </nav>
<% end_if %> <% end_if %>
</aside> </aside>

18
templates/Includes/SidebarMenu.ss Normal file
View File

@ -0,0 +1,18 @@
<!--Include SidebarMenu recursively /-->
<% if Children %>
<% loop Children %>
<li class="$LinkingMode">
<a href="$Link" class="$LinkingMode" title="Go to the $Title.XML page">
<span class="arrow">&rarr;</span>
<span class="text">$MenuTitle.XML</span>
</a>
<% if Children %>
<ul>
<% include SidebarMenu %>
</ul>
<% end_if %>
</li>
<% end_loop %>
<% end_if %>

22
templates/Layout/Page_results.ss
View File

@ -2,21 +2,25 @@
<h1>$Title</h1> <h1>$Title</h1>
<% if Query %> <% if Query %>
<p class="searchQuery"><strong>You searched for &quot;{$Query}&quot;</strong></p> <p class="searchQuery">You searched for &quot;{$Query}&quot;</p>
<% end_if %> <% end_if %>
<% if Results %> <% if Results %>
<ul id="SearchResults"> <ul id="SearchResults">
<% control Results %> <% control Results %>
<li> <li>
<a class="searchResultHeader" href="$Link"> <h4>
<% if MenuTitle %> <a href="$Link">
$MenuTitle <% if MenuTitle %>
<% else %> $MenuTitle
$Title <% else %>
<% end_if %> $Title
</a> <% end_if %>
<p>$Content.LimitWordCountXML</p> </a>
</h4>
<% if Content %>
<p>$Content.LimitWordCountXML</p>
<% end_if %>
<a class="readMoreLink" href="$Link" title="Read more about &quot;{$Title}&quot;">Read more about &quot;{$Title}&quot;...</a> <a class="readMoreLink" href="$Link" title="Read more about &quot;{$Title}&quot;">Read more about &quot;{$Title}&quot;...</a>
</li> </li>
<% end_control %> <% end_control %>