Skip to content

S
solo-1
Commit 3bc0569a authored by Vanessa's avatar Vanessa
Browse files
Options

💄 #12389 article list

parent ae8b462a
Hide whitespace changes
Inline Side-by-side
Showing with 337 additions and 170 deletions
src/main/webapp/skins/Medium/article-list.ftl
View file @ 3bc0569a
<div> <div class="fn-clear article__wrap">
<#list articles as article> <#list articles as article>
<article class="post"> <article class="article__item
<header> <#if article_index == 0 || article_index == 10>article__item--big
<h1> <#elseif article_index &gt; 0 && article_index &lt; 5>article__item--small
<a rel="bookmark" href="${servePath}${article.articlePermalink}"> <#elseif article_index &gt; 4 && article_index &lt; 8>article__item--big
<#elseif article_index == 8 || article_index == 9>article__item--mid
<#elseif article_index &gt; 10 && article_index &lt; 15>article__item--small
<#elseif article_index &gt; 14 && article_index &lt; 18>article__item--big
<#elseif article_index &gt; 17 && article_index &lt; 20>article__item--mid
<#else>article__item--big
</#if>">
<header class="article__panel">
<div class="article__main">
<h2 class="article__title">
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle} ${article.articleTitle}
</a> </a>
<#if article.articlePutTop> <#if article.articlePutTop>
<sup> <sup>
${topArticleLabel} ${topArticleLabel}
</sup> </sup>
</#if> </#if>
<#if article.hasUpdated> <#if article.hasUpdated>
<sup> <sup>
${updatedLabel} ${updatedLabel}
</sup> </sup>
</#if> </#if>
</h1> </h2>
<div class="content-reset article__content">
${article.articleAbstract}
</div>
</div>
<div class="meta"> <div class="article__meta ft-gray fn-flex">
<span class="tooltipped tooltipped-n" aria-label="${createDateLabel}"> <time>
<i class="icon-date"></i> ${article.articleCreateDate?string("yyyy-MM-dd")}
<time> </time> &nbsp;•&nbsp;
${article.articleCreateDate?string("yyyy-MM-dd")} <a href="${servePath}${article.articlePermalink}#comments" class="ft-gray">
</time> ${article.articleCommentCount} ${commentLabel}
</span> </a> &nbsp;•&nbsp;
&nbsp; | &nbsp; <a href="${servePath}${article.articlePermalink}" class="ft-gray">
<span class="tooltipped tooltipped-n" aria-label="${commentCountLabel}"> ${article.articleViewCount} ${viewLabel}
<i class="icon-comments"></i> </a>
<a href="${servePath}${article.articlePermalink}#comments">
${article.articleCommentCount} ${commentLabel}</a>
</span>
&nbsp; | &nbsp;
<span class="tooltipped tooltipped-n" aria-label="${viewCountLabel}">
<i class="icon-views"></i>
${article.articleViewCount} ${viewLabel}
</span>
</div> </div>
</header> </header>
<div class="content-reset">
${article.articleAbstract}
</div>
<footer class="fn-clear tags">
<#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a>
</#list>
<a href="${servePath}${article.articlePermalink}#more" rel="contents" class="fn-right">
${readLabel} &raquo;
</a>
</footer>
</article> </article>
</#list> </#list>
</div>
<#if 0 != paginationPageCount>
<#if 0 != paginationPageCount> <nav class="pagination">
<div class="fn-clear"> <#if 1 != paginationPageNums?first>
<nav class="pagination fn-right"> <a href="${servePath}${path}/${paginationPreviousPageNum}" class="pagination__item">&laquo;</a>
<#if 1 != paginationPageNums?first> <a class="pagination__item" href="${servePath}${path}/1">1</a>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="page-number">&laquo;</a> <span class="pagination__item pagination__omit">...</span>
<a class="page-number" href="${servePath}${path}/1">1</a> <span class="page-number">...</span> </#if>
</#if> <#list paginationPageNums as paginationPageNum>
<#list paginationPageNums as paginationPageNum> <#if paginationPageNum == paginationCurrentPageNum>
<#if paginationPageNum == paginationCurrentPageNum> <span class="pagination__item pagination__item--active">${paginationPageNum}</span>
<span class="page-number current">${paginationPageNum}</span> <#else>
<#else> <a class="pagination__item" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
<a class="page-number" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a> </#if>
</#if> </#list>
</#list> <#if paginationPageNums?last != paginationPageCount>
<#if paginationPageNums?last != paginationPageCount> <span class="page-number">...</span> <span class="pagination__item pagination__omit">...</span>
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a> <a href="${servePath}${path}/${paginationPageCount}" class="pagination__item">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="page-number">&raquo;</a> <a href="${servePath}${path}/${paginationNextPageNum}" class="pagination__item">&raquo;</a>
</#if>
</nav>
</div>
</#if> </#if>
</div> </nav>
\ No newline at end of file </#if>
\ No newline at end of file
src/main/webapp/skins/Medium/bottom.ftl
View file @ 3bc0569a
<div class="footer__tag wrapper"> <div class="footer__tag wrapper fn-flex">
<#if 0 != mostUsedCategories?size> <#if 0 != mostUsedCategories?size>
<#list mostUsedCategories as category> <div class="fn-flex-1">
<a class="tag pipe-tooltipped pipe-tooltipped--n" <div class="module__title">
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}" <span>${categoryLabel}</span>
href="${servePath}/tags/${category.categoryURI}">${category.categoryTitle}</a> </div>
</#list> <div>
<#list mostUsedCategories as category>
<a class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
href="${servePath}/tags/${category.categoryURI}">${category.categoryTitle}</a>
</#list>
</div>
</div>
</#if> </#if>
<#if 0 != mostUsedTags?size> <#if 0 != mostUsedTags?size>
<#list mostUsedTags as tag> <div class="fn-flex-1">
<a rel="tag" <div class="module__title">
class="tag pipe-tooltipped pipe-tooltipped--n" <span>${tagsLabel}</span>
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}" </div>
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a> <div>
</#list> <#list mostUsedTags as tag>
<a rel="tag"
class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
</#list>
</div>
</div>
</#if> </#if>
</div> </div>
\ No newline at end of file
src/main/webapp/skins/Medium/bottom2.ftl 0 → 100644
View file @ 3bc0569a
<div class="footer__tag wrapper">
<#if 0 != mostUsedCategories?size>
<#list mostUsedCategories as category>
<a class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
href="${servePath}/tags/${category.categoryURI}">${category.categoryTitle}</a>
</#list>
</#if>
<#if 0 != mostUsedTags?size>
<#list mostUsedTags as tag>
<a rel="tag"
class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
</#list>
</#if>
</div>
\ No newline at end of file
src/main/webapp/skins/Medium/css/base.css
View file @ 3bc0569a
...@@ -292,6 +292,14 @@ blockquote { ...@@ -292,6 +292,14 @@ blockquote {
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb box-shadow: inset 0 -1px 0 #bbb
} }
.fn-flex {
display: flex
}
.fn-flex-1 {
flex: 1;
min-width: 1px
}
.fn-clear:before,.fn-clear:after { .fn-clear:before,.fn-clear:after {
display: table; display: table;
...@@ -310,6 +318,10 @@ blockquote { ...@@ -310,6 +318,10 @@ blockquote {
float: right float: right
} }
.ft-gray {
color: rgba(0,0,0,0.54);
}
.ft-green { .ft-green {
color: #03a87c !important; color: #03a87c !important;
transition: all 0.1s transition: all 0.1s
...@@ -665,29 +677,6 @@ blockquote { ...@@ -665,29 +677,6 @@ blockquote {
box-shadow: 0 2px 2px -2px rgba(0,0,0,0.15) box-shadow: 0 2px 2px -2px rgba(0,0,0,0.15)
} }
.header__nav--fixed a.header__nav-btn {
display: block
}
.header__nav .header__nav-btn {
background: #03a87c;
border-color: #03a87c;
height: 32px;
line-height: 30px;
padding: 0 14px;
border-radius: 4px;
font-size: 15px;
color: #fff;
float: right;
margin-top: 9px;
display: none
}
.header__nav .header__nav-btn:hover {
background: #029e74;
border-color: #029e74
}
.footer { .footer {
margin-top: 50px; margin-top: 50px;
padding: 10px 20px 25px; padding: 10px 20px 25px;
...@@ -723,4 +712,220 @@ blockquote { ...@@ -723,4 +712,220 @@ blockquote {
.board { .board {
padding: 12px 0; padding: 12px 0;
text-align: center text-align: center
}
/* star article */
.article__wrap {
margin-right: -20px
}
.article__item {
border: 1px solid rgba(0,0,0,0.1);
border-radius: 2px;
margin-bottom: 20px;
float: left
}
.article__item--big {
width: 318px;
margin-right: 20px
}
.article__item--big .article__main {
height: 275px;
overflow: hidden;
margin-bottom: 10px
}
.article__item--small {
width: 318px;
margin-right: 20px
}
.article__item--small .article__main {
height: 94px;
overflow: hidden;
margin-bottom: 10px
}
.article__item--mid {
width: 488px;
margin-right: 20px
}
.article__item--mid .article__main {
height: 195px;
overflow: hidden;
margin-bottom: 10px
}
.article__panel {
padding: 16px
}
.article__title {
overflow: hidden;
line-height: 24px;
font-size: 21px;
font-weight: 600;
word-break: break-all
}
.article__title a {
color: rgba(0,0,0,0.84)
}
.article__title a:hover {
text-decoration: none
}
.article__title sup {
top: -6px;
font-size: 12px;
color: #03a87c;
}
.article__content {
margin-top: 4px;
font-size: 16px;
color: rgba(0,0,0,0.54);
overflow: hidden;
line-height: 23px;
word-break: break-all;
}
.article__meta {
font-size: 15px;
line-height: 23px;
}
/* end article list */
.article__next {
border-left: 1px solid rgba(0,0,0,0.38);
line-height: 14px;
margin-top: 7px;
color: rgba(0,0,0,0.84);
font-size: 18px;
display: inline-block;
padding-left: 20px;
margin-left: 20px;
float: right
}
.article__next:hover {
text-decoration: none
}
.article__bottom {
background-color: #fafafa;
padding: 40px 20px
}
.article__bottom .article__item {
box-shadow: 0 1px 7px rgba(0,0,0,0.05);
border: 0;
background-color: #fff;
border-radius: 4px
}
.article__bottom .article__main--user {
height: 45px;
margin-bottom: 15px
}
.article__comment {
width: 640px;
margin: 45px auto 0
}
.article__comment .comment__title {
font-size: 16px;
margin-bottom: 15px;
color: rgba(0,0,0,0.68)
}
.article__toolbar {
box-shadow: 0 0 1px rgba(0,0,0,0.54);
position: fixed;
bottom: -44px;
width: 100%;
background-color: #fff;
height: 44px;
font-size: 16px;
line-height: 44px;
transition: all 0.1s
}
.article__toolbar .wrapper {
max-width: 740px
}
.article__toolbar svg {
height: 20px;
width: 20px;
vertical-align: middle
}
.article__toolbar .fn-right {
position: absolute;
top: 0;
right: 20px
}
.article__toolbar .article__code {
position: absolute;
height: 130px;
width: 130px;
left: 50px;
bottom: 30px
}
.pagination {
margin-top: 30px;
font-size: 16px;
border-top: 1px solid rgba(0,0,0,0.15)
}
.pagination__item {
text-align: center;
border-top: 1px solid transparent;
transition: all 0.1s;
display: inline-block;
position: relative;
top: -1px;
margin: 0 10px;
padding: 0 10px;
line-height: 30px;
color: rgba(0,0,0,0.54)
}
.pagination__item:hover {
border-top-color: rgba(0,0,0,0.54);
color: rgba(0,0,0,0.84);
text-decoration: none
}
.pagination__item--active {
background: rgba(0,0,0,0.05);
border-top-color: rgba(0,0,0,0.54)
}
.pagination__item--active:hover {
color: rgba(0,0,0,0.54);
border-top-color: rgba(0,0,0,0.54)
}
.pagination__item:first-child {
margin-left: 0
}
.pagination__item:last-child {
margin-right: 0
}
.pagination__omit {
top: -5px;
margin: 0;
border: 0;
padding: 0;
color: #ccc
} }
\ No newline at end of file
src/main/webapp/skins/Medium/index.ftl
View file @ 3bc0569a
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div class="wrapper content"> <div class="wrapper content">
<#include "article-list.ftl"> <#include "article-list.ftl">
</div> </div>
<#include "bottom.ftl"> <#include "bottom2.ftl">
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
......
src/main/webapp/skins/Medium/js/common.js
View file @ 3bc0569a
...@@ -43,68 +43,6 @@ var Skin = { ...@@ -43,68 +43,6 @@ var Skin = {
} }
}); });
$(window).scroll(); $(window).scroll();
},
_initArticleCommon: function (tocLabel, siteViewLabel) {
// TOC
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
// add color to sidebar menu
$('aside').addClass('has-toc');
// append toc to sidebar menu
var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' + tocLabel
+ '</li><li data-tab="site">' + siteViewLabel + '</li></ul><section></section>';
$('aside').prepend(articleTocHTML);
var $sectionF = $('aside section:first').html($('.b3-solo-list')),
$sectionL = $('aside section:last');
$sectionF.height($(window).height() - 154).css({ 'overflow': 'auto', 'width': $('aside').width() + 'px'});
$sectionL.hide();
// 切换 tab
$('aside > ul > li').click(function () {
if ($(this).data('tab') === 'toc') {
$sectionL.animate({
"opacity": '0',
"top": '-50px'
}, 300, function () {
$sectionF.show().css('top', '-50px');
$sectionF.animate({
"opacity": '1',
"top": '0'
}, 300).show();
});
} else {
$sectionF.animate({
"opacity": '0',
"top": '-50px'
}, 300, function () {
$sectionF.hide().css('top', '-50px');
$sectionL.animate({
"opacity": '1',
"top": '0'
}, 300).show();
}).hide();
}
$('aside > ul > li').removeClass('current');
$(this).addClass('current');
});
$(window).scroll(function () {
if ($(window).scrollTop() > 125) {
$('aside section:eq(0)').css({
position: "fixed",
top: "51px",
backgroundColor: "#fff"
})
} else {
$('aside section:eq(0)').css({
position: "inherit",
borderLeft: 0
})
}
});
}
},
initArticle: function (tocLabel, siteViewLabel) {
this._initArticleCommon(tocLabel, siteViewLabel);
} }
}; };
Skin.init(); Skin.init();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment