Commit 463334e4 authored by Corentin Guillevic's avatar Corentin Guillevic
Browse files

Add master modification ; Add some page in not-alone-web

parent d896d37e
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
/************************
Navbar
************************/
nav {
position: fixed;
width: 15%;
height: 100%;
top: 0;
right: 0;
z-index: 500;
}
/*Button*/
nav .button{
position: fixed;
top: 2%;
right: 2%;
width: 4%;
padding-bottom: 4%;
z-index: 1000;
-webkit-transition : all 0.3s;
transition : all 0.3s;
}
nav .button.close{
right: 10%;
}
nav .button:hover{
cursor: pointer;
}
nav .button span{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 12%;
background-color: rgba(245, 245, 245, 1);
-webkit-transition : all 0.3s;
transition : all 0.3s;
}
nav .button span::before, nav .button span::after{
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(245, 245, 245, 1);
-webkit-transition : all 0.3s;
transition : all 0.3s;
}
nav .button span::before{
bottom: -180%;
}
nav .button span::after{
top: -180%;
}
nav .button:hover span::before{
bottom: -220%;
}
nav .button:hover span::after{
top: -220%;
}
nav .button.close span {
background-color: rgba(0,0,0,0);
}
nav .button.close span::before {
transform: rotate(-45deg);
bottom: 0;
}
nav .button.close span::after {
transform: rotate(45deg);
top: 0;
}
nav .button.close:hover span::before, nav .button.close:hover span::after{
background-color: #d63031;
}
/*Menu*/
nav .menu{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(150,150,150,0.6);
-webkit-transition : all 0.3s;
transition : all 0.3s;
}
nav .menu.close {
transform: translateX(100%);
}
nav .menu ul{
position: absolute;
top: 50%;
transform: translateY(-50%);
max-height: 80%;
width: 100%;
overflow-y: auto;
}
nav .menu li{
position: relative;
font-size: 2em;
width: 100%;
height: 8vh;
}
nav .menu li:hover{
cursor: pointer;
}
nav .menu li::before{
content: '';
position: absolute;
width: 5%;
height: 100%;
background-color: #d63031;
visibility: hidden;
opacity: 0;
-webkit-transition : all 0.3s;
transition : all 0.3s;
}
nav .menu li:hover::before{
visibility: inherit;
opacity: 1;
}
nav .menu li p{
position: absolute;
top: 50%;
left: 50%;
color: #ededed;
transform: translate(-50%, -50%);
}
\ No newline at end of file
<nav>
<div [className]="open ? 'button close' : 'button'" (click)="click()">
<span></span>
</div>
<div [className]="open ? 'menu' : 'menu close'" >
<ul>
<li routerLink=""><p>Home</p></li>
<li routerLink="/room"><p>Room</p></li>
<li routerLink="/game"><p>Game</p></li>
<li routerLink="/help"><p>Help</p></li>
</ul>
</div>
</nav>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
open : boolean = true;
constructor() { }
ngOnInit() {
}
click() {
this.open = !this.open;
}
}
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RoomComponent } from './room.component';
describe('RoomComponent', () => {
let component: RoomComponent;
let fixture: ComponentFixture<RoomComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RoomComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RoomComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-room',
templateUrl: './room.component.html',
styleUrls: ['./room.component.css']
})
export class RoomComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment