Added sidebar styles (plus markup for faq page) - also included a sticky option

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

2 files changed, 42 insertions, 7 deletions

diff --git a/templates/web/fixmystreet/faq/faq-en-gb.html b/templates/web/fixmystreet/faq/faq-en-gb.html
index 4e1f0c874..4e128e58c 100755
--- a/templates/web/fixmystreet/faq/faq-en-gb.html
+++ b/templates/web/fixmystreet/faq/faq-en-gb.html
@@ -1,6 +1,6 @@
 [% INCLUDE 'header.html', title => loc('Frequently Asked Questions'), bodyclass => 'twothirdswidthpage' %]
 
-<h1>Frequently Asked Questions</h1>
+<h1><a name="faq"></a>Frequently Asked Questions</h1>
     <dl>
         <dt>What is FixMyStreet?</dt>
         <dd>FixMyStreet is a site to help people report, view,
@@ -86,7 +86,7 @@ href="https://secure.mysociety.org/donate/">please do</a>.</dd>
     maps so that we can add them to the site, that'd be great.</dd>
     </dl>
 
-    <h2>Practical Questions</h2>
+    <h2><a name="practical"></a>Practical Questions</h2>
     <dl>
         <dt>I&rsquo;m from a council, where do you send the reports?</dt>
         <dd>You can either leave a test report or <a href="/contact">contact us</a>
@@ -138,7 +138,7 @@ problem you&rsquo;ve reported, and send you a questionnaire email four weeks
 after you submit a problem, asking for a status update; we&rsquo;ll only ever
 send you emails in relation to your problem.</dd>
     </dl>
-    <h2>Organisation Questions</h2>
+    <h2><a name="organisation"></a>Organisation Questions</h2>
     <dl>
         <dt>Who built FixMyStreet?</dt>
         <dd>This site was built by <a href="http://www.mysociety.org/">mySociety</a>, in conjunction with the <a href="http://www.youngfoundation.org.uk/">Young Foundation</a>. 
@@ -205,4 +205,15 @@ our servers).
 Let us know if we&rsquo;ve missed anyone.</dd>
     </dl>
 
+
+<div class="sticky-sidebar">
+    <aside>
+        <ul class="plain-list">
+            <li><a href="#faq">Frequently Asked Questions</a></li>
+            <li><a href="#practical">Practical Questions</a></li>
+            <li><a href="#privacy">Privacy Questions</a></li>
+            <li><a href="#organisation">Organisation Questions</a></li>
+        </ul>
+    </aside>
+</div>
 [% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index 07e8778c9..71904cd4f 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -288,23 +288,47 @@ body.fullwidthpage {
     width:40em;
   }
 }
-// two thirds width page, also has option for a sidebar
+// two thirds width page, also has option for a sidebar which can be sticky or not
 body.twothirdswidthpage {
   @extend .fullwidthpage;
   .content {
     width:40em;
     position: relative;
     aside {
-      background:#fff;
+      background:#eee;
       position:absolute;
-      left:44em;
+      left:42em;
       top:0;
-      width:13.5em;
+      z-index: -1;
+      width:13em;
       padding:1em;
       @include box-shadow(0px 0px 6px 1px #000);
     }
+    .sticky-sidebar {
+      position: absolute;
+      left:42em;
+      z-index: -1;
+      aside {
+        position: fixed;
+        top:7em;
+        left:auto;
+      }
+    }
   }
 }
+//as ie6 doesn;t like 'fixed' we will make it absolute again
+.ie6 body.twothirdswidthpage .content .sticky-sidebar {
+  position:static;
+  aside {
+    position:absolute;
+    left:42em;
+    top:0;
+  }
+}
+//bit of extra space for ie7
+.ie7 body.twothirdswidthpage .content .sticky-sidebar aside {
+  top:11em;
+}
 
 
 // table wrapper - this enables anything to become a