Add dir="auto" to most user generated content

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

js/src/views/Account/children/EditIdentity.vue

@@ -47,6 +47,7 @@
           v-model="identity.name"
           @input="autoUpdateUsername($event)"
           id="identity-display-name"
+          dir="auto"
         />
       </b-field>
 
@@ -64,6 +65,7 @@
             required
             v-model="identity.preferredUsername"
             :disabled="isUpdate"
+            dir="auto"
             :use-html5-validation="!isUpdate"
             pattern="[a-z0-9_]+"
             id="identity-username"
@@ -82,6 +84,7 @@
       >
         <b-input
           type="textarea"
+          dir="auto"
           aria-required="false"
           v-model="identity.summary"
           id="identity-summary"
@@ -190,7 +193,8 @@
   </div>
 </template>
 
-<style scoped type="scss">
+<style scoped lang="scss">
+@use "@/styles/_mixins" as *;
 h1 {
   display: flex;
   justify-content: center;

js/src/views/Discussions/Discussion.vue

@@ -45,7 +45,7 @@
       {{ error }}
     </b-message>
     <section>
-      <div class="discussion-title">
+      <div class="discussion-title" dir="auto">
         <h1 class="title" v-if="discussion.title && !editTitleMode">
           {{ discussion.title }}
         </h1>

js/src/views/Discussions/DiscussionsList.vue

@@ -65,7 +65,7 @@
         {{ $t("There's no discussions yet") }}
       </empty-content>
     </section>
-    <section class="section" v-else>
+    <section class="section" v-else-if="!$apollo.loading">
       <empty-content icon="chat">
         {{ $t("Only group members can access discussions") }}
         <template #desc>

js/src/views/Event/Event.vue

@@ -10,9 +10,11 @@
         <section class="intro">
           <div class="columns">
             <div class="column">
-              <h1 class="title" style="margin: 0">{{ event.title }}</h1>
+              <h1 class="title" style="margin: 0" dir="auto">
+                {{ event.title }}
+              </h1>
               <div class="organizer">
-                <span v-if="event.organizerActor && !event.attributedTo">
+                <div v-if="event.organizerActor && !event.attributedTo">
                   <popover-actor-card
                     :actor="event.organizerActor"
                     :inline="true"
@@ -25,7 +27,7 @@
                       }}
                     </span>
                   </popover-actor-card>
-                </span>
+                </div>
                 <span
                   v-else-if="
                     event.attributedTo &&
@@ -70,7 +72,11 @@
                   </i18n>
                 </span>
               </div>
-              <p class="tags" v-if="event.tags && event.tags.length > 0">
+              <p
+                class="tags"
+                v-if="event.tags && event.tags.length > 0"
+                dir="auto"
+              >
                 <router-link
                   v-for="tag in event.tags"
                   :key="tag.title"
@@ -316,6 +322,7 @@
             </p>
             <div v-else>
               <div
+                dir="auto"
                 class="description-content"
                 ref="eventDescriptionElement"
                 v-html="event.description"

js/src/views/Posts/Post.vue

@@ -5,7 +5,7 @@
         <lazy-image-wrapper :picture="post.picture" />
       </div>
       <div class="heading-section">
-        <div class="heading-wrapper">
+        <div class="heading-wrapper" dir="auto">
           <div class="title-metadata">
             <div class="title-wrapper">
               <b-tag
@@ -165,8 +165,8 @@
       }}
     </b-message>
 
-    <section v-html="post.body" class="content" />
-    <section class="tags">
+    <section v-html="post.body" dir="auto" class="content" />
+    <section class="tags" dir="auto">
       <router-link
         v-for="tag in post.tags"
         :key="tag.title"