Merge branch 'feature/431693_footer' into 'develop'

feature/431693_footer

See merge request upm-inesdata/inesdata-connector-interface!36

src/app/shared/components/footer/footer.component.html

@@ -0,0 +1,15 @@
+<div class="footer-container">
+  <footer class="footer">
+    <div class="footer__logos">
+      <img src="assets/images/logo-UE.png" alt="Logo fundación por la UE">
+      <img src="assets/images/logo-ministerio.png" alt="Logo miniterio del interior">
+      <img src="assets/images/logo-unico.png" alt="Logo unico">
+      <img src="assets/images/logo-politecnica.png" alt="Logo politécnica">
+      <img src="assets/images/logo-ontology.png" alt="Logo ontology">
+    </div>
+  </footer>
+
+  <div class="footer__company">
+    <p> INESData (Infrastructure to Investigate Data Spaces in Distributed Environments at UPM) © {{ year }}</p>
+  </div>
+</div>

src/app/shared/components/footer/footer.component.scss

@@ -0,0 +1,50 @@
+/* Custom FOOTER component styles */
+
+.footer {
+  background-color: #404040;
+  padding: 50px 40px;
+  border-top: solid 1px rgba(255, 255, 255, 0.12);
+
+  &__company {
+    color: white;
+    font-weight: 500;
+    text-align: center;
+    padding: 15px 0px;
+    background-color: #303030;
+  }
+
+  &__logos {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+
+    img {
+      margin: auto;
+    }
+  }
+
+  &__title {
+    color: #ffffff;
+    font-size: 42px;
+    margin: 0 0 8px 0;
+  }
+}
+
+// RESPONSIVE
+// Desktop
+@media (max-width: 991px) {
+  .footer {
+    margin: 0 -30px;
+  }
+}
+
+
+.footer-container {
+  z-index: 1;
+  position: sticky;
+  left: 0%;
+  bottom: 0%;
+  width: 100%;
+}

src/app/shared/components/footer/footer.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { LoggerTestingModule } from 'ngx-logger/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ],
+      imports: [LoggerTestingModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('footer should contain the year ', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.footer__company').textContent).toContain(new Date().getFullYear());
+  });
+});

src/app/shared/components/footer/footer.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+/**
+ * Footer component
+ */
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent {
+
+  year: number;
+
+  /**
+   * Component constructor
+   */
+  constructor() {
+    this.year = new Date().getFullYear();
+  }
+}

src/app/shared/components/navigation/navigation.component.html

@@ -1,3 +1,4 @@
+<div class="container">
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav #drawer class="sidenav" fixedInViewport
       [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
@@ -31,6 +32,10 @@
         </span>
       </div>
     </mat-toolbar>
-    <router-outlet></router-outlet>
+    <div class="scrollable-content">
+      <router-outlet></router-outlet>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>
+<app-footer></app-footer>
+</div>

src/app/shared/components/navigation/navigation.component.scss

@@ -38,3 +38,29 @@
   font-size: 24px;
   margin-right: 3px;
 }
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.sidenav-container {
+  display: flex;
+  flex-grow: 1;
+}
+
+mat-sidenav-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.scrollable-content {
+  flex-grow: 1;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+mat-toolbar {
+  min-height: 64px;
+}

src/app/shared/shared.module.ts

@@ -31,6 +31,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { FooterComponent } from './components/footer/footer.component';
 
 @NgModule({
   imports: [
@@ -68,6 +69,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     ConfirmationDialogComponent,
     UploaderFileComponent,
     DndDirective,
+    FooterComponent
   ],
   exports: [
     NavigationComponent,
@@ -101,7 +103,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     MatTooltipModule,
     MatDatepickerModule,
     MatMenuModule,
-    MatTooltipModule
+    MatTooltipModule,
+    FooterComponent
   ]
 })
 export class SharedModule {}

src/styles.scss

@@ -266,3 +266,22 @@ mat-icon[mat-card-avatar], .mat-card-avatar-icon {
   font-size: 14px !important;
 }
 }
+
+// .main-container {
+//   display: flex;
+//   flex-direction: column;
+//   height: 100%;
+
+
+// }
+
+// app-navigation {
+//   flex: 1 0 auto;
+//   overflow: auto;
+//   height: 100%;
+
+// }
+
+// app-footer{
+//   flex-shrink: 0;
+// }