mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Add download icon and fix fetch info method.
This commit is contained in:
Alessandro Jean
parent
b4cfa52713
commit
c19cef1579
26
package-lock.json
generated
26
package-lock.json
generated
@ -842,6 +842,32 @@
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.25",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
|
||||
"integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.25",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz",
|
||||
"integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.25"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
|
||||
"integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.25"
|
||||
}
|
||||
},
|
||||
"@fortawesome/vue-fontawesome": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.7.tgz",
|
||||
"integrity": "sha512-YCw2Q2m4fxzyFsPOH3uDYMoJztTD+pT+AAyse4LFpbdrBg+r8ueaVT8BFnXEjrGwMDJJeXrwJ5AOC6q/JWBI4w=="
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
|
||||
|
||||
@ -18,6 +18,9 @@
|
||||
"vuepress": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.25",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.11.2",
|
||||
"@fortawesome/vue-fontawesome": "^0.1.7",
|
||||
"axios": "^0.19.0",
|
||||
"iso-639-1": "^2.1.0",
|
||||
"lodash.groupby": "^4.6.0",
|
||||
|
||||
@ -13,7 +13,14 @@
|
||||
{{ extension.pkg }}
|
||||
</div>
|
||||
</div>
|
||||
<a :href="apkUrl(extension.apk)" class="button" download>Download</a>
|
||||
<a
|
||||
:href="apkUrl(extension.apk)"
|
||||
class="button"
|
||||
title="Download APK"
|
||||
download>
|
||||
<font-awesome-icon icon="download" />
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -28,11 +35,12 @@ import ISO6391 from 'iso-639-1';
|
||||
const EXTENSION_JSON = 'https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/index.json';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
data () {
|
||||
return {
|
||||
extensions: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
langName: code => code === 'all' ? 'All' : `${ISO6391.getName(code)} (${ISO6391.getNativeName(code)})`,
|
||||
iconUrl (pkg) {
|
||||
@ -41,6 +49,7 @@ export default {
|
||||
},
|
||||
apkUrl: apk => `https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/apk/${apk}`
|
||||
},
|
||||
|
||||
async beforeMount () {
|
||||
const { data } = await axios.get(EXTENSION_JSON);
|
||||
const values = Object.values(groupBy(data, 'lang'));
|
||||
@ -78,7 +87,7 @@ export default {
|
||||
font-size: 0.8em;
|
||||
color: #fff;
|
||||
background-color: #2e84bf;
|
||||
padding: 0.3rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.1s ease;
|
||||
box-sizing: border-box;
|
||||
@ -89,12 +98,18 @@ export default {
|
||||
background-color: #3992cf;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
svg + span {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.extension .extension-text .down {
|
||||
display: none;
|
||||
.extension {
|
||||
.extension-text .down, .button span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
import './styles/index.scss'
|
||||
import './styles/index.scss';
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||
import { faDownload } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||||
|
||||
library.add(faDownload);
|
||||
|
||||
export default ({
|
||||
Vue, // the version of Vue being used in the VuePress app
|
||||
options, // the options for the root Vue instance
|
||||
router, // the router instance for the app
|
||||
siteData // site metadata
|
||||
}) => {}
|
||||
}) => {
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon);
|
||||
};
|
||||
|
||||
@ -17,12 +17,17 @@
|
||||
class="action"
|
||||
v-if="data.actionText && data.actionLink"
|
||||
>
|
||||
<NavLink
|
||||
<a
|
||||
class="action-button"
|
||||
v-if="tagName.length"
|
||||
:item="downloadLink"
|
||||
rel="noopener noreferrer"
|
||||
:href="browserDownloadUrl || null"
|
||||
title="Download latest release"
|
||||
download
|
||||
/>
|
||||
>
|
||||
<font-awesome-icon icon="download" />
|
||||
<span>Download {{ tagName || 'vX.X.X' }}</span>
|
||||
</a>
|
||||
|
||||
<NavLink
|
||||
class="action-button secundary"
|
||||
:item="actionLink"
|
||||
@ -82,17 +87,10 @@ export default {
|
||||
link: this.data.actionLink,
|
||||
text: this.data.actionText
|
||||
};
|
||||
},
|
||||
|
||||
downloadLink () {
|
||||
return {
|
||||
link: this.$data.browserDownloadUrl,
|
||||
text: `Download ${this.$data.tagName}`
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async beforeMount () {
|
||||
async mounted () {
|
||||
const { data } = await axios.get(RELEASE_URL);
|
||||
// Maybe eventually some release has more than the apk in assets.
|
||||
const apkAsset = data.assets.find(a => a.name.includes('.apk'));
|
||||
@ -147,23 +145,27 @@ export default {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid darken($accentColor, 10%);
|
||||
|
||||
&[download] svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($accentColor, 10%);
|
||||
}
|
||||
|
||||
&.secundary {
|
||||
background-color: darken($borderColor, 10%);
|
||||
color: lighten($textColor, 15%);
|
||||
border-bottom-color: darken($borderColor, 20%);
|
||||
background-color: darken($borderColor, 5%);
|
||||
color: lighten($textColor, 25%);
|
||||
border-bottom-color: darken($borderColor, 15%);
|
||||
|
||||
&:hover {
|
||||
background-color: $borderColor;
|
||||
background-color: lighten($borderColor, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
svg + span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
& + .action-button {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user