Front-end fixes

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

js/src/components/Group/GroupMemberCard.vue

@@ -20,9 +20,9 @@
       <div class="flex-1">
         <div class="p-2 flex gap-2">
           <div class="">
-            <figure class="" v-if="member.parent.avatar">
+            <figure class="h-12 w-12" v-if="member.parent.avatar">
               <img
-                class="rounded-lg"
+                class="rounded-full w-full h-full object-cover"
                 :src="member.parent.avatar.url"
                 alt=""
                 width="48"

js/src/views/Admin/GroupProfiles.vue

@@ -27,7 +27,7 @@
         paginated
         backend-pagination
         backend-filtering
-        :debounce-search="200"
+        :debounce-search="500"
         v-model:current-page="page"
         :aria-next-label="t('Next page')"
         :aria-previous-label="t('Previous page')"
@@ -72,9 +72,12 @@
                 <AccountGroup v-else :size="48" />
                 <div class="">
                   <div class="prose dark:prose-invert">
-                    <strong v-if="props.row.name">{{ props.row.name }}</strong
-                    ><br v-if="props.row.name" />
-                    <small>@{{ props.row.preferredUsername }}</small>
+                    <p v-if="props.row.name" class="font-bold mb-0">
+                      {{ props.row.name }}
+                    </p>
+                    <span class="text-sm"
+                      >@{{ props.row.preferredUsername }}</span
+                    >
                   </div>
                 </div>
               </article>
@@ -117,7 +120,7 @@ import {
 } from "vue-use-route-query";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@vueuse/head";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { Paginate } from "@/types/paginate";
 import { IGroup } from "@/types/actor";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
@@ -126,9 +129,10 @@ const PROFILES_PER_PAGE = 10;
 
 const { restrictions } = useRestrictions();
 
-const preferredUsername = useRouteQuery("preferredUsername", "");
-const name = useRouteQuery("name", "");
-const domain = useRouteQuery("domain", "");
+const preferredUsername = ref("");
+const name = ref("");
+const domain = ref("");
+
 const local = useRouteQuery("local", false, booleanTransformer);
 const suspended = useRouteQuery("suspended", false, booleanTransformer);
 const page = useRouteQuery("page", 1, integerTransformer);

js/src/views/Admin/ProfilesView.vue

@@ -20,7 +20,7 @@
         paginated
         backend-pagination
         backend-filtering
-        :debounce-search="200"
+        :debounce-search="500"
         v-model:current-page="page"
         :aria-next-label="t('Next page')"
         :aria-previous-label="t('Previous page')"
@@ -102,7 +102,7 @@ import RouteName from "@/router/name";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { useQuery } from "@vue/apollo-composable";
 import { useI18n } from "vue-i18n";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useHead } from "@vueuse/head";
 import {
   useRouteQuery,
@@ -115,9 +115,10 @@ import Account from "vue-material-design-icons/Account.vue";
 
 const PROFILES_PER_PAGE = 10;
 
-const preferredUsername = useRouteQuery("preferredUsername", "");
-const name = useRouteQuery("name", "");
-const domain = useRouteQuery("domain", "");
+const preferredUsername = ref("");
+const name = ref("");
+const domain = ref("");
+
 const local = useRouteQuery("local", false, booleanTransformer);
 const suspended = useRouteQuery("suspended", false, booleanTransformer);
 const page = useRouteQuery("page", 1, integerTransformer);

js/src/views/Group/MyGroups.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="container mx-auto">
-    <h1 class="title">{{ $t("My groups") }}</h1>
+    <h1 class="title">{{ t("My groups") }}</h1>
     <p>
       {{
-        $t(
+        t(
           "Groups are spaces for coordination and preparation to better organize events and manage your community."
         )
       }}
@@ -13,7 +13,7 @@
         tag="router-link"
         variant="primary"
         :to="{ name: RouteName.CREATE_GROUP }"
-        >{{ $t("Create group") }}</o-button
+        >{{ t("Create group") }}</o-button
       >
     </div>
     <o-loading v-model:active="loading"></o-loading>
@@ -35,10 +35,10 @@
         v-show="membershipsPages.total > limit"
         v-model="page"
         :per-page="limit"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
+        :aria-next-label="t('Next page')"
+        :aria-previous-label="t('Previous page')"
+        :aria-page-label="t('Page')"
+        :aria-current-label="t('Current page')"
       >
       </o-pagination>
     </section>
@@ -51,7 +51,7 @@
           <div class="img-container" :class="{ webp: supportsWebPFormat }" />
           <div class="text-center">
             <p>
-              {{ $t("You are not part of any group.") }}
+              {{ t("You are not part of any group.") }}
               <i18n-t
                 keypath="Do you wish to {create_group} or {explore_groups}?"
               >
@@ -59,14 +59,14 @@
                   <o-button
                     tag="router-link"
                     :to="{ name: RouteName.CREATE_GROUP }"
-                    >{{ $t("create a group") }}</o-button
+                    >{{ t("create a group") }}</o-button
                   >
                 </template>
                 <template #explore_groups>
                   <o-button
                     tag="router-link"
                     :to="{ name: RouteName.SEARCH }"
-                    >{{ $t("explore the groups") }}</o-button
+                    >{{ t("explore the groups") }}</o-button
                   >
                 </template>
               </i18n-t>

js/src/views/Moderation/LogsView.vue

@@ -21,11 +21,11 @@
         >
           <div class="flex gap-1">
             <div class="flex gap-1">
-              <figure class="" v-if="log.actor?.avatar">
+              <figure class="h-10 w-10" v-if="log.actor?.avatar">
                 <img
                   alt=""
                   :src="log.actor.avatar?.url"
-                  class="rounded-full"
+                  class="object-cover rounded-full h-full w-full"
                   width="36"
                   height="36"
                 />