Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 07:31:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Download page tweaks (#345)

Browse Source 
* Tweaked ReleaseDate and VersionTag

Also reworded README for Downloads

* Tweak download buttons

Also tweak constants and store to make them look more uniform.

* Changed button to element-ui buttons

Tweaked buttons though, but easier to make behave right

* Tweak placeholder digit to double digit
This commit is contained in:
Soitora 2020-09-14 22:40:00 +02:00 committed by GitHub
parent cf991ceec3
commit 6e63c6ae31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 227 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

307
src/.vuepress/components/DownloadButtons.vue
View File

@ -1,156 +1,151 @@
<template> <template>
<div id="DownloadButtons"> <div id="DownloadButtons">
<div class="downloadContainer"> <el-button type="success" icon="el-icon-download" @click="downloadStable" @keyup.enter="downloadStable"
<button id="downloadStable" @click="downloadStable" @keyup.enter="downloadStable"> ><span class="spacing">Stable</span><br /><span class="downloadTag">{{
<CloudDownloadIcon /> Stable this.$data.tagName
</button> }}</span></el-button
<button id="downloadPreview" @click="downloadPreview" @keyup.enter="downloadPreview"> >
<BugIcon /> Preview <el-button type="warning" icon="el-icon-cpu" @click="downloadPreview" @keyup.enter="downloadPreview"
</button> ><span class="spacing">Preview</span><br /><span class="downloadTag">{{
</div> this.$data.previewTagName
<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span> }}</span></el-button
</div> >
</template> <span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
</div>
<script> </template>
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue";
import BugIcon from "vue-material-design-icons/Bug.vue"; <script>
import { GITHUB_LATEST_RELEASE, GITHUB_PREVIEW_RELEASE } from "../constants"; import { GITHUB_STABLE_RELEASE, GITHUB_PREVIEW_RELEASE } from "../constants";
export default { export default {
components: { data() {
CloudDownloadIcon, return {
BugIcon, tagName: "0.00.0",
}, browserDownloadUrl: "",
previewTagName: "r0000",
data() { previewbrowserDownloadUrl: "",
return { };
tagName: "", },
browserDownloadUrl: "",
previewTagName: "", async mounted() {
previewbrowserDownloadUrl: "", try {
}; const { data } = await this.$store.dispatch("getStableReleaseData");
}, const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
this.$data.tagName = data.tag_name.slice(1);
async mounted() { this.$data.browserDownloadUrl = apkAsset.browser_download_url;
try { } catch (e) {
const { data } = await this.$store.dispatch("getStableReleaseData"); console.error(e);
const apkAsset = data.assets.find((a) => a.name.includes(".apk")); }
this.$data.tagName = data.tag_name.slice(1); try {
this.$data.browserDownloadUrl = apkAsset.browser_download_url; const { data } = await this.$store.dispatch("getPreviewReleaseData");
} catch (e) { const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
console.error(e); this.$data.previewTagName = data.tag_name;
} this.$data.previewbrowserDownloadUrl = apkAsset.browser_download_url;
try { } catch (e) {
const { data } = await this.$store.dispatch("getPreviewReleaseData"); console.error(e);
const apkAsset = data.assets.find((a) => a.name.includes(".apk")); }
this.$data.previewTagName = data.tag_name.slice(1); },
this.$data.previewbrowserDownloadUrl = apkAsset.browser_download_url;
} catch (e) { methods: {
console.error(e); downloadStable() {
} this.$swal({
}, title: "Downloading",
html: `Started downloading <strong>Tachiyomi Stable</strong>`,
methods: { icon: "success",
downloadStable() { focusConfirm: false,
this.$swal({ focusCancel: false,
title: "Downloading", timer: 3000,
html: `Started downloading <strong>Tachiyomi Stable</strong>`, timerProgressBar: true,
icon: "success", showClass: {
focusConfirm: false, popup: "animate__animated animate__faster animate__pulse",
focusCancel: false, },
timer: 3000, hideClass: {
timerProgressBar: true, popup: "animate__animated animate__faster animate__zoomOut",
showClass: { },
popup: "animate__animated animate__faster animate__pulse", });
}, window.location.assign(this.$data.browserDownloadUrl || GITHUB_STABLE_RELEASE);
hideClass: { window.ga("send", "event", "Action", "Download", "Tachiyomi");
popup: "animate__animated animate__faster animate__zoomOut", },
}, downloadPreview() {
}); this.$swal({
window.location.assign(this.$data.browserDownloadUrl || GITHUB_LATEST_RELEASE); icon: "warning",
window.ga("send", "event", "Action", "Download", "Tachiyomi"); title: "Are you sure?",
}, html:
downloadPreview() { "<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.",
this.$swal({ confirmButtonText: "I am sure.",
icon: "warning", showCloseButton: true,
title: "Are you sure?", showCancelButton: false,
html: showClass: {
"<strong>Tachiyomi Preview</strong> is not recommended if you're not willing to test for – and endure – issues.", popup: "animate__animated animate__headShake",
confirmButtonText: "I am sure.", },
showCloseButton: true, hideClass: {
showCancelButton: false, popup: "animate__animated animate__faster animate__zoomOut",
showClass: { },
popup: "animate__animated animate__headShake", // eslint-disable-next-line no-shadow
}, }).then((result) => {
hideClass: { if (result.value) {
popup: "animate__animated animate__faster animate__zoomOut", this.$swal({
}, icon: "success",
// eslint-disable-next-line no-shadow title: "Downloading",
}).then((result) => { html: `Started downloading <strong>Tachiyomi Preview</strong>`,
if (result.value) { confirmButtonText: "Dismiss",
this.$swal({ showCloseButton: false,
icon: "success", showCancelButton: false,
title: "Downloading", timer: 3000,
html: `Started downloading <strong>Tachiyomi Preview</strong>`, timerProgressBar: true,
confirmButtonText: "Dismiss", showClass: {
showCloseButton: false, popup: "animate__animated animate__faster animate__pulse",
showCancelButton: false, },
timer: 3000, hideClass: {
timerProgressBar: true, popup: "animate__animated animate__faster animate__zoomOut",
showClass: { },
popup: "animate__animated animate__faster animate__pulse", });
}, window.location.assign(this.$data.previewbrowserDownloadUrl || GITHUB_PREVIEW_RELEASE);
hideClass: { window.ga("send", "event", "Action", "Download", "Tachiyomi Preview");
popup: "animate__animated animate__faster animate__zoomOut", }
}, });
}); },
window.location.assign(this.$data.previewbrowserDownloadUrl || GITHUB_PREVIEW_RELEASE); },
window.ga("send", "event", "Action", "Download", "Tachiyomi Preview"); };
} </script>
});
}, <style lang="stylus">
}, #DownloadButtons
}; text-align center
</script> .el-button
font-size 1.125rem
<style lang="stylus"> margin 0.1em !important
#DownloadButtons padding 12px 32px
text-align center width 10em
button &:focus
display inline-block box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
margin 0.5em 0 outline none
padding 1em 1em &--success
width 9em background-color $accentColor
background $accentColor border-color $accentColor
border none &:hover
border-radius 4px background-color lighten($accentColor, 10%)
color #fff border-color lighten($accentColor, 10%)
font-family inherit .downloadTag
font-size 1em color lighten($accentColor, 75%)
font-weight 400 &--warning
letter-spacing 0.02em background-color $accentColorSecondary
line-height 1 border-color $accentColorSecondary
transition background-color .1s ease &:hover
text-decoration none background-color lighten($accentColorSecondary, 10%)
text-transform uppercase border-color lighten($accentColorSecondary, 10%)
cursor pointer .downloadTag
&:hover color lighten($accentColorSecondary, 75%)
background darken($accentColor, 10%) .spacing
&:focus margin-right 16px
box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4) .downloadTag
outline none font-size 0.7em
.downloadContainer margin-top 2px
user-select none .versionNotice
#download display block
&Stable font-size 0.9rem
background-color $accentColor @media (max-width: $MQMobile)
&:hover .el-button
background-color lighten($accentColor, 10%) width 8.2em
&Preview padding 12px 28px
background-color $accentColorSecondary </style>
&:hover
background-color lighten($accentColorSecondary, 10%)
.versionNotice
font-size 0.9rem
</style>

