Fix Scrolling Containers

ls1intum · Oct 23, 2024 · a693dbc · a693dbc
1 parent ffba759
commit a693dbc
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 9 deletions.
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
@@ -31,7 +31,7 @@
     }
 
     @media (max-width: 768px) {
-        max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod)) !important;
+        max-height: calc(100dvh - var(--header-height) - var(--message-input-height-prod)) !important;
     }
 }
 

diff --git a/...pp/app/overview/course-conversations/course-wide-search/course-wide-search.component.scss b/...pp/app/overview/course-conversations/course-wide-search/course-wide-search.component.scss
@@ -47,7 +47,7 @@
         position: absolute;
         top: 10%;
         left: 0;
-        height: 90%;
+        height: 80%;
         width: 100%;
         display: flex;
         align-items: center;
@@ -64,6 +64,7 @@
     }
 
     .coursewide-search .posting-infinite-scroll-container {
-        max-height: calc(73vh - var(--header-height) - var(--search-channel-header-height));
+        max-height: calc(60vh - var(--header-height) - var(--search-channel-header-height));
+        max-height: calc(60dvh - var(--header-height) - var(--search-channel-header-height));
     }
 }
diff --git a/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.html b/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.html
@@ -90,9 +90,27 @@
                             />
                         </div>
                     }
+
+                    @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation)) {
+                        <div class="d-block d-sm-none">
+                            @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
+                                <div class="pt-2">
+                                    <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
+                                    <jhi-post-create-edit-modal
+                                        #createEditModal
+                                        [posting]="newPost!"
+                                        [isCommunicationPage]="true"
+                                        (onCreate)="createEmptyPost(); scrollToBottomOfMessages()"
+                                    />
+                                </div>
+                            } @else {
+                                <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="createEmptyPost(); scrollToBottomOfMessages()" />
+                            }
+                        </div>
+                    }
                 </div>
                 @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation)) {
-                    <div>
+                    <div class="d-none d-sm-block">
                         @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                             <div class="pt-2">
                                 <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>

diff --git a/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.scss b/...ew/course-conversations/layout/conversation-messages/conversation-messages.component.scss
@@ -1,3 +1,7 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
 .conversation-messages {
     --message-input-height-prod: 171px;
     --message-input-height-dev: 187px;
@@ -40,11 +44,15 @@
     }
 
     .posting-infinite-scroll-container {
-        max-height: calc(74vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
+        max-height: calc(75vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
         overflow-y: auto;
 
         &.content-height-dev {
-            max-height: calc(74vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
+            max-height: calc(75vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
+
+            @include media-breakpoint-down(sm) {
+                max-height: calc(90dvh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
+            }
         }
     }
 

diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss
@@ -45,6 +45,7 @@ $transition-color-length: 0.2s;
 
     @media (max-width: 768px) {
         height: calc(100vh - var(--sidebar-footer-height-prod)) !important;
+        height: calc(100dvh - var(--sidebar-footer-height-prod)) !important;
     }
 
     &.exam-wrapper {
@@ -88,6 +89,7 @@ $transition-color-length: 0.2s;
 
         @media (max-width: 768px) {
             height: calc(100vh - var(--sidebar-footer-height-prod)) !important;
+            height: calc(100dvh - var(--sidebar-footer-height-prod)) !important;
         }
     }
 

diff --git a/src/main/webapp/app/shared/metis/answer-post/answer-post.component.scss b/src/main/webapp/app/shared/metis/answer-post/answer-post.component.scss
@@ -1,3 +1,7 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
 .answer-post {
     background-color: var(--metis-answer-post-background-color);
     border-radius: 7px;
@@ -6,3 +10,9 @@
 .answer-post-content-margin {
     padding-left: 3.2rem;
 }
+
+@include media-breakpoint-down(sm) {
+    .answer-post-content-margin {
+        padding-left: 0.5rem;
+    }
+}
diff --git a/src/main/webapp/app/shared/metis/metis.component.scss b/src/main/webapp/app/shared/metis/metis.component.scss
@@ -128,6 +128,7 @@ $profile-picture-height: 2.15rem;
 @include media-breakpoint-down(sm) {
     .post-header-author-date {
         flex-direction: column;
+        gap: 0 !important;
     }
 
     .post-content-margin {
@@ -138,7 +139,8 @@ $profile-picture-height: 2.15rem;
         display: none;
     }
 
-    .post-header-date {
+    .post-header-date span {
         color: $secondary;
+        font-size: 0.75rem !important;
     }
 }
diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.scss b/src/main/webapp/app/shared/sidebar/sidebar.component.scss
@@ -13,7 +13,7 @@
         height: calc(100vh - var(--sidebar-footer-height-dev) - var(--header-height) - var(--search-height));
     }
     @media (max-width: 768px) {
-        height: calc(100vh - var(--sidebar-footer-height-prod) - var(--header-height) - var(--search-height)) !important;
+        height: calc(100dvh - var(--sidebar-footer-height-prod) - var(--header-height) - var(--search-height)) !important;
     }
 }
 
@@ -25,6 +25,7 @@
     }
     @media (max-width: 768px) {
         height: calc(100vh - var(--sidebar-footer-height-prod) - var(--header-height)) !important;
+        height: calc(100dvh - var(--sidebar-footer-height-prod) - var(--header-height)) !important;
     }
 }
 

diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss
@@ -306,6 +306,7 @@ Generic styles
     background-color: var(--bs-body-bg);
     padding-bottom: var(--footer-height-prod);
     @media (max-width: 768px) {
+        height: 100dvh;
         padding-bottom: var(--footer-height-prod) !important;
     }
     &.footer-height-dev {
@@ -1085,7 +1086,7 @@ body.transparent-background {
         height: calc(100vh - var(--sidebar-footer-height-dev) - var(--header-height));
     }
     @media (max-width: 768px) {
-        height: calc(100vh - var(--sidebar-footer-height-prod) - var(--header-height)) !important;
+        height: calc(100dvh - var(--sidebar-footer-height-prod) - var(--header-height)) !important;
     }
 }