update toc style

2025-01-18 06:03:38 +08:00 · 2016-01-09 17:31:03 +08:00 · 2016-01-09 17:31:03 +08:00 · b4c2d9bf8f
commit b4c2d9bf8f
parent 658660a158
8 changed files with 73 additions and 64 deletions
--- a/docs/pattern/navigation.md
+++ b/docs/pattern/navigation.md
@ -13,7 +13,28 @@

 ## 常见导航

-<img class="preview-img" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
+<Table style="font-size:12px;float:right;width:600px;margin-left:60px;">
+  <tr>
+    <th></th>
+    <th>侧栏导航</th>
+    <th>顶部导航</th>
+  </tr>
+  <tr>
+    <th>优点</th>
+    <td>导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。</td>
+    <td>人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。</td>
+  </tr>
+  <tr>
+    <th>缺点</th>
+    <td>内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。</td>
+    <td>目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。</td>
+  </tr>
+  <tr>
+    <th>总结</th>
+    <td>一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。</td>
+    <td>适用在操作性强、中后台管理性质的应用。</td>
+  </tr>
+</Table>

 我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。

--- a/docs/practice/cases.md
+++ b/docs/practice/cases.md
@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。

 ### 金融云

-<img as-cover class="preview-img" width="420" alt="图例1" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
-<img class="preview-img" width="420" alt="图例2" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
-<img class="preview-img" width="420" alt="图例3" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/MKspFSBnDPrmqnz.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/ssKQluRCiuOFMFH.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OhdrPCvCabsVUuQ.png">

 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。

@ -27,7 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。

 ### OceanBase Cloud Platform

-<img class="preview-img" width="420" alt="图例3" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/zarxEZDIRYfwFKB.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/xqcXkzAxbApmjKC.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/LBNAgCWuXcOkmSM.png">

 OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。

@ -35,7 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce

 ### 服务宝体验平台

-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/qmnuCdZGZFXrcRP.png">
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/UAZCIqsrVgtLhKP.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/graXLoQUgPXcVDv.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/CZXDKssYFNYZgeb.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IhPfMRswdRzfmOr.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/uQOssWBwFGyWEbZ.png">

 体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。

@ -43,18 +49,20 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce

 ### AntV

-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lOFDPejqANtHXmj.png">
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/anuTfymhGNvBBsU.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/STnKKwGLsmhdpHB.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/dIWogehNYmeAamw.png">

 AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。

 <style>
-.markdown hr {
-  width: 112%;
-}
 .preview-image-boxes {
  margin-top: -36px;
 }
 .preview-image-wrapper {
  padding: 0;
 }
+.toc {
+  display: none;
+}
 </style>
--- a/scripts/demo.js
+++ b/scripts/demo.js
@ -145,14 +145,6 @@ window.BrowserDemo = React.createClass({
  }
 });

