From df53442022258c14ae01da53a692c4c4c6746d92 Mon Sep 17 00:00:00 2001 From: Eyre_S Date: Mon, 22 Nov 2021 17:48:04 +0800 Subject: [PATCH] =?UTF-8?q?metas=20=E8=8F=9C=E5=8D=95=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=89=8B=E9=A3=8E=E7=90=B4=E6=95=88=E6=9E=9C=EF=BC=8C=E6=AD=A3?= =?UTF-8?q?=E6=96=87=E5=AE=BD=E5=BA=A6=E9=99=90=E5=88=B6=EF=BC=8C=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E5=8C=BA=E6=BB=9A=E5=8A=A8=E6=9D=A1=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/main.css | 34 ++++++++++++++++++++++++++---- assets/main.js | 52 +++++++++++++++++++++++++++++----------------- constant.php | 2 +- template/demo.html | 12 +++++------ 4 files changed, 70 insertions(+), 30 deletions(-) diff --git a/assets/main.css b/assets/main.css index 0702d17..d77e83a 100644 --- a/assets/main.css +++ b/assets/main.css @@ -42,6 +42,9 @@ --color-tools-button-background-active: #eef1f4; --color-font-tools-button: #c3ccd6; + --color-scrollbar-main-background: var(--color-scrollbar-sidebar-foreground); + --color-scrollbar-main-foreground: var(--color-menu-item-indicator-focus); + } :root { @@ -65,12 +68,15 @@ --main-margin-height: 2rem; --main-margin-width: 2rem; + --main-scrollbar-width: 0.5rem; + --tools-button-padding: 0.75rem; --tools-font-size: 0.83rem; --article-padding-height: 2rem; --article-padding-width: 2rem; --article-margin-top: 3rem; + --article-width-max: 800px; } @@ -123,9 +129,9 @@ } -#test-overflow { - display: none; -} +/*#test-overflow {*/ +/* display: none;*/ +/*}*/ button { appearance: none; @@ -425,6 +431,7 @@ body { #sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > *:first-child { position: relative; + /*text-decoration: underline;*/ } #sidebar > .menu-container > .menu#menu-metas > .menu-item-parent > *:first-child:after { @@ -453,6 +460,24 @@ body { position: relative; } +#main::-webkit-scrollbar { + width: var(--main-scrollbar-width); + border-radius: calc(var(--main-scrollbar-width) / 2); + background: none; +} + +#main::-webkit-scrollbar-thumb { + width: var(--main-scrollbar-width); + border-radius: calc(var(--main-scrollbar-width) / 2); + background: var(--color-scrollbar-main-foreground); +} + +#main::-webkit-scrollbar-track { + width: var(--main-scrollbar-width); + border-radius: calc(var(--main-scrollbar-width) / 2); + background: var(--color-scrollbar-main-background); +} + #page-tools { position: absolute; top: 0; @@ -482,6 +507,7 @@ body { ** page content ** ******************************************************************/ #article { - margin-top: var(--article-margin-top); + margin: var(--article-margin-top) auto 0; padding: var(--article-padding-height) var(--article-padding-width); + max-width: var(--article-width-max); } diff --git a/assets/main.js b/assets/main.js index 43ce307..d18d8f0 100644 --- a/assets/main.js +++ b/assets/main.js @@ -11,26 +11,40 @@ for (const node of document.getElementsByTagName("noscript")) { } for (const node of document.getElementsByClassName("menu-item-parent")) { - const children = node.getElementsByClassName("children")[0]; - node.firstElementChild.onclick = async function () { - node.classList.toggle("active"); - if (node.classList.contains("active")) { - const height = children.clientHeight; - children.style.height = "0px"; - await sleep(1); - children.style.height = height + "px"; - await sleep(menuItemChildrenAnimaSpeed); - children.style.height = ""; - } else { - children.style.display = "block"; - const height = children.clientHeight; - children.style.height = height + "px"; - await sleep(1); - children.style.height = "0px"; - await sleep(menuItemChildrenAnimaSpeed); - children.style.height = ""; - children.style.display = ""; + if (node.parentElement.id === "menu-metas") { + console.log("a"); + node.firstElementChild.onclick = function () { + if (!node.classList.contains("active")) { + for (const nodeOther of node.parentElement.children) { + if (nodeOther.classList.contains("active")) { toggleMenuItem(nodeOther).then(); } + } + } + toggleMenuItem(node).then(); } + } else { + node.firstElementChild.onclick = function () { toggleMenuItem(node).then(); } + } +} + +async function toggleMenuItem(node) { + const children = node.getElementsByClassName("children")[0]; + node.classList.toggle("active"); + if (node.classList.contains("active")) { + const height = children.clientHeight; + children.style.height = "0px"; + await sleep(1); + children.style.height = height + "px"; + await sleep(menuItemChildrenAnimaSpeed); + children.style.height = ""; + } else { + children.style.display = "block"; + const height = children.clientHeight; + children.style.height = height + "px"; + await sleep(1); + children.style.height = "0px"; + await sleep(menuItemChildrenAnimaSpeed); + children.style.height = ""; + children.style.display = ""; } } diff --git a/constant.php b/constant.php index 2a7a0dd..7f3b50b 100644 --- a/constant.php +++ b/constant.php @@ -2,6 +2,6 @@ const APP_NAME = "ph-Bookshelf"; -const VERSION = "0.3.0.1"; +const VERSION = "0.3.0.3"; const CHANNEL = "suk-ws"; const BRANCH = "master"; diff --git a/template/demo.html b/template/demo.html index ff4cc03..8ffd3f7 100644 --- a/template/demo.html +++ b/template/demo.html @@ -5,19 +5,19 @@