potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Fix MyGroups and MyEvents views

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-01-27 15:00:26 +01:00
parent 8ce1f596cc
commit 1a03c49fa4
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 47 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
js/src/utils/support.ts
View file

@ -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;
}

39
js/src/views/Event/MyEventsView.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="container mx-auto px-1"> <div class="container mx-auto px-1 mb-6">
<h1> <h1>
{{ t("My events") }} {{ t("My events") }}
</h1> </h1>
@ -151,8 +151,8 @@
true // !$apollo.loading true // !$apollo.loading
" "
> >
<div class="img-container h-64" /> <div class="img-container h-64 prose" />
<div class="text-center prose dark:prose-invert"> <div class="text-center prose dark:prose-invert max-w-full">
<p> <p>
{{ {{
t( t(
@ -170,9 +170,13 @@
}}</router-link> }}</router-link>
</template> </template>
<template #explore_events> <template #explore_events>
<router-link :to="{ name: RouteName.SEARCH }">{{ <router-link
t("explore the events") :to="{
}}</router-link> name: RouteName.SEARCH,
query: { contentType: ContentType.EVENTS },
}"
>{{ t("explore the events") }}</router-link
>
</template> </template>
</i18n-t> </i18n-t>
</div> </div>
@ -211,7 +215,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ParticipantRole } from "@/types/enums"; import { ParticipantRole, ContentType } from "@/types/enums";
import RouteName from "@/router/name"; import RouteName from "@/router/name";
import type { IParticipant } from "../../types/participant.model"; import type { IParticipant } from "../../types/participant.model";
import { LOGGED_USER_DRAFTS } from "../../graphql/actor"; import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
@ -438,3 +442,24 @@ useHead({
title: computed(() => t("My events")), title: computed(() => t("My events")),
}); });
</script> </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>

39
js/src/views/Group/MyGroups.vue
View file

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