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

fix(front): various UI improvements for group page

Browse source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-05-26 18:17:27 +02:00
parent ec7ca4ddf1
commit b0975672c1
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 19 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/src/components/Discussion/DiscussionListItem.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<router-link <router-link
class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b" class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent"
dir="auto" dir="auto"
:to="{ :to="{
name: RouteName.DISCUSSION, name: RouteName.DISCUSSION,

5
js/src/components/Group/Sections/ResourcesSection.vue
View file

@ -8,7 +8,10 @@
}" }"
> >
<template #default> <template #default>
<div v-if="group?.resources?.elements?.length ?? 0 > 0" class="p-1"> <div
v-if="group?.resources?.elements?.length ?? 0 > 0"
class="p-1 bg-white dark:bg-transparent"
>
<div <div
v-for="resource in group?.resources?.elements ?? []" v-for="resource in group?.resources?.elements ?? []"
:key="resource.id" :key="resource.id"

4
js/src/components/Post/MultiPostListItem.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="posts-wrapper"> <div class="posts-wrapper grid gap-4">
<post-list-item <post-list-item
v-for="post in posts" v-for="post in posts"
:key="post.id" :key="post.id"
@ -22,8 +22,6 @@ withDefaults(
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.posts-wrapper { .posts-wrapper {
display: grid;
grid-gap: 20px;
grid-template: 1fr; grid-template: 1fr;
} }
</style> </style>

2
js/src/components/Resource/FolderItem.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="resource-wrapper" dir="auto"> <div class="resource-wrapper bg-white dark:bg-transparent" dir="auto">
<router-link <router-link
:to="{ :to="{
name: RouteName.RESOURCE_FOLDER, name: RouteName.RESOURCE_FOLDER,

36
js/src/components/Resource/ResourceItem.vue
View file

@ -1,7 +1,12 @@
<template> <template>
<div class="flex flex-1 items-center w-full" dir="auto"> <div
class="flex flex-1 items-center w-full bg-white dark:bg-transparent"
dir="auto"
>
<a :href="resource.resourceUrl" target="_blank"> <a :href="resource.resourceUrl" target="_blank">
<div class="preview text-mbz-purple dark:text-mbz-purple-300"> <div
class="min-w-fit relative flex items-center justify-center text-mbz-purple dark:text-mbz-purple-300"
>
<div <div
v-if=" v-if="
resource.type && resource.type &&
@ -14,10 +19,12 @@
customSize="48" customSize="48"
/> />
</div> </div>
<div <img
class="preview-image"
v-else-if="resource.metadata && resource.metadata.imageRemoteUrl" v-else-if="resource.metadata && resource.metadata.imageRemoteUrl"
:style="`background-image: url(${resource.metadata.imageRemoteUrl})`" :src="resource.metadata.imageRemoteUrl"
alt=""
height="48"
width="48"
/> />
<div class="preview-type" v-else> <div class="preview-type" v-else>
<Link :size="48" /> <Link :size="48" />
@ -99,25 +106,6 @@ a {
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
.preview {
flex: 0 0 50px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.preview-image {
border-radius: 4px 0 0 4px;
display: block;
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: 50%;
}
}
.body { .body {
img.favicon { img.favicon {
display: inline-block; display: inline-block;