Skip to content

WebStack 魔改版本 #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
331 changes: 331 additions & 0 deletions assets/css/search.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,331 @@

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

#search form {
position: relative
}

#search {
max-width: 919px;
/* margin: 5px auto 14px */
margin: -10px auto -10px;
}



.bg-blue {
background-color: #0179a8!important;
}

.bg-teal {
background-color: #00a28a!important;
}

.bg-pink {
background-color: #b76ba3!important;
}

.bg-yl {
background-color: #ff8209!important;
}

.bg-gj {
background-color: #0d4fff!important;
}

.bg-tp {
background-color: #68b828!important;
}

.bg-red {
background-color: #ea6759!important;
}

.bg-sq {
background-color: #4e5154!important;
}

.bg-sc {
background-color: #de0088!important;
}
.fa-2x {
padding-top: 15px;
font-size: 1.5em;
}

#search button i {
color: #ffffff;
font-size: 18px
}




.search-group {
display: none;
padding-left: 75px
}


.s-current .search-type {
display: block
}

.s-current {
display: block
}

#search-list {
position: relative
}


.s-type {
position: absolute;
top: 0;
left: 0;
z-index: 13;
width: 75px
}

.s-type:hover {
height: auto
}

.s-type>span {
display: block;
height: 31px;
width: 75px
}

.s-type-list {
display: none;
position: absolute;
top: 31px;
padding: 9pt 0;
width: 20pc;
color: #000;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 6px rgba(0,0,0,.16);
}

.s-type-list:before {
position: absolute;
top: -16px;
left: 10px;
content: ' ';
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
/* border-bottom-color: #fff */
}

.s-type-list label {
display: block;
font-size: 1pc;
line-height: 2pc;
text-align: center;
width: 33%;
float: left;
}

.s-type-list label:hover {
color: #2d6bc2
}

.s-type:hover .s-type-list {
display: block;
padding-top: 22px;
}

.type-text {
position: absolute;
left: 0;
width: 75px;
padding-left: 12px;
font-size: 16px;
line-height: 31px
}

.type-text:after {
content: '';
font-family: FontAwesome;
margin: 0 0 0 15px
}

.search-type {
white-space: nowrap
}

.search-type li {
display: inline-block
}

.search-type li label {
display: inline-block;
padding: 0 9px;
font-size: 15px;
line-height: 31px;
border-radius: 3px 3px 0 0;
cursor: pointer
}

.search-type input:checked+label {
background-color: #fff;

}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #888;
}


.set-check {
margin-top: 25px;
font-size: 12px
}

.set-check label {
margin-left: 3px
}

.set-check input,.set-check label {
opacity: 0;
transition: all .3s ease
}

/* .set-check:hover input,.set-check:hover label { */
/* opacity: .2 */
/* } */

/* .set-check:hover label:hover { */
/* opacity: 1 */
/* } */

.search-type li {
list-style: none;
display: inline-block
}


@media screen and (max-width:767px) {
#search {
/* margin: 20px auto 30px */
margin: 0px auto 30px;
}

.search-type {
overflow: scroll
}

.search-list {
height: 30px;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap
}
}


.rollbar {
position: fixed;
right: 0px;
bottom: 20px;
z-index: 999;
display: none;
}
.rollbar ul{
margin: 0;
padding: 0;
list-style: none;
width: 25px;
}
.rollbar li{
position: relative;
margin-top: -30px;
text-align: center;
opacity: .6;
filter: alpha(opacity=40);
}
.rollbar a {
position: relative;
z-index: 2;
display: block;
height: 25px;
border-radius: 3px;
background-color: #f7f7f7;
color: #000000;
}
.rollbar a:hover{
color: #000;
}
.rollbar .fa{
line-height: 25px;
font-size: 14px;
}
.rollbar .fa-comments{font-size: 24px;}

