tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests 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>
<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>

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

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