Resolve "Timeline in Forum"

Closes #5911

Merge request studip/studip!4517

1 files changed, 91 insertions, 42 deletions

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 480a3ca..2ffb2f9 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -693,6 +693,95 @@ $card-max-width: 300px;
         }
     }
 
+    .discussion-timeline {
+        position: sticky;
+        top: 50px;
+
+        &__start,
+        &__end {
+            button {
+                font-weight: bold;
+                background: none;
+                border: none;
+                padding: 0;
+                cursor: pointer;
+            }
+        }
+
+        .scroll-area {
+            height: 300px;
+            display: flex;
+            gap: 15px;
+            position: relative;
+            cursor: pointer;
+            margin: 10px 5px;
+
+            &__track {
+                position: relative;
+                background: var(--dark-gray-color-20);
+                width: 2px;
+                height: inherit;
+                border-radius: 4px;
+                overflow: hidden;
+            }
+
+            &__unread {
+                position: absolute;
+                background-color: var(--red);
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+
+            &__new-from {
+                position: absolute;
+                width: 100%;
+                display: flex;
+                align-items: end;
+
+                button {
+                    background: none;
+                    border: none;
+                    padding: 0;
+                    width: 100%;
+                    text-align: left;
+                    transition: opacity 5s;
+                    cursor: pointer;
+                    font-weight: bold;
+                    margin: 0 10px;
+                }
+            }
+
+            &__scroller {
+                background: white;
+                border: none;
+                padding: 0;
+                position: absolute;
+                width: 100%;
+                height: 50px;
+                cursor: ns-resize;
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+
+            &__scroll-marker {
+                border-radius: 20px;
+                background: var(--color--brand-primary);
+                width: 6px;
+                height: inherit;
+                margin-left: -2px;
+            }
+
+            &__info {
+                font-weight: bold;
+                text-align: left;
+                flex: 1;
+                color: var(--color--brand-primary);
+            }
+        }
+    }
+
     .posts-container {
         display: grid;
         grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -956,46 +1045,6 @@ $card-max-width: 300px;
         }
     }
 
-    .timeline-container {
-        position: sticky;
-        top: 50px;
-    }
-
-    .discussion-timeline-table {
-        width: 100%;
-        height: 350px;
-
-        tr td:first-child {
-            width: 6px;
-            background-color: var(--color--tile-title-background);
-        }
-
-        tr:first-child td:first-child {
-            background-color: var(--color--highlight);
-        }
-
-        tr td:nth-child(2) {
-            padding: 0 10px;
-        }
-
-        time, p {
-            color: var(--color--font-secondary);
-            margin: 0;
-        }
-
-        time {
-            font-weight: 600;
-        }
-
-        p {
-            font-size: small;
-        }
-
-        td.bg-new-activity {
-            background-color: $red !important;
-        }
-    }
-
     .drag-handle {
         display: inline-block;
         width: 6px;
@@ -1581,7 +1630,7 @@ $card-max-width: 300px;
             grid-template-columns: 1fr;
         }
 
-        .timeline-container {
+        .discussion-timeline {
             display: none;
         }
 
@@ -1724,7 +1773,7 @@ $card-max-width: 300px;
 }
 
 .fullscreen-mode .forum {
-    .timeline-container {
+    .discussion-timeline {
         top: 120px;
     }