Merge branch '84-add-is-something-wrong-with-this-page-links-to-foote…

…rs' into 'master' Resolve "Add 'is something wrong with this page' links to footers" Closes #84 See merge request !101
antarctica · Feb 3, 2018 · 0542679 · 0542679
2 parents 09328c9 + acb1c09
commit 0542679
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,8 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 ### Added
 
 * [Admin] Project documentation on images
+* [Styles] Styles for 'is something wrong with this page' link in footers
+* [Styles] Specific styles for 'back to top' link in footers
 * [Styles] Fix class for using a cookie notice alert with a navbar in a fluid width container
 * [Infrastructure] jQuery and js-cookie as dependencies of the Style Kit's JS plugins
 * [Infrastructure] StyleLint as an explicit dependency to remove Yarn dependency resolution warning

diff --git a/assets/stylesheets/bas-style-kit/_footer.scss b/assets/stylesheets/bas-style-kit/_footer.scss
@@ -76,6 +76,38 @@
 }
 
 
+// Is something wrong link
+//
+// Permanent link for gathering user feedback
+
+.footer-is-something-wrong {
+  text-align: center;
+  margin-top: $footer-is-something-wrong-margin-top;
+  margin-bottom: $footer-is-something-wrong-margin-bottom;
+
+  @media (min-width: $screen-sm-min) {
+    float:      left !important;
+    text-align: left;
+    margin-bottom: 0;
+  }
+}
+
+
+// Back to top link
+//
+// Permanent link to the #site-top element
+
+.footer-back-to-top {
+  text-align: center;
+  margin-top: $footer-back-to-top-margin-top;
+
+  @media (min-width: $screen-sm-min) {
+    float:      right !important;
+    text-align: right;
+  }
+}
+
+
 // OGL symbol and descriptive text
 //
 // Proper sizing and positioning to give an attractive and usable licensing statement for the Open Government License

diff --git a/assets/stylesheets/bas-style-kit/_variables.scss b/assets/stylesheets/bas-style-kit/_variables.scss
@@ -635,8 +635,11 @@ $footer-default-divider:                      $bsk-colour-std-grey-light;
 $footer-default-link-color:                   $component-inverse-link-color;
 $footer-default-link-hover-color:             $component-inverse-link-hover-color;
 
+$footer-is-something-wrong-margin-top:        $padding-large-vertical;
+$footer-is-something-wrong-margin-bottom:     $padding-large-vertical;
+$footer-back-to-top-margin-top:               $padding-large-vertical;
 $footer-ogl-symbol-margin-right:              ($padding-large-horizontal * 2);
-$footer-ogl-symbol-margin-bottom:             ($padding-large-vertical);
+$footer-ogl-symbol-margin-bottom:             $padding-large-vertical;
 $footer-ogl-symbol-width:                     67px;  // As recommended by the National Archives see [1] for details
 $footer-ogl-text-max-width:                   450px;
 $footer-ogl-text-line-height:                 20px;  // As recommended by the National Archives see [1] for details

diff --git a/testbed/src/includes/bas-style-kit/body--standard-footer.pug b/testbed/src/includes/bas-style-kit/body--standard-footer.pug
@@ -1,10 +1,11 @@
 footer.site-footer
   div.bsk-footer.bsk-footer-default
     div(class=bsk_attributes.container_class)
-      div.bsk-row
-        div.bsk-col-12-md-6
-          | Testbed generated at #[i #{(new Date()).toISOString()}]
-        div.bsk-col-12-md-6
+      | Testbed generated at #[i #{(new Date()).toISOString()}]
+      div.bsk-clearfix
+        div.bsk-footer-is-something-wrong
+          a(href=bsk_attributes.site_feedback_href) Is there something wrong with this page?
+        div.bsk-footer-back-to-top
           a.bsk-back-to-top(href=bsk_attributes.back_to_top_target_href)
             i.fa.fa-fw.fa-chevron-up(aria-hidden='true')
             | Back to top