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

Added anchors to extensions page. (#91)

Browse Source
This commit is contained in:
funkyhippo 2019-10-31 19:21:36 -07:00 committed by arkon
parent c07715350d
commit 008a0d4959
1 changed files with 53 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/.vuepress/components/ExtensionList.vue
View File

@ -2,25 +2,32 @@
<div> <div>
<div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang"> <div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang">
<h3>{{ langName(extensionGroup[0].lang) }}</h3> <h3>{{ langName(extensionGroup[0].lang) }}</h3>
<div class="extension" v-for="extension in extensionGroup" :key="extension.apk"> <div
<img :src="iconUrl(extension.apk)" width="42" height="42"> class="anchor"
<div class="extension-text"> v-for="extension in extensionGroup"
<div class="upper"> :key="extension.apk"
<span class="bold">{{ extension.name.split(': ')[1] }}</span> :id="extension.name.split(': ')[1]">
<Badge :text="'v' + extension.version"/> <div class="extension">
</div> <a :href="`#${extension.name.split(': ')[1]}`" aria-hidden="true" class="header-anchor"># </a>
<div class="down"> <img :src="iconUrl(extension.apk)" width="42" height="42">
{{ extension.pkg }} <div class="extension-text">
<div class="upper">
<span class="bold">{{ extension.name.split(': ')[1] }}</span>
<Badge :text="'v' + extension.version"/>
</div>
<div class="down">
{{ extension.pkg }}
</div>
</div> </div>
<a
:href="apkUrl(extension.apk)"
class="button"
title="Download APK"
download>
<font-awesome-icon icon="download" />
<span>Download</span>
</a>
</div> </div>
<a
:href="apkUrl(extension.apk)"
class="button"
title="Download APK"
download>
<font-awesome-icon icon="download" />
<span>Download</span>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -54,6 +61,12 @@ export default {
const { data } = await axios.get(EXTENSION_JSON); const { data } = await axios.get(EXTENSION_JSON);
const values = Object.values(groupBy(data, 'lang')); const values = Object.values(groupBy(data, 'lang'));
this.$data.extensions = sortBy(values, [g => this.langName(g[0].lang)]); this.$data.extensions = sortBy(values, [g => this.langName(g[0].lang)]);
},
updated () {
if (location.hash) {
location.replace(location.hash);
}
} }
} }
</script> </script>
@ -64,8 +77,14 @@ export default {
align-items: center; align-items: center;
padding: 0.4em 0.2em; padding: 0.4em 0.2em;
&:not(:last-child) { &:hover {
border-bottom: 1px solid #eaecef; .header-anchor {
opacity: 1;
}
}
.header-anchor {
font-size: 1.2em;
} }
img { img {
@ -105,6 +124,21 @@ export default {
} }
} }
.anchor {
margin-top: -3.9em;
padding-top: 3.9em;
&:not(:last-child) {
border-bottom: 1px solid #eaecef;
}
&:target {
.extension {
background: #f1f8ff;
}
}
}
@media (max-width: 767px) { @media (max-width: 767px) {
.extension { .extension {
.extension-text .down, .button span { .extension-text .down, .button span {