Merge pull request #32 from densbornp/dev

Fixed footer displaying issues and edited the Dockerfile

Dockerfile

@@ -16,7 +16,7 @@ RUN wget http://archive.apache.org/dist/maven/maven-3/"$MAVEN_VERSION"/binaries/
 RUN mkdir /opt/ghostface
 COPY . /opt/ghostface
 WORKDIR /opt/ghostface/frontend
-RUN npm install -g @angular/cli && npm install
+RUN npm install -g @angular/cli && npm install && npm run build
 WORKDIR /opt/ghostface
 RUN mvn clean install
 WORKDIR /opt/ghostface/backend

README.md

@@ -31,7 +31,7 @@ Navigate to the Directory: cd ghostface
 Run the Application: 
 1. Switch the directory to ghostface/frontend and execute:
 ```
-npm install -g @angular/cli && npm install
+npm install -g @angular/cli && npm install && npm run build
 ```
 2. Switch back to ghostface and execute: 
 ```

backend/pom.xml

@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>com.burningstack.ghostface</groupId>
     <artifactId>backend</artifactId>
-    <version>2.0.0-SNAPSHOT</version>
+    <version>2.0.1-SNAPSHOT</version>
     <description>Java-Backend for the GhostFace project</description>
 
     <properties>

frontend/pom.xml

@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>com.burningstack.ghostface</groupId>
     <artifactId>frontend</artifactId>
-    <version>2.0.0-SNAPSHOT</version>
+    <version>2.0.1-SNAPSHOT</version>
     <packaging>jar</packaging>
     <description>Angular-Frontend for the GhostFace project</description>
 

frontend/src/app/faq/faq.component.html

@@ -1,4 +1,4 @@
-<div class="main-content">
+<div class="main-content" [style.paddingBottom.px]="footerHeight">
     <app-navigation></app-navigation>
     <section id="info" class="info-bg mb-5">
         <div class="container">

frontend/src/app/faq/faq.component.scss

@@ -1,4 +1,3 @@
 .main-content {
     min-height: 100vh;
-    padding-bottom: 241px;
 }

frontend/src/app/faq/faq.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-faq',
@@ -7,9 +7,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FaqComponent implements OnInit {
 
-  constructor() { }
+    footerHeight: number;
 
-  ngOnInit(): void {
-  }
+    constructor() { }
 
+    ngOnInit(): void {
+        this.footerHeight = document.getElementById('footer').offsetHeight;
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize(event) {
+        this.footerHeight = document.getElementById('footer').offsetHeight;
+    }
 }

frontend/src/app/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="bg-light text-center text-lg-start h-auto">
+<footer id="footer" class="bg-light text-center text-lg-start h-auto" [style.marginTop.px]="footerHeight">
     <div class="container p-4">
         <div class="row mt-4 justify-content-center text-center">
             <div class="col-lg-3 col-md-6 mb-4 mb-md-0">

frontend/src/app/footer/footer.component.scss

@@ -1,4 +0,0 @@
-footer {
-    height: 241px;
-    margin-top: -241px;
-}

frontend/src/app/footer/footer.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-footer',
@@ -7,9 +7,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FooterComponent implements OnInit {
 
-  constructor() { }
+    footerHeight: number;
 
-  ngOnInit(): void {
-  }
+    constructor() { }
 
+    ngOnInit(): void {
+        // Calculate footer height and inverse it to set margin-top
+        this.footerHeight = document.getElementById('footer').offsetHeight * -1;
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize(event) {
+        this.footerHeight = document.getElementById('footer').offsetHeight * -1;
+    }
 }

frontend/src/app/landing-page/landing-page.component.html

@@ -1,7 +1,7 @@
-<div class="main-content">
+<div class="main-content" [style.paddingBottom.px]="footerHeight">
     <app-hero></app-hero>
     <app-navigation></app-navigation>
     <app-info></app-info>
     <app-conversion></app-conversion>
 </div>
-<app-footer></app-footer>
+<app-footer></app-footer>

frontend/src/app/landing-page/landing-page.component.scss

@@ -1,4 +1,3 @@
 .main-content {
     min-height: 100vh;
-    padding-bottom: 241px;
 }

frontend/src/app/landing-page/landing-page.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { CookieModalComponent } from '../cookie-modal/cookie-modal.component';
 import { CookieService } from '../services/cookie.service';
@@ -15,12 +15,19 @@ export class LandingPageComponent {
         ignoreBackdropClick: true,
         'class': 'modal-dialog-centered'
     };
+    footerHeight: number;
 
     constructor(private modalService: BsModalService, private cookieService: CookieService) {
     }
 
     ngOnInit(): void {
         this.checkCookieAndOpenConsent();
+        this.footerHeight = document.getElementById('footer').offsetHeight;
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize(event) {
+        this.footerHeight = document.getElementById('footer').offsetHeight;
     }
 
     private showCookieModal() {

pom.xml

@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>com.burningstack.ghostface</groupId>
     <artifactId>ghostface</artifactId>
-    <version>2.0.0-SNAPSHOT</version>
+    <version>2.0.1-SNAPSHOT</version>
     <packaging>pom</packaging>
     <description>GhostFace project build with Spring Boot and Angular</description>
     <modules>