39
src/.vuepress/components/ReleaseDate.vue
View File

@ -1,23 +1,50 @@
<template> <template>
<div class="buildTime"> <div v-if="stable" class="buildTime">
<span :title="releasePublishExact">{{ releasePublishRelative }}</span> <span :title="stablePublishExact">{{ stablePublishRelative }}</span>
</div> </div>
<div v-else-if="preview" class="buildTime">
<span :title="previewPublishExact">{{ previewPublishRelative }}</span>
</div>
<span v-else>You need to specify props.</span>
</template> </template>
<script> <script>
/**
* Code example: <ReleaseDate preview />
*/
export default { export default {
props: {
stable: {
type: Boolean,
default: false,
},
preview: {
type: Boolean,
default: false,
},
},
data() { data() {
return { return {
releasePublishRelative: "at an unknown time", stablePublishRelative: "at an unknown time",
releasePublishExact: "Can't connect to GitHub.", stablePublishExact: "Can't connect to GitHub.",
previewPublishRelative: "at an unknown time",
previewPublishExact: "Can't connect to GitHub.",
}; };
}, },
async mounted() { async mounted() {
try { try {
const { data } = await this.$store.dispatch("getStableReleaseData"); const { data } = await this.$store.dispatch("getStableReleaseData");
this.$data.releasePublishRelative = this.$moment(data.published_at).fromNow(); this.$data.stablePublishRelative = this.$moment(data.published_at).fromNow();
this.$data.releasePublishExact = this.$moment(data.published_at).toString(); this.$data.stablePublishExact = this.$moment(data.published_at).format("dddd, MMMM Do YYYY [at] HH:mm");
} catch (e) {
console.error(e);
}
try {
const { data } = await this.$store.dispatch("getPreviewReleaseData");
this.$data.previewPublishRelative = this.$moment(data.published_at).fromNow();
this.$data.previewPublishExact = this.$moment(data.published_at).format("dddd, MMMM Do YYYY [at] HH:mm");
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }

36
src/.vuepress/components/VersionTag.vue
View File

@ -1,23 +1,47 @@
<template> <template>
<span v-if="fileName" class="fileNameContainer" title="File name"> <span v-if="stable" class="downloadTag">{{ this.$data.tagName }}</span>
<span v-else-if="fileName" class="fileNameContainer" title="File name">
<MaterialIcon class="fileNameIcon" icon="get_app" /> <MaterialIcon class="fileNameIcon" icon="get_app" />
<span class="fileName">tachiyomi-v{{ this.$data.tagName }}.apk</span> <span class="fileName">tachiyomi-v{{ this.$data.tagName }}.apk</span>
<slot /> <slot />
</span> </span>
<span v-else class="downloadTag">{{ this.$data.tagName }}</span> <span v-else-if="preview" class="downloadTag">{{ this.$data.previewTagName }}</span>
<span v-else-if="previewFileName" class="fileNameContainer" title="File name">
<MaterialIcon class="fileNameIcon" icon="get_app" />
<span class="fileName">tachiyomi-{{ this.$data.previewTagName }}.apk</span>
<slot />
</span>
<span v-else>You need to specify props.</span>
</template> </template>
<script> <script>
/**
* Code example: <VersionTag preview />
*/
export default { export default {
props: { props: {
stable: {
type: Boolean,
default: false,
},
fileName: { fileName: {
type: Boolean, type: Boolean,
default: false,
},
preview: {
type: Boolean,
default: false,
},
previewFileName: {
type: Boolean,
default: false,
}, },
}, },
data() { data() {
return { return {
tagName: "0.0.0", tagName: "0.00.0",
previewTagName: "r0000",
}; };
}, },
@ -28,6 +52,12 @@ export default {
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
try {
const { data } = await this.$store.dispatch("getPreviewReleaseData");
this.$data.previewTagName = data.tag_name;
} catch (e) {
console.error(e);
}
}, },
}; };
</script> </script>

4
src/.vuepress/constants.js
View File

@ -1,5 +1,5 @@
export const GITHUB_EXTENSION_JSON = "https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/index.json"; export const GITHUB_EXTENSION_JSON = "https://raw.githubusercontent.com/inorichi/tachiyomi-extensions/repo/index.json";
export const GITHUB_LATEST_RELEASE = "https://github.com/inorichi/tachiyomi/releases/latest"; export const GITHUB_STABLE_API = "https://api.github.com/repos/inorichi/tachiyomi/releases/latest";
export const GITHUB_LATEST_API = "https://api.github.com/repos/inorichi/tachiyomi/releases/latest"; export const GITHUB_STABLE_RELEASE = "https://github.com/inorichi/tachiyomi/releases/latest";
export const GITHUB_PREVIEW_API = "https://api.github.com/repos/tachiyomiorg/android-app-preview/releases/latest"; export const GITHUB_PREVIEW_API = "https://api.github.com/repos/tachiyomiorg/android-app-preview/releases/latest";
export const GITHUB_PREVIEW_RELEASE = "https://github.com/tachiyomiorg/android-app-preview/releases/latest"; export const GITHUB_PREVIEW_RELEASE = "https://github.com/tachiyomiorg/android-app-preview/releases/latest";

14
src/.vuepress/store/index.js
View File

@ -2,7 +2,7 @@ import Vue from "vue";
import Vuex from "vuex"; import Vuex from "vuex";
import axios from "axios"; import axios from "axios";
import { GITHUB_LATEST_API, GITHUB_PREVIEW_API } from "../constants"; import { GITHUB_STABLE_API, GITHUB_PREVIEW_API } from "../constants";
const worker = (function () { const worker = (function () {
const networkMap = new Map(); const networkMap = new Map();
@ -73,22 +73,22 @@ const worker = (function () {
} }
return { return {
getPreviewData(store, name) { getStableData(store, name) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
_getData(store, name, "setPreviewReleaseData", GITHUB_PREVIEW_API) _getData(store, name, "setStableReleaseData", GITHUB_STABLE_API)
.then(() => { .then(() => {
resolve(store.state.preview); resolve(store.state.stable);
}) })
.catch((reason) => { .catch((reason) => {
reject(reason); reject(reason);
}); });
}); });
}, },
getStableData(store, name) { getPreviewData(store, name) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
_getData(store, name, "setStableReleaseData", GITHUB_LATEST_API) _getData(store, name, "setPreviewReleaseData", GITHUB_PREVIEW_API)
.then(() => { .then(() => {
resolve(store.state.stable); resolve(store.state.preview);
}) })
.catch((reason) => { .catch((reason) => {
reject(reason); reject(reason);

2
src/download/README.md
View File

@ -8,7 +8,7 @@ lang: en-US
--- ---
# Download # Download
Download the latest stable version of **Tachiyomi** (**<VersionTag downloadTag/>**) which released <ReleaseDate />. Download the latest stable version of **Tachiyomi** that released <ReleaseDate stable /> or the preview version that released <ReleaseDate preview />.
<DownloadButtons /> <DownloadButtons />