From 2295699239cbf8f6793765f2ecf84d8cd7f33069 Mon Sep 17 00:00:00 2001 From: Nino Richter Date: Tue, 26 Nov 2024 12:40:55 +0100 Subject: [PATCH] Header restyling, fix study program selection bug --- src/app/app.component.ts | 2 +- src/app/chat/chat.component.html | 13 ++++--------- src/app/chat/chat.component.scss | 31 ++++++++++++------------------ src/app/chat/chat.component.ts | 8 ++++---- src/app/login/login.component.scss | 1 + src/app/login/login.component.ts | 6 +++++- src/styles.scss | 8 +++++++- 7 files changed, 34 insertions(+), 35 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 629574f..3f11908 100644 --- 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 index c44d7e9..03c98f5 100644 --- a/src/app/chat/chat.component.html +++ b/src/app/chat/chat.component.html @@ -1,15 +1,10 @@
-

CIT Chatbot

- -
- -
- - - + + +
diff --git a/src/app/chat/chat.component.scss b/src/app/chat/chat.component.scss index f6c4f28..20846ac 100644 --- 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; - } } \ No newline at end of file diff --git a/src/app/chat/chat.component.ts b/src/app/chat/chat.component.ts index 8be62cb..7b6fa21 100644 --- 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 index a4903a7..9ade5e8 100644 --- 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 index 8127075..461aa67 100644 --- 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 index 5cd501f..1e5904f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -6,4 +6,10 @@ font-weight: bold; text-decoration: underline; cursor: pointer; -} \ No newline at end of file +} + +html, body { + height: 100%; + margin: 0; + padding: 0; + } \ No newline at end of file