Commit 207ecc42 authored by mdsecurity's avatar mdsecurity
Browse files

finished dropdown menu for now

parent 33471fe9
<div class="app-container">
<app-nav-bar></app-nav-bar>
<div class="main-content">
<app-nav-bar (navState)="toggleNavState($event)"></app-nav-bar>
<div class="main-content" [@nav-bar-state]="navState">
<app-search-bar></app-search-bar>
<!--<div class="place-window">-->
<app-place-window></app-place-window>
......
import { Component } from '@angular/core';
import { DataProviderService } from './data-provider.service';
import { Place } from './place';
import {
trigger,
state,
style,
animate,
transition,
keyframes
} from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [DataProviderService]
providers: [DataProviderService],
animations: [
trigger('nav-bar-state', [
state('expanded', style({
transform: 'translateY(325px)',
})),
state('collapsed', style({
transform: 'translateY(0px)',
})),
transition('expanded => collapsed', animate('250ms cubic-bezier(.35,0,.61,1)')),
transition('collapsed => expanded', animate('250ms ease-in-out'))
])
]
})
export class AppComponent {
navState='expanded';
toggleNavState(event): void {
if (event === 'expanded') {
this.navState = 'expanded';
} else {
this.navState = 'collapsed';
}
}
}
.small-nav-background {
// position:absolute;
position:relative;
top:0;
width: 100%;
height: 95px;
height: 75px;
// background-color: #006633;
}
......@@ -16,14 +16,15 @@
}
.small-title-container {
width:200px;
height:60px;
margin-left:5px;
height:60px;
}
.small-title {
font-family: Nunito-Bold;
font-size: 24px;
margin-top:2px;
font-family: Nunito-SemiBold;
font-size: 25px;
line-height: 30px;
color: #FFFFFF;
}
......@@ -32,6 +33,7 @@
font-family: NunitoSans-Regular;
font-size: 15px;
color: #FFFFFF;
margin-top:2px;
}
.long-container{
......@@ -42,31 +44,28 @@
align-items:center;
}
.links {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
.collapsed-links {
display: flex;
flex-direction: row;
width: 340px;
justify-content: space-between;
margin:auto;
margin:auto 0px auto 25px;
color:white;
}
.link-font {
font-family: NunitoSans-SemiBold;
.collapsed-link-font {
font-family: NunitoSans-Regular;
font-size: 18px;
color:inherit;
}
.check-code-button {
.collapsed-check-code-button {
position: absolute;
top: 30px;
top: 50%;
right: 30px;
height: 35px;
width: 160px;
transform: translateY(-50%);
// background-color:green;
border-color: #FFCC33;
border-style: solid;
......
......@@ -3,7 +3,7 @@
width: 100%;
top: 0px;
left: 0px;
height: 55%;
height: 400px;
background: #ffffff;
box-shadow: 0px 8px 20px 0px $shadow-color;
z-index: 500;
......@@ -19,6 +19,23 @@
position: absolute;
}
}
.links {
position: absolute;
top:47.5px;
left:50%;
transform: translate(-50%,-50%);
display: flex;
flex-direction: row;
width: 370px;
justify-content: space-between;
color:#354052;
}
.link-font {
font-family: NunitoSans-SemiBold;
font-size: 18px;
color:inherit;
}
.header-background {
//width: 56.65%;
......@@ -98,3 +115,24 @@
background-image: radial-gradient(48% 50%, rgba(255, 255, 255, 0.54) 51%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(52% 50%, rgba(255, 255, 255, 0.2) 47%, rgba(255, 255, 255, 0) 100%);
}
.check-code-button {
position: absolute;
top: 30px;
right: 30px;
height: 35px;
width: 160px;
background-color:#006633;
border-color: #FFCC33;
border-style: solid;
border-width: 2px;
border-radius: 50px;
opacity: 0.9;
font-family: NunitoSans-Regular;
font-size: 13px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
line-height: 35px;
z-index: 500;
transition: all .2s ease-in-out;
}
\ No newline at end of file
<div class="nav-bars-container" >
<div class="exp-nav-background"[@toggle-large-bar]="expanded">
<div class="exp-nav-background" [@toggle-large-bar]="state">
<div class="close-nav-bar-button-container">
<div class="close-nav-bar-button" (click)="toggleState()"></div>
</div>
<div class="header-background">
<div class="links">
<div class="link-font">Feedback</div>
<div class="link-font">About</div>
<div class="link-font">Our Projects</div>
</div>
<div class="title-and-logo">
<!--<img class="logo" src="../../assets/SRCT_square.svg">-->
<svg class="logo" viewBox="194 -6 127 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
......@@ -53,25 +57,26 @@
<div class="promo-background">
<div class="circle"></div>
</div>
<div class="check-code-button">
Check out the code
</div>
<div [@toggle-small-bar]="expanded" class="small-nav-background">
</div>
<div [@toggle-small-bar]="state" class="small-nav-background">
<div class="long-container">
<img [@toggle-logo-and-text]="expanded" class="small-logo" src="../../assets/small-logo.png">
<div [@toggle-logo-and-text]="expanded" class="small-title-container">
<img [@toggle-logo-and-text]="state" class="small-logo" src="../../assets/small-logo.png">
<div [@toggle-logo-and-text]="state" class="small-title-container">
<div class="small-title">Whats Open</div>
<div class="small-sub-title">A Student-Built App</div>
</div>
<div class="links" [@toggle-links]="expanded">
<div class="link-font">Feedback</div>
<div class="link-font">About</div>
<div class="link-font">Our Projects</div>
<div class="collapsed-links">
<div class="collapsed-link-font">Feedback</div>
<div class="collapsed-link-font">About</div>
<div class="collapsed-link-font">Our Projects</div>
</div>
</div>
<div class="check-code-button">
<div class="collapsed-check-code-button">
Check out the code
</div>
</div>
</div>
......@@ -33,6 +33,3 @@
height:80px;
z-index: -10;
}
.nav-bars-container{
}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {
trigger,
state,
......@@ -62,18 +62,22 @@ import {
]
})
export class NavBarComponent implements OnInit {
expanded: string = 'expanded';
state = 'collapsed';
@Output() navState: EventEmitter<string> = new EventEmitter<string>();
constructor() { }
ngOnInit() {
this.navState.emit(this.state);
}
toggleState(): void {
if (this.expanded === 'expanded') {
this.expanded = 'collapsed';
if (this.state === 'expanded') {
this.state = 'collapsed';
this.navState.emit(this.state);
} else {
this.expanded = 'expanded';
this.state = 'expanded';
this.navState.emit(this.state);
}
console.log('something happened')
}
}
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