-/*
-<Carousel>
-  <div><img src={this.props.src} /></div>
-  <div><img src={this.props.src} /></div>
-  <div><img src={this.props.src} /></div>
-</Carousel>
-*/
-
 const { Modal, Carousel } = antd;
 const PriviewImg = React.createClass({
  getInitialState() {
@ -190,7 +182,7 @@ const PriviewImg = React.createClass({
        <div className="preview-image-title">{this.props.alt}</div>
        <div className="preview-image-description">{this.props.description}</div>
        <Modal className="image-modal" width="840" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
-          <Carousel afterChange={this.handleImgChange}>
+          <Carousel afterChange={this.handleImgChange} adaptiveHeight>
            {
              imgsPack.map((img, i) =>
                <div key={i}>
@ -240,7 +232,7 @@ InstantClickChangeFns.push(function() {
    }

    // 计算宽度
-    let width = 'auto';
+    let width = '';
    if (priviewImgs.length === 1) {
      width = priviewImgNodes[0].getAttribute('width') || '';
    } else if (coverImg) {
--- a/site/static/script.js
+++ b/site/static/script.js
@ -58,27 +58,11 @@ InstantClickChangeFns.push(function() {
  $('.markdown #api').nextAll().andSelf().appendTo('.api-container');

  // 滚动时固定锚点、高亮当前项
-  if ($('.toc')[0]) {
-    var titles = $('.markdown :header:not(h1)');
+  if ($('.demos-anchor')[0]) {
    var doc = $(document);
    var tocTop = $('.toc').offset().top;
    function onScroll() {
-      var top = doc.scrollTop(), i;
-      if (top >= doc.height()- $(window).height() - 20) {
-        i = titles.length - 1;
-      } else {
-        for (i=0; i<titles.length; i++) {
-          if (top < titles.eq(i).offset().top - 20) {
-            break;
-          }
-        }
-        i--;
-        i = (i < 0) ? 0 : i;
-        i = (i > titles.length - 1) ? (titles.length - 1) : i;
-      }
-      $('.anchor a').removeClass('current');
-      $('.anchor a').eq(i).addClass('current');
-
+      var top = doc.scrollTop();
      if (top >= tocTop) {
        $('.toc').addClass('sticky');
      } else {
@ -86,7 +70,6 @@ InstantClickChangeFns.push(function() {
      }
    }
    onScroll();
-    // 滚动高亮
    $(window).off('scroll');
    $(window).on('scroll', onScroll);
  }
--- a/site/static/style.css
+++ b/site/static/style.css
@ -491,7 +491,6 @@ footer ul li > a {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
-  width: 80%;
 }

 .highlight {
@ -541,6 +540,14 @@ footer ul li > a {
  margin: 1em 0;
 }

+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
 .markdown > ul li,
 .markdown blockquote ul > li {
  list-style: circle;
@ -613,7 +620,6 @@ footer ul li > a {
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
-  overflow: hidden;
 }

 .markdown blockquote p {
@ -688,37 +694,28 @@ footer ul li > a {
 }

 .toc {
-  position: absolute;
-  font-size: 12px;
-  background: #fff;
-  padding-top: 12px;
-  right: 24px;
-  overflow: hidden;
-}
-
-.toc.sticky {
-  position: fixed;
-  top: 0;
-  right: 4%;
-  margin-right: 24px;
-  z-index: 100;
+  font-size: 14px;
+  margin-bottom: 20px;
+  background: #fbfbfb;
+  padding: 8px 0;
+  border-left: 2px solid #eee;
 }

 .toc li > ul {
  text-indent: 8px;
+  font-size: 12px;
+  display: none;
 }

 .toc a {
-  padding-left: 8px;
+  padding-left: 16px;
  border-left: 2px solid #eee;
+  margin-left: -2px;
  display: block;
  transition: all 0.3s ease;
  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
-  max-width: 90px;
-  line-height: 20px;
-  color: #999;
+  color: #666;
 }

 .toc a:hover {
@ -1246,9 +1243,17 @@ a.entry-link:hover .anticon-smile {
  font-size: 12px;
 }

+.demos-anchor.toc.sticky {
+  position: fixed;
+  top: 0;
+  right: 4%;
+  margin-right: 24px;
+  z-index: 100;
+}
+
 .preview-image-boxes {
  float: right;
-  margin: 0 -14% 30px 60px;
+  margin: 0 0 30px 60px;
  width: 600px;
  overflow: hidden;
 }
--- a/site/templates/demos.html
+++ b/site/templates/demos.html
@ -33,7 +33,7 @@
  </div>
  {%- endif %}
 </div>
-<ul class="toc demos-anchor anchor">
+<ul class="toc demos-anchor">
  {%- for item in items %}
  {%- set post = item.meta.filepath|parsePost %}
  <li>
--- a/site/templates/home.html
+++ b/site/templates/home.html
@ -61,7 +61,7 @@
  .banner-text-wrapper {
    position: absolute;
    left: 10%;
-    top: 60%;
+    bottom: 20%;
    color: #fff;
    text-align: right;
  }
--- a/site/templates/page.html
+++ b/site/templates/page.html
@ -16,9 +16,9 @@

 {% block content %}
 <section class="main-container">
-  <div class="toc anchor">{{ post.toc }}</div>
  <article class="markdown">
    <h1>{{ post.title }} {{ post.meta.chinese }}</h1>
+    <div class="toc">{{ post.toc }}</div>
    {{ post.html|add_anchor }}
  </article>
 </section>