Fix MyGroups and MyEvents views

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

js/src/utils/support.ts

@@ -1,10 +0,0 @@
-export function supportsWebPFormat(): boolean {
-  const elem = document.createElement("canvas");
-
-  if (elem.getContext && elem.getContext("2d")) {
-    // was able or not to get WebP representation
-    return elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
-  }
-  // very old browser like IE 8, canvas not supported
-  return false;
-}

js/src/views/Event/MyEventsView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container mx-auto px-1">
+  <div class="container mx-auto px-1 mb-6">
     <h1>
       {{ t("My events") }}
     </h1>
@@ -151,8 +151,8 @@
             true // !$apollo.loading
           "
         >
-          <div class="img-container h-64" />
-          <div class="text-center prose dark:prose-invert">
+          <div class="img-container h-64 prose" />
+          <div class="text-center prose dark:prose-invert max-w-full">
             <p>
               {{
                 t(
@@ -170,9 +170,13 @@
                 }}</router-link>
               </template>
               <template #explore_events>
-                <router-link :to="{ name: RouteName.SEARCH }">{{
-                  t("explore the events")
-                }}</router-link>
+                <router-link
+                  :to="{
+                    name: RouteName.SEARCH,
+                    query: { contentType: ContentType.EVENTS },
+                  }"
+                  >{{ t("explore the events") }}</router-link
+                >
               </template>
             </i18n-t>
           </div>
@@ -211,7 +215,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ParticipantRole } from "@/types/enums";
+import { ParticipantRole, ContentType } from "@/types/enums";
 import RouteName from "@/router/name";
 import type { IParticipant } from "../../types/participant.model";
 import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
@@ -438,3 +442,24 @@ useHead({
   title: computed(() => t("My events")),
 });
 </script>
+
+<style lang="scss">
+.not-found {
+  .img-container {
+    background-image: url("../../../img/pics/event_creation-480w.webp");
+
+    @media (min-resolution: 2dppx) {
+      & {
+        background-image: url("../../../img/pics/event_creation-1024w.webp");
+      }
+    }
+
+    max-width: 450px;
+    height: 300px;
+    box-shadow: 0 0 8px 8px white inset;
+    background-size: cover;
+    border-radius: 10px;
+    margin: auto auto 1rem;
+  }
+}
+</style>

js/src/views/Group/MyGroups.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="container mx-auto">
+  <section class="container mx-auto px-1 mb-6">
     <h1 class="title">{{ t("My groups") }}</h1>
     <p>
       {{
@@ -48,25 +48,25 @@
     >
       <div class="">
         <div class="">
-          <div class="img-container" :class="{ webp: supportsWebPFormat }" />
-          <div class="text-center">
+          <div class="img-container" />
+          <div class="text-center prose dark:prose-invert max-w-full">
             <p>
               {{ t("You are not part of any group.") }}
               <i18n-t
                 keypath="Do you wish to {create_group} or {explore_groups}?"
               >
                 <template #create_group>
-                  <o-button
-                    tag="router-link"
-                    :to="{ name: RouteName.CREATE_GROUP }"
-                    >{{ t("create a group") }}</o-button
-                  >
+                  <router-link :to="{ name: RouteName.CREATE_GROUP }">{{
+                    t("create a group")
+                  }}</router-link>
                 </template>
                 <template #explore_groups>
-                  <o-button
-                    tag="router-link"
-                    :to="{ name: RouteName.SEARCH }"
-                    >{{ t("explore the groups") }}</o-button
+                  <router-link
+                    :to="{
+                      name: RouteName.SEARCH,
+                      query: { contentType: ContentType.GROUPS },
+                    }"
+                    >{{ t("explore the groups") }}</router-link
                   >
                 </template>
               </i18n-t>
@@ -85,8 +85,7 @@ import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
 import InvitationsList from "@/components/Group/InvitationsList.vue";
 import { usernameWithDomain } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
-import { MemberRole } from "@/types/enums";
-import { supportsWebPFormat } from "@/utils/support";
+import { MemberRole, ContentType } from "@/types/enums";
 import RouteName from "../../router/name";
 import { useRestrictions } from "@/composition/apollo/config";
 import { useMutation, useQuery } from "@vue/apollo-composable";
@@ -205,19 +204,11 @@ section {
 
 .not-found {
   .img-container {
-    background-image: url("../../../public/img/pics/group-480w.webp");
+    background-image: url("../../../img/pics/group-480w.webp");
 
     @media (min-resolution: 2dppx) {
       & {
-        background-image: url("../../../public/img/pics/group-1024w.webp");
-      }
-    }
-    &.webp {
-      background-image: url("../../../public/img/pics/group-480w.webp");
-      @media (min-resolution: 2dppx) {
-        & {
-          background-image: url("../../../public/img/pics/group-1024w.webp");
-        }
+        background-image: url("../../../img/pics/group-1024w.webp");
       }
     }