[web] Change about page
This commit is contained in:
Alain Nussbaumer
parent
3d9cec4ded
commit
c377ae3a64
|
|
@ -32,7 +32,7 @@ export const filters = {
|
|||
.toLocaleString(DateTime.DATETIME_MED)
|
||||
},
|
||||
durationInDays(value) {
|
||||
const minutes = Math.floor(value / 60000)
|
||||
const minutes = Math.floor(value / 60)
|
||||
if (minutes > 1440) {
|
||||
return Duration.fromObject({ minutes })
|
||||
.shiftTo('days', 'hours', 'minutes')
|
||||
|
|
@ -53,6 +53,6 @@ export const filters = {
|
|||
},
|
||||
timeFromNow(value) {
|
||||
const diff = DateTime.now().diff(DateTime.fromISO(value))
|
||||
return this.durationInDays(diff.as('milliseconds'))
|
||||
return this.durationInDays(diff.as('seconds'))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,180 +1,168 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths has-text-centered-mobile">
|
||||
<h1 class="title is-4" v-text="configuration.library_name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="content">
|
||||
<nav class="level is-mobile">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="title is-5" v-text="$t('page.about.library')" />
|
||||
</div>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="content">
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="title is-4" v-text="$t('page.about.library')" />
|
||||
</div>
|
||||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<div v-if="library.updating">
|
||||
<a
|
||||
class="button is-small is-loading"
|
||||
v-text="$t('page.about.update')"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a
|
||||
class="button is-small"
|
||||
@click="showUpdateDialog()"
|
||||
v-text="$t('page.about.update')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th
|
||||
class="has-text-left"
|
||||
v-text="$t('page.about.artists')"
|
||||
/>
|
||||
<td
|
||||
class="has-text-right"
|
||||
v-text="$filters.number(library.artists)"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="has-text-left"
|
||||
v-text="$t('page.about.albums')"
|
||||
/>
|
||||
<td
|
||||
class="has-text-right"
|
||||
v-text="$filters.number(library.albums)"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="has-text-left"
|
||||
v-text="$t('page.about.tracks')"
|
||||
/>
|
||||
<td
|
||||
class="has-text-right"
|
||||
v-text="$filters.number(library.songs)"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="has-text-left"
|
||||
v-text="$t('page.about.total-playtime')"
|
||||
/>
|
||||
<td
|
||||
class="has-text-right"
|
||||
v-text="
|
||||
$filters.durationInDays(library.db_playtime * 1000)
|
||||
"
|
||||
/>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="has-text-left"
|
||||
v-text="$t('page.about.updated')"
|
||||
/>
|
||||
<td class="has-text-right">
|
||||
<span
|
||||
v-text="
|
||||
$t('page.about.updated-on', {
|
||||
time: $filters.timeFromNow(library.updated_at)
|
||||
})
|
||||
"
|
||||
/>
|
||||
(<span
|
||||
class="has-text-grey"
|
||||
v-text="$filters.datetime(library.updated_at)"
|
||||
/>)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="has-text-left"
|
||||
v-text="$t('page.about.uptime')"
|
||||
/>
|
||||
<td class="has-text-right">
|
||||
<span
|
||||
v-text="$filters.timeFromNow(library.started_at, true)"
|
||||
/>
|
||||
(<span
|
||||
class="has-text-grey"
|
||||
v-text="$filters.datetime(library.started_at)"
|
||||
/>)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="content has-text-centered-mobile">
|
||||
<p
|
||||
class="is-size-7"
|
||||
v-text="
|
||||
$t('page.about.version', { version: configuration.version })
|
||||
"
|
||||
/>
|
||||
<p
|
||||
class="is-size-7"
|
||||
v-text="
|
||||
$t('page.about.compiled-with', {
|
||||
options: configuration.buildoptions.join(', ')
|
||||
})
|
||||
"
|
||||
/>
|
||||
<i18n-t
|
||||
tag="p"
|
||||
class="is-size-7"
|
||||
keypath="page.about.built-with"
|
||||
scope="global"
|
||||
>
|
||||
<template #bulma>
|
||||
<a href="https://bulma.io">Bulma</a>
|
||||
</template>
|
||||
<template #mdi>
|
||||
<a href="https://pictogrammers.com/library/mdi/">
|
||||
Material Design Icons
|
||||
</a>
|
||||
</template>
|
||||
<template #vuejs>
|
||||
<a href="https://vuejs.org/">Vue.js</a>
|
||||
</template>
|
||||
<template #axios>
|
||||
<a href="https://github.com/axios/axios">axios</a>
|
||||
</template>
|
||||
<template #others>
|
||||
</div>
|
||||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<div v-if="library.updating">
|
||||
<a
|
||||
href="https://github.com/owntone/owntone-server/network/dependencies"
|
||||
v-text="$t('page.about.more')"
|
||||
class="button is-small is-loading"
|
||||
v-text="$t('page.about.update')"
|
||||
/>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a
|
||||
class="button is-small"
|
||||
@click="showUpdateDialog()"
|
||||
v-text="$t('page.about.update')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.library')"
|
||||
/>
|
||||
<div class="media-right" v-text="configuration.library_name" />
|
||||
</div>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.artists')"
|
||||
/>
|
||||
<div
|
||||
class="media-right"
|
||||
v-text="$filters.number(library.artists)"
|
||||
/>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.albums')"
|
||||
/>
|
||||
<div
|
||||
media="media-right"
|
||||
v-text="$filters.number(library.albums)"
|
||||
/>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.tracks')"
|
||||
/>
|
||||
<div
|
||||
class="media-right"
|
||||
v-text="$filters.number(library.songs)"
|
||||
/>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.total-playtime')"
|
||||
/>
|
||||
<div
|
||||
class="media-right"
|
||||
v-text="$filters.durationInDays(library.db_playtime)"
|
||||
/>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.updated')"
|
||||
/>
|
||||
<div class="media-right">
|
||||
<span
|
||||
v-text="
|
||||
$t('page.about.updated-on', {
|
||||
time: $filters.timeFromNow(library.updated_at)
|
||||
})
|
||||
"
|
||||
/>
|
||||
(<span
|
||||
class="has-text-grey"
|
||||
v-text="$filters.datetime(library.updated_at)"
|
||||
/>)
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.uptime')"
|
||||
/>
|
||||
<div class="media-right">
|
||||
<span v-text="$filters.timeFromNow(library.started_at, true)" />
|
||||
(<span
|
||||
class="has-text-grey"
|
||||
v-text="$filters.datetime(library.started_at)"
|
||||
/>)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-four-fifths">
|
||||
<div class="content has-text-centered-mobile">
|
||||
<p
|
||||
class="is-size-7"
|
||||
v-text="
|
||||
$t('page.about.version', { version: configuration.version })
|
||||
"
|
||||
/>
|
||||
<p
|
||||
class="is-size-7"
|
||||
v-text="
|
||||
$t('page.about.compiled-with', {
|
||||
options: configuration.buildoptions.join(', ')
|
||||
})
|
||||
"
|
||||
/>
|
||||
<i18n-t
|
||||
tag="p"
|
||||
class="is-size-7"
|
||||
keypath="page.about.built-with"
|
||||
scope="global"
|
||||
>
|
||||
<template #bulma>
|
||||
<a href="https://bulma.io">Bulma</a>
|
||||
</template>
|
||||
<template #mdi>
|
||||
<a href="https://pictogrammers.com/library/mdi/">
|
||||
Material Design Icons
|
||||
</a>
|
||||
</template>
|
||||
<template #vuejs>
|
||||
<a href="https://vuejs.org/">Vue.js</a>
|
||||
</template>
|
||||
<template #axios>
|
||||
<a href="https://github.com/axios/axios">axios</a>
|
||||
</template>
|
||||
<template #others>
|
||||
<a
|
||||
href="https://github.com/owntone/owntone-server/network/dependencies"
|
||||
v-text="$t('page.about.more')"
|
||||
/>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -209,5 +197,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue