1
0
mirror of https://github.com/suk-ws/ph-Bookshelf.git synced 2024-12-05 01:16:53 +08:00

为 books 添加了折叠和自动折叠

- 添加了一个折叠浮动按钮,可以使 books 折叠起来
- 默认 books 会处于折叠状态,除了在全站主页时会自动展开
This commit is contained in:
A.C.Sukazyo Eyre 2021-05-06 14:58:49 +08:00
parent a9b9a94275
commit 309a378303
Signed by: Eyre_S
GPG Key ID: EFB47D98FE082FAD
3 changed files with 56 additions and 2 deletions

View File

@ -27,3 +27,44 @@
.book .book-summary .exc-trigger:before {
content: "\f054";
}
.book-summary ul.summary div.summary-container {
padding: 0;
max-height: 0;
overflow: hidden;
}
.book-summary ul.summary div.summary-container.on {
padding: 7px 0;
max-height: unset;
}
.book-summary ul.summary li.divider.block-end {
margin-top: 0;
position: relative;
overflow: unset;
}
.book-summary ul.summary li.divider.block-start {
margin-bottom: 0;
}
.book-summary ul.summary li.divider.block-end .summary-container-icon {
position: absolute;
top: 1px;
right: 20px;
padding: 0 5px 2px;
background: rgba(0,0,0,.07);
color: white;
border-bottom: 0;
border-radius: 0 0 5px 5px;
z-index: 1000;
}
.book-summary ul.summary li.divider.block-end .summary-container-icon .fa:before {
content: "\f078";
}
.book-summary ul.summary div.summary-container.on + li.divider.block-end {
transform: rotateX(180deg);
}

View File

@ -29,3 +29,16 @@ for (let node of document.getElementsByClassName("fold")) {
} else node.classList.add("on");
});
}
for (const node of document.getElementsByClassName("summary-container")) {
node.nextElementSibling.innerHTML = node.nextElementSibling.innerHTML + "<a class='summary-container-icon'><i class='fa'></i></a>";
node.nextElementSibling.getElementsByClassName("summary-container-icon")[0].addEventListener("click", function () {
if (node.classList.contains("on")) {
node.classList.remove("on")
} else {
node.classList.add("on")
}
})
}

View File

@ -73,9 +73,9 @@ class Bookshelf {
public function getHtml (): string {
$str = "<ul id='global-container' class='summary'>";
$str .= $this->links->getHtml();
$str .= "<li class='divider'></li>";
$str .= "<li class='divider block-start'></li><div class='summary-container" . (PageMeta::$isMainPage?" on":"") . "'>";
$str .= $this->books->getHtml();
$str .= "<li class='divider'></li>";
$str .= "</div><li class='divider block-end'></li>";
$str .= PageMeta::$book->getSummaryHtml();
$str .= "<li class='divider'></li><li><a href='https://github.com/Eyre-S/ph-Bookshelf' target='blank' class='gitbook-link'>Generated with ph-Bookshelf</a></li><li><a href='https://www.gitbook.com' target='blank' class='gitbook-link'>Front-End by GitBook</a></li>";
$str .= "</ul>";