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

Stylize download buttons

Browse Source
This commit is contained in:
Soitora 2023-08-31 23:13:30 +02:00
parent 1f91c4bafe
commit 51c2b94447
No known key found for this signature in database
GPG Key ID: A6D711EB4F2CCD97
2 changed files with 97 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
website/src/.vitepress/theme/components/DownloadButtons.vue
View File

@ -18,12 +18,12 @@ const {
const downloadInformation = computed(() => ({
preview: {
tagName: previewRelease.value?.tag_name,
tagName: previewRelease.value?.tag_name || "0.00.0",
asset: (previewRelease.value?.assets ?? [])
.find(a => /^tachiyomi-r\d{4,}.apk/.test(a.name)),
},
stable: {
tagName: stableRelease.value?.tag_name?.slice(1),
tagName: stableRelease.value?.tag_name?.slice(1) || "r0000",
asset: (stableRelease.value?.assets ?? [])
.find(a => /^tachiyomi-v\d+\.\d+\.\d+.apk/.test(a.name)),
}
@ -40,38 +40,106 @@ const downloadInformation = computed(() => ({
<div v-else-if="isErrorPreview">
This is the error message: {{ errorPreview }}
</div>
<div v-else>
<div class="buttons-wrapper">
<a
:download="downloadInformation.stable.asset?.name"
:href="downloadInformation.stable.asset?.browser_download_url"
>
<span>Stable</span>
<span>{{ downloadInformation.stable.tagName }}</span>
</a>
<a
:download="downloadInformation.preview.asset?.name"
:href="downloadInformation.preview.asset?.browser_download_url"
>
<span>Preview</span>
<span>{{ downloadInformation.preview.tagName }}</span>
</a>
</div>
<p>
Requires <strong>Android 6.0</strong> or higher.
</p>
<div v-else class="download-buttons">
<a class="download-button primary" :download="downloadInformation.stable.asset?.name" :href="downloadInformation.stable.asset?.browser_download_url">
<IconDownload />
<span class="text">Stable</span>
<span class="version">{{ downloadInformation.stable.tagName }}</span>
</a>
<a class="download-button secondary" :download="downloadInformation.preview.asset?.name" :href="downloadInformation.preview.asset?.browser_download_url">
<IconDownload />
<span class="text">Preview</span>
<span class="version">{{ downloadInformation.preview.tagName }}</span>
</a>
</div>
<span class="version-disclaimer">
Requires <strong>Android 6.0</strong> or higher.
</span>
</template>
<style lang="stylus">
.buttons-wrapper {
.download-buttons {
display: flex
gap: 2rem
gap: 0.75em
justify-content: center
align-items: center
margin: 0.75em auto
}
& > a {
display: flex
flex-direction: column
align-items: center
.download-button {
display: inline-block
border: 1px solid transparent
text-align: center
font-weight: 600
white-space: nowrap
transition: color 0.25s, border-color 0.25s, background-color 0.25s
cursor: pointer
transition: all 0.3s ease
border-radius: 20px
padding: 0 20px
line-height: 38px
font-size: 14px
&:hover {
text-decoration: none !important
}
&.primary {
border-color: var(--vp-button-brand-border)
color: var(--vp-button-brand-text)
background-color: var(--vp-button-brand-bg)
&:hover {
border-color: var(--vp-button-brand-hover-border)
color: var(--vp-button-brand-hover-text)
background-color: var(--vp-button-brand-hover-bg)
}
&:active {
border-color: var(--vp-button-brand-active-border)
color: var(--vp-button-brand-active-text)
background-color: var(--vp-button-brand-active-bg)
}
}
&.secondary {
border-color: var(--vp-button-alt-border)
color: var(--vp-button-alt-text)
background-color: var(--vp-button-alt-bg)
&:hover {
border-color: var(--vp-button-alt-hover-border)
color: var(--vp-button-alt-hover-text)
background-color: var(--vp-button-alt-hover-bg)
}
&:active {
border-color: var(--vp-button-alt-active-border)
color: var(--vp-button-alt-active-text)
background-color: var(--vp-button-alt-active-bg)
}
}
svg {
display: inline-block
vertical-align: middle
margin-right: 0.5em
}
.text {
margin-right: 10px
}
.version {
font-size: 12px
margin-left: 10px
}
}
.version-disclaimer {
display: block
text-align: center
margin: 0.75em auto
font-size: 0.75rem
}
</style>

2
website/src/download/index.md
View File

@ -10,7 +10,7 @@ import ReleaseDate from "../.vitepress/theme/components/ReleaseDate.vue";
import WhatsNew from "../.vitepress/theme/components/WhatsNew.vue"
</script>
# Download <IconDownload/>
# Download
Download the latest stable version of **Tachiyomi** that released **<ReleaseDate type="stable" />** or the preview version that released **<ReleaseDate type="preview" />**.