From c19cef157946bab34852f166cd9af74f9fc1d73e Mon Sep 17 00:00:00 2001 From: Alessandro Jean Date: Tue, 24 Sep 2019 19:56:23 -0300 Subject: [PATCH] Add download icon and fix fetch info method. --- package-lock.json | 26 ++++++++++++++ package.json | 3 ++ src/.vuepress/components/ExtensionList.vue | 25 ++++++++++--- src/.vuepress/enhanceApp.js | 12 +++++-- src/.vuepress/theme/components/Home.vue | 42 +++++++++++----------- 5 files changed, 81 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7675fdee..a9ccadfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 02218095..6c634543 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/.vuepress/components/ExtensionList.vue b/src/.vuepress/components/ExtensionList.vue index 333b65ca..da7472c5 100644 --- a/src/.vuepress/components/ExtensionList.vue +++ b/src/.vuepress/components/ExtensionList.vue @@ -13,7 +13,14 @@ {{ extension.pkg }} - Download + + + Download + @@ -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; + } } } diff --git a/src/.vuepress/enhanceApp.js b/src/.vuepress/enhanceApp.js index e620be25..6ae74df1 100644 --- a/src/.vuepress/enhanceApp.js +++ b/src/.vuepress/enhanceApp.js @@ -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); +}; diff --git a/src/.vuepress/theme/components/Home.vue b/src/.vuepress/theme/components/Home.vue index 128fba07..03511316 100644 --- a/src/.vuepress/theme/components/Home.vue +++ b/src/.vuepress/theme/components/Home.vue @@ -17,12 +17,17 @@ class="action" v-if="data.actionText && data.actionLink" > - + > + + Download {{ tagName || 'vX.X.X' }} + + 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; + } } }