.rollbar li:hover, .rollbar li:hover h6 {
opacity: .9;
filter: alpha(opacity=90)
}
.rollbar li:hover h6{
right: 100%;
}
.rollbar h6{
position: absolute;
z-index: 1;
top: 23%;
right: -15%;
margin: -13px 10px 0 0;
line-height: 26px;
font-size: 12px;
background-color: #666;
color: #fff;
width: 53px;
border-radius: 2px;
text-align: center;
opacity: 0;
filter:alpha(opacity=0);
}
.rollbar h6 i{
position: absolute;
right: -4px;
top: 50%;
margin-top: -4px;
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-left: 4px solid #666;
border-top: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid rgba(0, 0, 0, 0);
}

#search{max-width:717px;margin:56px auto 14px}
#search form{position:relative}
#search-text{padding:9pt;width:100%;height:50px;font-size:1pc;border:0;border-radius:23px;background-color:#fff}
#search button{position:absolute;top:0;right:0;background:#ff9900;border:0;width:70px;height:36px;margin:8px;line-height:36px;border-radius:30px; outline:none;}
#search button:hover{background:#ff9985;cursor:pointer}
#search button i{color:#fff;font-size:18px}.search-group{display:none;padding-left:75px}.s-current .search-type{padding-left:0;display:block}.s-current{display:block}#search-list{position:relative}.s-type{position:absolute;top:0;left:0;z-index:13;width:75px}.s-type:hover{height:auto}.s-type>span{display:block;height:31px;width:75px}.s-type-list{display:none;position:absolute;top:31px;padding:9pt 0;width:20pc;background:#fff;border-radius:13.56px;box-shadow:0 0 6px rgba(0,0,0,.16)}.s-type-list:before{position:absolute;top:-1pc;left:10px;content:' ';display:block;width:0;height:0;border:10px solid transparent;border-bottom-color:#fff}.s-type-list label{display:block;font-size:1pc;line-height:2pc;text-align:center;width:33%;float:left}.s-type-list .tile-lg{color:#fff;width:3pc;height:3pc;font-size:1.25rem;line-height:3rem;border-radius:.3rem;display:block;margin:auto}

