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

finished dropdown menu for now

parent 33471fe9
<div class="app-container"> <div class="app-container">
<app-nav-bar></app-nav-bar> <app-nav-bar (navState)="toggleNavState($event)"></app-nav-bar>
<div class="main-content"> <div class="main-content" [@nav-bar-state]="navState">
<app-search-bar></app-search-bar> <app-search-bar></app-search-bar>
<!--<div class="place-window">--> <!--<div class="place-window">-->
<app-place-window></app-place-window> <app-place-window></app-place-window>
......
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { DataProviderService } from './data-provider.service'; import { DataProviderService } from './data-provider.service';
import { Place } from './place'; import { Place } from './place';
import {
trigger,
state,
style,
animate,
transition,
keyframes
} from '@angular/animations';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], 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 { export class AppComponent {
navState='expanded';
toggleNavState(event): void {
if (event === 'expanded') {
this.navState = 'expanded';
} else {
this.navState = 'collapsed';
}
}
} }
.small-nav-background { .small-nav-background {
// position:absolute; position:relative;
top:0; top:0;
width: 100%; width: 100%;
height: 95px; height: 75px;
// background-color: #006633; // background-color: #006633;
} }
...@@ -16,14 +16,15 @@ ...@@ -16,14 +16,15 @@
} }
.small-title-container { .small-title-container {
width:200px;
height:60px;
margin-left:5px; margin-left:5px;
height:60px;
} }
.small-title { .small-title {
font-family: Nunito-Bold; margin-top:2px;
font-size: 24px; font-family: Nunito-SemiBold;
font-size: 25px;
line-height: 30px;
color: #FFFFFF; color: #FFFFFF;
} }
...@@ -32,6 +33,7 @@ ...@@ -32,6 +33,7 @@
font-family: NunitoSans-Regular; font-family: NunitoSans-Regular;
font-size: 15px; font-size: 15px;
color: #FFFFFF; color: #FFFFFF;
margin-top:2px;
} }
.long-container{ .long-container{
...@@ -42,31 +44,28 @@ ...@@ -42,31 +44,28 @@
align-items:center; align-items:center;
} }
.links { .collapsed-links {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 340px; width: 340px;
justify-content: space-between; justify-content: space-between;
margin:auto; margin:auto 0px auto 25px;
color:white;
} }
.link-font { .collapsed-link-font {
font-family: NunitoSans-SemiBold; font-family: NunitoSans-Regular;
font-size: 18px; font-size: 18px;
color:inherit; color:inherit;
} }
.check-code-button { .collapsed-check-code-button {
position: absolute; position: absolute;
top: 30px; top: 50%;
right: 30px; right: 30px;
height: 35px; height: 35px;
width: 160px; width: 160px;
transform: translateY(-50%);
// background-color:green; // background-color:green;
border-color: #FFCC33; border-color: #FFCC33;
border-style: solid; border-style: solid;
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
width: 100%; width: 100%;
top: 0px; top: 0px;
left: 0px; left: 0px;
height: 55%; height: 400px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 8px 20px 0px $shadow-color; box-shadow: 0px 8px 20px 0px $shadow-color;
z-index: 500; z-index: 500;
...@@ -19,6 +19,23 @@ ...@@ -19,6 +19,23 @@
position: absolute; 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 { .header-background {
//width: 56.65%; //width: 56.65%;
...@@ -98,3 +115,24 @@ ...@@ -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(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%); 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]="state">
<div class="exp-nav-background"[@toggle-large-bar]="expanded">
<div class="close-nav-bar-button-container"> <div class="close-nav-bar-button-container">
<div class="close-nav-bar-button" (click)="toggleState()"></div> <div class="close-nav-bar-button" (click)="toggleState()"></div>
</div> </div>
<div class="header-background"> <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"> <div class="title-and-logo">
<!--<img class="logo" src="../../assets/SRCT_square.svg">--> <!--<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"> <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 @@ ...@@ -53,25 +57,26 @@
<div class="promo-background"> <div class="promo-background">
<div class="circle"></div> <div class="circle"></div>
</div> </div>
<div class="check-code-button">
Check out the code
</div> </div>
<div [@toggle-small-bar]="expanded" class="small-nav-background"> </div>
<div [@toggle-small-bar]="state" class="small-nav-background">
<div class="long-container"> <div class="long-container">
<img [@toggle-logo-and-text]="expanded" class="small-logo" src="../../assets/small-logo.png"> <img [@toggle-logo-and-text]="state" class="small-logo" src="../../assets/small-logo.png">
<div [@toggle-logo-and-text]="expanded" class="small-title-container"> <div [@toggle-logo-and-text]="state" class="small-title-container">
<div class="small-title">Whats Open</div> <div class="small-title">Whats Open</div>
<div class="small-sub-title">A Student-Built App</div> <div class="small-sub-title">A Student-Built App</div>
</div> </div>
<div class="links" [@toggle-links]="expanded"> <div class="collapsed-links">
<div class="link-font">Feedback</div> <div class="collapsed-link-font">Feedback</div>
<div class="link-font">About</div> <div class="collapsed-link-font">About</div>
<div class="link-font">Our Projects</div> <div class="collapsed-link-font">Our Projects</div>
</div> </div>
</div> </div>
<div class="check-code-button"> <div class="collapsed-check-code-button">
Check out the code Check out the code
</div> </div>
</div>
</div> </div>
...@@ -33,6 +33,3 @@ ...@@ -33,6 +33,3 @@
height:80px; height:80px;
z-index: -10; 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 { import {
trigger, trigger,
state, state,
...@@ -62,18 +62,22 @@ import { ...@@ -62,18 +62,22 @@ import {
] ]
}) })
export class NavBarComponent implements OnInit { export class NavBarComponent implements OnInit {
expanded: string = 'expanded'; state = 'collapsed';
@Output() navState: EventEmitter<string> = new EventEmitter<string>();
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
this.navState.emit(this.state);
} }
toggleState(): void { toggleState(): void {
if (this.expanded === 'expanded') { if (this.state === 'expanded') {
this.expanded = 'collapsed'; this.state = 'collapsed';
this.navState.emit(this.state);
} else { } 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