s416178
/
Punktonerzy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Responsywny header

This commit is contained in:
Marcin Szczepański 2020-01-16 19:11:22 +01:00
parent ece82d64cc
commit 9c3691e6bd
4 changed files with 67 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
FrontEnd/src/app/login/login.component.ts
View File

@ -4,6 +4,7 @@ import { AuthenticationService } from '../authentication.service';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { MatSnackBar } from '@angular/material/snack-bar';
import { environment } from '../../environments/environment';
@Component({
moduleId: module.id,
templateUrl: 'login.component.html',
@ -34,7 +35,7 @@ export class LoginComponent implements OnInit {
if (result === true) {
// login successful
this.isLogin = true;
this.router.navigate(['home']);
this.router.navigate(['/my-groups']);
this.snackBar.open('Zalogowano pomyślnie.', null,
{ duration: 3000, verticalPosition: 'top', panelClass: ['snackbar-success'] });
} else {
@ -64,7 +65,7 @@ export class LoginComponent implements OnInit {
this.outh_token_secret = this.outh_token_secret.replace('oauth_token_secret=', '');
localStorage.setItem('outh_token', array[0].replace('oauth_token=', ''));
localStorage.setItem('outh_token_secret', array[1].replace('oauth_token_secret=', ''));
window.location.href = el.url;
window.location.href = environment.frontend + 'my-groups';
});
}
}

21
FrontEnd/src/app/main-navigation/main-navigation.component.css
View File

@ -77,6 +77,14 @@ a:hover{
width: 4rem;
}
.mobile-logo-wrapper, .mobile-off-on-btn {
display: none;
}
.wrapper .logo-and-name {
display: flex;
}
@media screen and (max-width: 1200px) {
.study-cave{
font-size: 32px;
@ -108,6 +116,19 @@ a:hover{
{
font-size: large;
}
.mobile-off-on-btn {
display: block;
}
.mobile-logo-wrapper {
display: flex;
width: 100%;
background-color: black;
height: 55px;
padding-bottom: 5px;
justify-content: space-between;
}
}

12
FrontEnd/src/app/main-navigation/main-navigation.component.html
View File

@ -1,5 +1,13 @@
<div class="wrapper" id="header">
<div class="logo-and-name" routerLink="/home">
<div class="mobile-logo-wrapper">
<a class="mobile-off-on-btn button" style="height: 27px; margin-top: 14px; margin-left: 8px;" (click)="onOffMenuMobile()">Pokaż menu</a>
<div class="logo-and-name" routerLink="/my-groups">
<img class="logo" src="./assets/logo-punktonerzy.PNG" alt="error" style="width: 70px; height: 50px;">
</div>
</div>
<a #btn class="mobile-off-on-btn button" style="position: absolute; z-index: 9999; top: 14px; margin-left: 8px;" (click)="onOffMenuMobile()">Ukryj menu</a>
<div #menu class="wrapper" id="header">
<div class="logo-and-name" routerLink="/my-groups">
<img class="logo" src="./assets/logo-punktonerzy.PNG" alt="error" style="width: 100px; height: 70px;">
</div>
<div class="menu">

34
FrontEnd/src/app/main-navigation/main-navigation.component.ts
View File

@ -1,7 +1,9 @@
import { Component, OnInit, Input, OnChanges, SimpleChanges, SimpleChange } from '@angular/core';
import { Component, OnInit, Input, OnChanges, SimpleChanges, SimpleChange, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from '../authentication.service';
import * as $ from 'jquery';
@Component({
selector: 'app-main-navigation',
templateUrl: './main-navigation.component.html',
@ -10,11 +12,41 @@ import { AuthenticationService } from '../authentication.service';
export class MainNavigationComponent implements OnInit {
currentUser;
isLogin: Boolean;
@ViewChild('menu') menu: ElementRef;
@ViewChild('btn') btn: ElementRef;
constructor(private router: Router, private authenticationService: AuthenticationService) {
authenticationService.getLoggedInName.subscribe(name => this.isLoggedIn());
}
onOffMenuMobile() {
console.log(this.menu.nativeElement.style.display)
if (this.menu.nativeElement.style.display === '') {
this.menu.nativeElement.style.display = 'none';
this.btn.nativeElement.style.display = 'none';
$('app-main-navigation ~ div.content').each(function () {
$(this).css('position', 'static');
$(this).css('margin-top', '0');
});
} else {
if (this.menu.nativeElement.style.display === 'none') {
this.menu.nativeElement.style.display = 'flex';
this.btn.nativeElement.style.display = 'block';
$('app-main-navigation ~ div.content').each(function () {
$(this).css('position', 'fixed');
$(this).css('margin-top', '250px');
});
} else {
this.menu.nativeElement.style.display = 'none';
this.btn.nativeElement.style.display = 'none';
$('app-main-navigation ~ div.content').each(function () {
$(this).css('position', 'position');
$(this).css('margin-top', '0');
});
}
}
}
navToProfile() {
const currentUser = JSON.parse(localStorage.getItem('currentUser'));
this.router.navigate(['/profile', currentUser.username]);