#1546 Harmonization between public and private view + improved CSS

src/components/Group/GroupSection.vue

@@ -1,15 +1,15 @@
 <template>
-  <section class="flex flex-col mb-3 border-2 border-yellow-1">
+  <section class="flex flex-col border-2 border-yellow-1 rounded-lg">
     <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
       <div class="flex flex-1 gap-1">
         <o-icon :icon="icon" custom-size="36" />
         <h2 class="text-2xl font-medium mt-0">{{ title }}</h2>
       </div>
-      <router-link class="self-center" :to="route">{{
+      <router-link v-if="route" class="self-center" :to="route">{{
         t("View all")
       }}</router-link>
     </div>
-    <div class="flex-1">
+    <div class="flex-1 min-h-40">
       <slot></slot>
     </div>
     <div class="flex justify-end p-2">
@@ -27,7 +27,7 @@ withDefaults(
     icon: string;
     route: { name: string; params: { preferredUsername: string } };
   }>(),
-  {}
+  { route: undefined }
 );
 const { t } = useI18n({ useScope: "global" });
 </script>

src/components/Group/Sections/EventsSection.vue

@@ -9,7 +9,7 @@
   >
     <template #default>
       <div
-        class="flex flex-wrap gap-2 py-1"
+        class="flex flex-wrap gap-2 p-2"
         v-if="group && group.organizedEvents.total > 0"
       >
         <event-minimalist-card
@@ -24,6 +24,17 @@
       <!-- <o-skeleton animated v-else></o-skeleton> -->
     </template>
     <template #create>
+      <o-button
+        tag="router-link"
+        class="button"
+        variant="text"
+        :to="{
+          name: RouteName.GROUP_EVENTS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          query: { showPassedEvents: true },
+        }"
+        >{{ t("View past events") }}</o-button
+      >
       <o-button
         tag="router-link"
         v-if="isModerator"

src/components/Group/Sections/PostsSection.vue

@@ -8,9 +8,22 @@
     }"
   >
     <template #default>
-      <div class="p-1">
+      <div class="p-2">
         <multi-post-list-item
-          v-if="group?.posts?.total ?? 0 > 0"
+          v-if="
+            !isMember &&
+            group?.posts.elements.filter(
+              (post) => !post.draft && post.visibility === PostVisibility.PUBLIC
+            ).length > 0
+          "
+          :posts="
+            group?.posts.elements.filter(
+              (post) => !post.draft && post.visibility === PostVisibility.PUBLIC
+            )
+          "
+        />
+        <multi-post-list-item
+          v-else-if="group?.posts?.total ?? 0 > 0"
           :posts="(group?.posts?.elements ?? []).slice(0, 3)"
           :isCurrentActorMember="isMember"
         />
@@ -42,6 +55,7 @@ import { useI18n } from "vue-i18n";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
 import GroupSection from "@/components/Group/GroupSection.vue";
+import { PostVisibility } from "@/types/enums";
 
 const { t } = useI18n({ useScope: "global" });
 

src/components/Post/MultiPostListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="posts-wrapper grid gap-4">
+  <div class="posts-wrapper grid gap-2">
     <post-list-item
       v-for="post in posts"
       :key="post.id"

src/components/core/MaterialIcon.vue

@@ -29,6 +29,10 @@ const icons: Record<string, () => Promise<any>> = {
     import(`../../../node_modules/vue-material-design-icons/LinkOff.vue`),
   Image: () =>
     import(`../../../node_modules/vue-material-design-icons/Image.vue`),
+  Information: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/InformationVariant.vue`
+    ),
   FormatListBulleted: () =>
     import(
       `../../../node_modules/vue-material-design-icons/FormatListBulleted.vue`