From 60505f1498323668967954f1b318a4ee26a3124b Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 27 May 2015 11:35:01 +0800 Subject: [PATCH] code box style update --- package.json | 2 +- static/script.js | 124 +++++++++++++++++---------------- static/style.css | 28 +++++--- theme/templates/component.html | 5 -- theme/templates/layout.html | 17 +++-- theme/theme.js | 10 +++ 6 files changed, 104 insertions(+), 82 deletions(-) diff --git a/package.json b/package.json index c1704f091c..b2fd31f79b 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "dependencies": { "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", - "rc-calendar": "~3.4.2", + "rc-calendar": "~3.5.0", "rc-style": "git@github.com:react-component/style.git" }, "devDependencies": { diff --git a/static/script.js b/static/script.js index 3c5267d7be..c2191f58d9 100644 --- a/static/script.js +++ b/static/script.js @@ -1,6 +1,12 @@ $(function() { $('.component-demos .icon-all').on('click', function() { - slideToggleCode('.code-box'); + if ($(this).hasClass('expand')) { + $(this).removeClass('expand'); + $('.code-box').find('.highlight').slideUp(); + } else { + $(this).addClass('expand'); + $('.code-box').find('.highlight').slideDown(); + } }); $('.code-box').each(function(i, item) { @@ -13,65 +19,65 @@ $(function() { }); function slideToggleCode(item) { - $(item).find('.highlight').slideToggle(150); - item.toggleClass('code-box-expand'); + $(item).find('.highlight').slideToggle(); } - var navFunc={ - navStrArr: [], - init:function (){ - var self=this; - self.navBox = $(".nav"); - self.navBar = self.navBox.find(".bar"); - self.navList = self.navBox.find("ul li"); - self.navNum=$(".current").index(); - self.search($(".search")); - self.navBarAnim(); - self.navResize(null); - $(window).bind("resize", self.navResize); - }, - navResize: function (e) { - var self = navFunc; - self.navBar.css("left", self.navList.width() * self.navNum)//.addClass("barAnim"); - self.navList.eq(self.navNum).find("a").addClass("hover"); - }, - search: function (c) { - var self = this; - self.searchBox = c; - self.searchInput = self.searchBox.find("input[type='text']"); - self.searchBtn = self.searchBox.find("button"); - self.searchInput.focus(function (e) { - $(this).addClass("focus"); - self.searchBtn.css("left", self.searchBox.width() + 13); - }); - self.searchInput.blur(function (e) { - if (!self.searchInput.val()) { - self.searchBtn.attr("style", ""); - $(this).removeClass("focus"); - } - }); - self.searchBtn.click(function (e) { - self.searchBox.find("form").submit(); - }) - }, - navBarAnim: function () { - var self = this,delay; - function startBarAnim(num) { - self.navBar.css("left", self.navList.width() * num); - self.navList.eq(num).find("a").addClass("hover"); - } - self.navList.bind("mouseenter", function (e) { - clearTimeout(delay); - var m = e.currentTarget; - self.navList.find("a").removeClass("hover"); - self.navBar.addClass("barAnim").css("left", $(m).width() * $(m).index()) - }); - self.navList.bind("mouseleave", function (e) { - delay = setTimeout(function () { - startBarAnim(self.navNum) - }, 500); - }); + var navFunc={ + navStrArr: [], + init:function (){ + var self=this; + self.navBox = $(".nav"); + self.navBar = self.navBox.find(".bar"); + self.navList = self.navBox.find("ul li"); + self.navNum=$(".current").index(); + self.search($(".search")); + self.navBarAnim(); + self.navResize(null); + $(window).bind("resize", self.navResize); + }, + navResize: function (e) { + var self = navFunc; + self.navBar.css("left", self.navList.width() * self.navNum); + + self.navList.eq(self.navNum).find("a").addClass("hover"); + }, + search: function (c) { + var self = this; + self.searchBox = c; + self.searchInput = self.searchBox.find("input[type='text']"); + self.searchBtn = self.searchBox.find("button"); + self.searchInput.focus(function (e) { + $(this).addClass("focus"); + self.searchBtn.css("left", self.searchBox.width() + 13); + }); + self.searchInput.blur(function (e) { + if (!self.searchInput.val()) { + self.searchBtn.attr("style", ""); + $(this).removeClass("focus"); } - }; - navFunc.init() + }); + self.searchBtn.click(function (e) { + self.searchBox.find("form").submit(); + }); + }, + navBarAnim: function () { + var self = this,delay; + function startBarAnim(num) { + self.navBar.css("left", self.navList.width() * num); + self.navList.eq(num).find("a").addClass("hover"); + } + self.navList.bind("mouseenter", function (e) { + clearTimeout(delay); + var m = e.currentTarget; + self.navList.find("a").removeClass("hover"); + self.navBar.addClass("barAnim").css("left", $(m).width() * $(m).index()); + }); + self.navList.bind("mouseleave", function (e) { + delay = setTimeout(function () { + startBarAnim(self.navNum); + }, 500); + }); + } + }; + navFunc.init(); }); diff --git a/static/style.css b/static/style.css index ce684e7ea3..18edbe77b6 100644 --- a/static/style.css +++ b/static/style.css @@ -66,6 +66,13 @@ a { a:hover { color: #6EB4E0; } + +.clearfix:after { + clear: both; + display: table; + content: ''; +} + header { width: 100%; background: #fff; @@ -1031,6 +1038,16 @@ footer ul li > a { opacity: 1; } +.component-demos .icon-all.expand { + color: #3B4357; +} + +.code-boxes-col { + width: 50%; + float: left; + padding-right: 15px; +} + .code-box { border: 1px solid #E9E9E9; border-radius: 6px; @@ -1040,11 +1057,6 @@ footer ul li > a { margin: 0px 15px 15px 0px; } -.code-box.code-box-expand { - border-bottom: 1px dashed #ddd; - border-radius: 6px 6px 0 0; -} - .code-box .code-box-demo { padding: 50px 25px; border-bottom: 1px solid #ddd; @@ -1110,13 +1122,7 @@ footer ul li > a { overflow: hidden; display: none; padding: 5px 15px; - position: absolute; - width: calc(100% + 2px); - border: 1px solid #ddd; border-top: 1px dashed #ddd; - border-radius: 0 0 6px 6px; - background: #fff; - margin-left: -1px; } .code-box pre { diff --git a/theme/templates/component.html b/theme/templates/component.html index dc8df5f35e..fa11c0311f 100644 --- a/theme/templates/component.html +++ b/theme/templates/component.html @@ -1,6 +1 @@ {% extends "page.html" %} - -{% block waterfall %} - - -{% endblock %} diff --git a/theme/templates/layout.html b/theme/templates/layout.html index 067f605a08..04779e86e3 100644 --- a/theme/templates/layout.html +++ b/theme/templates/layout.html @@ -105,21 +105,26 @@ 组件演示 -
+
{%- set items = resource.pages|find_demo_in_component(post.meta.directory) %} - {%- for item in items %} +
+ {%- for item in items|odd %} {%- set post = item.meta.filepath|parsePost %} {%- include "code.html" %} - {%- endfor %} + {%- endfor %} +
+
+ {%- for item in items|even %} + {%- set post = item.meta.filepath|parsePost %} + {%- include "code.html" %} + {%- endfor %} +
{%- endif %}
{%- endif %} - {% block waterfall %}{% endblock %}