More bidi improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/About/InstanceContactLink.vue

@@ -1,9 +1,9 @@
 <template>
   <p>
-    <a :title="contact" v-if="configLink" :href="configLink.uri">{{
+    <a dir="auto" :title="contact" v-if="configLink" :href="configLink.uri">{{
       configLink.text
     }}</a>
-    <span v-else-if="contact">{{ contact }}</span>
+    <span dir="auto" v-else-if="contact">{{ contact }}</span>
     <span v-else>{{ $t("contact uninformed") }}</span>
   </p>
 </template>

js/src/components/Account/ActorCard.vue

@@ -12,7 +12,7 @@
         {{ actor.name || `@${usernameWithDomain(actor)}` }}
       </p>
       <p class="has-text-grey-dark" v-if="actor.name">
-        @{{ usernameWithDomain(actor) }}
+        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
       </p>
       <div
         v-if="full"

js/src/components/Comment/Comment.vue

@@ -36,7 +36,7 @@
             <strong :class="{ organizer: commentFromOrganizer }">{{
               comment.actor.name
             }}</strong>
-            <small>@{{ usernameWithDomain(comment.actor) }}</small>
+            <small dir="ltr">@{{ usernameWithDomain(comment.actor) }}</small>
           </span>
           <a v-else class="comment-link" :href="commentURL">
             <span>{{ $t("[deleted]") }}</span>
@@ -128,7 +128,7 @@
           <div class="content">
             <span class="first-line">
               <strong>{{ currentActor.name }}</strong>
-              <small>@{{ currentActor.preferredUsername }}</small>
+              <small dir="ltr">@{{ currentActor.preferredUsername }}</small>
             </span>
             <br />
             <span class="editor-line">

js/src/components/Event/EventMetadataList.vue

@@ -25,6 +25,7 @@
         :placeholder="$t('e.g. Accessibility, Twitch, PeerTube')"
         id="event-metadata-autocomplete"
         @select="(option) => addElement(option)"
+        dir="auto"
       >
         <template slot-scope="props">
           <div class="media">

js/src/components/Event/EventMinimalistCard.vue

@@ -1,6 +1,7 @@
 <template>
   <router-link
     class="event-minimalist-card-wrapper"
+    dir="auto"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
     <div class="event-preview mr-0 ml-0">

js/src/components/Event/EventParticipationCard.vue

@@ -43,8 +43,8 @@
             </router-link>
           </div>
         </div>
-        <div class="list-card-content" dir="auto">
-          <div class="title-wrapper">
+        <div class="list-card-content">
+          <div class="title-wrapper" dir="auto">
             <router-link
               :to="{
                 name: RouteName.EVENT,

js/src/components/Event/FullAddressAutoComplete.vue

@@ -35,6 +35,7 @@
           v-bind="$attrs"
           :id="id"
           :disabled="disabled"
+          dir="auto"
         >
           <template #default="{ option }">
             <b-icon :icon="option.poiInfos.poiIcon.icon" />

js/src/components/Event/OrganizerPicker.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="list is-hoverable">
     <b-input
+      dir="auto"
       :placeholder="$t('Filter by profile or group name')"
       v-model="actorFilter"
     />
@@ -11,7 +12,7 @@
       v-for="availableActor in actualFilteredAvailableActors"
       :key="availableActor.id"
     >
-      <div class="media">
+      <div class="media" dir="auto">
         <figure class="image is-48x48" v-if="availableActor.avatar">
           <img
             class="media-left is-rounded"

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -4,6 +4,7 @@
     <div
       v-if="inline && selectedActor.id"
       class="inline box"
+      dir="auto"
       @click="isComponentModalActive = true"
     >
       <div class="media">
@@ -65,6 +66,7 @@
                 <b-input
                   :placeholder="$t('Filter by name')"
                   v-model="contactFilter"
+                  dir="auto"
                 />
                 <p
                   class="field"

js/src/components/Event/ParticipationButton.vue

@@ -123,8 +123,8 @@ A button to set your participation
         @keyup.enter="joinEvent(currentActor)"
       >
         <div class="media">
-          <div class="media-left">
-            <figure class="image is-32x32" v-if="currentActor.avatar">
+          <div class="media-left" v-if="currentActor.avatar">
+            <figure class="image is-32x32">
               <img class="is-rounded" :src="currentActor.avatar.url" alt />
             </figure>
           </div>

js/src/components/Event/TagInput.vue

@@ -23,6 +23,7 @@
       :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
       @typing="getFilteredTags"
       :id="id"
+      dir="auto"
     >
     </b-taginput>
   </b-field>

js/src/components/Post/PostListItem.vue

@@ -1,6 +1,7 @@
 <template>
   <router-link
     class="post-minimalist-card-wrapper"
+    dir="auto"
     :to="{ name: RouteName.POST, params: { slug: post.slug } }"
   >
     <lazy-image-wrapper
@@ -12,7 +13,7 @@
       <h3 class="post-minimalist-title">{{ post.title }}</h3>
       <p class="post-publication-date">
         <b-icon icon="clock" />
-        <span class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
+        <span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
           publishedAt | formatDateTimeString(undefined, false, "short")
         }}</span>
         <span v-else>{{

js/src/components/SearchField.vue

@@ -7,6 +7,7 @@
       icon="magnify"
       type="search"
       rounded
+      dir="auto"
       :placeholder="defaultPlaceHolder"
       v-model="search"
       @keyup.native.enter="enter"