From 0024f32fb97107b419cc2a286885d8a1d580cedf Mon Sep 17 00:00:00 2001 From: Eyre_S Date: Sun, 21 Nov 2021 18:41:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E5=85=83=E7=B4=A0=E5=8A=A8=E7=94=BB=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在主要区块左上角添加一个侧边栏开关按钮 - 侧边栏动画实现 - 实现了侧边栏开关和侧边栏滑入滑出动画 - 菜单物体悬浮颜色动画 - 菜单物体的已选中区块指示器实现 - 子菜单的开关动画 - 补全 a 标签的样式和动画 - 重置了默认 button 样式 --- assets/main.css | 180 ++++++++++++++++++++++++++++++++++++++++----- assets/main.js | 37 +++++++++- constant.php | 2 +- template/demo.html | 16 ++-- 4 files changed, 211 insertions(+), 24 deletions(-) diff --git a/assets/main.css b/assets/main.css index cdcc1f2..80c031c 100644 --- a/assets/main.css +++ b/assets/main.css @@ -16,6 +16,10 @@ --color-font-base: #223b5c; --color-font-base-link: #409dff; + --color-font-base-link-hover: #0033ff; + --color-font-base-link-visited: #a27aeb; + --color-font-base-link-visited-hover: #5a00ff; + --color-font-base-link-focus-bg: #33aee92b; --color-sidebar-background: #f6f8fa; --color-font-sidebar: var(--color-font-base); @@ -34,6 +38,10 @@ --color-font-menu-item-current: #3697ff; --color-font-menu-item-hover: #71b3f9; + --color-tools-button-background: #f6f8fa; + --color-tools-button-background-active: #eef1f4; + --color-font-tools-button: #c3ccd6; + } :root { @@ -41,6 +49,7 @@ --sidebar-width: 19rem; --sidebar-margin-width: 2rem; --sidebar-margin-height: 2rem; + --sidebar-font-size: 0.83rem; --sidebar-menu-container-external-max-height: 30%; @@ -53,6 +62,16 @@ --sidebar-menu-item-indicator-active-width: 4px; --sidebar-menu-item-indicator-focus-width: 4px; + --main-margin-height: 2rem; + --main-margin-width: 2rem; + + --tools-button-padding: 0.75rem; + --tools-font-size: 0.83rem; + + --article-padding-height: 2rem; + --article-padding-width: 2rem; + --article-margin-top: 3rem; + } :root { @@ -73,6 +92,20 @@ --font-monospace: "Fira Code", "Monaco", "Consolas", var(--font-sarasa-mono), monospace; } +:root { + + --element-href-anima-speed: 0.1s; + + --sidebar-toggle-anima-speed: 0.4s; + + --sidebar-menu-item-anima-speed: 0.15s; + --sidebar-menu-item-parent-arrow-anima-speed: 0.2s; + --sidebar-menu-item-children-anima-speed: 0.2s; + + --tools-button-hover-anima-speed: 0.2s; + +} + :root { --animation-speed-multiplier: 1; /* --color-background-graystyle: #3c3c3c;*/ @@ -94,6 +127,28 @@ display: none; } +button { + appearance: none; + font-size: inherit; + font-family: inherit; + font-style: inherit; + font-variant-ligatures: inherit; + font-variant-caps: inherit; + font-variant-numeric: inherit; + font-variant-east-asian: inherit; + font-weight: inherit; + font-stretch: inherit; + color: inherit; + letter-spacing: normal; + word-spacing: normal; + line-height: normal; + text-transform: none; + box-sizing: border-box; + background: none; + border: none; + border-radius: 0.5rem; +} + small { opacity: var(--object-opacity-weakness); } @@ -101,6 +156,27 @@ small { a { color: var(--color-font-base-link); text-decoration: none; + transition: + color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier)), + background-color calc(var(--element-href-anima-speed) * var(--animation-speed-multiplier)); + border-radius: 0.3rem; +} + +a:hover { + color: var(--color-font-base-link-hover); +} + +a:visited { + color: var(--color-font-base-link-visited); +} + +a:visited:hover { + color: var(--color-font-base-link-visited-hover); +} + +a:focus-visible { + background-color: var(--color-font-base-link-focus-bg); + outline: none; } a.no-style { @@ -108,6 +184,19 @@ a.no-style { text-decoration: inherit; } +a.no-style:hover, +a.no-style:visited, +a.no-style:visited:hover { + color: inherit; + border-radius: inherit; + transition: inherit; +} + +a.no-style:focus-visible { + background-color: inherit; +} + + h1 { font-size: 2.2rem; } @@ -132,9 +221,8 @@ body { height: 100vh; overflow: hidden; color: var(--color-font-base); - display: grid; - grid-template-columns: min(calc(var(--sidebar-width) + var(--sidebar-margin-width) * 2), 100vw) auto; - grid-template-rows: 100vh; + display: flex; + position: relative; } @@ -143,13 +231,31 @@ body { /****************************************************************** ** sidebar ** ******************************************************************/ +#nav-container { + width: 0; + flex-grow: 0; + flex-shrink: 0; + position: relative; + transition: width calc(var(--sidebar-toggle-anima-speed) * var(--animation-speed-multiplier)); +} + +#nav-container.show-sidebar { + width: min(calc(var(--sidebar-width) + var(--sidebar-margin-width) * 2), 100vw); +} + #sidebar { - font-size: 0.83rem; + width: min(var(--sidebar-width), 100vw); + padding: var(--sidebar-margin-height) var(--sidebar-margin-width); + position: absolute; + top: 0; + bottom: 0; + right: 0; + font-size: var(--sidebar-font-size); font-weight: bold; display: flex; flex-direction: column; - margin: var(--sidebar-margin-height) var(--sidebar-margin-width); color: var(--color-font-sidebar); + overflow: hidden; } #sidebar .sidebar-card { @@ -245,6 +351,7 @@ body { display: block; padding: 0.55rem 0; position: relative; + transition: color calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier)); } #sidebar > .menu-container > .menu .menu-item:hover { @@ -252,7 +359,7 @@ body { } #sidebar > .menu-container > .menu .menu-item.current { - color: var(--color-font-menu-item-current); + color: var(--color-font-menu-item-current) !important; } #sidebar > .menu-container > .menu .menu-item.current:after { @@ -266,20 +373,27 @@ body { background: var(--color-menu-item-indicator-current); } +#sidebar > .menu-container > .menu .menu-item:before { + content: ""; + position: absolute; + transition: top calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier)), + bottom calc(var(--sidebar-menu-item-anima-speed) * var(--animation-speed-multiplier)); + top: 50%; + bottom: 50%; + left:calc(0px - var(--sidebar-menu-item-indicator-focus-width) * 2); + width: var(--sidebar-menu-item-indicator-focus-width); + border-radius: calc(var(--sidebar-menu-item-indicator-focus-width) / 2); + background: var(--color-menu-item-indicator-focus); +} + #sidebar > .menu-container > .menu .menu-item:focus-visible{ color: var(--color-font-menu-item-hover); outline: none; } #sidebar > .menu-container > .menu .menu-item:focus-visible:before { - content: ""; - position: absolute; top: calc(var(--sidebar-menu-item-indicator-focus-width) / 2); bottom: calc(var(--sidebar-menu-item-indicator-focus-width) / 2); - left:calc(0px - var(--sidebar-menu-item-indicator-focus-width) * 2); - width: var(--sidebar-menu-item-indicator-focus-width); - border-radius: calc(var(--sidebar-menu-item-indicator-focus-width) / 2); - background: var(--color-menu-item-indicator-focus); } #sidebar > .menu-container > .menu .menu-item-parent > *:first-child:after { @@ -287,7 +401,7 @@ body { color: var(--color-font-base-link); display: inline-block; margin-left: 0.5rem; - transition: transform calc(0.2s * var(--animation-speed-multiplier)); + transition: transform calc(var(--sidebar-menu-item-parent-arrow-anima-speed) * var(--animation-speed-multiplier)); } #sidebar > .menu-container > .menu .menu-item-parent.active > *:first-child:after { @@ -302,6 +416,7 @@ body { border-left-width: 1px; overflow: hidden; display: none; + transition: height calc(var(--sidebar-menu-item-children-anima-speed) * var(--animation-speed-multiplier)) ease-in-out; } #sidebar > .menu-container > .menu .menu-item-parent.active > .children { @@ -312,14 +427,45 @@ body { /* /* /****************************************************************** - ** page content ** + ** page header ** ******************************************************************/ #main { color: var(--color-font-base); - padding: 1rem; + margin: var(--main-margin-height) var(--main-margin-width); + flex-grow: 1; overflow: auto; + position: relative; } -#article { - padding: 5rem; +#page-tools { + position: absolute; + top: 0; + left: 0; + color: var(--color-font-tools-button); + font-size: var(--tools-font-size); + font-weight: bold; +} + +#page-tools > button { + background-color: var(--color-tools-button-background); + padding: 0; + height: 2.2rem; + width: 2.2rem; + transition: background-color var(--tools-button-hover-anima-speed); +} + +#page-tools > button:hover { + background-color: var(--color-tools-button-background-active); +} + + + +/* +/* +/****************************************************************** + ** page content ** + ******************************************************************/ +#article { + margin-top: var(--article-margin-top); + padding: var(--article-padding-height) var(--article-padding-width); } diff --git a/assets/main.js b/assets/main.js index 3732fb3..43ce307 100644 --- a/assets/main.js +++ b/assets/main.js @@ -1,10 +1,45 @@ +const cssVar = getComputedStyle(document.querySelector(":root")); + +const animationSpeedMultiplier = parseFloat(cssVar.getPropertyValue("--animation-speed-multiplier")); +const menuItemChildrenAnimaSpeed = parseFloat(cssVar.getPropertyValue("--sidebar-menu-item-anima-speed")) * 1000 * animationSpeedMultiplier; + +const itemSidebar = document.getElementById("sidebar"); + for (const node of document.getElementsByTagName("noscript")) { node.parentNode.removeChild(node); } for (const node of document.getElementsByClassName("menu-item-parent")) { - node.firstElementChild.onclick = function () { + 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 = ""; + } } } + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +document.getElementById("sidebar-show").onclick = sidebarToggle; +function sidebarToggle() { + itemSidebar.parentElement.classList.toggle("show-sidebar"); +} +sidebarToggle(); diff --git a/constant.php b/constant.php index 284ed7b..67bc662 100644 --- a/constant.php +++ b/constant.php @@ -2,6 +2,6 @@ const APP_NAME = "ph-Bookshelf"; -const VERSION = "0.3-dev1"; +const VERSION = "0.3.0.1"; const CHANNEL = "workshop-origin"; const BRANCH = "master"; diff --git a/template/demo.html b/template/demo.html index 743976d..fe5a72c 100644 --- a/template/demo.html +++ b/template/demo.html @@ -1,10 +1,10 @@ -
+
+ +