MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix all linting issues

This commit is contained in:
Ciarán Ainsworth 2022-09-18 20:57:41 +00:00 committed by Kasper Seweryn
parent db9986e7b9
commit 58df446539
21 changed files with 229 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/components/Queue.vue
View File

@ -282,7 +282,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
{{ currentTrack.artistName }} {{ currentTrack.artistName }}
</router-link> </router-link>
<template v-if="currentTrack.albumId !== -1"> <template v-if="currentTrack.albumId !== -1">
/ <span class="middle slash symbol" />
<router-link <router-link
class="discrete link album" class="discrete link album"
:to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}" :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
@ -388,8 +388,8 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
<span class="right floated timer total">{{ time.parse(Math.round(duration)) }}</span> <span class="right floated timer total">{{ time.parse(Math.round(duration)) }}</span>
</template> </template>
<template v-else> <template v-else>
<span class="left floated timer">00:00</span> <span class="left floated timer">{{ durationFormatted(0) }}</span>
<span class="right floated timer">00:00</span> <span class="right floated timer">{{ durationFormatted(0) }}</span>
</template> </template>
</div> </div>
</div> </div>
@ -417,7 +417,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
<div> <div>
{{ $t('components.Queue.queuePosition', {index: currentIndex +1, length: queue.length}) }} {{ $t('components.Queue.queuePosition', {index: currentIndex +1, length: queue.length}) }}
<template v-if="!$store.state.radios.running"> <template v-if="!$store.state.radios.running">
- <span class="middle ellipses symbol" />
<span :title="labels.duration"> <span :title="labels.duration">
{{ timeLeft }} {{ timeLeft }}
</span> </span>

2
front/src/components/audio/ChannelForm.vue
View File

