src/app/components/footer/foot-nav/foot-nav.component.ts
| selector | app-foot-nav |
| styleUrls | ./foot-nav.component.css |
| templateUrl | ./foot-nav.component.html |
Properties |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| developer |
Type : object
|
Default value : {
image: 'https://github.com/infinity-engine.png',
url: 'https://github.com/infinity-engine',
role: 'Developer',
name: 'Koushik Samanta',
}
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-foot-nav',
templateUrl: './foot-nav.component.html',
styleUrls: ['./foot-nav.component.css'],
})
export class FootNavComponent implements OnInit {
developer = {
image: 'https://github.com/infinity-engine.png',
url: 'https://github.com/infinity-engine',
role: 'Developer',
name: 'Koushik Samanta',
};
constructor() {}
ngOnInit(): void {
}
}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row logo head">
<div class="col">
<a href="/e_mobility/i-bms/"><img src="/e_mobility/i-bms/assets/logo.png" id="logo" /></a>
</div>
</div>
<div class="row logo">
<div class="col" id="description">
<small
>Intelligent Battery Management System, which is self learning,
cloud integrated and data driven. Additional platform for
performing and monitering batteries with cloud computations.
</small>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row head">
<div class="col">Useful links</div>
</div>
<div class="row">
<div class="col">
<a
routerLink="/home"
[skipLocationChange]="true"
routerLinkActive="active-link"
>
<span class="item">Home<span class="bottom-line"></span> </span>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a
routerLink="/dashboard"
[skipLocationChange]="true"
routerLinkActive="active-link"
>
<span class="item">
Dashboard<span class="bottom-line"></span>
</span>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a
routerLink="/devices"
[skipLocationChange]="true"
routerLinkActive="active-link"
>
<span class="item"
>Devices<span class="bottom-line"></span>
</span>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a
routerLink="/batteryTest"
[skipLocationChange]="true"
routerLinkActive="active-link"
>
<span class="item"
>Battery Test<span class="bottom-line"></span>
</span>
</a>
</div>
</div>
<div class="row">
<div class="col">
<a
routerLink="/docs"
[skipLocationChange]="true"
routerLinkActive="active-link"
>
<span class="item"
>Documentation<span class="bottom-line"></span>
</span>
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="row head">
<div class="col">Social handlers</div>
</div>
<div class="row social-container">
<div class="col-1 text-center">
<a href="a"><i class="fa fa-linkedin-square"></i></a>
</div>
<div class="col-1 text-center">
<a href="b"><i class="fa fa-facebook-square"></i></a>
</div>
<div class="col-1 text-center">
<a href="c"><i class="fa fa-twitter-square"></i></a>
</div>
</div>
<div class="row">
<div class="col">
<a href="mailto:e_mobilty@iitg.ac.in">e_mobilty@iitg.ac.in</a>
</div>
</div>
<div
class="row align-items-center"
style="margin-top: 20px"
[routerLink]="developer.url"
target="_blank"
>
<div class="col-md-2">
<div
class="user-picture"
style="background-image: url('{{ developer.image }}');"
></div>
</div>
<div class="col-md-10 developer-info">
<div class="row">
<div class="col">
<a href="{{ developer.url }}" target="_blank"
><small>{{ developer.name }},</small></a
>
</div>
</div>
<div class="row">
<div class="col">
<a href="{{ developer.url }}" target="_blank"
><small>{{ developer.role }}</small></a
>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="copyright">
© IIT Guwahati, E-Mobility Laboratory
</section>
</div>
</div>
./foot-nav.component.css
.footer {
background-color: rgba(119, 136, 153, 0.238);
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
Liberation Mono;
}
.head {
margin-bottom: 20px;
color: rgb(6, 20, 45);
padding-left: 0px;
margin-top: 20px;
}
.active-link {
color: gray !important;
}
.row a {
padding-left: 2px;
text-decoration: none;
font-size: small;
color: rgb(63, 53, 53);
}
.item {
position: relative;
}
.bottom-line {
position: absolute;
left: 0;
bottom: 0;
border-bottom: 1px solid rgb(7, 127, 213);
transform: scale(0);
transition: transform 150ms linear;
transform-origin: center;
width: 100%;
}
.row a:hover .bottom-line {
transform: scale(1);
}
.copyright {
padding-top: 20px;
text-align: center;
}
.social-container a {
font-size: 20px;
}
.social-container a:hover {
color: rgb(38, 49, 146);
}
#logo {
height: 50px;
width: auto;
}
#description {
font-size: 10px;
text-align: justify;
}
.logo {
text-align: center;
}
.user-picture {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
vertical-align: middle;
}
.developer-info:hover small {
color: brown;
}