mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Fix extensions page (#571)
* Fix extensions page * Tweaks to Extensions code Replaced "English (English)" with "English" Made a separate function for the language name (?). * Use a real function to change English string instead of JS replace Co-authored-by: Andreas <andreas.everos@gmail.com> Co-authored-by: Andreas <andreas.everos@gmail.com>
This commit is contained in:
Soitora
GitHub
parent
5279342e23
commit
24ec362cc2
@ -1,26 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="extension-list">
|
||||
<div v-for="extensionGroup in extensions" :key="extensionGroup[0].lang">
|
||||
<h3>{{ langName(extensionGroup[0].lang) }}</h3>
|
||||
<h3>
|
||||
{{ extensionGroup[0].lang === "en" ? simpleLangName(extensionGroup[0].lang) : langName(extensionGroup[0].lang) }}
|
||||
<span class="extensions-total">
|
||||
Total:
|
||||
<span class="extensions-total-sum">
|
||||
{{ extensions.reduce((sum, item) => sum + item.length, 0) }}
|
||||
</span>
|
||||
</span>
|
||||
</h3>
|
||||
<div
|
||||
v-for="extension in extensionGroup"
|
||||
:id="extension.name.split(': ')[1]"
|
||||
:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
|
||||
:key="extension.apk"
|
||||
class="anchor"
|
||||
>
|
||||
<div class="extension">
|
||||
<a :href="`#${extension.name.split(': ')[1]}`" aria-hidden="true" class="header-anchor">#</a>
|
||||
<img :src="iconUrl(extension.apk)" width="42" height="42" />
|
||||
<a
|
||||
:href="`#${extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')}`"
|
||||
class="header-anchor"
|
||||
aria-hidden="true"
|
||||
@click.stop
|
||||
>
|
||||
#
|
||||
</a>
|
||||
<img class="extension-icon" :src="iconUrl(extension.apk)" width="42" height="42" />
|
||||
<div class="extension-text">
|
||||
<div class="upper">
|
||||
<span class="bold">{{ extension.name.split(": ")[1] }}</span>
|
||||
<span class="font-semibold">{{ extension.name.split(": ")[1] }}</span>
|
||||
<Badge :text="'v' + extension.version" />
|
||||
</div>
|
||||
<div class="down">
|
||||
{{ extension.pkg.replace("eu.kanade.tachiyomi.extension.", "") }}
|
||||
</div>
|
||||
</div>
|
||||
<a :href="apkUrl(extension.apk)" class="button" title="Download APK" download>
|
||||
<a :href="apkUrl(extension.apk)" class="extension-download" title="Download APK" download>
|
||||
<MaterialIcon icon="cloud_download" />
|
||||
<span>Download</span>
|
||||
</a>
|
||||
@ -33,7 +48,6 @@
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import groupBy from "lodash.groupby";
|
||||
import sortBy from "lodash.sortby";
|
||||
import ISO6391 from "iso-639-1";
|
||||
import { GITHUB_EXTENSION_JSON } from "../constants";
|
||||
|
||||
@ -47,7 +61,30 @@ export default {
|
||||
async beforeMount() {
|
||||
const { data } = await axios.get(GITHUB_EXTENSION_JSON);
|
||||
const values = Object.values(groupBy(data, "lang"));
|
||||
this.$data.extensions = sortBy(values, [(g) => this.langName(g[0].lang)]);
|
||||
values.sort((a, b) => {
|
||||
const langA = this.simpleLangName(a[0].lang);
|
||||
const langB = this.simpleLangName(b[0].lang);
|
||||
if (langA === "All" && langB === "English") {
|
||||
return -1;
|
||||
}
|
||||
if (langA === "English" && langB === "All") {
|
||||
return 1;
|
||||
}
|
||||
if (langA === "English") {
|
||||
return -1;
|
||||
}
|
||||
if (langB === "English") {
|
||||
return 1;
|
||||
}
|
||||
if (langA < langB) {
|
||||
return -1;
|
||||
}
|
||||
if (langA > langB) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
this.$data.extensions = values;
|
||||
},
|
||||
|
||||
updated() {
|
||||
@ -57,6 +94,7 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
simpleLangName: (code) => (code === "all" ? "All" : ISO6391.getName(code)),
|
||||
langName: (code) => (code === "all" ? "All" : `${ISO6391.getName(code)} (${ISO6391.getNativeName(code)})`),
|
||||
iconUrl(pkg) {
|
||||
const pkgName = pkg.substring(0, pkg.lastIndexOf("."));
|
||||
@ -68,50 +106,83 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.extension-list
|
||||
h3
|
||||
padding-bottom 0.75em
|
||||
border-bottom 1px solid $borderColor
|
||||
> div
|
||||
&:not(:first-of-type)
|
||||
.extensions-total
|
||||
display none
|
||||
|
||||
.extensions-total
|
||||
float right
|
||||
&-sum
|
||||
color $accentColor
|
||||
|
||||
.anchor
|
||||
margin-top -3.9em
|
||||
padding-top 3.9em
|
||||
padding-bottom 0.2em
|
||||
padding-top 4.5em
|
||||
.extension
|
||||
align-items center
|
||||
display flex
|
||||
padding 0.4em 0.2em
|
||||
padding 0.4em 1.5em
|
||||
.header-anchor
|
||||
font-size 1.2em
|
||||
padding-left 0.2em
|
||||
padding-right 0.2em
|
||||
font-size 1.4em
|
||||
opacity 0
|
||||
&:hover .header-anchor
|
||||
opacity 1
|
||||
img
|
||||
.extension-icon
|
||||
margin-right 0.5em
|
||||
.extension-text
|
||||
flex 1
|
||||
.upper
|
||||
.badge
|
||||
margin-left 8px
|
||||
.down
|
||||
color #6c757d
|
||||
font-family monospace
|
||||
font-size 0.8rem
|
||||
.button
|
||||
background-color #2e84bf
|
||||
border-bottom 1px solid #2977ac
|
||||
font-size 0.9rem
|
||||
.extension-download
|
||||
margin-right 0.5em
|
||||
padding-left 1rem
|
||||
padding-right 1rem
|
||||
padding-top .5rem
|
||||
padding-bottom .5rem
|
||||
font-weight 700
|
||||
border-radius 4px
|
||||
box-sizing border-box
|
||||
color #fff
|
||||
display inline-block
|
||||
font-size 0.8em
|
||||
padding 0.5rem
|
||||
text-transform uppercase
|
||||
transition background-color 0.1s ease
|
||||
color white
|
||||
background-color $accentColor
|
||||
border 1px solid $accentColor
|
||||
.material-icons
|
||||
color white
|
||||
max-width 18px
|
||||
&:hover
|
||||
background-color #3992cf
|
||||
text-decoration none !important
|
||||
.material-holder
|
||||
color #fff
|
||||
+ span
|
||||
margin-left 0.25rem
|
||||
&:not(:last-child)
|
||||
border-bottom 1px solid #eaecef
|
||||
&:target
|
||||
.extension
|
||||
background #f1f8ff
|
||||
@media (max-width: 767px)
|
||||
.extension-text .down
|
||||
.button span
|
||||
background-color white
|
||||
color $accentColor
|
||||
text-decoration none
|
||||
.material-icons
|
||||
color $accentColor
|
||||
@media (max-width 767px)
|
||||
padding 0.4em 0em
|
||||
.extension-text .down,
|
||||
.extension-download span
|
||||
display none
|
||||
@media (max-width 767px)
|
||||
.extension
|
||||
border 1px solid $borderColor
|
||||
border-radius 8px
|
||||
|
||||
.extension-download
|
||||
background-color $accentColor
|
||||
&:target
|
||||
.extension
|
||||
background-color $containerBackground
|
||||
border-radius 8px
|
||||
transition 500ms background-color
|
||||
&:first-child
|
||||
border-top 1px solid $borderColor
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Extensions
|
||||
description: Here is a list of all available extensions to download inside the app.
|
||||
description: List of available extensions to use with Tachiyomi, you can download them from here or from the app.
|
||||
lang: en-US
|
||||
---
|
||||
|
||||
@ -8,7 +8,7 @@ lang: en-US
|
||||
|
||||
:::: el-tabs
|
||||
::: el-tab-pane label="Available extensions"
|
||||
Here is a list of all available extensions to download inside the app.
|
||||
List of available extensions to use with Tachiyomi, you can download them from here or from the app.
|
||||
<ExtensionList/>
|
||||
:::
|
||||
::: el-tab-pane label="Spreadsheet"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user