Authentication parte 2
Arrumando o layout
Vamos arrumar o layout, afinal, temos que deixar bonito 🤩
Primeiro, quero colocar um background na tela de auth, porém somente na tela de auth.
Mas como se é um component, e o background para ficar bom precisa ser estilizado no body?
Primeiro preciso de um background, adicionei um a pasta assets/images, pasta images essa que eu criei.
projects/principal/src/assets/images/auth-background.png
Primeiramente vamos adicionar alguns estilos a folha de estilos global da aplicação, styles.scss, aonde defino margin 0 e padding 0, além de largura de 100% e altura de 100% e a font será a ‘Montserrat’;
/* You can add global styles to this file, and also import other style files */
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0%;
font-family: 'Montserrat';
}Em index.html vamos adicionar fontes do google
<link href=”https://fonts.googleapis.com/css?family=Montserrat:400,700,200″ rel=”stylesheet” />
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Principal</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>Se vc voltar a aplicação já vai vê-la um pouco diferente rsrs
Mas queremos background!!
Vamos adicionar o estilo para o background na folha de estilo global, style.scss
/* You can add global styles to this file, and also import other style files */
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0%;
font-family: 'Montserrat';
}
.auth-background {
background-image: url("assets/images/auth-background.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: rgb(255, 196, 1);
background-size: cover;
}Agora, precisamos adicionar essa classe ao body da página, lembrando que a aplicação é um SPA(Single Page Application), portanto tem apenas um body.
Para isso vamos ao auth.component.ts, na função de ciclo de vida onInit adicionar a classe e na outra função de ciclo de vida ngOnDestroy retirar a classe.
Para saber mais sobre os Lifecycle Hooks https://angular.io/guide/lifecycle-hooks
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit, OnDestroy {
constructor() {}
adicionarOuRemoverImagemDeFundo() {
document.body.classList.toggle('auth-background');
}
ngOnInit() {
this.adicionarOuRemoverImagemDeFundo();
}
ngOnDestroy() {
this.adicionarOuRemoverImagemDeFundo();
}
}vamos testar?
Vamos limpar essas coisas do angular que ficam dentro do projects/principal/src/app/app.component.html
Retire tudo que tiver dentro dele, deixe apenas o router-outlet
<router-outlet></router-outlet>A rota auth deve ficar limpinha assim
Agora vamos adicionar um bloco centralizado ao componente de auth
Para isso vamos adicionar um pouco de html template html do component auth
projects/principal/src/app/auth/auth.component.html
<div class="auth-body">
<div class="auth-content">
<div>
</div>
</div>
</div>E também vamos adicionar as classes que irão centralizar essas divs ao template css desse componente
projects/principal/src/app/auth/auth.component.scss
.auth-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.auth-content {
width: 280px;
max-width: 280px;
height: 450px;
max-height: 450px;
border-radius: 7px;
background-color: rgb(255, 196, 1);
padding: 20px;
-webkit-box-shadow: 7px 10px 22px -11px rgba(0, 0, 0, 0.82);
-moz-box-shadow: 7px 10px 22px -11px rgba(0, 0, 0, 0.82);
box-shadow: 7px 10px 22px -11px rgba(0, 0, 0, 0.82);
}Sempre uso flex box para arrumar o layout, acho que viciei, não consigo pensar usando de outra forma
A sombra eu não fico calculando, etc, até pq nunca iria lembrar de como fazer, vou direto em sites que tem os fazedores, como por exemplo https://www.cssmatic.com/box-shadow, vou ajustando por ali, quando acho que fica bom copio o código e colo aonde preciso usar
E pronto, temos a div centralizada e bem bonitinha 😍
No próximo capítulo continuaremos com a saga do layout, 😘
2