xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace in-footer scroll-to-top link with fixed floating button

Browse Source
This commit is contained in:
xfy 2026-06-04 17:55:26 +08:00
parent 0dbd07198b
commit 245fd83ec8
2 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/icons/keyboard_double_arrow_up_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 229 B

After

Width:  |  Height:  |  Size: 230 B

44
src/components/footer.rs
View File

@ -66,8 +66,8 @@ pub fn Footer() -> Element {
} }
}); });
let link_class = use_memo(move || { let btn_class = use_memo(move || {
let base = "p-2 rounded-full cursor-pointer hover:opacity-80 transition-all duration-300 text-gray-600 dark:text-gray-300"; let base = "fixed bottom-16 right-8 z-50 w-10 h-10 rounded-full bg-gray-100 dark:bg-[#2d2e30] shadow-md flex items-center justify-center cursor-pointer transition-all duration-300 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white";
if visible() { if visible() {
format!("{} opacity-100 translate-y-0", base) format!("{} opacity-100 translate-y-0", base)
} else { } else {
@ -79,26 +79,26 @@ pub fn Footer() -> Element {
footer { class: "w-full border-t border-gray-200 dark:border-[#333] mt-auto", footer { class: "w-full border-t border-gray-200 dark:border-[#333] mt-auto",
div { class: "max-w-3xl mx-auto px-6 py-5 flex items-center justify-between text-sm text-gray-400 dark:text-[#9b9c9d]", div { class: "max-w-3xl mx-auto px-6 py-5 flex items-center justify-between text-sm text-gray-400 dark:text-[#9b9c9d]",
span { "© 2026 Yggdrasil Blog" } span { "© 2026 Yggdrasil Blog" }
a { }
class: "{link_class}", }
href: "#top", a {
aria_label: "go to top", class: "{btn_class}",
title: "Go to Top (Alt + G)", href: "#top",
accesskey: "g", aria_label: "go to top",
onclick: move |evt| { title: "Go to Top (Alt + G)",
evt.prevent_default(); accesskey: "g",
scroll_to_top(); onclick: move |evt| {
}, evt.prevent_default();
svg { scroll_to_top();
xmlns: "http://www.w3.org/2000/svg", },
height: "24px", svg {
view_box: "0 -960 960 960", xmlns: "http://www.w3.org/2000/svg",
width: "24px", height: "24px",
fill: "currentColor", view_box: "0 -960 960 960",
path { width: "24px",
d: "m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z", fill: "currentColor",
} path {
} d: "m296-224-56-56 240-240 240 240-56 56-184-183-184 183Zm0-240-56-56 240-240 240 240-56 56-184-183-184 183Z",
} }
} }
} }