Header restyling, fix study program selection bug

ls1intum · Nov 26, 2024 · 2295699 · 2295699
1 parent c527299
commit 2295699
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 35 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -5,7 +5,7 @@ import { ChatComponent } from './chat/chat.component';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, ChatComponent],
+  imports: [RouterOutlet],
   providers: [],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'

diff --git a/src/app/chat/chat.component.html b/src/app/chat/chat.component.html
@@ -1,15 +1,10 @@
 <div class="chat-container">
 
     <div class="chat-header">
-        <h2>CIT Chatbot</h2>
-        <img src="assets/logo.png" alt="Logo" class="chat-logo" />
-    </div>
-
-    <div class="study-program-dropdown">
-        <label for="studyProgramSelect" class="dropdown-label">{{ dropdownLabel }}</label>
-        <ng-select class="select" [items]="studyPrograms" bindLabel="label" bindValue="value"
-            [formControl]="studyProgramControl" placeholder="Select your study program">
-        </ng-select>
+      <ng-select class="study-program-dropdown" [items]="studyPrograms" bindLabel="label" bindValue="value"
+          [formControl]="studyProgramControl" [placeholder]="dropdownLabel">
+      </ng-select>
+      <img src="assets/logo.png" alt="Logo" class="chat-logo" />
     </div>
 
     <div class="chat-body" #chatBody>

diff --git a/src/app/chat/chat.component.scss b/src/app/chat/chat.component.scss
@@ -7,13 +7,18 @@ $system-message-color: #64a0c8;
 $user-message-color: #0a2d57;
 $background-color: #f4f4f4;
 $border-color: #ccc;
-$chat-height: 100%;
+$chat-height: 100vh;
 $chat-width: 100%;
 $header-height: 40px;
 $logo-size: 40px;
 
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
 .chat-container {
   font-family: roboto, sans-serif;
+  margin: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -26,13 +31,11 @@ $logo-size: 40px;
 
   .chat-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     background-color: $primary-color;
     color: white;
     padding: 8px;
-    font-size: 14px;
-    height: $header-height;
   }
 
   .chat-logo {
@@ -41,8 +44,12 @@ $logo-size: 40px;
     object-fit: contain;
   }
 
+  .study-program-dropdown {
+    min-width: 400px;
+  }
+
   .chat-body {
-    flex: 1;
+    flex: 1 1 auto;
     padding: 10px;
     overflow-y: auto;
     background-color: white;
@@ -171,18 +178,4 @@ $logo-size: 40px;
     transform: translateY(-2px);
     opacity: 0.7;
   }
-}
-
-.study-program-dropdown {
-  box-sizing: border-box;
-  padding: 10px;
-  background-color: $tum-acordion-blue;
-  border-bottom: 1px solid $border-color;
-  color: $tum-blue-dark;
-
-  .dropdown-label {
-    font-size: 14px;
-    font-weight: bold;
-    margin-bottom: 5px;
-  }
 }
diff --git a/src/app/chat/chat.component.ts b/src/app/chat/chat.component.ts
@@ -22,7 +22,7 @@ export const MESSAGES = {
     `,
     errorMessage: `Sorry, but I am currently unable to answer your questions. Please try again at a later time.`,
     placeholder: `Type your message here...`,
-    dropdownLabel: `Select Study Program:`
+    dropdownLabel: `Select Study Program`
   },
   de: {
     welcomeMessage: `
@@ -34,7 +34,7 @@ export const MESSAGES = {
     `,
     errorMessage: `Entschuldigung, aber ich kann Ihre Fragen derzeit nicht beantworten. Bitte versuchen Sie es später erneut.`,
     placeholder: `Geben Sie hier Ihre Nachricht ein...`,
-    dropdownLabel: `Studiengang auswählen:`
+    dropdownLabel: `Studiengang auswählen`
   }
 };
 
@@ -59,7 +59,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
   dropdownLabel: string = '';
 
   // FormControl for the study program dropdown
-  studyProgramControl = new FormControl('');
+  studyProgramControl = new FormControl(null);
   studyPrograms = studyPrograms;
 
   language: 'en' | 'de' = 'en'; // Default language is English
@@ -114,7 +114,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
       this.resetTextAreaHeight();
       this.needScrollToBottom = true;
 
-      const selectedProgram = this.studyProgramControl.value as string;
+      const selectedProgram = this.studyProgramControl.value? this.studyProgramControl.value as string : '';
 
       // Add a loading message to indicate the bot is typing
       const loadingMessage: ChatMessage = { message: '', type: 'loading' };

diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
@@ -5,6 +5,7 @@
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin: 16px
 }
 
 h2 {

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -2,11 +2,15 @@ import { Component } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [
+    ReactiveFormsModule,
+    NgIf
+  ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss'
 })

diff --git a/src/styles.scss b/src/styles.scss
@@ -6,4 +6,10 @@
     font-weight: bold;
     text-decoration: underline;
     cursor: pointer;
-}
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }