Merge pull request #71 from algolia/fix/misc-front

fix(documentation): Different styles tweaks to fit to #54
algolia · Apr 6, 2016 · cd8ab34 · cd8ab34
2 parents 9928383 + e94a14d
commit cd8ab34
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,22 @@ function sidebarFollowScroll() {
  }
  });
 }
+
+// The Following code is used to set active items
+// On the documentation sidebar depending on the
+// clicked item
+function activeLinks() {
+ const linksContainer = document.querySelector('#sidebar ul');
+ const removeActive = (item) => {
+ item.classList.remove('active');
+ };
+
+ linksContainer.addEventListener('click', function(e) {
+ 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/partials/hero.html.haml b/docs/source/partials/hero.html.haml
@@ -3,7 +3,8 @@
  %div.hero-container
 
  %div.fl-left
- %span{class: "icon icon-algolia-small no-mobile", id: "icon-algolia"}
+ %a{href: "http://algolia.com", title:"Link to Algolia webiste"}
+ %span{class: "icon icon-algolia-small no-mobile", id: "icon-algolia"}
  %span{class: "display-on-small small-illustration"}
  %img{src: "images/svg/places-illustration.svg"}
  %h1= current_page.data.title

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