From b56c5bb9e304526cbb783f84a7cc69aeaf4baeda Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 2 Jan 2016 15:04:39 +0800
Subject: [PATCH] improve demo anchor style

---
 site/static/script.js     | 12 ++++++++++++
 site/static/style.css     | 16 +++++++++++-----
 site/templates/demos.html | 20 ++++++++++----------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/site/static/script.js b/site/static/script.js
index cdfd37a2b8..ab7da4559e 100644
--- a/site/static/script.js
+++ b/site/static/script.js
@@ -41,6 +41,18 @@ InstantClickChangeFns.push(function() {
     }
   });
 
+  function hashChange() {
+    if (location.hash.indexOf('#demo-') === 0) {
+      $('.demos-anchor a').removeClass('current');
+      $('.demos-anchor a[href="' + location.hash + '"]').addClass('current');
+    }
+  }
+
+  hashChange();
+
+  // 高亮侧边演示菜单
+  $(window).on('hashchange', hashChange);
+
   // 移动 API 文档到演示下方
   $('.markdown #api').nextAll().andSelf().appendTo('.api-container');
 
diff --git a/site/static/style.css b/site/static/style.css
index 6f86ef9108..7f83d8eb64 100644
--- a/site/static/style.css
+++ b/site/static/style.css
@@ -1725,7 +1725,7 @@ footer ul li > a {
   display: inline-block;
   width: 100%;
   position: relative;
-  margin: 0px 15px 15px 0px;
+  margin: 0px 0 16px 0px;
   transition: all 0.5s ease;
 }
 
@@ -2111,6 +2111,7 @@ a.entry-link:hover .anticon-smile {
   border-radius: 0 0 5px 5px;
   background: #ececec;
 }
+
 .window-frame .status-bar {
   height: 2rem;
   border-radius: 0 0 0.35rem 0.35rem;
@@ -2120,18 +2121,22 @@ a.entry-link:hover .anticon-smile {
 .demos-anchor {
   color: #aaa;
   position: fixed;
-  bottom: 50%;
+  top: 120px;
   right: 0;
   z-index: 100;
-  transform: translateY(50%);
   transition: all 0.3s ease;
   background: #fff;
-  padding: 8px 18px 8px 28px;
-  border: 1px dashed #e9e9e9;
+  background: rgba(255,255,255,0.9);
+  padding: 8px 10px 8px 24px;
   border-radius: 6px 0 0 6px;
   margin: 0;
   font-size: 12px;
   border-right: 0;
+  -webkit-animation: .5s ease-out 0.5s xRightMatrix;
+  animation: .5s ease-out 0.5s xRightMatrix;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  opacity: 0;
 }
 
 .demos-anchor li {
@@ -2154,6 +2159,7 @@ a.entry-link:hover .anticon-smile {
   position: relative;
 }
 
+.demos-anchor a.current > span,
 .demos-anchor a > span:hover {
   color: #2db7f5;
 }
diff --git a/site/templates/demos.html b/site/templates/demos.html
index 8d0a429a42..722b70e735 100644
--- a/site/templates/demos.html
+++ b/site/templates/demos.html
@@ -10,6 +10,16 @@
   </a>
   {%- endif %}
 </h2>
+<ul class="demos-anchor">
+  {%- for item in items %}
+  {%- set post = item.meta.filepath|parsePost %}
+  <li>
+    <a title="{{ post.title }}" href="#{{post.meta.id|removeCodeBoxIdPrefix}}">
+      <span>{{ post.title }}</span>
+    </a>
+  </li>
+  {%- endfor %}
+</ul>
 <div class="code-boxes">
   {%- if post.meta.cols == 1 %}
     <div class="code-boxes-col-1-1">
@@ -33,14 +43,4 @@
   </div>
   {%- endif %}
 </div>
-<ul class="demos-anchor">
-  {%- for item in items %}
-  {%- set post = item.meta.filepath|parsePost %}
-  <li>
-    <a title="{{ post.title }}" href="#{{post.meta.id|removeCodeBoxIdPrefix}}">
-      <span>{{ post.title }}</span>
-    </a>
-  </li>
-  {%- endfor %}
-</ul>
 {%- endif %}