Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 15:41:59 +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

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

@ -1,33 +1,28 @@
<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></el-button
>
<span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span> <span class="versionNotice">Requires <strong>Android 5.0</strong> or higher.</span>
</div> </div>
</template> </template>
<script> <script>
import CloudDownloadIcon from "vue-material-design-icons/CloudDownload.vue"; import { GITHUB_STABLE_RELEASE, GITHUB_PREVIEW_RELEASE } from "../constants";
import BugIcon from "vue-material-design-icons/Bug.vue";
import { GITHUB_LATEST_RELEASE, GITHUB_PREVIEW_RELEASE } from "../constants";
export default { export default {
components: {
CloudDownloadIcon,
BugIcon,
},
data() { data() {
return { return {
tagName: "", tagName: "0.00.0",
browserDownloadUrl: "", browserDownloadUrl: "",
previewTagName: "", previewTagName: "r0000",
previewbrowserDownloadUrl: "", previewbrowserDownloadUrl: "",
}; };
}, },
@ -44,7 +39,7 @@ export default {
try { try {
const { data } = await this.$store.dispatch("getPreviewReleaseData"); const { data } = await this.$store.dispatch("getPreviewReleaseData");
const apkAsset = data.assets.find((a) => a.name.includes(".apk")); const apkAsset = data.assets.find((a) => a.name.includes(".apk"));
this.$data.previewTagName = data.tag_name.slice(1); this.$data.previewTagName = data.tag_name;
this.$data.previewbrowserDownloadUrl = apkAsset.browser_download_url; this.$data.previewbrowserDownloadUrl = apkAsset.browser_download_url;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@ -68,7 +63,7 @@ export default {
popup: "animate__animated animate__faster animate__zoomOut", popup: "animate__animated animate__faster animate__zoomOut",
}, },
}); });
window.location.assign(this.$data.browserDownloadUrl || GITHUB_LATEST_RELEASE); window.location.assign(this.$data.browserDownloadUrl || GITHUB_STABLE_RELEASE);
window.ga("send", "event", "Action", "Download", "Tachiyomi"); window.ga("send", "event", "Action", "Download", "Tachiyomi");
}, },
downloadPreview() { downloadPreview() {
@ -117,40 +112,40 @@ export default {
<style lang="stylus"> <style lang="stylus">
#DownloadButtons #DownloadButtons
text-align center text-align center
button .el-button
display inline-block font-size 1.125rem
margin 0.5em 0 margin 0.1em !important
padding 1em 1em padding 12px 32px
width 9em width 10em
background $accentColor
border none
border-radius 4px
color #fff
font-family inherit
font-size 1em
font-weight 400
letter-spacing 0.02em
line-height 1
transition background-color .1s ease
text-decoration none
text-transform uppercase
cursor pointer
&:hover
background darken($accentColor, 10%)
&:focus &:focus
box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4) box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
outline none outline none
.downloadContainer &--success
user-select none background-color $accentColor
#download border-color $accentColor
&Stable &:hover
background-color $accentColor background-color lighten($accentColor, 10%)
&:hover border-color lighten($accentColor, 10%)
background-color lighten($accentColor, 10%) .downloadTag
&Preview color lighten($accentColor, 75%)
background-color $accentColorSecondary &--warning
&:hover background-color $accentColorSecondary
background-color lighten($accentColorSecondary, 10%) border-color $accentColorSecondary
&:hover
background-color lighten($accentColorSecondary, 10%)
border-color lighten($accentColorSecondary, 10%)
.downloadTag
color lighten($accentColorSecondary, 75%)
.spacing
margin-right 16px
.downloadTag
font-size 0.7em
margin-top 2px
.versionNotice .versionNotice
display block
font-size 0.9rem font-size 0.9rem
@media (max-width: $MQMobile)
.el-button
width 8.2em
padding 12px 28px
</style> </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 />