Merge branch 'master' of https://github.com/b3log/solo-skins into HEAD

This commit is contained in:
Liang Ding 2018-12-20 23:10:17 +08:00
commit da6806f2b6
No known key found for this signature in database
GPG Key ID: 136F30F901A2231D
13 changed files with 213 additions and 71 deletions

View File

@ -54,64 +54,66 @@
<div class="main">
<div id="pjax" class="content">
<#if pjax><!---- pjax {#pjax} start ----></#if>
<main class="article-list" id="articlePage">
<div class="item item--active">
<time class="tooltipped tooltipped__n item__date"
aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
${article.articleCreateDate?string("MM")}${monthLabel}
<span class="item__day">${article.articleCreateDate?string("dd")}</span>
</time>
<main id="articlePage">
<div class="article-list">
<div class="item item--active">
<time class="tooltipped tooltipped__n item__date"
aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
${article.articleCreateDate?string("MM")}${monthLabel}
<span class="item__day">${article.articleCreateDate?string("dd")}</span>
</time>
<h2 class="item__title">
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a>
<#if article.articlePutTop>
<sup>
${topArticleLabel}
</sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
</#if>
</h2>
<div class="item__date--m fn__none">
<i class="icon__date"></i>
${article.articleCreateDate?string("yyyy-MM-dd")}
</div>
<div class="ft__center">
<span class="tag">
<i class="icon__tags"></i>
<#list article.articleTags?split(",") as articleTag>
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a><#if articleTag_has_next>,</#if>
</#list>
</span>
<a class="tag" href="${servePath}${article.articlePermalink}#comments">
<i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
</a>
<span class="tag">
<i class="icon__views"></i>
${article.articleViewCount} ${viewLabel}
</span>
</div>
<div class="content-reset">
${article.articleContent}
<#if "" != article.articleSign.signHTML?trim>
<div>
${article.articleSign.signHTML}
</div>
<h2 class="item__title">
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a>
<#if article.articlePutTop>
<sup>
${topArticleLabel}
</sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
</#if>
</h2>
<div class="item__date--m fn__none">
<i class="icon__date"></i>
${article.articleCreateDate?string("yyyy-MM-dd")}
</div>
<div class="ft__center">
<span class="tag">
<i class="icon__tags"></i>
<#list article.articleTags?split(",") as articleTag>
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a><#if articleTag_has_next>,</#if>
</#list>
</span>
<a class="tag" href="${servePath}${article.articlePermalink}#comments">
<i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
</a>
<span class="tag">
<i class="icon__views"></i>
${article.articleViewCount} ${viewLabel}
</span>
</div>
<div class="content-reset">
${article.articleContent}
<#if "" != article.articleSign.signHTML?trim>
<div>
${article.articleSign.signHTML}
</div>
</#if>
</div>
</div>
</div>
<#if previousArticlePermalink?? || nextArticlePermalink??>
<div class="module">
<div class="module mobile__hidden">
<div class="module__content fn__clear">
<#if previousArticlePermalink??>
<a href="${servePath}${previousArticlePermalink}" rel="prev" class="fn__left breadcrumb">
@ -128,21 +130,42 @@
</div>
</#if>
<#if previousArticlePermalink??>
<div class="module mobile__hidden fn__none">
<div class="module__content">
<a href="${servePath}${previousArticlePermalink}" rel="prev" class="breadcrumb">
${previousArticleLabel}: ${previousArticleTitle}
</a>
</div>
</div>
</#if>
<#if nextArticlePermalink??>
<div class="module mobile__hidden fn__none">
<div class="module__content">
<a href="${servePath}${nextArticlePermalink}" rel="next"
class="breadcrumb">
${nextArticleLabel}: ${nextArticleTitle}
</a>
</div>
</div>
</#if>
<@comments commentList=articleComments article=article></@comments>
<div class="fn__flex">
<div class="fn__flex article__relevant">
<div class="fn__flex-1" id="externalRelevantArticlesWrap">
<div class="module">
<div id="externalRelevantArticles" class="module__list"></div>
</div>
</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; </div>
<div class="mobile__hidden">&nbsp; &nbsp; &nbsp; &nbsp; </div>
<div class="fn__flex-1" id="randomArticlesWrap">
<div class="module">
<div id="randomArticles" class="module__list"></div>
</div>
</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; </div>
<div class="mobile__hidden">&nbsp; &nbsp; &nbsp; &nbsp; </div>
<div class="fn__flex-1" id="relevantArticlesWrap">
<div class="module">
<div id="relevantArticles" class="module__list"></div>
@ -159,7 +182,7 @@
<@comment_script oId=article.oId>
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
<#if 0 != randomArticlesDisplayCount>
page.loadRandomArticles('<header class="module__header">${randomArticles1Label}</header>');
page.loadRandomArticles('<header class="module__header">${randomArticlesLabel}</header>');
</#if>
<#if 0 != externalRelevantArticlesDisplayCount>
page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"

