mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 23:51:58 +01:00
Add spreadsheet to the extension page (#462)
* Initial commit * Further tweaking * Remake the table with "vue-good-table" * Trim app ID from extensions * Redesign table and add features - Added back extension IDs. - Highlighted "Note"s which starts with `w-` on Sheets. - Restyled. * Switch to Riz's maintained spreadsheet * Upgrade slot syntax Should fix build errors * Re-enable search for Notes * Install "vue-good-table" globally Fix that worked for @ghostbear
This commit is contained in:
Soitora
GitHub
parent
00a764e887
commit
4c649d9c63
18643
package-lock.json
generated
18643
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -52,6 +52,8 @@
|
||||
"material-design-icons-iconfont": "^6.1.0",
|
||||
"vue": "^2.6.12",
|
||||
"vue-agile": "^1.1.3",
|
||||
"vue-good-table": "^2.21.1",
|
||||
"vue-gsheets": "^4.0.3",
|
||||
"vue-material-design-icons": "^4.11.0",
|
||||
"vue-moment": "^4.1.0",
|
||||
"vue-sweetalert2": "^4.1.1",
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<Badge :text="'v' + extension.version" />
|
||||
</div>
|
||||
<div class="down">
|
||||
{{ extension.pkg }}
|
||||
{{ extension.pkg.replace("eu.kanade.tachiyomi.extension.", "") }}
|
||||
</div>
|
||||
</div>
|
||||
<a :href="apkUrl(extension.apk)" class="button" title="Download APK" download>
|
||||
|
||||
182
src/.vuepress/components/SourceSheet.vue
Normal file
182
src/.vuepress/components/SourceSheet.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div id="SourceSheet">
|
||||
<VueGoodTable
|
||||
:columns="columns"
|
||||
:rows="items"
|
||||
:sort-options="{ enabled: true }"
|
||||
:search-options="{ enabled: true, placeholder: 'Search for extensions or sources' }"
|
||||
>
|
||||
<template #table-row="props">
|
||||
<div v-if="props.column.field == 'Extension Name'" class="container">
|
||||
<img :src="props.row['Extension Icon']" width="42" height="42" />
|
||||
<div class="extension-text">
|
||||
<div class="upper">
|
||||
<span class="bold">{{ props.row["Extension Name"] }}</span>
|
||||
</div>
|
||||
<div class="down">
|
||||
{{ props.row["Extension ID"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else-if="props.column.field == 'Source Name'">
|
||||
<a :href="props.row['Source Website'].replace('N/A', 'javascript:void(0);')">
|
||||
{{ props.row["Source Name"] }}
|
||||
</a>
|
||||
</span>
|
||||
<template v-else-if="props.column.field == 'Notes'">
|
||||
<span v-if="props.row.Notes == 'N/A'"></span>
|
||||
<strong v-else-if="props.row.Notes.startsWith('w-')" style="color: red">
|
||||
{{ props.row.Notes.replace("w-", "") }}
|
||||
</strong>
|
||||
<span v-else>{{ props.row.Notes }}</span>
|
||||
</template>
|
||||
<span v-else>
|
||||
{{ props.formattedRow[props.column.field] }}
|
||||
</span>
|
||||
</template>
|
||||
</VueGoodTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { vueGsheets } from "vue-gsheets";
|
||||
|
||||
export default {
|
||||
mixins: [vueGsheets],
|
||||
data: () => ({
|
||||
COLUMNS: 9,
|
||||
sheetPageNumber: 1,
|
||||
SHEETID: "1Kh_O8VyPKTdrcIsso0zz5gD3A9aw_9v2Ygnmr13RuOU",
|
||||
columns: [
|
||||
{
|
||||
label: "ID",
|
||||
field: "ID",
|
||||
type: "number",
|
||||
hidden: true,
|
||||
globalSearchDisabled: true,
|
||||
},
|
||||
{
|
||||
label: "Extension ID",
|
||||
field: "Extension ID",
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
label: "Extension",
|
||||
field: "Extension Name",
|
||||
tdClass: "extension",
|
||||
},
|
||||
{
|
||||
label: "Icon",
|
||||
field: "Extension Icon",
|
||||
sortable: false,
|
||||
hidden: true,
|
||||
globalSearchDisabled: true,
|
||||
},
|
||||
{
|
||||
label: "Source",
|
||||
field: "Source Name",
|
||||
},
|
||||
{
|
||||
label: "Website",
|
||||
field: "Source Website",
|
||||
sortable: false,
|
||||
hidden: true,
|
||||
globalSearchDisabled: true,
|
||||
},
|
||||
{
|
||||
label: "Languages",
|
||||
field: "Languages",
|
||||
width: "4rem",
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: "Notes",
|
||||
field: "Notes",
|
||||
width: "6rem",
|
||||
tdClass: "notes",
|
||||
sortable: false,
|
||||
},
|
||||
],
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
#SourceSheet
|
||||
.vgt-global-search
|
||||
padding-top 2rem
|
||||
background transparent
|
||||
border none
|
||||
.magnifying-glass
|
||||
border-color #adb5bf
|
||||
&::before
|
||||
background #adb5bf
|
||||
.vgt-input
|
||||
border 1px solid #cfd4db
|
||||
&:focus
|
||||
border-color $accentColor
|
||||
&::placeholder
|
||||
opacity 0.75
|
||||
.vgt-table
|
||||
background-color transparent
|
||||
border-collapse separate
|
||||
border-spacing 0px
|
||||
border none
|
||||
thead
|
||||
tr
|
||||
border none
|
||||
th
|
||||
background transparent !important
|
||||
border none
|
||||
color $textColor
|
||||
&.sortable:hover
|
||||
color $accentColor
|
||||
tbody
|
||||
tr
|
||||
background-color $backgroundColorSecondary
|
||||
td
|
||||
border none
|
||||
border-bottom 1px solid $borderColor !important
|
||||
&:first-child
|
||||
border-left 1px solid $borderColor !important
|
||||
&:last-child
|
||||
border-right 1px solid $borderColor !important
|
||||
&.extension
|
||||
.container
|
||||
align-items center
|
||||
display flex
|
||||
img
|
||||
margin-right 0.5em
|
||||
.extension-text
|
||||
flex 1
|
||||
.upper
|
||||
.bold
|
||||
color $textColor
|
||||
.down
|
||||
color #6c757d
|
||||
font-family monospace
|
||||
font-size 0.8rem
|
||||
&:target
|
||||
.extension
|
||||
background #f1f8ff
|
||||
@media (max-width: 767px)
|
||||
.extension-text .down
|
||||
display none
|
||||
&.notes
|
||||
color $textColor
|
||||
.vgt-text-disabled
|
||||
color $textColor
|
||||
&:first-child
|
||||
td
|
||||
border-top 1px solid $borderColor !important
|
||||
&:first-child
|
||||
border-top-left-radius 0.6rem
|
||||
&:last-child
|
||||
border-top-right-radius 0.6rem
|
||||
&:last-child
|
||||
td
|
||||
&:first-child
|
||||
border-bottom-left-radius 0.6rem
|
||||
&:last-child
|
||||
border-bottom-right-radius 0.6rem
|
||||
</style>
|
||||
@ -1,8 +1,10 @@
|
||||
import "./styles/animate.css";
|
||||
import "./styles/sweetalert2.css";
|
||||
import "vue-material-design-icons/styles.css";
|
||||
import "vue-good-table/dist/vue-good-table.css";
|
||||
|
||||
import { VueAgile } from "vue-agile";
|
||||
import { VueGoodTable } from "vue-good-table";
|
||||
import VueSweetalert2 from "vue-sweetalert2";
|
||||
import VueMoment from "vue-moment";
|
||||
import Element from "element-ui";
|
||||
@ -17,6 +19,8 @@ export default ({
|
||||
}) => {
|
||||
// eslint-disable-next-line vue/match-component-file-name
|
||||
Vue.component("Agile", VueAgile);
|
||||
// eslint-disable-next-line vue/match-component-file-name
|
||||
Vue.component("VueGoodTable", VueGoodTable);
|
||||
Vue.use(VueSweetalert2);
|
||||
Vue.use(VueMoment);
|
||||
Vue.use(Element);
|
||||
|
||||
@ -6,12 +6,14 @@ lang: en-US
|
||||
|
||||
# Extensions
|
||||
|
||||
:::: el-tabs
|
||||
::: el-tab-pane label="Available extensions"
|
||||
Here is a list of all available extensions to download inside the app.
|
||||
|
||||
::: guide
|
||||
User [SnakeDoc83](https://github.com/snakedoc83) has made a handy spreadsheet showing the different multi-source extensions and their sources.
|
||||
::: note
|
||||
[Click here to access the spreadsheet](https://tachiyomi.org/extensions-spreadsheet)
|
||||
:::
|
||||
|
||||
<ExtensionList/>
|
||||
:::
|
||||
::: el-tab-pane label="Spreadsheet"
|
||||
Spreadsheet to help you find sources bundled in multi-source extensions, courtesy of [SnakeDoc83](https://github.com/snakedoc83).
|
||||
Now maintained by [Riztard](https://github.com/Riztard) and other volunteers.
|
||||
<SourceSheet/>
|
||||
:::
|
||||
::::
|
||||
|
||||
Loading…
Reference in New Issue
Block a user