Resolve "Forum in freien Veranstaltungen sind nicht aufrufbar"issue-5760

Closes #5699

Merge request studip/studip!4371

4 files changed, 82 insertions, 73 deletions

diff --git a/resources/assets/javascripts/lib/dates.js b/resources/assets/javascripts/lib/dates.js
index ccb67a8..04b2ec5 100644
--- a/resources/assets/javascripts/lib/dates.js
+++ b/resources/assets/javascripts/lib/dates.js
@@ -52,7 +52,9 @@ const Dates = {
         }).done(function() {
             $('.topic_' + termin_id + '_' + topic_id).remove();
         });
-    }
+    },
+    stringToUnixTimestamp: date => ((new Date(date)).getTime() / 1000),
+    unixTimestampToISO: timestamp => new Date(timestamp * 1000).toISOString()
 };
 
 export default Dates;
diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index 0f39cb7..63457fd 100644
--- a/resources/assets/stylesheets/scss/buttons.scss
+++ b/resources/assets/stylesheets/scss/buttons.scss
@@ -98,8 +98,23 @@ button.button {
     }
 }
 
+@mixin button-base() {
+    color: var(--base-color);
+    transition: color var(--transition-duration);
+
+    &:hover,
+    &:active,
+    &.active,
+    &[aria-pressed="true"] {
+        color: var(--active-color);
+        text-decoration: none;
+    }
+}
+
 button,
 .button {
+    @include button-base;
+
     &.as-link,
     &.styleless,
     &.undecorated,
@@ -114,22 +129,10 @@ button,
         margin: 0;
         padding: 0;
     }
+}
 
-    &.as-link,
-    &.undecorated[formaction] {
-        color: var(--base-color);
-        transition: color var(--transition-duration);
-
-        &:hover,
-        &:active {
-            color: var(--active-color);
-            text-decoration: none;
-        }
-
-        &[disabled] {
-            pointer-events: none;
-        }
-    }
+.button-base {
+    @include button-base;
 }
 
 label {
@@ -203,4 +206,4 @@ $square-button-size: 130px;
         color: var(--color--highlight-hover);
         border-color: var(--color--highlight);
     }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 72c66a9..68a5967 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -63,7 +63,7 @@ $card-max-width: 300px;
                 justify-content: end;
                 padding: 0;
                 &:hover {
-                    color: var(--color--highlight);
+                    color: var(--active-color);
                 }
             }
         }
@@ -304,6 +304,8 @@ $card-max-width: 300px;
         p {
             margin-top: 5px;
             color: var(--color--font-secondary);
+            word-break: break-word;
+            overflow-wrap: break-word;
         }
     }
 
@@ -318,6 +320,8 @@ $card-max-width: 300px;
         p {
             margin-top: 5px;
             color: var(--color--font-secondary);
+            word-break: break-word;
+            overflow-wrap: break-word;
         }
 
         .discussion-category {
@@ -437,6 +441,8 @@ $card-max-width: 300px;
         p {
             margin-top: 5px;
             color: var(--color--font-secondary);
+            word-break: break-word;
+            overflow-wrap: break-word;
         }
 
         &__content {
@@ -500,9 +506,8 @@ $card-max-width: 300px;
         }
 
         &__text {
-            p {
-                color: var(--color--font-primary);
-            }
+            word-break: break-word;
+            overflow-wrap: break-word;
 
             img {
                 max-width: 100% !important;
@@ -765,7 +770,7 @@ $card-max-width: 300px;
 
             &:hover,
             &:focus,
-            &.active {
+            &[aria-ppressed="true"] {
                 position: relative;
                 z-index: 1;
 
@@ -1094,60 +1099,58 @@ $card-max-width: 300px;
 
         .dropdown__items {
             max-width: 300px;
+
             li {
-                display: flex;
-                align-items: center;
-                gap: 15px;
-                padding: 10px 15px;
+                padding: 0;
 
-                .subscription-option {
-                    flex: 1;
+                button {
+                    cursor: pointer;
+                    background: none;
+                    border: none;
+                    width: 100%;
                     display: flex;
                     align-items: center;
-                    justify-content: space-between;
-                    gap: 5px;
-                }
+                    gap: 15px;
+                    padding: 10px 15px;
 
-                .option-title {
-                    font-size: 14px;
-                    color: var(--color--font-primary);
-                    font-weight: 400;
-                    margin: 0;
-                }
+                    &:disabled {
+                        cursor: not-allowed;
+                        opacity: 0.5;
+                    }
 
-                p {
-                    color: var(--color--font-secondary);
-                    margin-top: 6px;
-                    font-size: small;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 3;
-                    -webkit-box-orient: vertical;
-                    overflow: hidden;
-                }
+                    .subscription-option {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        gap: 5px;
+                    }
 
-                &.all {
-                    background-color: $green-20;
-                    cursor: default;
-                }
+                    .option-title {
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin: 0;
+                    }
 
-                &.replies_only {
-                    background-color: $activity-color-20;
-                    cursor: default;
-                }
+                    &.all {
+                        background-color: $green-20;
+                        cursor: default;
+                    }
 
-                &.none {
-                    background-color: $dark-gray-color-20;
-                    cursor: default;
-                }
+                    &.replies_only {
+                        background-color: $activity-color-20;
+                        cursor: default;
+                    }
 
-                &.--active {
-                    background-color: $dark-gray-color-10;
-                    cursor: default;
-                }
+                    &.none {
+                        background-color: $dark-gray-color-20;
+                        cursor: default;
+                    }
 
-                &.--disabled {
-                    opacity: 0.5;
-                    cursor: not-allowed;
+                    &.active {
+                        background-color: $dark-gray-color-10;
+                        cursor: default;
+                    }
                 }
             }
         }
@@ -1301,6 +1304,10 @@ $card-max-width: 300px;
         .color-font-secondary {
             color: var(--color--font-secondary);
         }
+
+        .break-word {
+            word-break: break-word;
+        }
     }
 
     .vs__actions {
@@ -1468,6 +1475,7 @@ $card-max-width: 300px;
     .tab {
         &__buttons {
             display: flex;
+            flex-wrap: wrap;
             gap: 10px;
             border-bottom: 2px solid var(--color--divider);
         }
@@ -1475,8 +1483,6 @@ $card-max-width: 300px;
         &__button {
             label {
                 position: relative;
-                transition: color 0.3s ease;
-                color: var(--color--highlight);
                 font-weight: bold;
                 padding: 6px 12px;
                 cursor: pointer;
@@ -1485,15 +1491,13 @@ $card-max-width: 300px;
                 gap: 5px;
 
                 &:hover {
-                    color: var(--color--highlight-hover);
-
                     &::after {
                         background-color: var(--color--focus);
                     }
                 }
 
                 &:hover,
-                &.is-checked {
+                &.active {
                     &::after {
                         content: '';
                         position: absolute;
@@ -1504,7 +1508,7 @@ $card-max-width: 300px;
                     }
                 }
 
-                &.is-checked {
+                &.active {
                     &::after {
                         background-color: var(--color--highlight);
                     }
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index f0f17d4..284734c 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -788,8 +788,8 @@ input.allow-plaintext-toggle {
         display: flex;
         align-items: center;
         justify-content: center;
-        background: transparent;
-        border: transparent;
+        background: none;
+        border: none;
         height: 20px;
         width: 20px;
         cursor: pointer;