.bg-blue{background-color:#0179a8!important}.bg-purple{background-color:#5f4b8b!important}.bg-pink{background-color:#b76ba3!important}.bg-red{background-color:#ea6759!important}.bg-orange{background-color:#ec935e!important}.bg-yellow{background-color:#f7c46c!important}.bg-green{background-color:#a7c796!important}.bg-teal{background-color:#00a28a!important}.bg-cyan{background-color:#3686a0!important}.bg-gray{background-color:#686f76!important}.s-type-list label:hover{color:#000}.s-type:hover .s-type-list{display:block;padding-top:22px}.type-text{position:absolute;left:0;width:75px;padding-left:9pt;font-size:1pc;line-height:31px}.type-text:after{content:"\f105";font-family:FontAwesome;margin:0 0 0 15px}.search-type{white-space:nowrap;margin:0}.search-type label{margin:0}.search-type li{display:inline-block}.search-type li label{display:inline-block;padding:0 11px;font-size:14px;line-height:31px;border-radius:3px 3px 0 0;cursor:pointer}.search-type input:checked+label,.search-type input:hover+label{background-color:#fff}.set-check{margin-top:3px;font-size:9pt}.set-check label{margin-left:3px}.set-check input,.set-check label{opacity:0;transition:all .3s ease}.search-type li{list-style:none;display:inline-block}@media screen and (max-width:767px){#search{margin:25px auto 15px}.search-type{overflow:scroll}.search-list{height:30px;overflow-y:hidden;overflow-x:scroll;white-space:nowrap}}@media screen and (max-width:768px){#search{margin:25px auto 15px}.search-type{overflow:scroll}.search-list{height:30px;overflow-y:hidden;overflow-x:scroll;white-space:nowrap}}.fa-2x{padding-top: 15px;font-size: 1.5em;}

.s-type-list .tile-lg {
color: #ffffff;
width: 3pc;
height: 3pc;
font-size: 1.25rem;
line-height: 3rem;
border-radius: 12rem;
display: block;
margin: auto;
}
Binary file added assets/images/loading.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
242 changes: 242 additions & 0 deletions assets/js/jquery.lazyload.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
/*!
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2015 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
* Version: 1.9.7
*
*/

(function($, window, document, undefined) {
var $window = $(window);

$.fn.lazyload = function(options) {
var elements = this;
var $container;
var settings = {
threshold : 0,
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : false,
appear : null,
load : null,
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
};

function update() {
var counter = 0;

elements.each(function() {
var $this = $(this);
if (settings.skip_invisible && !$this.is(":visible")) {
return;
}
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$this.trigger("appear");
/* if we found an image we'll load, reset the counter */
counter = 0;
} else {
if (++counter > settings.failure_limit) {
return false;
}
}
});

}

if(options) {
/* Maintain BC for a couple of versions. */
if (undefined !== options.failurelimit) {
options.failure_limit = options.failurelimit;
delete options.failurelimit;
}
if (undefined !== options.effectspeed) {
options.effect_speed = options.effectspeed;
delete options.effectspeed;
}

$.extend(settings, options);
}

/* Cache container as jQuery as object. */
$container = (settings.container === undefined ||
settings.container === window) ? $window : $(settings.container);

/* Fire one scroll event per scroll. Not one scroll event per image. */
if (0 === settings.event.indexOf("scroll")) {
$container.bind(settings.event, function() {
return update();
});
}

this.each(function() {
var self = this;
var $self = $(self);

self.loaded = false;

/* If no src attribute given use data:uri. */
if ($self.attr("src") === undefined || $self.attr("src") === false) {
if ($self.is("img")) {
$self.attr("src", settings.placeholder);
}
}

/* When appear is triggered load original image. */
$self.one("appear", function() {
if (!this.loaded) {
if (settings.appear) {
var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("<img />")
.bind("load", function() {

var original = $self.attr("data-" + settings.data_attribute);
$self.hide();
if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed);

self.loaded = true;

/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);

if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));
}
});

/* When wanted event is triggered load original image */
/* by triggering appear. */
if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function() {
if (!self.loaded) {
$self.trigger("appear");
}
});
}
});

/* Check if something appears when window is resized. */
$window.bind("resize", function() {
update();
});

/* With IOS5 force loading images when navigating with back button. */
/* Non optimal workaround. */
if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {
if (event.originalEvent && event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
}

/* Force initial check if images should appear. */
$(document).ready(function() {
update();
});

return this;
};

/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */

$.belowthefold = function(element, settings) {
var fold;

if (settings.container === undefined || settings.container === window) {
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}

return fold <= $(element).offset().top - settings.threshold;
};

$.rightoffold = function(element, settings) {
var fold;

if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
}

return fold <= $(element).offset().left - settings.threshold;
};

$.abovethetop = function(element, settings) {
var fold;

if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $(settings.container).offset().top;
}

return fold >= $(element).offset().top + settings.threshold + $(element).height();
};

$.leftofbegin = function(element, settings) {
var fold;

if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $(settings.container).offset().left;
}

return fold >= $(element).offset().left + settings.threshold + $(element).width();
};

$.inviewport = function(element, settings) {
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};

/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() or */
/* $("img").filter(":below-the-fold").something() which is faster */

$.extend($.expr[":"], {
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
/* Maintain BC for couple of versions. */
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});

})(jQuery, window, document);
164 changes: 164 additions & 0 deletions assets/js/search.js

Large diffs are not rendered by default.

499 changes: 259 additions & 240 deletions cn/index.html

Large diffs are not rendered by default.

489 changes: 254 additions & 235 deletions en/index.html

Large diffs are not rendered by default.