mirror of
https://framagit.org/framasoft/mobilizon.git
synced 2024-12-25 01:12:30 +00:00
Fix MyGroups and MyEvents views
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
8ce1f596cc
commit
1a03c49fa4
3 changed files with 47 additions and 41 deletions
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue