mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-10-31 23:15:05 +01:00
Some visual tweaks to Extensions
Also some fixes Also groups the Extensions components into a folder of their own Linking to anchor still does not work good
This commit is contained in:
Soitora
parent
fa798b67a3
commit
c7003d46e0
@ -1,69 +0,0 @@
|
||||
<script>
|
||||
import { langName, simpleLangName } from "../../config/scripts/languages";
|
||||
|
||||
export default {
|
||||
props: ["extensions"],
|
||||
emits: ["filters"],
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
search: "",
|
||||
lang: [],
|
||||
nsfw: "Show all",
|
||||
sort: "Ascending",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
filters: {
|
||||
handler(value) {
|
||||
this.$emit("filters", this.filters);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
simpleLangName,
|
||||
langName,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<span class="filters-list">
|
||||
<el-input v-model="filters.search" placeholder="Search extensions by name or ID..." clearable />
|
||||
|
||||
<el-select v-model="filters.lang" placeholder="Show specific languages..." multiple clearable>
|
||||
<el-option
|
||||
v-for="[group] in extensions"
|
||||
:key="group.lang"
|
||||
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
|
||||
:value="group.lang"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<div>
|
||||
Sort by<br>
|
||||
<el-radio-group v-model="filters.sort">
|
||||
<el-radio label="Ascending"></el-radio>
|
||||
<el-radio label="Descending"></el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Display mode<br>
|
||||
<el-radio-group v-model="filters.nsfw">
|
||||
<el-radio label="NSFW"></el-radio>
|
||||
<el-radio label="SFW"></el-radio>
|
||||
<el-radio label="Show all"></el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.filters-list {
|
||||
display: flex
|
||||
flex-direction: column
|
||||
row-gap: 1rem
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { langName, simpleLangName } from "../../config/scripts/languages";
|
||||
import { langName, simpleLangName } from "../../../config/scripts/languages";
|
||||
import ExtensionItem from "./ExtensionItem.vue";
|
||||
|
||||
export default {
|
||||
|
||||
@ -0,0 +1,70 @@
|
||||
<script>
|
||||
import { langName, simpleLangName } from "../../../config/scripts/languages";
|
||||
|
||||
export default {
|
||||
props: ["extensions"],
|
||||
emits: ["filters"],
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
search: "",
|
||||
lang: [],
|
||||
nsfw: "Show all",
|
||||
sort: "Ascending",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
filters: {
|
||||
handler(value) {
|
||||
this.$emit("filters", this.filters);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
simpleLangName,
|
||||
langName,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="filters-list">
|
||||
<el-form :model="filters" label-width="120px">
|
||||
<el-form-item label="Search:">
|
||||
<el-input v-model="filters.search" placeholder="Search extensions by name or ID..." clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="Languages:">
|
||||
<el-select v-model="filters.lang" placeholder="Show specific languages..." multiple clearable>
|
||||
<el-option
|
||||
v-for="[group] in extensions"
|
||||
:key="group.lang"
|
||||
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
|
||||
:value="group.lang"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Sort by:">
|
||||
<el-radio-group v-model="filters.sort">
|
||||
<el-radio label="Ascending"></el-radio>
|
||||
<el-radio label="Descending"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Display mode:">
|
||||
<el-radio-group v-model="filters.nsfw">
|
||||
<el-radio label="NSFW"></el-radio>
|
||||
<el-radio label="SFW"></el-radio>
|
||||
<el-radio label="Show all"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.filters-list {
|
||||
display: flex
|
||||
flex-direction: column
|
||||
row-gap: 1rem
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<script>
|
||||
import { langName, simpleLangName } from "../../../config/scripts/languages";
|
||||
import ExtensionItem from "./ExtensionItem.vue";
|
||||
|
||||
export default {
|
||||
components: { ExtensionItem },
|
||||
props: ["list", "totalCount"],
|
||||
computed: {
|
||||
groupName: function () {
|
||||
const firstItem = this.list[0];
|
||||
return firstItem.lang === "en" ? simpleLangName(firstItem.lang) : langName(firstItem.lang);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
simpleLangName,
|
||||
langName,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="extension-group">
|
||||
<h2>
|
||||
{{ groupName }}
|
||||
|
||||
<span class="extensions-total">
|
||||
Total:
|
||||
<span class="extensions-total-sum">
|
||||
{{ totalCount }}
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
<div
|
||||
v-for="extension in list"
|
||||
:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
|
||||
:key="extension.apk"
|
||||
class="extension"
|
||||
>
|
||||
<ExtensionItem :item="extension" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.extensions-total {
|
||||
float: right
|
||||
|
||||
&-sum {
|
||||
color: var(--vp-c-brand)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -9,7 +9,16 @@ export default {
|
||||
return this.item.name.split(": ")[1];
|
||||
},
|
||||
pkgVersion: function () {
|
||||
return "v" + this.item.version;
|
||||
return this.item.version;
|
||||
},
|
||||
pkgIsNsfw: function () {
|
||||
return !!parseInt(this.item.nsfw);
|
||||
},
|
||||
pkgHasReadme: function () {
|
||||
return !!parseInt(this.item.hasReadme);
|
||||
},
|
||||
pkgHasChangelog: function () {
|
||||
return !!parseInt(this.item.hasChangelog);
|
||||
},
|
||||
iconUrl: function () {
|
||||
return `https://raw.githubusercontent.com/tachiyomiorg/tachiyomi-extensions/repo/icon/${this.item.pkg}.png`;
|
||||
@ -27,15 +36,14 @@ export default {
|
||||
<div class="extension-text">
|
||||
<div class="upper">
|
||||
{{ pkgName }}
|
||||
<Badge :text="pkgVersion" />
|
||||
</div>
|
||||
<div class="lower">
|
||||
{{ pkgId }}
|
||||
</div>
|
||||
</div>
|
||||
<a :href="apkUrl" class="extension-download" title="Download APK" download>
|
||||
<span>↓ Download</span>
|
||||
</a>
|
||||
<Badge v-if="pkgIsNsfw" type="danger" :text="pkgVersion" title="This extension contains NSFW entries." />
|
||||
<Badge v-else type="info" :text="pkgVersion" title="This extension is free from NSFW entries." />
|
||||
<a :href="apkUrl" class="extension-download" title="Download APK" download>↓</a>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
@ -43,6 +51,7 @@ export default {
|
||||
align-items: center
|
||||
display: flex
|
||||
padding: 0.5em 1.5em
|
||||
margin: 0.8em 0.2em
|
||||
border-radius: 8px
|
||||
|
||||
&:hover {
|
||||
@ -61,7 +70,7 @@ export default {
|
||||
}
|
||||
|
||||
.extension-icon {
|
||||
margin-right: 0.5em
|
||||
margin: 0.2em 0.5em
|
||||
}
|
||||
|
||||
.extension-text {
|
||||
@ -84,16 +93,10 @@ export default {
|
||||
}
|
||||
|
||||
.extension-download {
|
||||
margin-right: 0.5em
|
||||
padding-left: 1rem
|
||||
padding-right: 1rem
|
||||
padding-top: 0.5rem
|
||||
padding-bottom: 0.5rem
|
||||
padding: 0.4em
|
||||
font-weight: 700
|
||||
font-size: 1.4em
|
||||
border-radius: 4px
|
||||
color: var(--vp-c-brand)
|
||||
background-color: transparent
|
||||
border: 1px solid var(--vp-c-brand-darker)
|
||||
|
||||
.material-icons {
|
||||
color: white
|
||||
@ -101,33 +104,26 @@ export default {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.VPBadge {
|
||||
background-color: var(--vp-c-brand-darker)
|
||||
text-decoration: none
|
||||
|
||||
.material-icons {
|
||||
color: var(--vp-c-brand)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width 767px) {
|
||||
padding: 0.4em 0em
|
||||
|
||||
.extension-text .lower,
|
||||
.extension-download span {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width 767px) {
|
||||
.extension {
|
||||
border: 1px solid var(--vp-c-gutter)
|
||||
border-radius: 8px
|
||||
|
||||
.extension-download {
|
||||
background-color: var(--vp-c-brand)
|
||||
.anchor {
|
||||
display: none
|
||||
}
|
||||
|
||||
.extension {
|
||||
border: 1px solid var(--vp-c-divider)
|
||||
border-radius: 8px
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import groupBy from "lodash.groupby";
|
||||
import { GITHUB_EXTENSION_JSON } from "../../config/constants";
|
||||
import { simpleLangName } from "../../config/scripts/languages";
|
||||
import { GITHUB_EXTENSION_JSON } from "../../../config/constants";
|
||||
import { simpleLangName } from "../../../config/scripts/languages";
|
||||
import ExtensionFilters from "./ExtensionFilters.vue";
|
||||
import ExtensionList from "./ExtensionList.vue";
|
||||
|
||||
@ -96,9 +96,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="loading" v-loading.lock="loading" style="min-height: 200px"></div>
|
||||
<div v-else>
|
||||
<ExtensionFilters :extensions="extensions" @filters="filters = $event" />
|
||||
<ExtensionList :extensions="filteredExtensions" />
|
||||
</div>
|
||||
<div class="loading" v-if="loading" v-loading.lock="loading" style="min-height: 200px"></div>
|
||||
<ExtensionList v-else :extensions="filteredExtensions" />
|
||||
</template>
|
||||
@ -10,5 +10,5 @@ Web-based extensions page that enables users to browse and install additional so
|
||||
<ExtensionsWrapper/>
|
||||
|
||||
<script setup>
|
||||
import ExtensionsWrapper from '../.vitepress/theme/components/ExtensionsWrapper.vue'
|
||||
import ExtensionsWrapper from '../.vitepress/theme/components/Extensions/ExtensionsWrapper.vue'
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user