diff options
| -rw-r--r-- | templates/web/fixmystreet/contact/index.html | 3 | ||||
| -rw-r--r-- | templates/web/fixmystreet/footer.html | 28 | ||||
| -rw-r--r-- | templates/web/fixmystreet/index.html | 30 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 89 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 279 |
5 files changed, 211 insertions, 218 deletions
diff --git a/templates/web/fixmystreet/contact/index.html b/templates/web/fixmystreet/contact/index.html index 87096bd8a..368fb0628 100644 --- a/templates/web/fixmystreet/contact/index.html +++ b/templates/web/fixmystreet/contact/index.html @@ -1,6 +1,7 @@ [% INCLUDE 'header.html', title = loc('Contact Us') robots = 'noindex,nofollow' + bodyclass => 'twothirdswidthpage' %] <h1>[% loc('Contact the team') %]</h1> @@ -96,4 +97,4 @@ [% TRY %][% INCLUDE 'contact/address.html' %][% CATCH file %][% END %] -[% INCLUDE 'footer.html' %] +[% INCLUDE 'footer.html' pagefooter = 'yes' %] diff --git a/templates/web/fixmystreet/footer.html b/templates/web/fixmystreet/footer.html index fa9439e09..8a594c1b8 100644 --- a/templates/web/fixmystreet/footer.html +++ b/templates/web/fixmystreet/footer.html @@ -1,6 +1,30 @@ [% IF pagefooter %] - <footer id="page-footer" role="content-info"> - <p>Some footer text</p> + <footer role="content-info"> + <div class="tablewrapper bordered"> + <div id="footer-mobileapps"> + <h4>Mobile apps</h4> + + <ul> + <li><a class="m-app-iphone" href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li> + <li><a class="m-app-droid" href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li> + <li><a class="m-app-nokia" href="http://store.ovi.com/content/107557">Nokia</a></li> + <li><a class="m-app-iphone-streetreport" href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li> + </ul> + </div> + + <div id="footer-ads"> + <ul> + <li> + <h4>[% loc('Are you a developer?') %]</h4> + <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]</p> + </li> + <li> + <h4>[% loc('Are you from a council?') %]</h4> + <p>[% loc('Would you like better integration with FixMyStreet? <a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">Find out about FixMyStreet for councils</a>.') %]</p> + </li> + </ul> + </div> + </div> </footer> [% END %] </div><!-- .content role=main --> diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html index 8fb0bbcb6..82305f376 100644 --- a/templates/web/fixmystreet/index.html +++ b/templates/web/fixmystreet/index.html @@ -27,7 +27,7 @@ </div> </div> -<div class="front-tablewrapper"> +<div class="tablewrapper"> <div id="front-howto"> <h2>[% loc('How to report a problem') %]</h2> @@ -75,34 +75,8 @@ [% END %] </div> -<div class="front-tablewrapper bordered"> - <div id="front-mobileapps"> - <h2>Mobile apps</h2> - - <ul> - <li><a class="m-app-iphone" href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li> - <li><a class="m-app-droid" href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li> - <li><a class="m-app-nokia" href="http://store.ovi.com/content/107557">Nokia</a></li> - <li><a class="m-app-iphone-streetreport" href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li> - </ul> - </div> - - <div id="front-ads"> - <ul> - <li> - <h4>[% loc('Are you a developer?') %]</h4> - <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]</p> - </li> - <li> - <h4>[% loc('Are you from a council?') %]</h4> - <p>[% loc('Would you like better integration with FixMyStreet? <a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">Find out about FixMyStreet for councils</a>.') %]</p> - </li> - </ul> - </div> -</div> - <!-- [% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %] --> -[% INCLUDE 'footer.html' %] +[% INCLUDE 'footer.html' pagefooter = 'yes' %] diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index e2a1b7a3d..7e05a46b3 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -580,11 +580,49 @@ p.label-valid { } } -//hide page footer on mobile -.mobile #page-footer { - display:none; + +//footer blocks +#footer-mobileapps { + @extend .full-width; + padding:1em; + h4 { + margin:0; + } + ul { + @include list-reset-soft; + li { + border-bottom:1px solid #AFAFAF; + &:last-child { + border-bottom:none; + } + a { + display:block; + padding:0.5em 0; + } + } + } +} + +#footer-ads { + ul { + @include list-reset-soft; + li { + border-bottom:1px solid #AFAFAF; + &:last-child { + border-bottom:none; + } + h4 { + margin:0.75em 0 0.25em 0; + } + p { + font-size:0.75em; + } + } + } } + + /*BUTTONS*/ // Default style set for buttons, inputs and .btn class. Red and green class available. @@ -1025,47 +1063,4 @@ a:hover.rap-notes-trigger { border-bottom:none; margin-bottom:0; } -} - -#front-mobileapps { - @extend .full-width; - background:#333; - padding:1em; - @include box-shadow(inset rgba(0, 0, 0, 0.9) 0 0 8px); - h2 { - color:#fff; - margin-top:0; - } - ul { - @include list-reset-soft; - li { - border-bottom:1px solid #AFAFAF; - &:last-child { - border-bottom:none; - } - a { - display:block; - color:#fff; - padding:0.5em 0; - } - } - } -} - -#front-ads { - ul { - @include list-reset-soft; - li { - border-bottom:1px solid #AFAFAF; - &:last-child { - border-bottom:none; - } - h4 { - margin:0.75em 0 0.25em 0; - } - p { - font-size:0.75em; - } - } - } -} +}
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index 32de2af43..a19b348a1 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -184,6 +184,12 @@ body { margin-bottom: -1em; @include box-shadow(0px 0px 6px 1px #000); } +//weird margining thing for ie8 +.ie8 { + .wrapper .content { + margin-top:7em; + } +} // full width page body.fullwidthpage { background:#1a1a1a; @@ -201,6 +207,7 @@ body.fullwidthpage { width:40em; } } +// two thirds width page body.twothirdswidthpage { @extend .fullwidthpage; .content { @@ -218,6 +225,127 @@ body.twothirdswidthpage { } } + +// table wrapper +.tablewrapper { + display:table; + width:100%; + padding:1em 0; + >div { + display:table-cell; + width:50%; + } + #footer-mobileapps { + border-right:1em solid #fff; + } + #footer-ads { + border-left:1em solid #fff; + } + .full-width { + width:auto; + margin:0; + } +} +.ie6, .ie7 { + .tablewrapper { + display:block; + >div { + width:48%; + display:block; + float: left; + border:none !important; + } + } +} + +// adds border to the top and goes full width +.bordered { + margin:0 -1em; + padding:0 1em; + width:auto; + border-top:0.25em solid $primary; +} + +//footer blocks +#footer-mobileapps { + border-right:1em solid #fff; + background:none; + padding:0; + @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); + h2 { + color:#222; + margin-top:0; + } + ul { + @include list-reset; + li { + border-bottom:none; + float:left; + margin:0 1em 1em 0; + a { + color:#222; + padding:0; + width: 96px; + height: 32px; + margin:0 auto; + text-indent: -999999px; + background: url(images/sprite.png) -12px -3610px no-repeat; + @include opacity(0.8); + &:hover { + @include opacity(1); + } + &.m-app-iphone { + background-position: -12px -3610px; + } + &.m-app-iphone-streetreport { + background-position: -12px -3678px; + height:50px; + } + &.m-app-droid { + background-position: -12px -3756px; + } + &.m-app-nokia { + background-position: -12px -3820px; + width:74px; + } + } + } + } +} +.ie6, .ie7 { + #footer-mobileapps { + margin:0 0.5em; + margin-right:2%; + } +} + +#footer-ads { + border-left:1em solid #fff; + ul { + display:table; + li { + display:table-cell; + border-bottom:none; + &:last-child { + border-left:1.25em solid #fff; + } + } + } +} +.ie6, .ie7 { + #footer-ads { + margin-left:2%; + ul { + width:100%; + li { + float:left; + width:45% + } + } + } +} + + #map_box{ position: absolute; height: 25em; @@ -256,6 +384,11 @@ body.twothirdswidthpage { } } } +.ie8 { + #user-meta p { + top:5em; + } +} // Wraps around #key-tools box .shadow-wrap { @@ -300,16 +433,6 @@ body.twothirdswidthpage { } } - -// page footer - style it full width -#page-footer { - border-top:3px solid $primary; - margin:1em -1em 0 -1em; - padding:1em; -} - - - .big-green-banner { right:-1.25em; margin-left:-2em; @@ -347,12 +470,6 @@ body.twothirdswidthpage { width: 29em; } -.fullwidthpage { - .full-width { - width:58em; - } -} - /*FORMS*/ input[type=text], input[type=password], @@ -481,14 +598,6 @@ body.frontpage { } } //weird margining thing for ie8 -.ie8 { - .wrapper .content { - margin-top:7em; - } - #user-meta p { - top:5em; - } -} .ie8 body.frontpage { .wrapper .content { margin-top:5em; @@ -498,7 +607,6 @@ body.frontpage { } } - #front-main { background:$primary; position:absolute; @@ -557,55 +665,20 @@ body.frontpage { } } -.front-tablewrapper { - display:table; - width:100%; - padding:1em 0; - >div { - display:table-cell; - width:50%; - } - #front-howto, - #front-mobileapps { - border-right:1em solid #fff; - } - #front-recently, - #front-ads { - border-left:1em solid #fff; - } - .full-width { - width:auto; - margin:0; - } -} .ie6, .ie7 { - .front-tablewrapper { - display:block; - >div { - width:48%; - display:block; - float: left; - border:none !important; - } - #front-howto, - #front-mobileapps { + .tablewrapper { + #front-howto { margin-right:2%; } - #front-recently, - #front-ads { + #front-recently { margin-left:2%; } } } -.bordered { - margin:0 -1em; - padding:0 1em; - width:auto; - border-top:0.25em solid $primary; -} #front-howto { + border-right:1em solid #fff; #front_stats { background:none; border-top:0.25em solid $primary; @@ -627,84 +700,10 @@ body.frontpage { } } -#front-mobileapps { - background:none; - padding:0; - @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); - h2 { - color:#222; - margin-top:0; - } - ul { - @include list-reset; - li { - border-bottom:none; - float:left; - margin:0 1em 1em 0; - a { - color:#222; - padding:0; - width: 96px; - height: 32px; - margin:0 auto; - text-indent: -999999px; - background: url(images/sprite.png) -12px -3610px no-repeat; - @include opacity(0.8); - &:hover { - @include opacity(1); - } - &.m-app-iphone { - background-position: -12px -3610px; - } - &.m-app-iphone-streetreport { - background-position: -12px -3678px; - height:50px; - } - &.m-app-droid { - background-position: -12px -3756px; - } - &.m-app-nokia { - background-position: -12px -3820px; - width:74px; - } - } - } - } -} -.ie6, .ie7 { - #front-mobileapps { - margin:0 0.5em; - } -} -#front-ads { - ul { - display:table; - li { - display:table-cell; - border-bottom:none; - &:last-child { - border-left:1.25em solid #fff; - } - } - } +#front-recently { + border-left:1em solid #fff; } -.ie6, .ie7 { - #front-ads { - ul { - width:100%; - li { - float:left; - width:45% - } - } - } -} - - - - - /* MEDIA QUERIES */ @media only screen and (min-width: 48em) and (max-width: 64em) { |