GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

code box style update

pull/4/head
afc163 10 years ago
parent
90c07d7ce4
commit
60505f1498
6 changed files with 104 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 124
      static/script.js
  3. 28
      static/style.css
  4. 5
      theme/templates/component.html
  5. 17
      theme/templates/layout.html
  6. 10
      theme/theme.js

2
package.json
View File

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

124
static/script.js
View File

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

28
static/style.css
View File

@ -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 {

5
theme/templates/component.html
View File

@ -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 %}

17
theme/templates/layout.html
View File

@ -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>

10
theme/theme.js
View File

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

Write Preview
Loading…
Cancel
Save