Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

Handle categories page empty and fix attribution section

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-11 14:59:13 +02:00
parent b514d417c0
commit ff1fbdfdba
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 16 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
js/src/views/CategoriesView.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div class="container mx-auto py-4 md:py-12 px-2 md:px-60"> <div class="container mx-auto py-4 md:py-12 px-2 md:px-60">
<main> <main>
<div class="flex flex-wrap items-center justify-center gap-3 md:gap-4"> <h1>{{ t('Category list')}}</h1>
<div class="flex flex-wrap items-center justify-center gap-3 md:gap-4" v-if="promotedCategories.length > 0">
<CategoryCard <CategoryCard
v-for="category in promotedCategories" v-for="category in promotedCategories"
:key="category.key" :key="category.key"
@ -9,41 +10,22 @@
:with-details="true" :with-details="true"
/> />
</div> </div>
<div v-else>
<EmptyContent icon="image" :inline="true">
{{ t('No categories with public upcoming events on this instance were found.') }}
</EmptyContent>
</div>
<div <div
class="mx-auto w-full max-w-lg rounded-2xl dark:bg-gray-800 p-2 mt-10" class="mx-auto w-full max-w-lg rounded-2xl dark:bg-gray-800 p-2 mt-10"
> >
<div <o-collapse v-model:open="isLicencePanelOpen" :aria-id="'contentIdForA11y5'">
class="card" <template #trigger>
animation="slide" <o-button aria-controls="contentIdForA11y1" :icon-right="isLicencePanelOpen ? 'chevron-up' : 'chevron-down'">
:open="isLicencePanelOpen" {{ t("Category illustrations credits") }}
@open="isLicencePanelOpen = !isLicencePanelOpen" </o-button>
:aria-id="'contentIdForA11y5'" </template>
> <div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
<div>
<button
class="flex w-full justify-between rounded-lg px-4 py-2 text-left text-sm font-medium dark:text-zinc-300"
>
{{ t("Category illustrations credits") }}
<svg
width="24"
height="24"
:class="isLicencePanelOpen ? 'transform rotate-90' : ''"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="{2}"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 5l7 7-7 7"
/>
</svg>
</button>
</div>
<div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
<p <p
v-for="(categoryLicence, key) in categoriesPicturesLicences" v-for="(categoryLicence, key) in categoriesPicturesLicences"
:key="key" :key="key"
@ -88,7 +70,7 @@
/> />
</p> </p>
</div> </div>
</div> </o-collapse>
</div> </div>
</main> </main>
</div> </div>
@ -107,6 +89,7 @@ import {
} from "@/components/Categories/constants"; } from "@/components/Categories/constants";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useEventCategories } from "@/composition/apollo/config"; import { useEventCategories } from "@/composition/apollo/config";
import EmptyContent from "@/components/Utils/EmptyContent.vue";
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });