refactor styling

ls1intum · Oct 26, 2024 · 801c1c9 · 801c1c9
1 parent 2714f53
commit 801c1c9
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 23 deletions.
diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html
@@ -62,10 +62,7 @@
                     <jhi-course-wide-search (openThread)="postInThread = $event" [courseWideSearchConfig]="courseWideSearchConfig" />
                 }
             </div>
-            <div
-                class="communication-answer-message-wrap col flex-grow-1 justify-end px-0 scrollable-content"
-                [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'is-answer-thread-open': !!postInThread }"
-            >
+            <div class="scrollable-content" [ngClass]="{ 'content-height-dev': !isProduction || isTestServer, 'is-answer-thread-open': !!postInThread }">
                 @if (!!postInThread) {
                     <jhi-conversation-thread-sidebar
                         [activeConversation]="activeConversation ?? postInThread.conversation!"

diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss b/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss
@@ -25,6 +25,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod));
+    flex-wrap: wrap;
 
     &.content-height-dev {
         max-height: calc(100vh - var(--header-height) - var(--message-input-height-dev));
@@ -45,11 +46,6 @@
     min-width: 200px;
 }
 
-.communication-answer-message-wrap {
-    max-width: min-content;
-    display: flex;
-}
-
 @include media-breakpoint-down(sm) {
     .communication-content-sidebar {
         position: absolute;

diff --git a/...nversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss b/...nversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.scss
@@ -3,27 +3,28 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
-$draggable-width: 15px;
-$thread-section-card-min-width: 420px;
-$thread-section-card-max-width: 540px;
-
 .postings-container {
     display: flex;
     height: 100%;
     margin-left: auto;
+    min-width: 30%;
+    max-width: 100%;
 
     .back-instruction {
         font-size: 12px;
     }
 }
 
 .expanded-thread {
-    width: calc(#{$draggable-width} + #{$thread-section-card-min-width});
+    display: flex;
+    flex-grow: 1;
+    min-width: 30%;
+    max-width: 100%;
 
     .scrollbar {
         position: relative;
         max-height: 1000px;
-        overflow: auto;
+        overflow-x: hidden;
     }
 
     .wrapper-scroll-y {
@@ -35,13 +36,12 @@ $thread-section-card-max-width: 540px;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        min-width: $draggable-width;
+        min-width: 1.5%;
+        max-width: 1.5%;
     }
 
     .card {
         width: inherit;
-        min-width: $thread-section-card-min-width;
-        max-width: $thread-section-card-max-width;
 
         .card-header {
             justify-content: space-between;
@@ -64,7 +64,6 @@ $thread-section-card-max-width: 540px;
 
 .collapsed-thread {
     display: flex;
-    width: 38px;
     justify-content: space-between;
     flex-flow: column;
     margin-left: auto;

diff --git a/...conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.ts b/...conversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.ts
@@ -62,8 +62,8 @@ export class ConversationThreadSidebarComponent implements AfterViewInit {
                 modifiers: [
                     // Set maximum width
                     interact.modifiers!.restrictSize({
-                        min: { width: 435, height: 0 },
-                        max: { width: 600, height: 4000 },
+                        min: { width: window.innerWidth * 0.3, height: 0 },
+                        max: { width: window.innerWidth, height: 0 },
                     }),
                 ],
                 inertia: true,

diff --git a/.../posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html b/.../posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex gap-2 fs-xx-small">
+<div class="d-flex flex-wrap gap-2 fs-xx-small">
     @for (reactionMetaData of reactionMetaDataMap | keyvalue; track reactionMetaData) {
         <div>
             <button

diff --git a/...p/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html b/...p/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex gap-2 fs-xx-small">
+<div class="d-flex flex-wrap gap-2 fs-xx-small">
     @if (!isCommunicationPage) {
         @if (sortedAnswerPosts.length) {
             <!-- collapse answers -->