Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added login header component & design register

Browse source
This commit is contained in:
Chneemann 2024-05-13 04:12:22 +02:00
parent b03ed07d91
commit c3af628789
10 changed files with 141 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/app/components/login/header/header.component.html Normal file
View file

@ -0,0 +1,7 @@
<img class="logo" src="./../../../assets/img/login/logo.svg" alt="" />
@if (signUpBtn) {
<div class="register">
<p>Not a Join user?</p>
<button routerLink="/register">Sign up</button>
</div>
}

68
src/app/components/login/header/header.component.scss Normal file
View file

@ -0,0 +1,68 @@
.logo {
position: absolute;
left: 57px;
top: 60px;
height: 100px;
width: 122px;
}
.register {
position: absolute;
top: 67px;
right: 100px;
display: inline-flex;
align-items: center;
p {
display: flex;
align-items: center;
padding-right: 32px;
font-size: 16px;
font-weight: 400;
}
button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--dark-blue);
color: var(--white);
width: 91px;
height: 49px;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
border: 0px;
transition: 125ms ease-in-out;
cursor: pointer;
&:hover {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
background-color: var(--light-blue);
}
}
}
/*------------- RESPONSIVE -------------*/
@media (max-height: 820px) {
.logo {
display: none;
}
}
@media screen and (max-width: 650px) {
.register {
top: unset;
right: unset;
left: 0;
bottom: 99px;
display: flex;
justify-content: center;
width: 100%;
}
.logo {
left: 38px;
top: 37px;
height: 64px;
width: 78px;
}
}

23
src/app/components/login/header/header.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HeaderComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

13
src/app/components/login/header/header.component.ts Normal file
View file

@ -0,0 +1,13 @@
import { Component, Input } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-header',
standalone: true,
imports: [RouterModule],
templateUrl: './header.component.html',
styleUrl: './header.component.scss',
})
export class HeaderComponent {
@Input() signUpBtn: boolean = false;
}

6
src/app/components/login/login.component.html
View file

@ -1,9 +1,5 @@
<section>
<img class="logo" src="./../../../assets/img/login/logo.svg" alt="" />
<div class="register">
<p>Not a Join user?</p>
<button routerLink="register">Sign up</button>
</div>
<app-header [signUpBtn]="true"></app-header>
<form
id="form"
#taskForm="ngForm"

68
src/app/components/login/login.component.scss
View file

@ -3,48 +3,6 @@ section {
height: 100vh;
}
.logo {
position: absolute;
left: 57px;
top: 60px;
height: 100px;
width: 122px;
}
.register {
position: absolute;
top: 67px;
right: 100px;
display: inline-flex;
align-items: center;
p {
display: flex;
align-items: center;
padding-right: 32px;
font-size: 16px;
font-weight: 400;
}
button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--dark-blue);
color: var(--white);
width: 91px;
height: 49px;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
border: 0px;
transition: 125ms ease-in-out;
cursor: pointer;
&:hover {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
background-color: var(--light-blue);
}
}
}
// LOGIN
.content {
@ -126,15 +84,6 @@ section {
/*------------- RESPONSIVE -------------*/
@media (max-height: 820px) {
.content {
top: 40%;
}
.logo {
display: none;
}
}
@media screen and (max-width: 650px) {
.content {
width: 322px;
@ -144,23 +93,6 @@ section {
font-size: 47px;
}
}
.register {
top: unset;
right: unset;
left: 0;
bottom: 99px;
display: flex;
justify-content: center;
width: 100%;
}
.logo {
left: 38px;
top: 37px;
height: 64px;
width: 78px;
}
}
@media (max-height: 550px) {

9
src/app/components/login/login.component.ts
View file

@ -7,11 +7,18 @@ import { Router } from '@angular/router';
import { LoginService } from '../../services/login.service';
import { SharedService } from '../../services/shared.service';
import { FooterComponent } from './footer/footer.component';
import { HeaderComponent } from './header/header.component';
@Component({
selector: 'app-login',
standalone: true,
imports: [FormsModule, CommonModule, FormBtnComponent, FooterComponent],
imports: [
FormsModule,
CommonModule,
FormBtnComponent,
FooterComponent,
HeaderComponent,
],
templateUrl: './login.component.html',
styleUrl: './login.component.scss',
})

5
src/app/components/login/register/register.component.html
View file

@ -1 +1,4 @@
<p>register works!</p>
<section>
<app-header [signUpBtn]="false"></app-header>
<app-footer></app-footer>
</section>

12
src/app/components/login/register/register.component.scss
View file

@ -0,0 +1,12 @@
section {
width: 100vw;
height: 100vh;
}
.logo {
position: absolute;
left: 57px;
top: 60px;
height: 100px;
width: 122px;
}

10
src/app/components/login/register/register.component.ts
View file

@ -1,12 +1,12 @@
import { Component } from '@angular/core';
import { HeaderComponent } from '../header/header.component';
import { FooterComponent } from '../footer/footer.component';
@Component({
selector: 'app-register',
standalone: true,
imports: [],
imports: [HeaderComponent, FooterComponent],
templateUrl: './register.component.html',
styleUrl: './register.component.scss'
styleUrl: './register.component.scss',
})
export class RegisterComponent {
}
export class RegisterComponent {}