Update:Library stats to format numbers using selected language #2861,…

… clean up UI for library stats preview icons
advplyr · Apr 18, 2024 · a57fe42 · a57fe42
1 parent b03198a
commit a57fe42
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/client/components/stats/PreviewIcons.vue b/client/components/stats/PreviewIcons.vue
@@ -1,45 +1,45 @@
 <template>
- <div class="flex flex-wrap justify-center mt-6">
- <div class="flex px-2">
- <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
+ <div class="flex flex-wrap justify-between mt-6 px-8">
+ <div class="flex p-2">
+ <svg class="h-14 w-14" viewBox="0 0 24 24">
  <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
  </svg>
- <div class="px-2">
- <p class="text-4xl md:text-5xl font-bold">{{ totalItems }}</p>
+ <div class="px-1">
+ <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(totalItems) }}</p>
  <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsInLibrary }}</p>
  </div>
  </div>
 
- <div class="flex px-4">
- <span class="material-icons text-7xl">show_chart</span>
+ <div class="flex p-2">
+ <span class="material-icons text-5xl py-1">show_chart</span>
  <div class="px-1">
- <p class="text-4xl md:text-5xl font-bold">{{ totalTime }}</p>
+ <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(totalTime) }}</p>
  <p class="text-xs md:text-sm text-white text-opacity-80">{{ useOverallHours ? $strings.LabelStatsOverallHours : $strings.LabelStatsOverallDays }}</p>
  </div>
  </div>
 
- <div v-if="isBookLibrary" class="flex px-4">
- <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
+ <div v-if="isBookLibrary" class="flex p-2">
+ <svg class="h-14 w-14" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
  </svg>
  <div class="px-1">
- <p class="text-4xl md:text-5xl font-bold">{{ totalAuthors }}</p>
+ <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(totalAuthors) }}</p>
  <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAuthors }}</p>
  </div>
  </div>
 
- <div class="flex px-4">
- <span class="material-icons-outlined text-6xl pt-1">insert_drive_file</span>
+ <div class="flex p-2">
+ <span class="material-icons-outlined text-5xl pt-1">insert_drive_file</span>
  <div class="px-1">
- <p class="text-4xl md:text-5xl font-bold">{{ totalSizeNum }}</p>
+ <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(totalSizeNum) }}</p>
  <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelSize }} ({{ totalSizeMod }})</p>
  </div>
  </div>
 
- <div class="flex px-4">
- <span class="material-icons-outlined text-6xl pt-1">audio_file</span>
+ <div class="flex p-2">
+ <span class="material-icons-outlined text-5xl pt-1">audio_file</span>
  <div class="px-1">
- <p class="text-4xl md:text-5xl font-bold">{{ numAudioTracks }}</p>
+ <p class="text-4.5xl leading-none font-bold">{{ $formatNumber(numAudioTracks) }}</p>
  <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsAudioTracks }}</p>
  </div>
  </div>

diff --git a/client/plugins/i18n.js b/client/plugins/i18n.js
@@ -74,6 +74,10 @@ Vue.prototype.$getString = (key, subs) => {
  return Vue.prototype.$strings[key]
 }
 
+Vue.prototype.$formatNumber = (num) => {
+ return Intl.NumberFormat(Vue.prototype.$languageCodes.current).format(num)
+}
+
 const translations = {
  [defaultCode]: enUsStrings
 }

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -86,7 +86,8 @@ module.exports = {
  fontSize: {
  xxs: '0.625rem',
  '1.5xl': '1.375rem',
- '2.5xl': '1.6875rem'
+ '2.5xl': '1.6875rem',
+ '4.5xl': '2.625rem'
  },
  zIndex: {
  '50': 50,