Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 07:31:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix scroll overflow in extension link with fragments (#1064)

Browse Source 
* Fix scroll overflow in extension link with fragments.

* Address some styling issues.
This commit is contained in:
Alessandro Jean 2023-10-10 07:27:54 -03:00 committed by GitHub
parent 5c5f58f0e9
commit b647a4c681
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
website/src/.vitepress/theme/components/Extensions/ExtensionItem.vue
View File

@ -32,7 +32,7 @@ function handleAnalytics() {
</script> </script>
<template> <template>
<div class="extension"> <div class="extension" tabindex="-1">
<a :href="`#${pkgId}`" class="anchor" aria-hidden="true" @click.stop>#</a> <a :href="`#${pkgId}`" class="anchor" aria-hidden="true" @click.stop>#</a>
<img class="extension-icon" :src="iconUrl" loading="lazy" width="42" height="42"> <img class="extension-icon" :src="iconUrl" loading="lazy" width="42" height="42">
<div class="extension-text"> <div class="extension-text">
@ -67,17 +67,23 @@ function handleAnalytics() {
margin: 0.8em -0.5em margin: 0.8em -0.5em
border-radius: 8px border-radius: 8px
gap: 0.675rem gap: 0.675rem
scroll-margin-top: calc(var(--vp-nav-height) + 24px)
&:hover { &:hover {
background-color: var(--vp-c-bg-soft) background-color: var(--vp-c-bg-soft)
} }
&:target { &:target,
&:focus {
background-color: var(--vp-c-brand-soft) background-color: var(--vp-c-brand-soft)
border-radius: 8px border-radius: 8px
transition: 500ms background-color transition: 500ms background-color
} }
&:focus {
outline: none
}
.anchor { .anchor {
position: absolute position: absolute
left: 0 left: 0
@ -86,7 +92,8 @@ function handleAnalytics() {
opacity: 0 opacity: 0
} }
&:hover .anchor { &:hover .anchor
.anchor:focus-visible {
opacity: 1 opacity: 1
} }
@ -100,6 +107,7 @@ function handleAnalytics() {
min-width: 0 min-width: 0
.upper { .upper {
color: var(--vp-c-text-1)
font-weight: 600 font-weight: 600
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
@ -111,14 +119,13 @@ function handleAnalytics() {
} }
.lower { .lower {
margin-top: 0.25rem color: var(--vp-c-text-2)
color: #6c757d
font-family: var(--vp-font-family-mono) font-family: var(--vp-font-family-mono)
font-size: 0.9rem font-size: 0.75rem
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
white-space: nowrap white-space: nowrap
line-height: 16px line-height: 1rem
} }
} }

6
website/src/.vitepress/theme/components/Extensions/ExtensionsWrapper.vue
View File

@ -93,8 +93,10 @@ onMounted(() => {
watch(extensions, async () => { watch(extensions, async () => {
if (window.location.hash) { if (window.location.hash) {
await nextTick() await nextTick()
document.getElementById(window.location.hash.substring(1)) const extElement = document.getElementById(window.location.hash.substring(1))
?.scrollIntoView({ behavior: "smooth" })
extElement?.scrollIntoView({ behavior: "smooth" })
extElement?.focus({ preventScroll: true })
} }
}) })