Fix all linting issues

2022-09-18 20:57:41 +00:00 · 2022-09-18 20:57:41 +00:00 · 58df446539
commit 58df446539
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@ -282,7 +282,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                  {{ currentTrack.artistName }}
                </router-link>
                <template v-if="currentTrack.albumId !== -1">
-                  /
+                  <span class="middle slash symbol" />
                  <router-link
                    class="discrete link album"
                    :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>
              </template>
              <template v-else>
-                <span class="left floated timer">00:00</span>
-                <span class="right floated timer">00:00</span>
+                <span class="left floated timer">{{ durationFormatted(0) }}</span>
+                <span class="right floated timer">{{ durationFormatted(0) }}</span>
              </template>
            </div>
          </div>
@ -417,7 +417,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                <div>
                  {{ $t('components.Queue.queuePosition', {index: currentIndex +1, length: queue.length}) }}
                  <template v-if="!$store.state.radios.running">
-                    -
+                    <span class="middle ellipses symbol" />
                    <span :title="labels.duration">
                      {{ timeLeft }}
                    </span>
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@ -225,7 +225,7 @@ defineExpose({
          </label>
          <div class="ui left labeled input">
            <div class="ui basic label">
-              @
+              <span class="at symbol" />
            </div>
            <input
              v-model="newValues.username"
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@ -191,7 +191,7 @@ const hideArtist = () => {
                {{ currentTrack.artistName }}
              </router-link>
              <template v-if="currentTrack.albumId !== -1">
-                /
+                <span class="middle slash symbol" />
                <router-link
                  class="discrete link"
                  :to="{name: 'library.albums.detail', params: {id: currentTrack.albumId }}"
@ -218,7 +218,8 @@ const hideArtist = () => {
            <div class="meta">
              {{ currentTrack.artistName }}
              <template v-if="currentTrack.albumId !== -1">
-                / {{ currentTrack.albumTitle }}
+                <span class="middle slash symbol" />
+                {{ currentTrack.albumTitle }}
              </template>
            </div>
          </div>
@ -254,7 +255,7 @@ const hideArtist = () => {
              >
                {{ time.parse(Math.round(currentTime)) }}
              </span>
-              |
+              <span class="middle pipe symbol" />
              <span class="total">{{ time.parse(Math.round(duration)) }}</span>
            </template>
          </div>
@ -276,7 +277,7 @@ const hideArtist = () => {
                  class="ui circular tiny vibrant label"
                >
                  <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>
              </i>
            </button>
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@ -58,7 +58,10 @@ const imageUrl = computed(() => props.album.cover?.urls.original
      </div>
    </div>
    <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>
        {{ $t('components.audio.album.Card.trackCount', album.tracks_count) }}
      </span>
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@ -116,7 +116,7 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
          class="really discrete"
          :date="track.creation_date"
        />
-        <span>&#183;</span>
+        <span class="nospace middledot symbol" />
        <human-duration
          v-if="track.uploads[0] && track.uploads[0].duration"
          :duration="track.uploads[0].duration"
@ -126,7 +126,8 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
        v-else
        class="track-meta mobile"
      >
-        {{ track.artist?.name }} <span>&#183;</span>
+        {{ track.artist?.name }}
+        <span class="nospace middledot symbol" />
        <human-duration
          v-if="track.uploads[0] && track.uploads[0].duration"
          :duration="track.uploads[0].duration"
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@ -109,7 +109,8 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.ac
        {{ track.title }}
      </p>
      <p class="track-meta mobile">
-        {{ track.artist?.name }} <span>&#183;</span>
+        {{ track.artist?.name }}
+        <span class="middle middledot symbol" />
        <human-duration
          v-if="track.uploads[0] && track.uploads[0].duration"
          :duration="track.uploads[0].duration"
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@ -170,7 +170,8 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
                  class="left floated"
                  :to="{name: 'profile.overview', params: {username: object.user.username}}"
                >
-                  @{{ object.user.username }}
+                  <span class="at symbol" />
+                  {{ object.user.username }}
                </router-link>
                <span class="right floated"><human-date :date="object.creation_date" /></span>
              </div>
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@ -94,7 +94,7 @@ const submit = async () => {
        <label for="username-field">
          {{ $t('components.auth.LoginForm.usernameFieldLabel') }}
          <template v-if="showSignup">
-            |
+            <span class="middle pipe symbol" />
            <router-link :to="{path: '/signup'}">
              {{ $t('components.auth.LoginForm.createAccountLink') }}
            </router-link>
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@ -529,7 +529,10 @@ const labels = computed(() => ({
                <template v-if="file.response?.uuid">
                  {{ humanSize(file.size ?? 0) }}
                  <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 v-else>
@ -548,14 +551,18 @@ const labels = computed(() => ({
                  >
                    {{ $t('components.channels.UploadForm.pendingStatus') }}
                  </span>
-                  · {{ humanSize(file.size ?? 0) }}
-                  · {{ parseFloat(file.progress ?? '0') }}%
+                  <span class="middle middledot symbol" />
+                  {{ humanSize(file.size ?? 0) }}
+                  <span class="middle middledot symbol" />
+                  {{ parseFloat(file.progress ?? '0') }}
+                  <span class="percent symbol" />
                </template>
-                · <a @click.stop.prevent="remove(file)">
+                <span class="middle middledot symbol" />
+                <a @click.stop.prevent="remove(file)">
                  {{ $t('components.channels.UploadForm.removeUpload') }}
                </a>
                <template v-if="file.error">
-                  ·
+                  <span class="middle middledot symbol" />
                  <a @click.stop.prevent="retry(file)">
                    {{ $t('components.channels.UploadForm.retryUpload') }}
                  </a>
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@ -33,6 +33,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
      >{{ user.username[0] }}</span>
      &nbsp;
    </template>
-    @{{ user.username }}
+    {{ $t('components.common.UserLink.username', {username: user.username}) }}
  </span>
 </template>
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@ -89,7 +89,10 @@ const labels = computed(() => ({
            @click="[$emit('update:show', false), emit('showLanguageModalEvent')]"
          >
            <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">
              <span class="user-modal list-item">{{ $language.available[$language.current] }}</span>
              <i class="action-hint chevron right icon" />
@ -103,7 +106,10 @@ const labels = computed(() => ({
            @click="[$emit('update:show', false), emit('showThemeModalEvent')]"
          >
            <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">
              <span class="user-modal list-item"> {{ themes.find(x => x.key === theme)?.name }}</span>
              <i class="action-hint chevron right icon user-modal" />
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@ -255,7 +255,10 @@ const remove = async () => {
                v-if="object.release_date || (totalTracks > 0)"
                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">
                <span
                  v-if="isSerie"
@ -266,7 +269,8 @@ const remove = async () => {
                  v-else
                >
                  {{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }}
-                </span> ·
+                </span>
+                <span class="middle middledot symbol" />
              </template>
              <human-duration
                v-if="totalDuration > 0"
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@ -305,13 +305,17 @@ useEventListener(window, 'beforeunload', (event) => {
          v-else-if="files.length > uploadedFilesCount + erroredFilesCount"
          class="ui warning label"
        >
-          {{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
+          {{ uploadedFilesCount + erroredFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ files.length }}
        </div>
        <div
          v-else
          :class="['ui', {'success': erroredFilesCount === 0}, {'danger': erroredFilesCount > 0}, 'label']"
        >
-          {{ uploadedFilesCount + erroredFilesCount }}/{{ files.length }}
+          {{ uploadedFilesCount + erroredFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ files.length }}
        </div>
      </a>
      <a
@ -330,13 +334,17 @@ useEventListener(window, 'beforeunload', (event) => {
          v-else-if="processableFiles > processedFilesCount"
          class="ui warning label"
        >
-          {{ processedFilesCount }}/{{ processableFiles }}
+          {{ processedFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ processableFiles }}
        </div>
        <div
          v-else
          :class="['ui', {'success': uploads.errored === 0}, {'danger': uploads.errored > 0}, 'label']"
        >
-          {{ processedFilesCount }}/{{ processableFiles }}
+          {{ processedFilesCount }}
+          <span class="nospace slash symbol" />
+          {{ processableFiles }}
        </div>
      </a>
    </div>
@ -467,7 +475,7 @@ useEventListener(window, 'beforeunload', (event) => {
                  >
                    {{ $t('components.library.FileUpload.uploadingStatusLabel') }}
                  </span>
-                  ({{ parseFloat(file.progress ?? '0.00') }}%)
+                  {{ $t('components.library.FileUpload.uploadingProgress', {percent: parseFloat(file.progress ?? '0.00')}) }}
                </span>
                <span
                  v-else
--- a/front/src/components/library/FsBrowser.vue
+++ b/front/src/components/library/FsBrowser.vue
@ -54,7 +54,7 @@ const handleClick = (entry: FSEntry) => {
      >
        <i class="folder icon" />
        <div class="content">
-          <div class="header">..</div>
+          <div class="header doubledot symbol" />
        </div>
      </a>
      <a
--- a/front/src/components/library/ImportStatusModal.vue
+++ b/front/src/components/library/ImportStatusModal.vue
@ -131,7 +131,9 @@ const getErrorData = (upload: Upload) => {
                      v-for="row in getErrorData(upload).errorRows"
                      :key="row.key"
                    >
-                      {{ row.key }}: {{ row.value }}
+                      {{ row.key }}
+                      <span class="left colon symbol" />
+                      {{ row.value }}
                    </li>
                  </ul>
                </td>
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@ -127,7 +127,9 @@ watchEffect(async () => {
    >
      {{ $t('components.moderation.ReportModal.reportModalHeader') }}
      <div class="ui sub header">
-        {{ target.typeLabel }} - {{ target.label }}
+        {{ target.typeLabel }}
+        <span class="middle hyphen symbol" />
+        {{ target.label }}
      </div>
    </h2>
    <div class="scrolling content">
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@ -38,7 +38,8 @@ const tags = computed(() => {
      :to="{name: props.detailRoute, params: { id: tag } }"
      :class="['ui', 'circular', 'hashtag', 'label', props.labelClasses]"
    >
-      #{{ truncate(tag, props.truncateSize) }}
+      <span class="hashtag symbol" />
+      {{ truncate(tag, props.truncateSize) }}
    </router-link>
    <div
      v-if="props.showMore && tags.length < props.tags.length"
--- a/front/src/components/vui/Pagination.vue
+++ b/front/src/components/vui/Pagination.vue
@ -97,7 +97,7 @@ const labels = computed(() => ({
          href="#"
          class="item disabled"
        >
-          <span>…</span>
+          <span class="nospace ellipses symbol" />
        </a>
        <a
          v-else
--- a/front/src/locales/en.json
+++ b/front/src/locales/en.json
@ -749,6 +749,9 @@
                "cancelButton": "Cancel",
                "updateButton": "Update description"
            },
+            "UserLink": {
+                "username": "{'@'}{username}"
+            },
            "UserMenu": {
                "profileLabel": "Profile",
                "settingsLabel": "Settings",
@ -999,6 +1002,7 @@
                "retryButton": "Retry failed uploads",
                "uploadedStatusLabel": "Uploaded",
                "uploadingStatusLabel": "Uploading…",
+                "uploadingProgress": "{percent}%",
                "pendingStatusLabel": "Pending",
                "serverUploadHeader": "Import music from your server",
                "uploadFailureHeader": "Error while launching import",
--- a/front/src/style/globals/_utils.scss
+++ b/front/src/style/globals/_utils.scss
@ -1,10 +1,11 @@
-
 .center.aligned.menu {
  justify-content: center;
 }
+
 .text.center.aligned {
  text-align: center;
 }
+
 .ellipsis:not(.icon) {
  text-overflow: ellipsis;
  white-space: nowrap;
@ -24,9 +25,11 @@
 a {
  cursor: pointer;
 }
+
 .segment.hidden {
  display: none;
 }
+
 .hidden:not(.divider) {
  display: none !important;
 }
@ -53,21 +56,25 @@ a {
    display: none !important;
  }
 }
+
 .desktop-and-below {
  @include media(">=desktop") {
    display: none !important;
  }
 }
+
 .tablet-and-up {
  @include media("<tablet") {
    display: none !important;
  }
 }
+
 .tablet-and-below {
  @include media(">=tablet") {
    display: none !important;
  }
 }
+
 .mobile-only {
  @include media(">tablet") {
    display: none !important;
@ -91,7 +98,7 @@ a {
 }

 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 {
  color: var(--discrete-text-color);
 }
+
 .really.discrete {
  color: var(--really-discrete-text-color);
 }

 .ui.inverted.dimmer {
  background-color: var(--dimmer-background);
-  > .ui.dimmer {
+
+  >.ui.dimmer {
    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: "%";
+  }
+}
--- a/front/src/views/library/LibraryBase.vue
+++ b/front/src/views/library/LibraryBase.vue
@ -171,14 +171,17 @@ const updateUploads = (count: number) => {
            <span
              v-else-if="object.privacy_level === 'everyone'"
              :title="labels.tooltips.everyone"
+              class="middledot icon"
            >
              <i class="globe icon" />
              {{ labels.visibility.everyone }}
-            </span> ·
-            <i class="music icon" />
-            {{ $t('views.library.LibraryBase.trackCount', {count: object.uploads_count}) }}
+            </span>
+            <span class="middledot icon">
+              <i class="music icon" />
+              {{ $t('views.library.LibraryBase.trackCount', {count: object.uploads_count}) }}
+            </span>
            <span v-if="object.size">
-              · <i class="database icon" />
+              <i class="database icon" />
              {{ humanSize(object.size) }}
            </span>
          </p>