fix(documentation): Different styles tweaks to fit to #54

algolia · Apr 6, 2016 · dc14334 · dc14334
1 parent 32edb43
commit dc14334
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 5 deletions.
diff --git a/docs/source/javascripts/documentation.js b/docs/source/javascripts/documentation.js
@@ -5,6 +5,7 @@ import './responsive-navigation.js';
 demo();
 anchorableTitles();
 sidebarFollowScroll();
+//activeLinks();
 
 function demo() {
   places({
@@ -51,3 +52,23 @@ function sidebarFollowScroll() {
     }
   });
 }
+
+// The Following code is used to set active items
+// On the documentation sidebar depending on the
+// clicked item
+
+  let linksContainer = document.querySelector('#sidebar ul');
+  let removeActive = (item) => {
+    item.classList.remove('active');
+  };
+
+  linksContainer.addEventListener('click', function(e) {
+
+    // UGLY AS F**K
+    if (e.target.tagName === 'A') {
+        [].forEach.call(this.children, removeActive);
+      e.target.parentNode.classList.add('active');
+    }
+  });
+
+
diff --git a/docs/source/partials/documentation/sidebar.md b/docs/source/partials/documentation/sidebar.md
@@ -1,3 +1,3 @@
 - [Getting started](#getting-started)
 - [API](#api)
-- [Rate limit](#rate-limitf)
+- [Rate limit](#rate-limit)
diff --git a/docs/source/stylesheets/components/_containers.scss b/docs/source/stylesheets/components/_containers.scss
@@ -107,7 +107,7 @@ section {
       min-height: 314px
     }
 
-    svg {
+    .fl-right svg {
       path,
       ellipse {
         transform: translateY(12px);

diff --git a/docs/source/stylesheets/components/_documentation.scss b/docs/source/stylesheets/components/_documentation.scss
@@ -43,14 +43,22 @@
     }
 
     h2, h3 {
+      padding-bottom: 8px;
+
+      .anchor {
+        color: $red-pink;
+        text-decoration: none;
+      }
       &:hover {
         .anchor {
           display: inline;
         }
       }
 
       &:target {
-        text-decoration: underline;
+        .anchor {
+          display: inline;
+        }
       }
     }
   }

diff --git a/docs/source/stylesheets/components/_sidebar.scss b/docs/source/stylesheets/components/_sidebar.scss
@@ -38,10 +38,13 @@ nav.sidebar {
 
         &:focus,
         &:target {
-          color: $red-pink;
-          box-shadow: inset -2px 0 0 0 $red-pink
+          @extend %active-links;
         }
       }
+
+      &.active a{
+        @extend %active-links;
+      }
     }
   }
 

diff --git a/docs/source/stylesheets/vendors/_mixins.scss b/docs/source/stylesheets/vendors/_mixins.scss
@@ -18,6 +18,11 @@
   float: none;
 }
 
+%active-links {
+  color: $red-pink;
+  box-shadow: inset -2px 0 0 0 $red-pink
+}
+
 @mixin big-min-mq {
   @media (min-width: $bp-big){
     @content