Resolve "Forum 3: Diskussion-Footer erhält keinen linken roten Rand, wenn er zwischen neuen Beiträgen liegt"

Closes #5817

Merge request studip/studip!4469

3 files changed, 65 insertions, 48 deletions

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 0fab91c..9e3bbbb 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -497,7 +497,6 @@ $card-max-width: 300px;
 
         &__unread {
             width: 5px;
-            margin-right: 15px;
             background-color: $red;
         }
 
@@ -666,6 +665,10 @@ $card-max-width: 300px;
     .discussion {
         background-color: var(--color--main-navigation-background);
 
+        hr {
+            margin: 0;
+        }
+
         &__status,
         &__body,
         &__form-container {
@@ -677,7 +680,12 @@ $card-max-width: 300px;
             gap: 15px;
         }
 
+        &__footer {
+            display: flex;
+        }
+
         &__status {
+            flex: 1;
             display: flex;
             align-items: center;
             flex-wrap: wrap;
diff --git a/resources/vue/apps/forum/discussions/Show.vue b/resources/vue/apps/forum/discussions/Show.vue
index 51d8daf..9c0d1c0 100644
--- a/resources/vue/apps/forum/discussions/Show.vue
+++ b/resources/vue/apps/forum/discussions/Show.vue
@@ -46,7 +46,7 @@ const props = defineProps({
 });
 
 const isLoading = ref(false);
-const postCreateForm = ref(false)
+const postCreateForm = ref(false);
 
 const editDiscussion = id => STUDIP.Dialog.fromURL(
     STUDIP.URLHelper.getURL(`dispatch.php/course/forum/discussions/edit/${id}`),
@@ -74,7 +74,7 @@ const goBackURL = computed(() => {
 });
 
 const canEditDiscussion = computed(() => {
-    return forumConfig.isModerator || props.discussion.user_id === STUDIP.USER_ID
+    return forumConfig.isModerator || props.discussion.user_id === STUDIP.USER_ID;
 })
 
 const fetchPostings = async () => {
@@ -137,9 +137,9 @@ onMounted(async () => {
         // remove highlights
         document.getElementById("discussion_start").addEventListener("click", function() {
             removeHighlight('.post-content mark');
-        })
+        });
     }
-})
+});
 </script>
 
 <template>
@@ -219,8 +219,8 @@ onMounted(async () => {
             <hr />
             <DiscussionFooter
                 :discussion="discussion"
-                :posts_count="posts.length"
-                :recent_activity="posts[posts.length - 1] ? posts[posts.length - 1].mkdate : null"
+                :posts="posts"
+                :read_index="read_index"
                 v-model:postCreateForm="postCreateForm"
             />
             <hr />
@@ -240,8 +240,7 @@ onMounted(async () => {
         <div v-if="posts.length > 3" class="discussion">
             <DiscussionFooter
                 :discussion="discussion"
-                :posts_count="posts.length"
-                :recent_activity="posts[posts.length - 1].mkdate"
+                :posts="posts"
                 v-model:postCreateForm="postCreateForm"
             />
         </div>
diff --git a/resources/vue/components/forum/discussions/DiscussionFooter.vue b/resources/vue/components/forum/discussions/DiscussionFooter.vue
index 5def908..293f657 100644
--- a/resources/vue/components/forum/discussions/DiscussionFooter.vue
+++ b/resources/vue/components/forum/discussions/DiscussionFooter.vue
@@ -5,61 +5,71 @@ import ForumMembers from "../ForumMembers.vue";
 import {$gettext} from "../../../../assets/javascripts/lib/gettext";
 import {numberFormatter} from "../../../../assets/javascripts/lib/number_formatter";
 import {useForumConfig} from "../../../store/pinia/forum/ForumConfig";
+import {computed} from "vue";
 
 const postCreateForm = defineModel('postCreateForm');
 
 const forumConfig = useForumConfig();
-defineProps({
+const props = defineProps({
     discussion: {
         type: Object,
         required: true
     },
-    posts_count: {
+    posts: {
+        type: Array,
+        required: true
+    },
+    read_index: {
         type: Number,
         default: 0
-    },
-    recent_activity: {
-        type: String,
     }
 });
+
+const recentActivity = computed(() => props.posts.at(-1)?.mkdate ?? props.discussion.mkdate);
+const hasUnreadPost = computed(() => {
+    return props.read_index < 2 && props.posts.length > 1 && props.posts[1].author.id !== STUDIP.USER_ID;
+});
 </script>
 
 <template>
-    <div class="discussion__status">
-        <div class="flex items-start gap-20">
-            <div class="text-center">
-                <p>{{ $gettext('Erstellt') }}</p>
-                <StudipDateTime :iso="discussion.mkdate" :date_only="true" />
-            </div>
-            <div class="text-center">
-                <p>{{ $gettext('Beiträge') }}</p>
-                <p>{{ posts_count }}</p>
-            </div>
-            <div class="text-center">
-                <p>{{ $gettext('Aufrufe') }}</p>
-                <p>{{ numberFormatter(discussion.view_count, 1) }}</p>
-            </div>
-            <div class="text-center">
-                <p>{{ $gettext('Aktivität') }}</p>
-                <StudipDateTime v-if="recent_activity" :iso="recent_activity" :relative="true" />
-                <StudipDateTime v-else :iso="discussion.mkdate" :relative="true"/>
+    <div class="discussion__footer">
+        <div v-if="!forumConfig.allowGuestAccess && hasUnreadPost" class="post__unread">
+        </div>
+        <div class="discussion__status">
+            <div class="flex items-start gap-20">
+                <div class="text-center">
+                    <p>{{ $gettext('Erstellt') }}</p>
+                    <StudipDateTime :iso="discussion.mkdate" :date_only="true" />
+                </div>
+                <div class="text-center">
+                    <p>{{ $gettext('Beiträge') }}</p>
+                    <p>{{ posts.length }}</p>
+                </div>
+                <div class="text-center">
+                    <p>{{ $gettext('Aufrufe') }}</p>
+                    <p>{{ numberFormatter(discussion.view_count, 1) }}</p>
+                </div>
+                <div class="text-center">
+                    <p>{{ $gettext('Aktivität') }}</p>
+                    <StudipDateTime :iso="recentActivity" :relative="true" />
+                </div>
             </div>
+            <ForumMembers :members="discussion.members" :limit="5" size="35px" />
+            <a
+                v-if="!forumConfig.allowGuestAccess && !discussion.closed_at"
+                href="#new-post"
+                class="button button--icon-label"
+                role="button"
+                :title="$gettext('Antworten')"
+                :aria-label="$gettext('Antworten')"
+                :class="{
+                    'disabled': postCreateForm
+                }"
+                @click="postCreateForm = true"
+            >
+                <StudipIcon shape="reply" :size="20" aria-hidden="true" />
+                {{ $gettext('Antworten') }}
+            </a>
         </div>
-        <ForumMembers :members="discussion.members" :limit="5" size="35px" />
-        <a
-            v-if="!forumConfig.allowGuestAccess && !discussion.closed_at"
-            href="#new-post"
-            class="button button--icon-label"
-            role="button"
-            :title="$gettext('Antworten')"
-            :aria-label="$gettext('Antworten')"
-            :class="{
-                'disabled': postCreateForm
-            }"
-            @click="postCreateForm = true"
-        >
-            <StudipIcon shape="reply" :size="20" aria-hidden="true" />
-            {{ $gettext('Antworten') }}
-        </a>
     </div>
 </template>