mirror of
				https://github.com/advplyr/audiobookshelf.git
				synced 2025-10-27 11:18:14 +01:00 
			
		
		
		
	Merge pull request #2797 from mikiher/rtl-fixes
Add dir="auto" attribute where RTL display is needed
This commit is contained in:
		
						commit
						1396a432a4
					
				@ -6,7 +6,7 @@
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <!-- Alternative bookshelf title/author/sort -->
 | 
			
		||||
    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
 | 
			
		||||
    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" dir="auto" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
 | 
			
		||||
      <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
 | 
			
		||||
        <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
 | 
			
		||||
          <p ref="displayTitle" class="truncate">{{ displayTitle }}</p>
 | 
			
		||||
 | 
			
		||||
@ -29,7 +29,7 @@
 | 
			
		||||
          <td class="text-center w-20 min-w-20">
 | 
			
		||||
            <p>{{ episode.episode }}</p>
 | 
			
		||||
          </td>
 | 
			
		||||
          <td>
 | 
			
		||||
          <td dir="auto">
 | 
			
		||||
            {{ episode.title }}
 | 
			
		||||
          </td>
 | 
			
		||||
          <td class="font-mono text-center">
 | 
			
		||||
 | 
			
		||||
@ -15,8 +15,8 @@
 | 
			
		||||
          <p class="text-xs text-gray-300">{{ podcastAuthor }}</p>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <p class="text-lg font-semibold mb-6">{{ title }}</p>
 | 
			
		||||
      <div v-if="description" class="default-style" v-html="description" />
 | 
			
		||||
      <p dir="auto" class="text-lg font-semibold mb-6">{{ title }}</p>
 | 
			
		||||
      <div v-if="description" dir="auto" class="default-style" v-html="description" />
 | 
			
		||||
      <p v-else class="mb-2">{{ $strings.MessageNoDescription }}</p>
 | 
			
		||||
    </div>
 | 
			
		||||
  </modals-modal>
 | 
			
		||||
 | 
			
		||||
@ -21,7 +21,7 @@
 | 
			
		||||
          <td class="text-left">
 | 
			
		||||
            <p class="px-4">{{ chapter.id }}</p>
 | 
			
		||||
          </td>
 | 
			
		||||
          <td>
 | 
			
		||||
          <td dir="auto">
 | 
			
		||||
            {{ chapter.title }}
 | 
			
		||||
          </td>
 | 
			
		||||
          <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
 | 
			
		||||
 | 
			
		||||
@ -30,7 +30,7 @@
 | 
			
		||||
                  <widgets-podcast-type-indicator :type="downloadQueued.episodeType" />
 | 
			
		||||
                </div>
 | 
			
		||||
              </td>
 | 
			
		||||
              <td class="px-4">
 | 
			
		||||
              <td dir="auto" class="px-4">
 | 
			
		||||
                {{ downloadQueued.episodeDisplayTitle }}
 | 
			
		||||
              </td>
 | 
			
		||||
              <td class="text-xs">
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@
 | 
			
		||||
  <div :id="`lazy-episode-${index}`" class="w-full h-full cursor-pointer" @mouseover="mouseover" @mouseleave="mouseleave">
 | 
			
		||||
    <div class="flex" @click="clickedEpisode">
 | 
			
		||||
      <div class="flex-grow">
 | 
			
		||||
        <div class="flex items-center">
 | 
			
		||||
        <div dir="auto" class="flex items-center">
 | 
			
		||||
          <span class="text-sm font-semibold">{{ episodeTitle }}</span>
 | 
			
		||||
          <widgets-podcast-type-indicator :type="episodeType" />
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div ref="wrapper" class="relative">
 | 
			
		||||
    <input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
 | 
			
		||||
    <input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
 | 
			
		||||
    <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
 | 
			
		||||
      <span class="material-icons text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <textarea ref="input" v-model="inputValue" :rows="rows" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="py-2 px-3 rounded bg-primary text-gray-200 focus:border-gray-500 focus:outline-none" :class="transparent ? '' : 'border border-gray-600'" @change="change" />
 | 
			
		||||
  <textarea ref="input" v-model="inputValue" :rows="rows" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="py-2 px-3 rounded bg-primary text-gray-200 focus:border-gray-500 focus:outline-none" :class="transparent ? '' : 'border border-gray-600'" @change="change" />
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
 | 
			
		||||
@ -125,7 +125,7 @@
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
          <div class="my-4 w-full">
 | 
			
		||||
            <p ref="description" id="item-description" class="text-base text-gray-100 whitespace-pre-line mb-1" :class="{ 'show-full': showFullDescription }">{{ description }}</p>
 | 
			
		||||
            <p ref="description" id="item-description" dir="auto" class="text-base text-gray-100 whitespace-pre-line mb-1" :class="{ 'show-full': showFullDescription }">{{ description }}</p>
 | 
			
		||||
            <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">
 | 
			
		||||
              {{ showFullDescription ? 'Read less' : 'Read more' }} <span class="material-icons text-xl pl-1">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
 | 
			
		||||
            </button>
 | 
			
		||||
 | 
			
		||||
@ -40,12 +40,12 @@
 | 
			
		||||
                <div v-if="episode.episode">{{ episode.episode }}</div>
 | 
			
		||||
              </div>
 | 
			
		||||
 | 
			
		||||
              <div class="flex items-center mb-2">
 | 
			
		||||
              <div dir="auto" class="flex items-center mb-2">
 | 
			
		||||
                <div class="font-semibold text-sm md:text-base">{{ episode.title }}</div>
 | 
			
		||||
                <widgets-podcast-type-indicator :type="episode.episodeType" />
 | 
			
		||||
              </div>
 | 
			
		||||
 | 
			
		||||
              <p class="text-sm text-gray-200 mb-4 line-clamp-4" v-html="episode.subtitle || episode.description" />
 | 
			
		||||
              <p dir="auto" class="text-sm text-gray-200 mb-4 line-clamp-4" v-html="episode.subtitle || episode.description" />
 | 
			
		||||
 | 
			
		||||
              <div class="flex items-center">
 | 
			
		||||
                <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="episode.progress && episode.progress.isFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick(episode)">
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user