code box style update

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": {

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();
 });

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 {

theme/templates/component.html

@@ -1,6 +1 @@
 {% extends "page.html" %}
-
-{% block waterfall %}
-<!-- https://raw.githubusercontent.com/kudago/waterfall/master/jquery.waterfall.js -->
-<script src="https://t.alipayobjects.com/images/T1iSVfXolAXXXXXXXX.js"></script>
-{% endblock %}

theme/templates/layout.html

@@ -105,21 +105,26 @@
           组件演示
           <i class="iconfont-home icon-all" title="展开全部代码"></i>
         </h2>
-        <div class="code-boxes waterfall" data-col-min-width="400"
-	data-default-container-width="800"
-	data-autoresize="true">
+        <div class="code-boxes clearfix">
           {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
-          {%- for item in items %}
+          <div class="code-boxes-col">
+            {%- for item in items|odd %}
             {%- set post = item.meta.filepath|parsePost %}
             {%- include "code.html" %}
-          {%- endfor %}
+            {%- endfor %}
+          </div>
+          <div class="code-boxes-col">
+            {%- for item in items|even %}
+            {%- set post = item.meta.filepath|parsePost %}
+            {%- include "code.html" %}
+            {%- endfor %}
+          </div>
         </div>
         {%- endif %}
       </article>
     </section>
   </div>
   {%- endif %}
-  {% block waterfall %}{% endblock %}
   <footer id="footer">
     <ul>
       <li>

theme/theme.js

@@ -65,6 +65,16 @@ module.exports = function(nico) {
     },
     parsePost: function(filepath) {
       return nico.sdk.post.read(filepath);
+    },
+    odd: function(items) {
+      return items.filter(function(item, i) {
+        return (i+1)%2 === 1;
+      });
+    },
+    even: function(items) {
+      return items.filter(function(item, i) {
+        return (i+1)%2 === 0;
+      });
     }
   };