feat: add a footer

This commit is contained in:
Polianin Nikita 2024-02-09 03:38:06 +03:00
parent 71db1fc472
commit 99f3a848b7
4 changed files with 143 additions and 5 deletions

View File

@ -1,10 +1,14 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router'; import {RouterOutlet} from '@angular/router';
import {FooterComponent} from "@component/footer/footer.component";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
standalone: true, standalone: true,
imports: [RouterOutlet], imports: [RouterOutlet, FooterComponent],
template: `<router-outlet/>` template: `
<router-outlet/>
<app-footer/>`
}) })
export class AppComponent {} export class AppComponent {
}

View File

@ -0,0 +1,81 @@
.app-footer {
padding: 12px;
font-size: 12px;
color: white;
}
.app-footer-copyright {
display: flex;
flex: 1;
justify-content: flex-end;
flex-direction: column;
min-width: 225px;
margin-top: 16px;
color: #BCBEC0;
align-self: center;
text-align: center;
}
/*noinspection CssInvalidPropertyValue*/
a {
text-decoration: none;
color: inherit;
text-wrap: balance;
}
a:hover,
a:focus {
text-decoration: underline;
}
.app-footer-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 15px;
align-items: center;
justify-items: center;
}
.app-footer-list div h1 {
margin: 0;
}
@media screen and (min-width: 600px) and (max-width: 960px) {
.app-footer-list {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 3fr;
}
.app-footer-list > div:nth-child(1) {
grid-area: 1 / 1 / 2 / 4;
}
.app-footer-list > div:nth-child(2) {
grid-area: 2 / 1 / 3 / 2;
}
.app-footer-list > div:nth-child(3) {
grid-area: 2 / 2 / 3 / 3;
}
}
@media screen and (max-width: 600px) {
.app-footer-list {
grid-template-columns: 1fr;
grid-template-rows: 1fr repeat(2, 3fr);
justify-items: start;
}
.app-footer-list > div:nth-child(1) {
grid-area: 1 / 1 / 2 / 4;
}
.app-footer-list > div:nth-child(2) {
grid-area: 2 / 1 / 3 / 2;
}
.app-footer-list > div:nth-child(3) {
grid-area: 3 / 1 / 4 / 2;
}
}

View File

@ -0,0 +1,30 @@
<footer style="background-color: #1A2026;">
<hr/>
<div class="app-footer">
<div class="app-footer-list">
<div>
<h1>Winsomnia</h1>
</div>
<div>
<mat-list role="list">
<mat-list-item role="listitem"><a href="policy/">Политика Конфиденциальности</a></mat-list-item>
<mat-list-item role="listitem"><a href="#">Политика по Отношению к Cookie</a></mat-list-item>
<mat-list-item role="listitem"><a href="#">Правила и Условия Использования</a></mat-list-item>
</mat-list>
</div>
<div>
<mat-list role="list">
<mat-list-item role="listitem"><a href="#">Документация</a></mat-list-item>
<mat-list-item role="listitem"><a href="#">Лицензия</a></mat-list-item>
<mat-list-item role="listitem"><a href="#">О Нас</a></mat-list-item>
</mat-list>
</div>
</div>
<hr/>
<div class="app-footer-copyright">
<span>Powered by Winsomnia &copy;{{ currentYear }}.</span>
<a href="https://opensource.org/license/mit/">Code licensed under an MIT-style License.</a>
<span>Current Version: {{ version }}</span>
</div>
</div>
</footer>

View File

@ -0,0 +1,23 @@
import {Component} from "@angular/core";
import {MatList, MatListItem} from "@angular/material/list";
import {version} from "@/../package.json";
@Component({
selector: 'app-footer',
standalone: true,
imports: [
MatList,
MatListItem
],
templateUrl: './footer.component.html',
styleUrl: './footer.component.css'
})
export class FooterComponent {
currentYear: number;
version: string;
constructor() {
this.currentYear = new Date().getFullYear();
this.version = version;
}
}