Skip to content

S
solo
Commit 8edac061 authored by Van's avatar Van
Browse files
Options

✨ #12180 responsive

parent 9b458639
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 126 deletions
src/main/webapp/skins/9IPHP/archive-articles.ftl
View file @ 8edac061
......@@ -9,24 +9,26 @@
</head>
<body>
<#include "header.ftl">
<main class="main wrapper">
<div class="content page-archive">
<section class="posts-collapse">
<span class="archive-move-on"></span>
<span class="archive-page-counter">
${ohLabel}..!
<#if "en" == localeString?substring(0, 2)>
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
<#else>
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
</#if>
${sumLabel} ${archiveDate.archiveDatePublishedArticleCount} ${fightLabel}
</span>
</section>
<#include "article-list.ftl">
<div class="wrapper">
<div class="main-wrap">
<main>
<div class="title">
<h2 style="border-bottom:0">
<i class="icon-inbox"></i>
&nbsp;
<#if "en" == localeString?substring(0, 2)>
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
<#else>
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
</#if>
- ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel}
</h2>
</div>
<#include "article-list.ftl">
</main>
<#include "side.ftl">
</div>
<#include "side.ftl">
</main>
</div>
<#include "footer.ftl">
</body>
</html>
src/main/webapp/skins/9IPHP/archives.ftl
View file @ 8edac061
......@@ -9,36 +9,34 @@
</head>
<body>
<#include "header.ftl">
<main class="main wrapper">
<div class="content page-archive">
<section class="posts-collapse">
<span class="archive-move-on"></span>
<span class="archive-page-counter">
${ohLabel}..! ${sumLabel} ${statistic.statisticPublishedBlogArticleCount} ${fightLabel}
<div class="wrapper">
<div class="main-wrap">
<main class="other">
<span class="title">
<h2><i class="icon-inbox"></i>
&nbsp;${statistic.statisticPublishedBlogArticleCount} ${articleLabel}</h2>
</span>
<#if 0 != archiveDates?size>
<#list archiveDates as archiveDate>
<article>
<header class="post-header">
<h1>
<ul class="list">
<#list archiveDates as archiveDate>
<li>
<#if "en" == localeString?substring(0, 2)>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})
</a>
<#else>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})
</a>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})
</a>
<#else>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})
</a>
</#if>
</h1>
</header>
</article>
</#list>
</li>
</#list>
</ul>
</#if>
</section>
</main>
<#include "side.ftl">
</div>
<#include "side.ftl">
</main>
</div>
<#include "footer.ftl">
</body>
</html>
src/main/webapp/skins/9IPHP/article-list.ftl
View file @ 8edac061
......@@ -41,7 +41,7 @@
<div class="content-reset">
${article.articleAbstract}
</div>
<footer class="fn-clear">
<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>
......
src/main/webapp/skins/9IPHP/article.ftl
View file @ 8edac061
......@@ -60,7 +60,7 @@
</#if>
</div>
<footer>
<footer class="tags">
<#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a>
......
src/main/webapp/skins/9IPHP/css/base.css
View file @ 8edac061
......@@ -833,13 +833,18 @@ aside {
color: #555;
text-decoration: none;
line-height: 50px;
margin-right: 20px;
padding: 0 10px;
display: inline-block;
}
.navbar nav a:hover {
color: #333;
}
.navbar nav a.current {
background-color: #eee;
}
.navbar form {
position: relative;
margin-top: 8px;
......@@ -907,7 +912,8 @@ aside .ad {
color: #fff;
padding: 20px;
margin-bottom: 20px;
border: 1px solid transparent
border: 1px solid transparent;
box-sizing: border-box;
}
aside .meta main {
......@@ -922,7 +928,7 @@ aside .meta img {
border-radius: 5px;
}
aside .tag {
aside .tag.tooltipped {
display: inline-block;
padding: 2px 5px;
margin-bottom: 10px;
......@@ -938,6 +944,7 @@ aside .tag {
border: 1px solid #ededed;
margin-bottom: 20px;
padding: 20px;
box-sizing: border-box;
}
.post h1 {
......@@ -969,11 +976,7 @@ aside .tag {
color: #ff4d3a;
}
.post footer {
margin-top: 10px;
}
.post footer > a.tag {
.tags > a.tag {
color: #fff;
font-size: 12px;
display: inline-block;
......@@ -982,11 +985,12 @@ aside .tag {
padding: 0 5px;
line-height: 22px;
text-decoration: none;
margin-top: 10px;
}
.post footer > a.tag:before {
.tags > a.tag:before {
content: "#";
}
.post footer > a.tag:hover {
.tags > a.tag:hover {
background: #999;
}
......@@ -1013,7 +1017,7 @@ aside .tag {
background-color: #eee;
}
.post .title h2 {
.title h2 {
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
......@@ -1079,4 +1083,39 @@ aside .tag {
.form .captcha {
height: 28px;
}
/* end comments */
\ No newline at end of file
/* end comments */
/* start other */
.other {
border: 1px solid #ededed;
margin-bottom: 20px;
padding: 0 20px 20px;
}
/* end other */
/* start responsive */
@media (max-width: 900px) {
.navbar .form {
display: none;
}
}
@media (max-width: 700px) {
.wrapper {
width: 100%;
min-width: auto;
}
.main-wrap > main {
margin-right: 0;
}
.main-wrap {
display: block;
}
aside {
width: 100%;
padding: 20px 10px;
box-sizing: border-box;
}
}
/* end responsive */
\ No newline at end of file
src/main/webapp/skins/9IPHP/dynamic.ftl
View file @ 8edac061
......@@ -11,7 +11,7 @@
<#include "header.ftl">
<div class="wrapper">
<div class="main-wrap">
<main>
<main class="post">
<#if 0 != recentComments?size>
<ul class="comments" id="comments">
<#list recentComments as comment>
......
src/main/webapp/skins/9IPHP/js/common.js
View file @ 8edac061
......@@ -51,6 +51,12 @@ var Skin = {
},
init: function () {
this._initCommon($('.icon-up'));
$('.navbar nav a').each(function () {
if (this.href === location.href) {
this.className = 'current'
}
});
},
_initArticleCommon: function () {
// TOC
......
src/main/webapp/skins/9IPHP/js/isotope.pkgd.min.js 0 → 100755
View file @ 8edac061
This diff is collapsed.
src/main/webapp/skins/9IPHP/links.ftl 0 → 100644
View file @ 8edac061
<#include "macro-head.ftl">
<!DOCTYPE html>
<html>
<head>
<@head title="${blogTitle}">
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
<meta name="description" content="${metaDescription},${archiveLabel}"/>
</@head>
</head>
<body>
<#include "header.ftl">
<div class="wrapper">
<div class="main-wrap">
<main class="other">
<div class="title">
<h2><i class="icon-link"></i>
&nbsp;${linkLabel}</h2>
</div>
<#if 0 != links?size>
<ul class="list">
<#list links as link>
<li>
<a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}" target="_blank">
${link.linkTitle}
</a>
</li>
</#list>
</ul>
</#if>
</main>
<#include "side.ftl">
</div>
</div>
<#include "footer.ftl">
</body>
</html>
src/main/webapp/skins/9IPHP/page.ftl
View file @ 8edac061
......@@ -10,15 +10,17 @@
</head>
<body>
<#include "header.ftl">
<main class="main wrapper">
<div class="content">
<article class="post-body">
${page.pageContent}
</article>
<@comments commentList=pageComments article=page></@comments>
<div class="wrapper">
<div class="main-wrap">
<main>
<article class="post">
${page.pageContent}
<@comments commentList=pageComments article=page></@comments>
</article>
</main>
<#include "side.ftl">
</div>
<#include "side.ftl">
</main>
</div>
<#include "footer.ftl">
<@comment_script oId=page.oId></@comment_script>
</body>
......
src/main/webapp/skins/9IPHP/tag-articles.ftl
View file @ 8edac061
......@@ -9,61 +9,62 @@
</head>
<body>
<#include "header.ftl">
<main class="main wrapper">
<div class="content posts-collapse">
<div class="collection-title">
<h2>
${tag.tagTitle}
<small>${tagLabel}</small>
</h2>
</div>
<#list articles as article>
<article>
<header class="post-header">
<h1>
<div class="wrapper">
<div class="main-wrap">
<main class="other">
<div class="title">
<h2><i class="icon-tags"></i>
&nbsp;${tag.tagTitle}
<small>${tagLabel}</small>
</div>
<ul class="list">
<#list articles as article>
<li>
<a class="post-title" href="${servePath}${article.articlePermalink}">
<span>${article.articleTitle}</span>
<#if article.articlePutTop>
<sup>
${topArticleLabel}
</sup>
<sup>
${topArticleLabel}
</sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
<sup>
${updatedLabel}
</sup>
</#if>
<time class="fn-right">
<i class="icon-date"></i> ${article.articleCreateDate?string("yyyy-MM-dd")}
</time>
</a>
</h1>
<time class="post-time">
${article.articleCreateDate?string("MM-dd")}
</time>
</header>
</article>
</#list>
<#if 0 != paginationPageCount>
<nav class="pagination">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="extend next"><<</a>
<a class="page-number" href="${servePath}${path}/1">1</a> ...
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span class="page-number current">${paginationPageNum}</span>
<#else>
<a class="page-number" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</li>
</#list>
<#if paginationPageNums?last != paginationPageCount> ...
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="extend next">>></a>
</ul>
<#if 0 != paginationPageCount>
<div class="fn-clear">
<nav class="pagination fn-right">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="page-number">&laquo;</a>
<a class="page-number" href="${servePath}${path}/1">1</a> <span class="page-number">...</span>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span class="page-number current">${paginationPageNum}</span>
<#else>
<a class="page-number" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount> <span class="page-number">...</span>
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="page-number">&raquo;</a>
</#if>
</nav>
</div>
</#if>
</nav>
</#if>
</main>
<#include "side.ftl">
</div>
<#include "side.ftl">
</main>
</div>
<#include "footer.ftl">
</body>
</html>
src/main/webapp/skins/9IPHP/tags.ftl
View file @ 8edac061
......@@ -11,28 +11,35 @@
<#include "header.ftl">
<div class="wrapper">
<div class="main-wrap">
<main>
<div class="tag-cloud">
${sumLabel} ${tags?size} ${tagLabel}
<ul class="tag-cloud-tags fn-clear" id="tags">
<#list tags as tag>
<li>
<a rel="tag" data-count="${tag.tagPublishedRefCount}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
<span>${tag.tagTitle}</span>
(<b>${tag.tagPublishedRefCount}</b>)
</a>
</li>
</#list>
</ul>
<main class="other">
<div class="title">
<h2><i class="icon-tags"></i>
&nbsp; ${sumLabel} ${tags?size} ${tagLabel}
</div>
<div class="tags">
<#list tags as tag>
<a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
<span>${tag.tagTitle}</span>
(<b>${tag.tagPublishedRefCount}</b>)
</a>
</#list>
</div>
</main>
<#include "side.ftl">
</div>
</div>
<#include "footer.ftl">
<script>
Util.buildTags();
</script>
<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/isotope.pkgd.min.js" charset="utf-8"></script>
<script>
$('.tags').isotope({
transitionDuration: '1.5s',
filter: 'a',
layoutMode: 'fitRows'
});
$('.tags').isotope({
sortBy: 'random'
});
</script>
</body>
</html>
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