yexuejc
/
solo-skins
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

https://github.com/b3log/solo/issues/12805 mobile

This commit is contained in:
Van 2019-07-11 00:07:57 +08:00
parent 8e3cd405ff
commit 69451c2535
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
6 changed files with 527 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
Bubble/article.ftl
View File

@ -23,43 +23,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}"> <@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
<link rel="stylesheet" <link rel="stylesheet"
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/> href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
<#if previousArticlePermalink??> <#if previousArticlePermalink??>
<link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}"> <link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
</#if> </#if>
<#if nextArticlePermalink??> <#if nextArticlePermalink??>
<link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}"> <link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
</#if> </#if>
</@head> </@head>
</head> </head>
<body class="fn__flex-column"> <body class="fn__flex-column">
<div id="pjax" class="fn__flex-1"> <div id="pjax" class="fn__flex-1">
<#if pjax><!---- pjax {#pjax} start ----></#if> <#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "macro-header.ftl"> <#include "macro-header.ftl">
<@header type="article"></@header> <@header type="article"></@header>
<div class="article__top"> <div class="article__top" style="background-image: url(${article.articleImg1URL})">
<div class="fn__clear"> <canvas id="articleTop"></canvas>
<div class="toc fn__none" onclick="$('.post__toc').slideToggle()">${tocLabel}</div>
<div class="title fn__pointer" onclick="Util.goTop()">${article.articleTitle}</div>
<#include "../../common-template/share.ftl">
</div>
<progress class="article__progress"></progress>
</div> </div>
<div class="article"> <div class="article">
<div class="ft__center"> <div class="ft__center">
<div class="item__meta"> <div class="article__meta">
<time> <time>
${article.articleCreateDate?string("yyyy-MM-dd")} ${article.articleCreateDate?string("yyyy-MM-dd")}
</time> </time>
/ /
<#list article.articleTags?split(",") as articleTag> <#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a> &nbsp; <a rel="tag"
href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a> &nbsp;
</#list> </#list>
</div> </div>
<h2 class="item__title"> <h2 class="article__title">
${article.articleTitle} ${article.articleTitle}
<#if article.articlePutTop> <#if article.articlePutTop>
<sup> <sup>
${topArticleLabel} ${topArticleLabel}
@ -71,28 +67,31 @@
</sup> </sup>
</#if> </#if>
</h2> </h2>
<#include "../../common-template/share.ftl">
</div> </div>
<div class="item__cover" style="background-image: url(${article.articleImg1URL})"></div> <div class="wrapper">
<section class="vditor-reset item__content item__content--article wrapper"> <section class="vditor-reset articles article__content">
${article.articleContent} ${article.articleContent}
<#if "" != article.articleSign.signHTML?trim> <#if "" != article.articleSign.signHTML?trim>
<div> <div>
${article.articleSign.signHTML} ${article.articleSign.signHTML}
</div> </div>
</#if> </#if>
</section> </section>
</div>
</div> </div>
<#if article?? && article.articleToC?? && article.articleToC?size &gt; 0> <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
<div class="post__toc"> <div class="post__toc">
<#include "../../common-template/toc.ftl"/> <#include "../../common-template/toc.ftl"/>
</div> </div>
</#if> </#if>
<@comments commentList=articleComments article=article></@comments> <@comments commentList=articleComments article=article></@comments>
<div class="article__bottom"> <div class="article__bottom">
<div class="wrapper"> <div class="wrapper">
<div class="fn__flex"> <div class="fn__flex">
<#if 0 != externalRelevantArticlesDisplayCount> <#if 0 != externalRelevantArticlesDisplayCount>
<div class="item" id="externalRelevantArticles"></div> <div class="item" id="externalRelevantArticles"></div>
</#if> </#if>
<div class="item" id="randomArticles"></div> <div class="item" id="randomArticles"></div>
<div class="item" id="relevantArticles"></div> <div class="item" id="relevantArticles"></div>
@ -101,19 +100,22 @@
</div> </div>
<#if pjax><!---- pjax {#pjax} end ----></#if> <#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<script type="text/javascript"
src="${staticServePath}/skins/${skinDirName}/js/TweenMax${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script>
<#include "footer.ftl"> <#include "footer.ftl">
<#if pjax><!---- pjax {#pjax} start ----></#if> <#if pjax><!---- pjax {#pjax} start ----></#if>
<@comment_script oId=article.oId commentable=article.commentable> <@comment_script oId=article.oId commentable=article.commentable>
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
<#if 0 != randomArticlesDisplayCount> <#if 0 != randomArticlesDisplayCount>
page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>'); page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>');
</#if> </#if>
<#if 0 != externalRelevantArticlesDisplayCount> <#if 0 != externalRelevantArticlesDisplayCount>
page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>", page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>",
'<h3>${externalRelevantArticlesLabel}</h3>'); '<h3>${externalRelevantArticlesLabel}</h3>');
</#if> </#if>
<#if 0 != relevantArticlesDisplayCount> <#if 0 != relevantArticlesDisplayCount>
page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>'); page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>');
</#if> </#if>
Skin.initArticle() Skin.initArticle()
</@comment_script> </@comment_script>

