Resolve "Forum-Styles überarbeiten"

Closes #5733

Merge request studip/studip!4362

4 files changed, 16 insertions, 36 deletions

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 4b309a4..fad29a0 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -309,11 +309,12 @@ $card-max-width: 300px;
 
     .topic-title,
     .category-title,
+    .subscription-title,
     .discussion-title {
         font-size: 16px;
     }
 
-    .discussion-overview {
+    .table-row-overview {
         p {
             margin-top: 5px;
             color: var(--color--font-secondary);
@@ -596,38 +597,17 @@ $card-max-width: 300px;
         &__button-group {
             display: inline-flex;
             align-items: center;
+            gap: 5px;
         }
 
+        &__show-reactions,
         &__add-reaction {
             display: inline-flex;
-            cursor: pointer;
-            background: none;
-            border: navajowhite;
-            padding: 0;
             align-items: center;
-            gap: 5px;
-
-            p {
-                margin: 0;
-            }
-
-            .add-reaction-icon {
-                width: 20px;
-                height: auto;
-                fill: var(--color--font-secondary);
-                transition: fill 0.2s;
-            }
-
-            &:hover {
-                .add-reaction-icon {
-                    fill: var(--color--highlight);
-                }
-            }
-        }
-
-        &__show-reactions {
+            cursor: pointer;
             border: none;
             background: none;
+            padding: 4px 0;
         }
 
         &__container {
@@ -1086,7 +1066,7 @@ $card-max-width: 300px;
             border: thin solid $color--gray-5;
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 5px;
             cursor: pointer;
 
             &.--active {
diff --git a/resources/vue/apps/forum/subscriptions/Index.vue b/resources/vue/apps/forum/subscriptions/Index.vue
index 4293483..bb89f1a 100644
--- a/resources/vue/apps/forum/subscriptions/Index.vue
+++ b/resources/vue/apps/forum/subscriptions/Index.vue
@@ -168,14 +168,14 @@ onMounted(async () => {
                     </tr>
                     <tr v-else v-for="subscription in sortedData" :key="subscription.id">
                     <td>
-                        <div class="discussion-overview">
+                        <div class="table-row-overview">
                             <div class="title-with-actions">
                                 <div class="title-with-actions__content">
                                     <a v-if="subscription.subject.type === 'forum-topics'" :href="getTopicURL(subscription.subject.id)" :title="$gettext('Zum Thema')">
-                                        <h3 class="line-clamp-2">{{ subscription.subject.name }}</h3>
+                                        <span class="subscription-title as-link line-clamp-2">{{ subscription.subject.name }}</span>
                                     </a>
                                     <a v-else-if="subscription.subject.type === 'forum-discussions'" :href="getDiscussionURL(subscription.subject.id)" :title="$gettext('Zur Diskussion')">
-                                        <h3 class="line-clamp-2">{{ subscription.subject.title }}</h3>
+                                        <span class="subscription-title as-link line-clamp-2">{{ subscription.subject.title }}</span>
                                     </a>
                                 </div>
 
@@ -193,7 +193,7 @@ onMounted(async () => {
                     </td>
                     <td>
                         <StudipIcon
-                            v-if="subscription.subject.type === 'forum-discussion' && subscription.subject.closed_at"
+                            v-if="subscription.subject.type === 'forum-discussions' && subscription.subject.closed_at"
                             :title="$gettext('Diskussion ist geschlossen')"
                             shape="lock-locked2"
                             :size="20"
diff --git a/resources/vue/components/forum/discussions/DiscussionIndex.vue b/resources/vue/components/forum/discussions/DiscussionIndex.vue
index 2369888..ab5781e 100644
--- a/resources/vue/components/forum/discussions/DiscussionIndex.vue
+++ b/resources/vue/components/forum/discussions/DiscussionIndex.vue
@@ -159,7 +159,7 @@ onMounted(() => {
             <template v-else>
                 <tr v-for="discussion in sortedData" :key="discussion.id">
                     <td>
-                        <div class="discussion-overview">
+                        <div class="table-row-overview">
                             <div class="title-with-actions">
                                 <div class="title-with-actions__content">
                                     <StudipIcon class="icon" v-if="discussion.sticky" shape="pin" role="info" :size="20" />
diff --git a/resources/vue/components/forum/posts/PostReactions.vue b/resources/vue/components/forum/posts/PostReactions.vue
index 49d6025..c93bacf 100644
--- a/resources/vue/components/forum/posts/PostReactions.vue
+++ b/resources/vue/components/forum/posts/PostReactions.vue
@@ -53,7 +53,7 @@ const getPostReactionJSONAPIObject = (emoji) => ({
 const storeReaction = async (emoji) => {
     try {
         const response = await STUDIP.jsonapi.withPromises().POST(
-            'forum-posting-reactions?include=user&fields[users]=id',
+            'forum-posting-reactions?include=user&fields[users]=id,username,formatted-name',
             { data: getPostReactionJSONAPIObject(emoji) }
         );
 
@@ -105,7 +105,7 @@ const reactionShowDialog = reactive({
             <template v-for="(reaction, emoji) in groupedReactions" :key="emoji">
                 <button
                     type="button"
-                    class="post-reaction"
+                    class="post-reaction as-link"
                     :class="{
                         '--active': findUserReaction(emoji, reaction)
                     }"
@@ -121,7 +121,7 @@ const reactionShowDialog = reactive({
             <div class="post-reactions__button-group">
                 <button
                     type="button"
-                    class="post-reactions__add-reaction"
+                    class="post-reactions__add-reaction as-link"
                     :title="$gettext('Reagieren')"
                     :aria-label="$gettext('Reagieren')"
                     @click="showReactions = !showReactions">
@@ -130,7 +130,7 @@ const reactionShowDialog = reactive({
                 <button
                     v-if="reactions.length"
                     type="button"
-                    class="post-reactions__show-reactions"
+                    class="post-reactions__show-reactions as-link"
                     :title="$gettext('Reaktionen anzeigen')"
                     :aria-label="$gettext('%{count} Reaktionen anzeigen', { count: reactions.length })"
                     @click="reactionShowDialog.isOpen = true">