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;
+ }
}
}