2
Bubble/css/base.css
View File

File diff suppressed because one or more lines are too long

364
Bubble/css/base.scss
View File

@ -159,7 +159,7 @@ a {
} }
.wrapper { .wrapper {
max-width: 1040px; max-width: 892px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px; padding: 0 10px;
} }
@ -182,6 +182,10 @@ a {
} }
} }
&--article {
display: none;
}
&__title { &__title {
position: relative; position: relative;
align-items: center; align-items: center;
@ -460,9 +464,9 @@ a {
&:after { &:after {
background: url(../images/footer.png) no-repeat center center / cover; background: url(../images/footer.png) no-repeat center center / cover;
position: absolute; position: absolute;
bottom: 65px; bottom: 62px;
left: 0; left: -64px;
width: 100%; width: 1040px;
pointer-events: none; pointer-events: none;
content: ""; content: "";
height: 315px; height: 315px;
@ -493,7 +497,6 @@ a {
} }
.articles { .articles {
width: 892px;
margin: 40px auto; margin: 40px auto;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03); box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
background-color: rgba(255, 255, 255, .9); background-color: rgba(255, 255, 255, .9);
@ -502,8 +505,7 @@ a {
.item { .item {
border-bottom: 1px solid #f0f2f7; border-bottom: 1px solid #f0f2f7;
margin-bottom: 25px; padding: 20px;
padding: 25px;
&:last-child { &:last-child {
border-bottom-width: 0; border-bottom-width: 0;
@ -608,24 +610,19 @@ a {
} }
.article { .article {
background-color: #fff;
&__bottom { &__bottom {
background-color: #fff;
position: relative;
.fn__flex { .fn__flex {
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -20px;
} }
.item { .item {
position: relative; position: relative;
flex: 1 1 300px; flex: 1 1 270px;
margin: 40px 20px 40px; margin: 40px 10px 40px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03); box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
border-radius: 5px; border-radius: 5px;
padding: 40px; padding: 20px;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
@ -639,7 +636,7 @@ a {
width: 100%; width: 100%;
background: url(../images/header-bg.jpg) no-repeat center center; background: url(../images/header-bg.jpg) no-repeat center center;
background-size: cover; background-size: cover;
filter: brightness(48%); filter: brightness(68%) opacity(0.9);
} }
h3 { h3 {
@ -665,37 +662,53 @@ a {
} }
&__top { &__top {
position: fixed;
width: 100%; width: 100%;
top: -61px; height: 50vh;
background-color: rgba(255, 255, 255, 0.9); background-size: cover;
border-bottom: 1px solid rgba($gray, 0.1); background-position: center center;
height: 60px; max-width: 1404px;
transition: all .3s ease; filter: sepia(0.2) contrast(1.3);
position: relative;
z-index: 1; z-index: 1;
.title { canvas {
float: left; height: 100%;
margin-left: 20px; width: 100%;
line-height: 60px; }
font-size: 22px; }
&__meta {
padding-top: 40px;
text-transform: uppercase;
color: rgba($gray, .8);
a {
color: $gray;
}
}
&__title {
font-size: 28px;
margin: 10px 0;
sup {
font-size: 14px;
font-weight: normal;
color: rgba($gray, .8);
} }
} }
&__share { &__share {
float: right; margin-bottom: 40px;
position: relative; position: relative;
width: 200px;
margin: 0 auto;
.item { .item {
height: 60px;
width: 60px;
float: left;
text-align: center;
padding: 20px 0;
box-sizing: border-box;
color: #fdc200; color: #fdc200;
cursor: pointer; cursor: pointer;
transition: all .3s ease; transition: all .3s ease;
margin: 0 10px;
svg { svg {
height: 20px; height: 20px;
@ -704,111 +717,42 @@ a {
&[data-type="wechat"] { &[data-type="wechat"] {
color: #3caf36; color: #3caf36;
&:hover {
background-color: #3caf36;
}
} }
&[data-type="twitter"] { &[data-type="twitter"] {
color: #18a3fa; color: #18a3fa;
&:hover {
background-color: #18a3fa;
}
} }
&[data-type="weibo"] { &[data-type="weibo"] {
color: #f93; color: #f93;
&:hover {
background-color: #f93;
}
} }
&:hover { &:hover {
color: #fff; opacity: 0.6;
background-color: #fdc200;
} }
&__qr { &__qr {
position: absolute; position: absolute;
top: 61px; top: 24px;
left: 60px; left: 60px;
} }
} }
} }
.item { &__content {
&__meta { padding: 40px;
padding-top: 76px; box-sizing: border-box;
font-size: 14px;
text-transform: uppercase;
color: rgba($gray, .8);
a {
color: $gray;
}
}
&__title {
font-size: 28px;
margin-bottom: 40px;
sup {
font-size: 14px;
font-weight: normal;
color: rgba($gray, .8);
}
}
&__cover {
height: 800px;
background-size: cover;
background-position: center center;
max-width: 1404px;
margin: 0 auto;
border-radius: 5px;
filter: sepia(0.2) contrast(1.3) opacity(.86);
}
&__content {
padding: 70px 100px 0;
box-sizing: border-box;
background-color: #fff;
&--article {
margin-top: -164px;
position: relative;
}
}
&__tip {
margin-bottom: 40px;
border-radius: 5px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
transition: all .3s ease;
padding: 20px 0;
text-align: center;
background: #f4f8fb;
cursor: pointer;
font-size: 18px;
&:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02);
}
}
} }
} }
.post__toc { .post__toc {
display: none;
position: fixed; position: fixed;
top: 84px; top: 84px;
bottom: 80px; bottom: 80px;
overflow: auto; overflow: auto;
padding-left: 3px; padding-left: 3px;
right: 20px;
max-width: 160px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@ -852,19 +796,10 @@ a {
} }
.comment { .comment {
background-color: #f4f8fb;
position: relative;
&__wrapper {
margin: 0 auto;
padding: 0 100px 0.1px;
box-sizing: border-box;
}
&-body-ref { &-body-ref {
position: absolute; position: absolute;
left: 80px; left: 80px;
width: 76%; right: 0;
} }
&__title { &__title {
@ -873,11 +808,15 @@ a {
color: $gray; color: $gray;
} }
#comments {
position: relative;
}
.item { .item {
margin-bottom: 40px; margin-bottom: 40px;
border: 1px solid $fade-lighter; border: 1px solid $fade-lighter;
border-radius: 5px; border-radius: 5px;
background: #fff; background: rgba(255, 255, 255, .9);
box-shadow: 0 1px 4px rgba(0, 0, 0, .04); box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
list-style: none; list-style: none;
padding: 20px; padding: 20px;
@ -919,16 +858,11 @@ a {
} }
} }
#comments {
position: relative;
}
#comment { #comment {
position: relative;
margin-bottom: 30px; margin-bottom: 30px;
padding: 20px; padding: 20px;
border-radius: 3px; border-radius: 3px;
background: #fff; background: rgba(255, 255, 255, .9);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
border: 0; border: 0;
resize: none; resize: none;
@ -939,133 +873,36 @@ a {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.header { .pagination__item {
padding: 10px 0; margin: 0 3px 5px 2px;
&__h1 {
padding-top: 60px;
}
&__h2 {
margin-bottom: 40px;
}
&__nav {
.fn__right {
float: none;
}
a {
margin: 0 10px 0 0;
}
}
&--article {
height: auto;
.header__nav a {
line-height: 24px;
}
}
&--other {
height: 360px;
.header__nav a {
line-height: 24px;
}
}
}
.articles {
position: initial;
margin: 10px -5px 0 -5px;
.item {
margin: 0 5px 10px;
&--large {
flex-direction: column;
flex: 1 1 300px;
.item__cover {
height: 200px;
}
.item__main {
padding: 25px;
width: auto;
flex: 1;
}
}
}
}
.pagination {
margin-top: 0;
margin-bottom: 5px;
&__item {
margin-bottom: 5px;
}
} }
.footer { .footer {
.fn__left, margin-top: 0;
.fn__right {
float: none; .wrapper:after {
text-align: center; content: none;
}
}
.post__toc {
display: none;
}
.articles {
margin: 10px auto;
.item {
padding: 10px;
&__title a {
font-size: 18px;
}
} }
} }
.article { .article {
&__top { &__bottom .item {
height: 40px; margin: 0 0 10px 0;
.title {
display: none;
}
.toc {
display: block;
float: left;
line-height: 40px;
padding: 0 10px;
cursor: pointer;
}
}
&__share .item {
height: 40px;
width: 40px;
padding: 10px 0;
}
.item {
&__meta {
padding-top: 40px;
}
&__cover {
display: none;
}
&__content {
padding: 10px 10px 0;
&--article {
margin-top: -20px;
}
}
}
&__bottom {
.fn__flex {
margin: 0 0 10px 0;
}
.item {
margin: 10px 0 0 0;
}
} }
} }
@ -1074,41 +911,14 @@ a {
padding: 10px 0; padding: 10px 0;
} }
&__wrapper {
padding: 0 10px 0.1px;
}
#comment, #comment,
.item { .item {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
&__avatar {
margin-bottom: 10px;
}
}
}
.other {
&__title {
margin-top: -280px;
} }
&__content { .item__avatar {
padding: 20px; margin: 0 10px 10px 0;
margin: 40px auto 10px;
} }
&__meta--list {
margin-bottom: 40px;
}
}
.post__toc {
left: 0;
background-color: #fff;
width: 100%;
top: 41px;
bottom: 0;
} }
} }

366
Bubble/js/TweenMax.js Normal file
View File

File diff suppressed because one or more lines are too long

94
Bubble/js/common.js
View File

@ -38,7 +38,7 @@ var Skin = {
attr('max', parseInt($('body').outerHeight() - attr('max', parseInt($('body').outerHeight() -
$(window).height())) $(window).height()))
if ($(window).scrollTop() > $(window).height() - 20) { if ($(window).scrollTop() > $(window).height() / 2 - 20) {
$('.side__menu').addClass('side__menu--edge') $('.side__menu').addClass('side__menu--edge')
$('.side__top').removeClass('side__top--bottom') $('.side__top').removeClass('side__top--bottom')
} else { } else {
@ -47,26 +47,6 @@ var Skin = {
} }
}) })
$('.header').circleMagic({
clearOffset: 0.3,
color: 'rgba(255,255,255, .2)',
density: 0.2,
radius: 15,
})
new Ribbons({
colorSaturation: '60%',
colorBrightness: '50%',
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: 'random',
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true,
})
$('.side__menu').click(function () { $('.side__menu').click(function () {
$('.side__main').addClass('side__main--show').show() $('.side__main').addClass('side__main--show').show()
}) })
@ -101,63 +81,53 @@ var Skin = {
}, false) }, false)
$(window).scroll() $(window).scroll()
new Ribbons({
colorSaturation: '60%',
colorBrightness: '50%',
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: 'random',
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true,
})
if ($('#comments').length === 1) {
return
}
$('.header').circleMagic({
clearOffset: 0.3,
color: 'rgba(255,255,255, .2)',
density: 0.2,
radius: 15,
})
}, },
initArticle: function () { initArticle: function () {
page.share() page.share()
initCanvas('articleTop');
var $articleTocs = $('.vditor-reset [id^=b3_solo_h]') var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
var $articleToc = $('.article__toc') var $articleToc = $('.article__toc')
var $articleProgress = $('.article__progress')
if ($articleToc.length === 1) {
if ($(window).width() > 876) {
$('.post__toc').
css('left', $('.article .item__content').offset().left +
$('.article .item__content').outerWidth() - 80)
} else {
$('.post__toc a').click(function () {
$('.post__toc').hide()
})
}
}
$articleToc.find('a').click(function (event) { $articleToc.find('a').click(function (event) {
var id = $(this).attr('href') var id = $(this).attr('href')
window.location.hash = id window.location.hash = id
$(window).scrollTop($(id).offset().top - 60) $(window).scrollTop($(id).offset().top)
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
return false return false
}) })
$(window).unbind('scroll').scroll(function (event) { $(window).scroll(function (event) {
if ($articleProgress.length === 0) {
return false
}
$articleProgress.attr('value', parseInt($(window).scrollTop())).
attr('max', parseInt($('body').outerHeight() -
$(window).height()))
if ($(window).scrollTop() > 236) {
$('.article__top').css('top', 0)
} else {
$('.article__top').css('top', -61)
}
if ($('.article__toc li').length === 0) { if ($('.article__toc li').length === 0) {
return false return false
} }
if ($(window).width() > 876) {
if ($(window).scrollTop() > 975 && $(window).scrollTop() <
$('.article').outerHeight() + 100) {
$('.post__toc').show()
} else {
$('.post__toc').hide()
}
}
// 界面各种图片加载会导致帖子目录定位 // 界面各种图片加载会导致帖子目录定位
var toc = [] var toc = []
$articleTocs.each(function (i) { $articleTocs.each(function (i) {
@ -170,7 +140,7 @@ var Skin = {
// 当前目录样式 // 当前目录样式
var scrollTop = $(window).scrollTop() var scrollTop = $(window).scrollTop()
for (var i = 0, iMax = toc.length; i < iMax; i++) { for (var i = 0, iMax = toc.length; i < iMax; i++) {
if (scrollTop < toc[i].offsetTop - 61) { if (scrollTop < toc[i].offsetTop) {
$articleToc.find('li').removeClass('current') $articleToc.find('li').removeClass('current')
var index = i > 0 ? i - 1 : 0 var index = i > 0 ? i - 1 : 0
$articleToc.find('a[href="#' + toc[index].id + '"]'). $articleToc.find('a[href="#' + toc[index].id + '"]').
@ -179,13 +149,11 @@ var Skin = {
break break
} }
} }
if (scrollTop >= toc[toc.length - 1].offsetTop - 61) { if (scrollTop >= toc[toc.length - 1].offsetTop) {
$articleToc.find('li').removeClass('current') $articleToc.find('li').removeClass('current')
$articleToc.find('li:last').addClass('current') $articleToc.find('li:last').addClass('current')
} }
}) })
$(window).scroll()
}, },
} }

2
Bubble/macro-comments.ftl
View File

@ -19,7 +19,7 @@
--> -->
<#macro comments commentList article> <#macro comments commentList article>
<div class="comment"> <div class="comment">
<div class="comment__wrapper wrapper"> <div class="wrapper">
<div class="comment__title"> <div class="comment__title">
${commentLabel} ${commentLabel}
</div> </div>