Use multiplication symbol instead of letter x

Use the proper multiplication symbol for the playback speed. The order
of the number and symbol is reversed so it is read "times 1.0" instead
of "1.0 times" (or previously "1.0 x"). Between the symbol and the
number, a narrow no-break space ( ) is added for proper spacing.
The classes of some spans are removed for better alignment.
This commit is contained in:
Miró Allard 2025-03-11 12:58:18 +01:00
parent ef77a88fce
commit f7f80e03e0

View File

@ -1,7 +1,7 @@
<template>
<div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
<div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
<span class="text-gray-200 text-sm sm:text-base">{{ playbackRateDisplay }}<span class="text-base">x</span></span>
<span class="text-gray-200 text-sm sm:text-base">×&#8239;{{ playbackRateDisplay }}</span>
</div>
<div v-show="showMenu" class="absolute -top-[5.5rem] z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
<div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
@ -11,7 +11,7 @@
<template v-for="rate in rates">
<div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
<div class="w-full h-full flex justify-center items-center">
<p class="text-xs text-center">{{ rate }}<span class="text-sm">x</span></p>
<p class="text-xs text-center">×&#8239;{{ rate }}</p>
</div>
</div>
</template>
@ -19,7 +19,7 @@
<div class="w-full py-1 px-1">
<div class="flex items-center justify-between">
<ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
<p class="px-2 text-2xl sm:text-3xl">{{ playbackRateDisplay }}<span class="text-2xl">x</span></p>
<p class="px-2 text-2xl sm:text-3xl"><span class="text-2xl">×&#8239;</span>{{ playbackRateDisplay }}</p>
<ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
</div>
</div>