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,9 +19,9 @@ $(function() {
   });
 
   function slideToggleCode(item) {
-    $(item).find('.highlight').slideToggle(150);
-    item.toggleClass('code-box-expand');
+    $(item).find('.highlight').slideToggle();
   }
+
   var navFunc={
     navStrArr: [],
     init:function (){
@@ -31,7 +37,7 @@ $(function() {
     },
     navResize: function (e) {
       var self = navFunc;
-            self.navBar.css("left", self.navList.width() * self.navNum)//.addClass("barAnim");
+      self.navBar.css("left", self.navList.width() * self.navNum);
 
       self.navList.eq(self.navNum).find("a").addClass("hover");
     },
@@ -52,7 +58,7 @@ $(function() {
       });
       self.searchBtn.click(function (e) {
         self.searchBox.find("form").submit();
-            })
+      });
     },
     navBarAnim: function () {
       var self = this,delay;
@@ -64,14 +70,14 @@ $(function() {
         clearTimeout(delay);
         var m = e.currentTarget;
         self.navList.find("a").removeClass("hover");
-                self.navBar.addClass("barAnim").css("left", $(m).width() * $(m).index())
+        self.navBar.addClass("barAnim").css("left", $(m).width() * $(m).index());
       });
       self.navList.bind("mouseleave", function (e) {
         delay = setTimeout(function () {
-                    startBarAnim(self.navNum)
+          startBarAnim(self.navNum);
         }, 500);
       });
     }
   };
-    navFunc.init()
+  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 %}
           </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;
+      });
     }
   };