From b4c2d9bf8fcb65e3f9b5b6b6e88617db910cb38d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 9 Jan 2016 17:31:03 +0800 Subject: [PATCH] update toc style --- docs/pattern/navigation.md | 23 +++++++++++++++++- docs/practice/cases.md | 26 +++++++++++++------- scripts/demo.js | 12 ++-------- site/static/script.js | 21 ++-------------- site/static/style.css | 49 +++++++++++++++++++++----------------- site/templates/demos.html | 2 +- site/templates/home.html | 2 +- site/templates/page.html | 2 +- 8 files changed, 73 insertions(+), 64 deletions(-) diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index f330443501..933d31e5b8 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -13,7 +13,28 @@ ## 常见导航 - + + + + + + + + + + + + + + + + + + + + + +
侧栏导航顶部导航
优点导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。
缺点内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。
总结一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。适用在操作性强、中后台管理性质的应用。
我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。 diff --git a/docs/practice/cases.md b/docs/practice/cases.md index 03dd1d80a1..5d3f412509 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -15,9 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### 金融云 -图例1 -图例2 -图例3 + + + 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 @@ -27,7 +27,9 @@ Ant Design 是面向中后台的 UI 设计语言。 ### OceanBase Cloud Platform -图例3 + + + OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 @@ -35,7 +37,11 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### 服务宝体验平台 - + + + + + 体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 @@ -43,18 +49,20 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce ### AntV - + + + AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 diff --git a/scripts/demo.js b/scripts/demo.js index c9c3220d54..e8aa79996e 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -145,14 +145,6 @@ window.BrowserDemo = React.createClass({ } }); -/* - -
-
-
- -*/ - const { Modal, Carousel } = antd; const PriviewImg = React.createClass({ getInitialState() { @@ -190,7 +182,7 @@ const PriviewImg = React.createClass({
{this.props.alt}
{this.props.description}
- + { imgsPack.map((img, 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) { diff --git a/site/static/script.js b/site/static/script.js index 2e9113af14..8e84dd4630 100644 --- 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 - 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); } diff --git a/site/static/style.css b/site/static/style.css index 550e9422e2..bd3b10073d 100644 --- 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; } diff --git a/site/templates/demos.html b/site/templates/demos.html index 16dacdfc86..905bde6485 100644 --- a/site/templates/demos.html +++ b/site/templates/demos.html @@ -33,7 +33,7 @@
{%- endif %} -
    +
      {%- for item in items %} {%- set post = item.meta.filepath|parsePost %}
    • diff --git a/site/templates/home.html b/site/templates/home.html index 737f8b3bd7..78ea83c355 100644 --- 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; } diff --git a/site/templates/page.html b/site/templates/page.html index d474f51b2c..e2ccae706b 100644 --- a/site/templates/page.html +++ b/site/templates/page.html @@ -16,9 +16,9 @@ {% block content %}
      -
      {{ post.toc }}

      {{ post.title }} {{ post.meta.chinese }}

      +
      {{ post.toc }}
      {{ post.html|add_anchor }}