mirror of
https://github.com/suk-ws/ph-Bookshelf.git
synced 2024-12-05 01:16:53 +08:00
metas 菜单添加手风琴效果，正文宽度限制，内容区滚动条自定义
This commit is contained in:
parent
c1a8e00028
commit
df53442022
GPG Key ID:
EFB47D98FE082FAD
@ -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);
|
||||
}
|
||||
|
||||
@ -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 = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -5,19 +5,19 @@
|
||||
<div id="menu-container" class="menu-container sidebar-card">
|
||||
<div id="menu-metas" class="menu">
|
||||
<div class="menu-item-parent">
|
||||
<a class="no-style menu-item" href="#">Links</a>
|
||||
<a class="no-style menu-item" href="javascript:">Links</a>
|
||||
<div class="children">
|
||||
<a class="no-style menu-item" href="https://sukazyo.cc/" target="_blank">Workshop MetaBoard</a>
|
||||
<a class="no-style menu-item" href="https://srv.sukazyo.cc/" target="_blank">Workshop Services</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item-parent">
|
||||
<a class="no-style menu-item" href="#">Books</a>
|
||||
<a class="no-style menu-item" href="javascript:">Books</a>
|
||||
<div class="children">
|
||||
<a class="no-style menu-item" href="https://sukazyo.cc/" target="_blank">Template Book</a>
|
||||
<a class="no-style menu-item" href="https://srv.sukazyo.cc/" target="_blank">phBookshelf Documentation</a>
|
||||
<div class="menu-item-parent">
|
||||
<a class="no-style menu-item" href="#">Some other Links</a>
|
||||
<a class="no-style menu-item" href="javascript:">Some other Links</a>
|
||||
<div class="children">
|
||||
<a class="no-style menu-item current" href="https://sukazyo.cc/" target="_blank">Template Book</a>
|
||||
<a class="no-style menu-item" href="https://srv.sukazyo.cc/" target="_blank">phBookshelf Documentation</a>
|
||||
@ -27,12 +27,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="menu-pages" class="menu">
|
||||
<a class="no-style menu-item" href="#">Something?</a>
|
||||
<a class="no-style menu-item" href="javascript:">Something?</a>
|
||||
<div class="menu-item-parent active">
|
||||
<a class="no-style menu-item" href="#">With Something</a>
|
||||
<a class="no-style menu-item" href="javascript:">With Something</a>
|
||||
<div class="children">
|
||||
<div class="menu-item-parent">
|
||||
<a class="no-style menu-item" href="#">With Something</a>
|
||||
<a class="no-style menu-item" href="javascript:">With Something</a>
|
||||
<div class="children">
|
||||
<a class="no-style menu-item" href="#">Something?</a>
|
||||
<a class="no-style menu-item" href="#">Something?</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user