@ -225,7 +225,7 @@ defineExpose({
</label> </label>
<div class="ui left labeled input"> <div class="ui left labeled input">
<div class="ui basic label"> <div class="ui basic label">
@ <span class="at symbol" />
</div> </div>
<input <input
v-model="newValues.username" v-model="newValues.username"

9
front/src/components/audio/Player.vue
View File

@ -191,7 +191,7 @@ const hideArtist = () => {
{{ currentTrack.artistName }} {{ currentTrack.artistName }}
</router-link> </router-link>
<template v-if="currentTrack.albumId !== -1"> <template v-if="currentTrack.albumId !== -1">
/ <span class="middle slash symbol" />
<router-link <router-link
class="discrete link" class="discrete link"
:to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}" :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
@ -218,7 +218,8 @@ const hideArtist = () => {
<div class="meta"> <div class="meta">
{{ currentTrack.artistName }} {{ currentTrack.artistName }}
<template v-if="currentTrack.albumId !== -1"> <template v-if="currentTrack.albumId !== -1">
/ {{ currentTrack.albumTitle }} <span class="middle slash symbol" />
{{ currentTrack.albumTitle }}
</template> </template>
</div> </div>
</div> </div>
@ -254,7 +255,7 @@ const hideArtist = () => {
> >
{{ time.parse(Math.round(currentTime)) }} {{ time.parse(Math.round(currentTime)) }}
</span> </span>
| <span class="middle pipe symbol" />
<span class="total">{{ time.parse(Math.round(duration)) }}</span> <span class="total">{{ time.parse(Math.round(duration)) }}</span>
</template> </template>
</div> </div>
@ -276,7 +277,7 @@ const hideArtist = () => {
class="ui circular tiny vibrant label" class="ui circular tiny vibrant label"
> >
<template v-if="looping === LoopingMode.LoopTrack">1</template> <template v-if="looping === LoopingMode.LoopTrack">1</template>
<template v-else-if="looping === LoopingMode.LoopQueue">&infin;</template> <span v-else-if="looping === LoopingMode.LoopQueue" class="infinity symbol" />
</span> </span>
</i> </i>
</button> </button>

5
front/src/components/audio/album/Card.vue
View File

@ -58,7 +58,10 @@ const imageUrl = computed(() => props.album.cover?.urls.original
</div> </div>
</div> </div>
<div class="extra content"> <div class="extra content">
<span v-if="album.release_date">{{ momentFormat(new Date(album.release_date), 'Y') }} · </span> <span v-if="album.release_date">
{{ momentFormat(new Date(album.release_date), 'Y') }}
<span class="middle middledot symbol" />
</span>
<span> <span>
{{ $t('components.audio.album.Card.trackCount', album.tracks_count) }} {{ $t('components.audio.album.Card.trackCount', album.tracks_count) }}
</span> </span>

5
front/src/components/audio/podcast/MobileRow.vue
View File

@ -116,7 +116,7 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
class="really discrete" class="really discrete"
:date="track.creation_date" :date="track.creation_date"
/> />
<span>&#183;</span> <span class="nospace middledot symbol" />
<human-duration <human-duration
v-if="track.uploads[0] && track.uploads[0].duration" v-if="track.uploads[0] && track.uploads[0].duration"
:duration="track.uploads[0].duration" :duration="track.uploads[0].duration"
@ -126,7 +126,8 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
v-else v-else
class="track-meta mobile" class="track-meta mobile"
> >
{{ track.artist?.name }} <span>&#183;</span> {{ track.artist?.name }}
<span class="nospace middledot symbol" />
<human-duration <human-duration
v-if="track.uploads[0] && track.uploads[0].duration" v-if="track.uploads[0] && track.uploads[0].duration"
:duration="track.uploads[0].duration" :duration="track.uploads[0].duration"

3
front/src/components/audio/track/MobileRow.vue
View File

@ -109,7 +109,8 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.ac
{{ track.title }} {{ track.title }}
</p> </p>
<p class="track-meta mobile"> <p class="track-meta mobile">
{{ track.artist?.name }} <span>&#183;</span> {{ track.artist?.name }}
<span class="middle middledot symbol" />
<human-duration <human-duration
v-if="track.uploads[0] && track.uploads[0].duration" v-if="track.uploads[0] && track.uploads[0].duration"
:duration="track.uploads[0].duration" :duration="track.uploads[0].duration"

3
front/src/components/audio/track/Widget.vue
View File

@ -170,7 +170,8 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
class="left floated" class="left floated"
:to="{name: 'profile.overview', params: {username: object.user.username}}" :to="{name: 'profile.overview', params: {username: object.user.username}}"
> >
@{{ object.user.username }} <span class="at symbol" />
{{ object.user.username }}
</router-link> </router-link>
<span class="right floated"><human-date :date="object.creation_date" /></span> <span class="right floated"><human-date :date="object.creation_date" /></span>
</div> </div>

2
front/src/components/auth/LoginForm.vue
View File

@ -94,7 +94,7 @@ const submit = async () => {
<label for="username-field"> <label for="username-field">
{{ $t('components.auth.LoginForm.usernameFieldLabel') }} {{ $t('components.auth.LoginForm.usernameFieldLabel') }}
<template v-if="showSignup"> <template v-if="showSignup">
| <span class="middle pipe symbol" />
<router-link :to="{path: '/signup'}"> <router-link :to="{path: '/signup'}">
{{ $t('components.auth.LoginForm.createAccountLink') }} {{ $t('components.auth.LoginForm.createAccountLink') }}
</router-link> </router-link>

17
front/src/components/channels/UploadForm.vue
View File

@ -529,7 +529,10 @@ const labels = computed(() => ({
<template v-if="file.response?.uuid"> <template v-if="file.response?.uuid">
{{ humanSize(file.size ?? 0) }} {{ humanSize(file.size ?? 0) }}
<template v-if="file.response.duration"> <template v-if="file.response.duration">
· <human-duration :duration="file.response.duration" /> <span class="middle middledot symbol" />
<human-duration
:duration="file.response.duration"
/>
</template> </template>
</template> </template>
<template v-else> <template v-else>
@ -548,14 +551,18 @@ const labels = computed(() => ({
> >
{{ $t('components.channels.UploadForm.pendingStatus') }} {{ $t('components.channels.UploadForm.pendingStatus') }}
</span> </span>
· {{ humanSize(file.size ?? 0) }} <span class="middle middledot symbol" />
· {{ parseFloat(file.progress ?? '0') }}% {{ humanSize(file.size ?? 0) }}
<span class="middle middledot symbol" />
{{ parseFloat(file.progress ?? '0') }}
<span class="percent symbol" />
</template> </template>
· <a @click.stop.prevent="remove(file)"> <span class="middle middledot symbol" />
<a @click.stop.prevent="remove(file)">
{{ $t('components.channels.UploadForm.removeUpload') }} {{ $t('components.channels.UploadForm.removeUpload') }}
</a> </a>
<template v-if="file.error"> <template v-if="file.error">
· <span class="middle middledot symbol" />
<a @click.stop.prevent="retry(file)"> <a @click.stop.prevent="retry(file)">
{{ $t('components.channels.UploadForm.retryUpload') }} {{ $t('components.channels.UploadForm.retryUpload') }}
</a> </a>

2
front/src/components/common/UserLink.vue
View File

@ -33,6 +33,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
>{{ user.username[0] }}</span> >{{ user.username[0] }}</span>
&nbsp; &nbsp;
</template> </template>
@{{ user.username }} {{ $t('components.common.UserLink.username', {username: user.username}) }}
</span> </span>
</template> </template>

10
front/src/components/common/UserModal.vue
View File

@ -89,7 +89,10 @@ const labels = computed(() => ({
@click="[$emit('update:show', false), emit('showLanguageModalEvent')]" @click="[$emit('update:show', false), emit('showLanguageModalEvent')]"
> >
<i class="language icon user-modal list-icon" /> <i class="language icon user-modal list-icon" />
<span class="user-modal list-item">{{ labels.language }}:</span> <span class="user-modal list-item">
{{ labels.language }}
<span class="left colon symbol" />
</span>
<div class="right floated"> <div class="right floated">
<span class="user-modal list-item">{{ $language.available[$language.current] }}</span> <span class="user-modal list-item">{{ $language.available[$language.current] }}</span>
<i class="action-hint chevron right icon" /> <i class="action-hint chevron right icon" />
@ -103,7 +106,10 @@ const labels = computed(() => ({
@click="[$emit('update:show', false), emit('showThemeModalEvent')]" @click="[$emit('update:show', false), emit('showThemeModalEvent')]"
> >
<i class="palette icon user-modal list-icon" /> <i class="palette icon user-modal list-icon" />
<span class="user-modal list-item">{{ labels.theme }}:</span> <span class="user-modal list-item">
{{ labels.theme }}
<span class="left colon symbol" />
</span>
<div class="right floated"> <div class="right floated">
<span class="user-modal list-item"> {{ themes.find(x => x.key === theme)?.name }}</span> <span class="user-modal list-item"> {{ themes.find(x => x.key === theme)?.name }}</span>
<i class="action-hint chevron right icon user-modal" /> <i class="action-hint chevron right icon user-modal" />

8
front/src/components/library/AlbumBase.vue
View File

@ -255,7 +255,10 @@ const remove = async () => {
v-if="object.release_date || (totalTracks > 0)" v-if="object.release_date || (totalTracks > 0)"
class="ui small hidden divider" class="ui small hidden divider"
/> />
<span v-if="object.release_date">{{ momentFormat(new Date(object.release_date ?? '1970-01-01'), 'Y') }} &middot; </span> <template v-if="object.release_date">
{{ momentFormat(new Date(object.release_date ?? '1970-01-01'), 'Y') }}
<span class="middle middledot symbol" />
</template>
<template v-if="totalTracks > 0"> <template v-if="totalTracks > 0">
<span <span
v-if="isSerie" v-if="isSerie"
@ -266,7 +269,8 @@ const remove = async () => {
v-else v-else
> >
{{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }} {{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }}
</span> · </span>
<span class="middle middledot symbol" />
</template> </template>
<human-duration <human-duration
v-if="totalDuration > 0" v-if="totalDuration > 0"

18
front/src/components/library/FileUpload.vue
View File

@ -305,13 +305,17 @@ useEventListener(window, 'beforeunload', (event) => {
v-else-if="files.length > uploadedFilesCount + erroredFilesCount" v-else-if="files.length > uploadedFilesCount + erroredFilesCount"
class="ui warning label" class="ui warning label"
> >
{{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }} {{ uploadedFilesCount + erroredFilesCount }}
<span class="nospace slash symbol" />
{{ files.length }}
</div> </div>
<div <div
v-else v-else
:class="['ui', {'success': erroredFilesCount === 0}, {'danger': erroredFilesCount > 0}, 'label']" :class="['ui', {'success': erroredFilesCount === 0}, {'danger': erroredFilesCount > 0}, 'label']"
> >
{{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }} {{ uploadedFilesCount + erroredFilesCount }}
<span class="nospace slash symbol" />
{{ files.length }}
</div> </div>
</a> </a>
<a <a
@ -330,13 +334,17 @@ useEventListener(window, 'beforeunload', (event) => {
v-else-if="processableFiles > processedFilesCount" v-else-if="processableFiles > processedFilesCount"
class="ui warning label" class="ui warning label"
> >
{{ processedFilesCount }}/{{ processableFiles }} {{ processedFilesCount }}
<span class="nospace slash symbol" />
{{ processableFiles }}
</div> </div>
<div <div
v-else v-else
:class="['ui', {'success': uploads.errored === 0}, {'danger': uploads.errored > 0}, 'label']" :class="['ui', {'success': uploads.errored === 0}, {'danger': uploads.errored > 0}, 'label']"
> >
{{ processedFilesCount }}/{{ processableFiles }} {{ processedFilesCount }}
<span class="nospace slash symbol" />
{{ processableFiles }}
</div> </div>
</a> </a>
</div> </div>
@ -467,7 +475,7 @@ useEventListener(window, 'beforeunload', (event) => {
> >
{{ $t('components.library.FileUpload.uploadingStatusLabel') }} {{ $t('components.library.FileUpload.uploadingStatusLabel') }}
</span> </span>
({{ parseFloat(file.progress ?? '0.00') }}%) {{ $t('components.library.FileUpload.uploadingProgress', {percent: parseFloat(file.progress ?? '0.00')}) }}
</span> </span>
<span <span
v-else v-else

2
front/src/components/library/FsBrowser.vue
View File

@ -54,7 +54,7 @@ const handleClick = (entry: FSEntry) => {
> >
<i class="folder icon" /> <i class="folder icon" />
<div class="content"> <div class="content">
<div class="header">..</div> <div class="header doubledot symbol" />
</div> </div>
</a> </a>
<a <a

4
front/src/components/library/ImportStatusModal.vue
View File

@ -131,7 +131,9 @@ const getErrorData = (upload: Upload) => {
v-for="row in getErrorData(upload).errorRows" v-for="row in getErrorData(upload).errorRows"
:key="row.key" :key="row.key"
> >
{{ row.key }}: {{ row.value }} {{ row.key }}
<span class="left colon symbol" />
{{ row.value }}
</li> </li>
</ul> </ul>
</td> </td>

4
front/src/components/moderation/ReportModal.vue
View File

@ -127,7 +127,9 @@ watchEffect(async () => {
> >
{{ $t('components.moderation.ReportModal.reportModalHeader') }} {{ $t('components.moderation.ReportModal.reportModalHeader') }}
<div class="ui sub header"> <div class="ui sub header">
{{ target.typeLabel }} - {{ target.label }} {{ target.typeLabel }}
<span class="middle hyphen symbol" />
{{ target.label }}
</div> </div>
</h2> </h2>
<div class="scrolling content"> <div class="scrolling content">

3
front/src/components/tags/List.vue
View File

@ -38,7 +38,8 @@ const tags = computed(() => {
:to="{name: props.detailRoute, params: { id: tag } }" :to="{name: props.detailRoute, params: { id: tag } }"
:class="['ui', 'circular', 'hashtag', 'label', props.labelClasses]" :class="['ui', 'circular', 'hashtag', 'label', props.labelClasses]"
> >
#{{ truncate(tag, props.truncateSize) }} <span class="hashtag symbol" />
{{ truncate(tag, props.truncateSize) }}
</router-link> </router-link>
<div <div
v-if="props.showMore && tags.length < props.tags.length" v-if="props.showMore && tags.length < props.tags.length"

2
front/src/components/vui/Pagination.vue
View File

@ -97,7 +97,7 @@ const labels = computed(() => ({
href="#" href="#"
class="item disabled" class="item disabled"
> >
<span>…</span> <span class="nospace ellipses symbol" />
</a> </a>
<a <a
v-else v-else

4
front/src/locales/en.json
View File

@ -749,6 +749,9 @@
"cancelButton": "Cancel", "cancelButton": "Cancel",
"updateButton": "Update description" "updateButton": "Update description"
}, },
"UserLink": {
"username": "{'@'}{username}"
},
"UserMenu": { "UserMenu": {
"profileLabel": "Profile", "profileLabel": "Profile",
"settingsLabel": "Settings", "settingsLabel": "Settings",
@ -999,6 +1002,7 @@
"retryButton": "Retry failed uploads", "retryButton": "Retry failed uploads",
"uploadedStatusLabel": "Uploaded", "uploadedStatusLabel": "Uploaded",
"uploadingStatusLabel": "Uploading…", "uploadingStatusLabel": "Uploading…",
"uploadingProgress": "{percent}%",
"pendingStatusLabel": "Pending", "pendingStatusLabel": "Pending",
"serverUploadHeader": "Import music from your server", "serverUploadHeader": "Import music from your server",
"uploadFailureHeader": "Error while launching import", "uploadFailureHeader": "Error while launching import",

149
front/src/style/globals/_utils.scss
View File

@ -1,10 +1,11 @@
.center.aligned.menu { .center.aligned.menu {
justify-content: center; justify-content: center;
} }
.text.center.aligned { .text.center.aligned {
text-align: center; text-align: center;
} }
.ellipsis:not(.icon) { .ellipsis:not(.icon) {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -24,9 +25,11 @@
a { a {
cursor: pointer; cursor: pointer;
} }
.segment.hidden { .segment.hidden {
display: none; display: none;
} }
.hidden:not(.divider) { .hidden:not(.divider) {
display: none !important; display: none !important;
} }
@ -53,21 +56,25 @@ a {
display: none !important; display: none !important;
} }
} }
.desktop-and-below { .desktop-and-below {
@include media(">=desktop") { @include media(">=desktop") {
display: none !important; display: none !important;
} }
} }
.tablet-and-up { .tablet-and-up {
@include media("<tablet") { @include media("<tablet") {
display: none !important; display: none !important;
} }
} }
.tablet-and-below { .tablet-and-below {
@include media(">=tablet") { @include media(">=tablet") {
display: none !important; display: none !important;
} }
} }
.mobile-only { .mobile-only {
@include media(">tablet") { @include media(">tablet") {
display: none !important; display: none !important;
@ -91,7 +98,7 @@ a {
} }
span.diff.added { span.diff.added {
background-color:rgba(0, 255, 0, 0.25); background-color: rgba(0, 255, 0, 0.25);
} }
@ -106,13 +113,149 @@ span.diff.removed {
.discrete { .discrete {
color: var(--discrete-text-color); color: var(--discrete-text-color);
} }
.really.discrete { .really.discrete {
color: var(--really-discrete-text-color); color: var(--really-discrete-text-color);
} }
.ui.inverted.dimmer { .ui.inverted.dimmer {
background-color: var(--dimmer-background); background-color: var(--dimmer-background);
> .ui.dimmer {
>.ui.dimmer {
color: var(--dimmer-color); color: var(--dimmer-color);
} }
} }
.symbol {
&.at::after {
content: "@";
}
&.slash {
&.left::after {
padding-right: 0.25em;
content: "/";
}
&.right::after {
padding-left: 0.25em;
content: "/";
}
&.middle::after {
padding: 0.25em;
content: "/";
}
&.nospace::after {
content: "/";
}
}
&.pipe {
&.left::after {
padding-right: 0.25em;
content: "|";
}
&.right::after {
padding-left: 0.25em;
content: "|";
}
&.middle::after {
padding: 0.25em;
content: "|";
}
}
&.middledot {
&.left::before {
padding-right: 0.25em;
content: "·";
}
&.right::after {
padding-left: 0.25em;
content: "·";
}
&.middle::after {
padding: 0.25em;
content: "·";
},
&.nospace::after {
content: "·";
}
}
&.infinity::after {
content: "∞";
}
&.single::after {
content: "1";
}
&.hashtag::after {
content: "#";
}
&.ellipses {
&.nospace::after {
content: "…";
}
&.middle::after {
padding: 0.25em;
content: "…";
}
}
&.doubledot::after {
content: "..";
}
&.hyphen {
&.left::before {
padding-right: 0.25em;
content: "-";
}
&.right {
padding-left: 0.25em;
content: "-";
}
&.middle::after {
padding: 0.25em;
content: "-";
}
}
&.colon {
&.left::before {
padding-right: 0.25em;
content: ":";
}
&.right::after {
padding-left: 0.25em;
content: ":";
}
&.middle::after {
padding: 0.25em;
content: ":";
}
}
&.percent::after {
content: "%";
}
}

11
front/src/views/library/LibraryBase.vue
View File

@ -171,14 +171,17 @@ const updateUploads = (count: number) => {
<span <span
v-else-if="object.privacy_level === 'everyone'" v-else-if="object.privacy_level === 'everyone'"
:title="labels.tooltips.everyone" :title="labels.tooltips.everyone"
class="middledot icon"
> >
<i class="globe icon" /> <i class="globe icon" />
{{ labels.visibility.everyone }} {{ labels.visibility.everyone }}
</span> · </span>
<i class="music icon" /> <span class="middledot icon">
{{ $t('views.library.LibraryBase.trackCount', {count: object.uploads_count}) }} <i class="music icon" />
{{ $t('views.library.LibraryBase.trackCount', {count: object.uploads_count}) }}
</span>
<span v-if="object.size"> <span v-if="object.size">
· <i class="database icon" /> <i class="database icon" />
{{ humanSize(object.size) }} {{ humanSize(object.size) }}
</span> </span>
</p> </p>