mirror
/
mobilizon
mirror of https://framagit.org/framasoft/mobilizon.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve CategoriesView 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-10-11 17:48:37 +02:00
parent 557e12948b
commit 9fe816ebcf
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,11 @@
<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>
<h1>{{ t('Category list')}}</h1> <h1>{{ t("Category list") }}</h1>
<div class="flex flex-wrap items-center justify-center gap-3 md:gap-4" v-if="promotedCategories.length > 0"> <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"
@ -12,20 +15,30 @@
</div> </div>
<div v-else> <div v-else>
<EmptyContent icon="image" :inline="true"> <EmptyContent icon="image" :inline="true">
{{ t('No categories with public upcoming events on this instance were found.') }} {{
t(
"No categories with public upcoming events on this instance were found."
)
}}
</EmptyContent> </EmptyContent>
</div> </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"
> >
<o-collapse v-model:open="isLicencePanelOpen" :aria-id="'contentIdForA11y5'"> <o-collapse
<template #trigger> v-model:open="isLicencePanelOpen"
<o-button aria-controls="contentIdForA11y1" :icon-right="isLicencePanelOpen ? 'chevron-up' : 'chevron-down'"> :aria-id="'contentIdForA11y5'"
{{ t("Category illustrations credits") }} >
</o-button> <template #trigger>
</template> <o-button
<div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1"> aria-controls="contentIdForA11y1"
:icon-right="isLicencePanelOpen ? 'chevron-up' : 'chevron-down'"
>
{{ t("Category illustrations credits") }}
</o-button>
</template>
<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"
@ -70,7 +83,7 @@
/> />
</p> </p>
</div> </div>
</o-collapse> </o-collapse>
</div> </div>
</main> </main>
</div> </div>