From 4061b2e562b6e7e375cbec24076095dfdb187a51 Mon Sep 17 00:00:00 2001
From: Colleen Palmer <colleen@instructure.com>
Date: Thu, 19 Mar 2015 15:00:00 -0600
Subject: [PATCH] Styleguide Updates

fixes: CNVS-19415

This makes it so our styleguide nav doesn't have smooth scrolling
and the Tour link is no longer available in the sub-menu.

Test Plan:
- Go to /styleguide and click on something, you should be brought
directly to the section
- Go to Patterns. "Tour Popups" should no longer be in the sub-menu

Change-Id: Ie9396130655b5d6fab19c1a64f9a5625e6c19f22
Reviewed-on: https://gerrit.instructure.com/50660
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
Tested-by: Jenkins
QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
---
 app/coffeescripts/bundles/styleguide.coffee         | 13 -------------
 .../pages/styleguide/_styleguide_app.scss           | 11 +++++++++++
 .../pages/styleguide/_styleguide_layout.scss        |  3 ++-
 doc/styleguide/template.mustache                    |  4 ++--
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/app/coffeescripts/bundles/styleguide.coffee b/app/coffeescripts/bundles/styleguide.coffee
index e868da07af8..6abb2baee5a 100644
--- a/app/coffeescripts/bundles/styleguide.coffee
+++ b/app/coffeescripts/bundles/styleguide.coffee
@@ -149,19 +149,6 @@ require [
   $("#repeat").buttonset()
 
   $(".styleguide-datetime_field-example").datetime_field()
-
-  # Smooth anchor scrolling
-
-  $(".Sg-header__Subnavigation a[href*=#]:not([href=#])").click ->
-    if location.pathname.replace(/^\//, "") is @pathname.replace(/^\//, "") and location.hostname is @hostname
-      target = $(@hash)
-      headerHeight = $(".Sg-header").height()
-      target = (if target.length then target else $("[name=" + @hash.slice(1) + "]"))
-      if target.length
-        $("html,body").animate
-          scrollTop: target.offset().top - headerHeight
-        , 3000
-        false
   
   #Global Navigation Hide/Show Subnav
   selectCategory = (event) ->
diff --git a/app/stylesheets/pages/styleguide/_styleguide_app.scss b/app/stylesheets/pages/styleguide/_styleguide_app.scss
index 767a205b148..072dda2aed2 100755
--- a/app/stylesheets/pages/styleguide/_styleguide_app.scss
+++ b/app/stylesheets/pages/styleguide/_styleguide_app.scss
@@ -17,6 +17,17 @@
 }
 .Sg-Section {
   padding-bottom: 100px; // adds some padding between our sections and headers
+  
+}
+$sg-Header-height: 85px;
+.Sg-Header {
+  height: $sg-Header-height;
+}
+.Sg-Anchor {
+  display: block;
+  height: $sg-Header-height; 
+  margin-top: -$sg-Header-height; 
+  visibility: hidden;
 }
 .Sg-header__Subnavigation-item {
   // to account for our added "section" for canvas sg nav
diff --git a/app/stylesheets/pages/styleguide/_styleguide_layout.scss b/app/stylesheets/pages/styleguide/_styleguide_layout.scss
index 8373a3ae136..e4d187c6d6d 100755
--- a/app/stylesheets/pages/styleguide/_styleguide_layout.scss
+++ b/app/stylesheets/pages/styleguide/_styleguide_layout.scss
@@ -88,7 +88,8 @@ body.Sg-only {
   }
   &:focus {
     text-decoration: none;  
-  }
+    color: $sg-header-navigation-item;
+  }  
 }
 .Sg-header__Navigation-item.active {
   background: $sg-background-sub-nav;
diff --git a/doc/styleguide/template.mustache b/doc/styleguide/template.mustache
index 437578e2e9f..1d5eec0756e 100644
--- a/doc/styleguide/template.mustache
+++ b/doc/styleguide/template.mustache
@@ -45,7 +45,6 @@
       <a class="Sg-header__Subnavigation-item" href="#popovers">Popovers</a>
       <a class="Sg-header__Subnavigation-item" href="#progress_bar">Progress Bar</a>
       <a class="Sg-header__Subnavigation-item" href="#publish_state">Publish State</a>
-      <a class="Sg-header__Subnavigation-item" href="#tour_popups">Tour Popups</a>
     </section>
   </nav>  
 </header>
@@ -57,7 +56,8 @@
     {{#docs}}
       <section class="Sg-Section {{id}}" style="position: relative;">
         <div class="Sg-Content">  
-          <h1 id="{{id}}">{{component}}</h1>   
+          <span id="{{id}}" class="Sg-Anchor"></span>
+          <h1>{{component}}</h1>   
           
           <div class="sg-src-file-path">{{file}}</div>
           <div class="grid-row">