From 35a51540b738f47c500b47a3398416e951096e5a Mon Sep 17 00:00:00 2001 From: Eltrac <45323514+BigCoke233@users.noreply.github.com> Date: Thu, 25 Jul 2019 16:07:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E6=8A=BD=E5=B1=89=E6=A0=8F?= =?UTF-8?q?=EF=BC=8C=E5=8F=AF=E4=B8=8E=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E6=A0=8F=E8=BF=9B=E8=A1=8C=E5=88=87=E6=8D=A2=20/=20Bug=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/miracles.min.css | 186 +++++++++++++++++++++++++++++++- assets/css/prism.css | 5 +- assets/css/setting.miracles.css | 6 +- assets/js/miracles.min.js | 47 ++++++++ functions.php | 4 +- includes/footer.php | 18 ++-- includes/header.php | 36 ++++++- libs/Contents.php | 2 +- libs/Options.php | 4 +- libs/Utils.php | 11 +- page.php | 8 ++ post.php | 11 +- 12 files changed, 304 insertions(+), 34 deletions(-) diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css index ad485936..08420f65 100644 --- a/assets/css/miracles.min.css +++ b/assets/css/miracles.min.css @@ -32,7 +32,8 @@ body,html { width: 100%; } body { - font-family: 'Noto Sans SC',sans-serif + font-family: 'Noto Sans SC',sans-serif; + transition: all 0.3s; } hr { border: none; @@ -114,6 +115,22 @@ hr { color: #fff; } +/* Large Mask */ +.mask { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgb(70,70,70,0); + z-index: -100; + transition: all 0.4s; +} +.mask-open { + background: rgb(70,70,70,0.7); + z-index: 25; +} + /* 导航栏 */ .nav { background: rgba(255,255,255,0.96); @@ -194,14 +211,143 @@ hr { background: rgb(230,230,230); cursor: pointer } + +/* Drawer */ +.drawer { + background: rgb(246,246,246); + border-right: 1px solid #ddd; + position: fixed; + top: 0; + bottom: 0; + z-index: 30; + left: -150vh; + transition: all 0.8s; + box-shadow: 0 0 30px #646464; + -moz-box-shadow: 0 0 30px #646464; + -webkit-box-shadow: 0 0 30px #646464; + /* Mobile */ + width: 360px; +} +.drawer-avatar { + margin-top: 50px; +} +.drawer-avatar img { + display: block; + margin: 0 auto; + border-radius: 100%; + /* Mobile */ + width: 150px; + height: 150px; +} +.drawer-button { + position: fixed; + top: 10px; + left: 15px; + background: rgba(0,0,0,0); + border-radius: 100%; + border: none; + height: 40px; + width: 40px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + text-shadow: 0 1px 6px #bababa; + transform: scale(1.2); + transition: background 0.3s; + padding: 3px; + outline: none; + transition: all 0.5s; +} +.drawer-button:hover { + cursor: pointer; + background: rgba(200,200,200,0.4); +} +.drawer-open .drawer { + left: 0; +} +.drawer-open .drawer-button { + left: 4px; + top: 4px; + color: rgb(80,80,80); + text-shadow: 0 0 0 #fff; +} +.drawer-open #live2dcanvas { + z-index: 0!important; +} + +.drawer-search { + background: rgb(240,240,240); + padding: 10px 8px; + margin-top: 20px; +} +.drawer-search-form input, +.drawer-search-form button { + color: gray; + border-radius: 2px; + border: 1px solid #ccc; + margin: 0; + padding: 7px 3px; +} +.drawer-search-form input { + width: 70%; + background: #fff; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -5px; +} +.drawer-search-form button { + width: 28%; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + background: #ddd; +} +.drawer-content { + margin-top: 10px; + overflow-y: auto; + height: 60vh; +} +.drawer-content a { + display: block; + text-align: center; + font-size: 21px; + padding: 14px 0; +} +.drawer-content a:hover { + background: rgb(240,240,240); +} +.drawer-main { + height: 87vh; +} +.drawer-footer { + background: rgb(253,253,253); + padding: 8px 0; + text-align: center; + height: 13vh; +} +.drawer-icon { + height: 6vh; + width: 6vh; + border-radius: 100%; + background: rgb(246,246,246); + transition: background: 0.2s; + margin: 0 3px; + border: none; + outline: none; +} +.drawer-icon:hover { + background: rgb(240,240,240); +} + /* 首页大图 */ .index-banner { margin-top: -21px; width: 100%; text-align: center } -.dark-cover { - /* 即 Mask */ +.dark-cover, +.banner-mask { + /* .dark-cover 是之前版本遮罩的类名 */ width: 100%; height: 100%; background: rgba(30,30,30,.25); @@ -248,7 +394,7 @@ hr { margin-top: 30px; transition: color .2s; overflow: hidden; - height: 36px; + height: 40px; white-space: nowrap; text-overflow: ellipsis } @@ -528,6 +674,7 @@ hr { /* 友链 */ .links-box { margin: 10px; + margin-left: 0; margin-top: 30px } .links-box h2 { @@ -1038,7 +1185,7 @@ hr { /* Options Pannel */ .options { transition: all 0.3s; - background: rgb(254,254,254,0.96); + background: #fff; border-radius: 2px; box-shadow: 0 1px 8px #bababa; -moz-box-shadow: 0 1px 8px #bababa; @@ -1151,6 +1298,7 @@ iframe[src*="//player.bilibili.com/player.html"] { /* Live2D */ #live2dcanvas { display: none; + transition: all 0.3s; } /* 响应式相关 */ .large-screen { @@ -1159,8 +1307,23 @@ iframe[src*="//player.bilibili.com/player.html"] { .small-screen { display: block } + +/* Mobile phone */ +@media (max-width:320) { + .drawer { + width: 100vw; + } +} /* > Pad and up */ @media (min-width:768px) { + .drawer-avatar img { + height: 220px; + width: 220px; + } + .drawer { + width: 360px; + } + .fixed-button { height: 60px; width: 60px; @@ -1434,4 +1597,17 @@ iframe[src*="//player.bilibili.com/player.html"] { #live2dcanvas { transform: scale(1); } +} +/* 有 Drawer 时的设置面板 */ +.options-with-drawer { + background: rgb(246,246,246); + box-shadow: 0 0 0 #fff; + -moz-box-shadow: 0 0 0 #fff; + -webkit-box-shadow: 0 0 0 #fff; + width: 360px!important; + height: 210px!important; + top: auto!important; + right: auto!important; + bottom: 10vh!important; + z-index: 40!important; } \ No newline at end of file diff --git a/assets/css/prism.css b/assets/css/prism.css index 1816e42e..8611bc80 100644 --- a/assets/css/prism.css +++ b/assets/css/prism.css @@ -2,7 +2,7 @@ code[class*=language-],pre[class*=language-] { color: #ccc; background: rgba(0,0,0,0)!important; font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace; - font-size: 15px; + font-size: 16px; text-align: left; white-space: pre; word-spacing: normal; @@ -24,6 +24,7 @@ pre[class*=language-] { margin: .5em 0; overflow: auto; margin: 20px -26px; + max-height: 85vh; } @media (min-width:768px) { pre[class*=language-] { @@ -118,7 +119,7 @@ pre[class*=language-].line-numbers>code { position: absolute; pointer-events: none; top: 0; - font-size: 100%; + font-size: 16px; left: -3.8em; width: 3em; letter-spacing: -1px; diff --git a/assets/css/setting.miracles.css b/assets/css/setting.miracles.css index 7ece2f65..2cb10c5f 100644 --- a/assets/css/setting.miracles.css +++ b/assets/css/setting.miracles.css @@ -10,13 +10,11 @@ :root { --theme-color: #4D90FE; } - body { width: 100%; background: rgb(252,252,252); font-family: 'Noto Sans SC',sans-serif } - hr { border: none; border-bottom: 1px solid rgb(220,220,220); @@ -87,7 +85,7 @@ hr { border: none; } [action="?MiraclesBackup"] { - margin-top: -30px; + margin-top: -10px; } /* Para */ @@ -104,7 +102,7 @@ iframe.miracles-news { border: none; height: 60px; margin: 0 -8px; - margin-top: -10px; + margin-top: -5px; } /* 滚动条 */ diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js index 1e0b01b8..0ef02640 100644 --- a/assets/js/miracles.min.js +++ b/assets/js/miracles.min.js @@ -154,6 +154,21 @@ function panguLoad() { }); } +/** + * Prevent Scroll + */ +function bodyScroll(event){ + event.preventDefault(); +} +function banScroll() { + document.body.addEventListener('touchmove',bodyScroll,false); + $('body').css({'position':'fixed',"width":"100%"}); +} +function allowScroll() { + document.body.removeEventListener('touchmove',bodyScroll,false); + $("body").css({"position":"initial","height":"auto"}); +} + /** * Open pannel */ @@ -161,16 +176,34 @@ function panguLoad() { function Search() { $(".search").toggleClass("ready"); $(".search-close").toggleClass("ready"); + //Ban or allow scroll + if($(".search").hasClass("ready")) { + allowScroll(); + }else{ + banScroll(); + } } //mobileMenu function toggleMobileMenu() { $(".mobile-menu").toggleClass("ready"); $(".mobile-menu-close").toggleClass("ready"); + //Ban or allow scroll + if($(".mobile-menu").hasClass("ready")) { + allowScroll(); + }else{ + banScroll(); + } } //Login function Login() { $(".login").toggleClass("ready"); $(".login-close").toggleClass("ready"); + //Ban or allow scroll + if($(".login").hasClass("ready")) { + allowScroll(); + }else{ + banScroll(); + } } /** @@ -238,6 +271,20 @@ function toggleOptions() { $('.options-sizelarge').addClass('options-button-active'); } +/** + * Drawer + */ +function toggleDrawer() { + $("body").toggleClass("drawer-open"); + $(".mask").toggleClass("mask-open"); + //Ban or allow scroll + if($("body").hasClass("drawer-open")) { + banScroll(); + }else{ + allowScroll(); + } +} + /** * Load Live2D */ diff --git a/functions.php b/functions.php index 6c1dc7dd..dd703659 100644 --- a/functions.php +++ b/functions.php @@ -55,6 +55,6 @@ function themeFields(Typecho_Widget_Helper_Layout $layout) { * 获取主题版本号 */ function themeVersion() { - $info = Typecho_Plugin::parseInfo(__DIR__ . '/index.php'); - return $info['version']; + $info = Typecho_Plugin::parseInfo(__DIR__ . '/index.php'); + return $info['version']; } diff --git a/includes/footer.php b/includes/footer.php index 52ea3e47..30469944 100644 --- a/includes/footer.php +++ b/includes/footer.php @@ -14,15 +14,15 @@ options->CDN && $this->options->CDN=1): ?> - - - - - - - - - + + + + + + + + + diff --git a/includes/header.php b/includes/header.php index 117f9ae5..f1ebb6d5 100644 --- a/includes/header.php +++ b/includes/header.php @@ -1,5 +1,5 @@ - +
@@ -42,7 +42,7 @@
-
+
options->navStyle==1): ?> onclick="toggleOptions()">
@@ -96,6 +96,7 @@
+ options->navStyle==0): ?>
- + options->navStyle==1): ?> + + +
is('post') || $this->is('page')): ?> @@ -130,7 +158,7 @@
-
+