Add styling to parent links of current link

Stuart98 · Mar 2, 2017 · 7090d80 · 7090d80
1 parent 4aae61a
commit 7090d80
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 1 deletion.
diff --git a/source/index.html.md b/source/index.html.md
@@ -187,3 +187,53 @@ Parameter | Description
 --------- | -----------
 ID | The ID of the kitten to retrieve
 
+## Delete a Specific Kitten
+
+```ruby
+require 'kittn'
+
+api = Kittn::APIClient.authorize!('meowmeowmeow')
+api.kittens.delete(2)
+```
+
+```python
+import kittn
+
+api = kittn.authorize('meowmeowmeow')
+api.kittens.delete(2)
+```
+
+```shell
+curl "http://example.com/api/kittens/2"
+  -X DELETE
+  -H "Authorization: meowmeowmeow"
+```
+
+```javascript
+const kittn = require('kittn');
+
+let api = kittn.authorize('meowmeowmeow');
+let max = api.kittens.delete(2);
+```
+
+> The above command returns JSON structured like this:
+
+```json
+{
+  "id": 2,
+  "deleted" : ":("
+}
+```
+
+This endpoint retrieves a specific kitten.
+
+### HTTP Request
+
+`DELETE http://example.com/kittens/<ID>`
+
+### URL Parameters
+
+Parameter | Description
+--------- | -----------
+ID | The ID of the kitten to delete
+
diff --git a/source/javascripts/app/_toc.js b/source/javascripts/app/_toc.js
@@ -59,9 +59,12 @@
 
       var $best = $toc.find("[href='" + best + "']").first();
       if (!$best.hasClass("active")) {
+        // .active is applied to the ToC link we're currently on, and its parent <ul>s selected by tocListSelector
+        // .active-expanded is applied to the ToC links that are parents of this one
         $toc.find(".active").removeClass("active");
+        $toc.find(".active-parent").removeClass("active-parent");
         $best.addClass("active");
-        $best.parents(tocListSelector).addClass("active");
+        $best.parents(tocListSelector).addClass("active").siblings(tocLinkSelector).addClass('active-parent');
         $best.siblings(tocListSelector).addClass("active");
         $toc.find(tocListSelector).filter(":not(.active)").slideUp(150);
         $toc.find(tocListSelector).filter(".active").slideDown(150);

diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss
@@ -29,6 +29,7 @@ $code-bg: #292929 !default;
 $code-annotation-bg: #1c1c1c !default;
 $nav-subitem-bg: #262626 !default;
 $nav-active-bg: #0F75D4 !default;
+$nav-active-parent-bg: #262626 !default; // parent links of the current section
 $lang-select-border: #000 !default;
 $lang-select-bg: #222 !default;
 $lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something
@@ -45,6 +46,7 @@ $search-notice-bg: #c97a7e !default;
 $main-text: #333 !default; // main content text color
 $nav-text: #fff !default;
 $nav-active-text: #fff !default;
+$nav-active-parent-text: #fff !default; // parent links of the current section
 $lang-select-text: #fff !default; // color of unselected language tab text
 $lang-select-active-text: #fff !default; // color of selected language tab text
 $lang-select-pressed-text: #fff !default; // color of language tab text when mouse is pressed

diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
@@ -159,6 +159,12 @@ html, body {
     color: $nav-active-text;
   }
 
+  // this is parent links of the currently selected ToC entry
+  .toc-link.active-parent {
+    background-color: $nav-active-parent-bg;
+    color: $nav-active-parent-text;
+  }
+
   .toc-list-h2 {
     display: none;
     background-color: $nav-subitem-bg;