Merge pull request #16 from ls1intum/integrate-new-server

Make styling responsive to smaller width
ls1intum · Feb 12, 2025 · c7bcda6 · c7bcda6
2 parents 2d1ffcb + 8acc2f1
commit c7bcda6
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/src/app/chat/chat.component.scss b/src/app/chat/chat.component.scss
@@ -11,6 +11,7 @@ $chat-height: 100vh;
 $chat-width: 100%;
 $header-height: 40px;
 $logo-size: 40px;
+$logo-size-small: 24px;
 
 *, *::before, *::after {
   box-sizing: border-box;
@@ -29,23 +30,46 @@ $logo-size: 40px;
   border-radius: 8px;
   overflow: hidden;
 
+  @media (max-width: 600px) {
+    width: 100%;
+    border: none;
+    border-radius: 0;
+    height: 100vh;
+  }
+
   .chat-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background-color: $primary-color;
     color: white;
     padding: 8px;
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 6px;
+    }
   }
 
   .chat-logo {
     width: $logo-size;
     height: $logo-size;
     object-fit: contain;
+
+    @media (max-width: 600px) {
+      display: none;
+    }
   }
 
   .study-program-dropdown {
     min-width: 400px;
+
+    @media (max-width: 600px) {
+      min-width: unset;
+      width: 100%;
+      font-size: 14px;
+    }
   }
 
   .chat-body {
@@ -67,6 +91,13 @@ $logo-size: 40px;
     line-height: 1.5;
     display: inline-block;
 
+    @media (max-width: 600px) {
+      max-width: 96%;
+      padding: 6px;
+      font-size: 14px;
+      margin: 4px 0;
+    }
+
     &.system {
       background-color: $tum-light-blue;
       color: white;
@@ -88,6 +119,10 @@ $logo-size: 40px;
     background-color: $tum-acordion-blue;
     border-top: 1px solid $border-color;
 
+    @media (max-width: 600px) {
+      padding: 6px;
+    }
+
     textarea {
       box-sizing: border-box;
       flex: 1;
@@ -100,6 +135,11 @@ $logo-size: 40px;
       overflow-y: hidden;
       min-height: calc(1.5em * 1); // Minimum height for 1 line
       max-height: calc(1.5em * 4); // Maximum height for 4 lines
+
+      @media (max-width: 600px) {
+        padding: 8px;
+        font-size: 14px;
+      }
     }
 
     button {
@@ -114,6 +154,11 @@ $logo-size: 40px;
       align-items: center;
       justify-content: center;
 
+      @media (max-width: 600px) {
+        padding: 6px;
+        margin-left: 5px;
+      }
+
       &:hover {
         background-color: $primary-color;
       }

diff --git a/src/app/chat/chat.component.ts b/src/app/chat/chat.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, ElementRef, ViewChild, OnInit, ViewChildren, QueryList, AfterViewChecked } from '@angular/core';
+import { Component, ElementRef, ViewChild, OnInit, ViewChildren, QueryList, AfterViewChecked, HostListener } from '@angular/core';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ChatbotService } from '../services/chatbot.service';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -23,7 +23,7 @@ export const MESSAGES = {
       If you'd like program-specific advice, please select your study program from the dropdown menu at the top, and I'll provide you with the most relevant information.
     `,
     errorMessage: `Sorry, but I am currently unable to answer your questions. Please try again at a later time.`,
-    placeholder: `Type your message here...`,
+    placeholder: `Enter your message here...`,
     dropdownLabel: `Select Study Program`
   },
   de: {
@@ -74,6 +74,8 @@ export class ChatComponent implements OnInit, AfterViewChecked {
   private needScrollToBottom: boolean = false;
   disableSending: boolean = false;
 
+  private widthBreakpoint = 600;
+
   constructor(private chatbotService: ChatbotService, private studyProgramService: StudyProgramService, private route: ActivatedRoute) { }
 
   ngOnInit() {
@@ -90,10 +92,14 @@ export class ChatComponent implements OnInit, AfterViewChecked {
         this.errorSnackbar.showError('Studiengänge konnten nicht geladen werden. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.', 5000);
       }
     });
+
     this.route.data.subscribe(data => {
       this.language = data['language'] || 'en';
       this.setLanguageContent();
     });
+
+    this.updatePlaceholderText(window.innerWidth);
+
     this.messages.push({ message: this.welcomeMessage, type: 'system' });
   }
 
@@ -111,6 +117,21 @@ export class ChatComponent implements OnInit, AfterViewChecked {
     this.dropdownLabel = MESSAGES[this.language].dropdownLabel;
   }
 
+  updatePlaceholderText(width: number): void {
+    if (width <= this.widthBreakpoint) {
+      this.placeholderText = '';
+    } else {
+      this.placeholderText = MESSAGES[this.language].placeholder;
+    }
+  }
+
+  // Listen for window resize events
+  @HostListener('window:resize', ['$event'])
+  onResize(event: Event) {
+    const target = event.target as Window;
+    this.updatePlaceholderText(target.innerWidth);
+  }
+
   onKeyDown(event: KeyboardEvent): void {
     if (
       event.key === 'Enter' &&