View File

@ -16,6 +16,12 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/*
* icon font
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.2.0.0, Dec 17, 2018
*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?oyqnlj');
@ -108,4 +114,8 @@
.icon__rss:before {
content: "\e901";
}
.icon__more:before {
content: "\e902";
}

View File

@ -20,7 +20,7 @@
* skin style
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.3.1.1, Nov 15, 2018
* @version 0.4.0.0, Dec 17, 2018
*/
/*
* Symphony - A modern community (forum/BBS/SNS/blog) platform written in Java.
@ -657,6 +657,12 @@ blockquote {
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/*
* icon font
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.2.0.0, Dec 17, 2018
*/
@font-face {
font-family: 'icomoon';
src: url("fonts/icomoon.eot?oyqnlj");
@ -728,6 +734,9 @@ blockquote {
.icon__rss:before {
content: "\e901"; }
.icon__more:before {
content: "\e902"; }
body {
cursor: url(../images/cursor.cur), url(../images/cursor.cur), auto; }
@ -884,7 +893,10 @@ a {
.side {
width: 280px;
min-width: 280px;
margin-left: 30px; }
margin-left: 30px;
border-radius: 5px; }
.side::-webkit-scrollbar {
display: none; }
.side__btn {
background-color: transparent;
border: 0;
@ -1152,9 +1164,18 @@ a {
.b3-solo-list-h5 a {
padding-left: 75px !important; }
.article__relevant {
margin-bottom: 30px; }
.article__relevant .module {
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
margin-bottom: 0; }
@media (max-width: 768px) {
.header__nav {
.mobile__hidden {
display: none; }
.mobile__hidden.fn__none {
display: block; }
.main {
display: block;
margin: 15px;
@ -1208,12 +1229,15 @@ a {
margin: 0 5px 0 0; }
.header__m a.current {
color: #b94a48; }
.header__m .icon__more,
.header__m .icon__list {
position: absolute;
top: -35px;
right: 15px;
font-size: 20px;
color: #fff; }
.header__m .icon__list {
right: 50px; }
.header__m .module__list {
display: none; }
.header__m .module__list li {
@ -1227,4 +1251,12 @@ a {
.comments__content {
padding: 15px; }
.content-reset {
font-size: 14px; } }
font-size: 14px; }
.article__relevant {
display: block;
margin-bottom: 0; }
.article__relevant .module {
margin-bottom: 15px; }
.article__near a {
display: block;
float: none; } }

File diff suppressed because one or more lines are too long

View File

@ -19,7 +19,7 @@
* skin style
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.3.1.1, Nov 15, 2018
* @version 0.4.0.0, Dec 17, 2018
*/
@import "../../../scss/reset";
@import "../../../scss/reset-content";
@ -263,6 +263,11 @@ a {
width: 280px;
min-width: 280px;
margin-left: 30px;
border-radius: 5px;
&::-webkit-scrollbar {
display: none;
}
&__btn {
background-color: transparent;
@ -637,9 +642,21 @@ a {
}
}
.article__relevant {
margin-bottom: 30px;
.module {
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.header__nav {
.mobile__hidden {
display: none;
&.fn__none {
display: block;
}
}
.main {
@ -727,6 +744,7 @@ a {
color: #b94a48;
}
.icon__more,
.icon__list {
position: absolute;
top: -35px;
@ -735,6 +753,10 @@ a {
color: #fff;
}
.icon__list {
right: 50px;
}
.module__list {
display: none;
@ -761,4 +783,17 @@ a {
.content-reset {
font-size: 14px;
}
.article__relevant {
display: block;
margin-bottom: 0;
.module {
margin-bottom: 15px;
}
}
.article__near a {
display: block;
float: none;
}
}

Binary file not shown.

View File

@ -9,6 +9,7 @@
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="views" d="M512 768c-282.784 0-512-320-512-320s229.216-320 512-320 512 320 512 320-229.216 320-512 320zM512 256c-106.016 0-192 85.984-192 192s85.984 192 192 192 192-85.984 192-192-85.984-192-192-192zM512 576c-70.688 0-128-57.312-128-128s57.312-128 128-128 128 57.312 128 128-57.312 128-128 128z" />
<glyph unicode="&#xe901;" glyph-name="rss" d="M136.294 209.070c-75.196 0-136.292-61.334-136.292-136.076 0-75.154 61.1-135.802 136.292-135.802 75.466 0 136.494 60.648 136.494 135.802-0.002 74.742-61.024 136.076-136.494 136.076zM0.156 612.070v-196.258c127.784 0 247.958-49.972 338.458-140.512 90.384-90.318 140.282-211.036 140.282-339.3h197.122c-0.002 372.82-303.282 676.070-675.862 676.070zM0.388 960v-196.356c455.782 0 826.756-371.334 826.756-827.644h196.856c0 564.47-459.254 1024-1023.612 1024z" />
<glyph unicode="&#xe902;" glyph-name="more" d="M128 332.8c-70.692 0-128 57.307-128 128s57.307 128 128 128v0c70.692 0 128-57.307 128-128s-57.307-128-128-128v0zM512 332.8c-70.692 0-128 57.307-128 128s57.307 128 128 128v0c70.692 0 128-57.307 128-128s-57.307-128-128-128v0zM896 332.8c-70.692 0-128 57.307-128 128s57.307 128 128 128v0c70.692 0 128-57.307 128-128s-57.307-128-128-128v0z" />
<glyph unicode="&#xe973;" glyph-name="register" d="M384 224c0 151.234 95.874 280.486 230.032 330.2 16.28 36.538 25.968 77.164 25.968 117.8 0 159.058 0 288-192 288s-192-128.942-192-288c0-99.060 57.502-198.104 128-237.832v-52.78c-217.102-17.748-384-124.42-384-253.388h397.306c-8.664 30.53-13.306 62.732-13.306 96zM736 512c-159.058 0-288-128.942-288-288s128.942-288 288-288c159.056 0 288 128.942 288 288s-128.942 288-288 288zM896 192h-128v-128h-64v128h-128v64h128v128h64v-128h128v-64z" />
<glyph unicode="&#xe994;" glyph-name="setting" d="M933.79 349.75c-53.726 93.054-21.416 212.304 72.152 266.488l-100.626 174.292c-28.75-16.854-62.176-26.518-97.846-26.518-107.536 0-194.708 87.746-194.708 195.99h-201.258c0.266-33.41-8.074-67.282-25.958-98.252-53.724-93.056-173.156-124.702-266.862-70.758l-100.624-174.292c28.97-16.472 54.050-40.588 71.886-71.478 53.638-92.908 21.512-211.92-71.708-266.224l100.626-174.292c28.65 16.696 61.916 26.254 97.4 26.254 107.196 0 194.144-87.192 194.7-194.958h201.254c-0.086 33.074 8.272 66.57 25.966 97.218 53.636 92.906 172.776 124.594 266.414 71.012l100.626 174.29c-28.78 16.466-53.692 40.498-71.434 71.228zM512 240.668c-114.508 0-207.336 92.824-207.336 207.334 0 114.508 92.826 207.334 207.336 207.334 114.508 0 207.332-92.826 207.332-207.334-0.002-114.51-92.824-207.334-207.332-207.334z" />
<glyph unicode="&#xe9bc;" glyph-name="category" d="M976 192h-16v208c0 61.756-50.242 112-112 112h-272v128h16c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-160c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h16v-128h-272c-61.756 0-112-50.244-112-112v-208h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-16v192h256v-192h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-16v192h256v-192h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48zM192 0h-128v128h128v-128zM576 0h-128v128h128v-128zM448 704v128h128v-128h-128zM960 0h-128v128h128v-128z" />

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -29,7 +29,7 @@
<i class="icon__home"></i> ${blogTitle}
</a>
<nav class="header__nav">
<nav class="mobile__hidden header__nav">
<#list pageNavigations as page>
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
<#if page.pageIcon != ''><img class="page-icon" src="${page.pageIcon}"></#if>${page.pageTitle}
@ -72,7 +72,9 @@
</div>
</header>
<div class="header__m fn__none">
<i class="icon__list" onclick="$(this).next().slideToggle()"></i>
<i class="icon__list fn__none" onclick="$(this).next().slideToggle()"></i>
<main class="module__list fn__none"></main>
<i class="icon__more" onclick="$(this).next().slideToggle()"></i>
<main class="module__list">
<ul>
<#if isLoggedIn>

View File

@ -19,7 +19,7 @@
* @fileoverview util and every page should be used.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.2.1.0, Sep 30, 2018
* @version 0.3.0.0, Dev 17, 2018
*/
/**
@ -34,6 +34,14 @@ var Skin = {
} else {
$goTop.hide()
}
if ($('.side .b3-solo-list').length > 0) {
if ($(window).scrollTop() > 50) {
$('.side').css('position', 'fixed')
} else {
$('.side').css('position', 'initial')
}
}
})
},
_initAnimation: function () {
@ -56,7 +64,7 @@ var Skin = {
$(entrie.target).addClass('item--active')
} else {
if ($(entrie.target).closest('.side').length === 1 ||
$(entrie.target).closest('.article-list').hasClass('content') ||
$(entrie.target).closest('#articlePage').length === 1 ||
$(entrie.target).outerHeight() > 768) {
return
}
@ -100,10 +108,40 @@ var Skin = {
})
},
_initArticleCommon: function () {
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
$('.side').
prepend('<div class="module"><div class="module__list"></div></div>')
if ($(window).width() > 768) {
if ($('#articlePage .b3-solo-list li').length === 0) {
$('.side .b3-solo-list').closest('.module').remove()
$('.side').css({
height: 'auto',
position: 'initial',
})
return
}
$('#articlePage').width($('.main').width() - 310)
if ($('.side .b3-solo-list').length === 0) {
$('.side').
prepend('<div class="module"><div class="module__list"></div></div>').
css({
right: ($(window).width() - $('.main').width()) / 2,
position: 'fixed',
overflow: 'auto',
height: $(window).height() - 30,
top: 30,
})
}
$('.side .module:eq(0) .module__list').html($('.b3-solo-list'))
$(window).scroll()
$('.side').scrollTop(0)
} else {
if ($('#articlePage .b3-solo-list li').length === 0) {
$('.header__m .icon__list').hide().next().hide()
return
}
$('.header__m .icon__list').show().next().html($('.b3-solo-list'))
$('.b3-solo-list a').click(function () {
$(this).closest('.module__list').hide()
})
}
},
initArticle: function () {

View File

@ -15,4 +15,4 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
var Skin={_initCommon:function(e){$(window).scroll(function(){125<$(window).scrollTop()?e.show():e.hide()})},_initAnimation:function(){if(!("IntersectionObserver"in window))return $(".item").addClass("item--active"),!1;window.imageIntersectionObserver?window.imageIntersectionObserver.disconnect():window.imageIntersectionObserver=new IntersectionObserver(function(e){e.forEach(function(e){if(void 0===e.isIntersecting?0!==e.intersectionRatio:e.isIntersecting)$(e.target).addClass("item--active");else{if(1===$(e.target).closest(".side").length||$(e.target).closest(".article-list").hasClass("content")||768<$(e.target).outerHeight())return;$(e.target).removeClass("item--active")}})}),$(".item").each(function(){window.imageIntersectionObserver.observe(this)})},init:function(){Util.initPjax(function(){Skin._initAnimation(),0===$("#articlePage").length&&$(".b3-solo-list").closest(".module").remove()}),Skin._initAnimation(),$("body").on("click",".content-reset img",function(){window.open(this.src)}),this._initCommon($(".icon__up")),$(".header__nav a, .header__m a").each(function(){this.href===location.href&&(this.className="current")}).click(function(){$(".header__nav a, .header__m a").removeClass("current"),this.className="current",$(".header__m .module__list").hide()}),$(".header__logo").click(function(){$(".header__nav a, .header__m a").removeClass("current")})},_initArticleCommon:function(){0<$(".b3-solo-list li").length&&1e3<$(window).width()&&($(".side").prepend('<div class="module"><div class="module__list"></div></div>'),$(".side .module:eq(0) .module__list").html($(".b3-solo-list")))},initArticle:function(){this._initArticleCommon(),setTimeout(function(){0===$("#externalRelevantArticlesWrap li").length&&($("#externalRelevantArticlesWrap").next().remove(),$("#externalRelevantArticlesWrap").remove()),0===$("#relevantArticlesWrap li").length&&($("#relevantArticlesWrap").prev().remove(),$("#relevantArticlesWrap").remove()),0===$("#randomArticlesWrap li").length&&($("#randomArticlesWrap").prev().remove(),$("#randomArticlesWrap").remove())},1e3)}};Skin.init();
var Skin={_initCommon:function(e){$(window).scroll(function(){125<$(window).scrollTop()?e.show():e.hide(),0<$(".side .b3-solo-list").length&&(50<$(window).scrollTop()?$(".side").css("position","fixed"):$(".side").css("position","initial"))})},_initAnimation:function(){if(!("IntersectionObserver"in window))return $(".item").addClass("item--active"),!1;window.imageIntersectionObserver?window.imageIntersectionObserver.disconnect():window.imageIntersectionObserver=new IntersectionObserver(function(e){e.forEach(function(e){if(void 0===e.isIntersecting?0!==e.intersectionRatio:e.isIntersecting)$(e.target).addClass("item--active");else{if(1===$(e.target).closest(".side").length||1===$(e.target).closest("#articlePage").length||768<$(e.target).outerHeight())return;$(e.target).removeClass("item--active")}})}),$(".item").each(function(){window.imageIntersectionObserver.observe(this)})},init:function(){Util.initPjax(function(){Skin._initAnimation(),0===$("#articlePage").length&&$(".b3-solo-list").closest(".module").remove()}),Skin._initAnimation(),$("body").on("click",".content-reset img",function(){window.open(this.src)}),this._initCommon($(".icon__up")),$(".header__nav a, .header__m a").each(function(){this.href===location.href&&(this.className="current")}).click(function(){$(".header__nav a, .header__m a").removeClass("current"),this.className="current",$(".header__m .module__list").hide()}),$(".header__logo").click(function(){$(".header__nav a, .header__m a").removeClass("current")})},_initArticleCommon:function(){if(768<$(window).width()){if(0===$("#articlePage .b3-solo-list li").length)return $(".side .b3-solo-list").closest(".module").remove(),void $(".side").css({height:"auto",position:"initial"});$("#articlePage").width($(".main").width()-310),0===$(".side .b3-solo-list").length&&$(".side").prepend('<div class="module"><div class="module__list"></div></div>').css({right:($(window).width()-$(".main").width())/2,position:"fixed",overflow:"auto",height:$(window).height()-30,top:30}),$(".side .module:eq(0) .module__list").html($(".b3-solo-list")),$(window).scroll(),$(".side").scrollTop(0)}else{if(0===$("#articlePage .b3-solo-list li").length)return void $(".header__m .icon__list").hide().next().hide();$(".header__m .icon__list").show().next().html($(".b3-solo-list")),$(".b3-solo-list a").click(function(){$(this).closest(".module__list").hide()})}},initArticle:function(){this._initArticleCommon(),setTimeout(function(){0===$("#externalRelevantArticlesWrap li").length&&($("#externalRelevantArticlesWrap").next().remove(),$("#externalRelevantArticlesWrap").remove()),0===$("#relevantArticlesWrap li").length&&($("#relevantArticlesWrap").prev().remove(),$("#relevantArticlesWrap").remove()),0===$("#randomArticlesWrap li").length&&($("#randomArticlesWrap").prev().remove(),$("#randomArticlesWrap").remove())},1e3)}};Skin.init();