Modify ToC status change logic.

lodge · May 5, 2015 · 730a85a · 730a85a
1 parent 47b5161
commit 730a85a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/app/assets/javascripts/articles.js.coffee.erb b/app/assets/javascripts/articles.js.coffee.erb
@@ -41,8 +41,9 @@ $ ->
     e.stopImmediatePropagation()
     $tocArea = $(this).parent()
     $ul = $(this).siblings('ul')
-    $ul.toggle()
     if $ul.is(':visible')
-      $tocArea.css('width', 'inherit')
+      $ul.hide()
+      $tocArea.attr('data-opened', 'false')
     else
-      $tocArea.css('width', '')
+      $ul.show()
+      $tocArea.attr('data-opened', 'true')
diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
@@ -159,24 +159,39 @@ h1 {
 }
 
 .markdown .markdown-toc {
-  width: 70px;
   border: 1px solid $gray-light;
   @include border-radius($border-radius-base);
+  width: 70px;
+
   h1 {
     background-color: lighten($gray-light, 10%);
     box-shadow: inset 1px 1px 15px -5px #fff;
-    @include border-radius($border-radius-base);
     font-size: $font-size-h3 * 0.7;
     margin: 0;
+    @include border-radius($border-radius-base);
+
     &:hover {
       background-color: lighten($gray-light, 15%);
       cursor: pointer;
     }
   }
 
   > ul {
-    display: none;
     margin-top: 15px;
+    display: none;
+  }
+
+  &[data-opened="true"] {
+    width: inherit;
+
+    h1 {
+      border-radius: 4px 4px 0 0;
+      border-bottom: 1px solid $gray-light;
+    }
+
+    > ul {
+      display: block;
+    }
   }
 }