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>
<!--</div>--> <!--</div>-->
<!--<app-context-bar></app-context-bar>--> <!--<app-context-bar></app-context-bar>-->
......
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 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>
<div class="header-background"> <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"> <desc>Created with Sketch.</desc>
<desc>Created with Sketch.</desc> <defs>
<defs> <circle id="clock-1" cx="57.5" cy="57.5" r="57.5"></circle>
<circle id="clock-1" cx="57.5" cy="57.5" r="57.5"></circle> <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-6" y="-6" width="127" height="127">
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-6" y="-6" width="127" height="127"> <rect x="-6" y="-6" width="127" height="127" fill="white"></rect>
<rect x="-6" y="-6" width="127" height="127" fill="white"></rect> <use xlink:href="#clock-1" fill="black"></use>
<use xlink:href="#clock-1" fill="black"></use> </mask>
</mask> </defs>
</defs> <g id="Clock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(200.000000, 0.000000)">
<g id="Clock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(200.000000, 0.000000)"> <use id="clock-Oval-2" stroke="#354052" mask="url(#mask-2)" stroke-width="12" xlink:href="#clock-1"></use>
<use id="clock-Oval-2" stroke="#354052" mask="url(#mask-2)" stroke-width="12" xlink:href="#clock-1"></use> <rect id="clock-Rectangle-2" fill="#354052" transform="translate(49.500000, 68.500000) rotate(-53.000000) translate(-49.500000, -68.500000) "
<rect id="clock-Rectangle-2" fill="#354052" transform="translate(49.500000, 68.500000) rotate(-53.000000) translate(-49.500000, -68.500000) " x="34" y="66" width="31" height="5" rx="2.5"></rect>
x="34" y="66" width="31" height="5" rx="2.5"></rect> <rect id="clock-Rectangle-3" fill="#354052" transform="translate(80.500000, 54.399025) rotate(-7.000000) translate(-80.500000, -54.399025) "
<rect id="clock-Rectangle-3" fill="#354052" transform="translate(80.500000, 54.399025) rotate(-7.000000) translate(-80.500000, -54.399025) " x="57" y="52.3990249" width="47" height="4" rx="2"></rect>
x="57" y="52.3990249" width="47" height="4" rx="2"></rect> <rect id="clock-Rectangle-4" fill="#354052" transform="translate(40.000000, 44.000000) rotate(36.000000) translate(-40.000000, -44.000000) "
<rect id="clock-Rectangle-4" fill="#354052" transform="translate(40.000000, 44.000000) rotate(36.000000) translate(-40.000000, -44.000000) " x="17" y="43" width="46" height="2" rx="1"></rect>
x="17" y="43" width="46" height="2" rx="1"></rect> <circle id="clock-Oval-3" fill="#354052" cx="58" cy="57" r="4"></circle>
<circle id="clock-Oval-3" fill="#354052" cx="58" cy="57" r="4"></circle> </g>
</g> </svg>
</svg> <div class="title">What's Open</div>
<div class="title">What's Open</div>
</div>
</div> </div>
</div>
<div class="phones"> <div class="phones">
<div class="phone-wrap phone-wrap--iphone" style="transform: translate3d(0px, 14.97px, 0px) scale(1); opacity: 1;"> <div class="phone-wrap phone-wrap--iphone" style="transform: translate3d(0px, 14.97px, 0px) scale(1); opacity: 1;">
<div class="phone phone--iphone the-iphone"> <div class="phone phone--iphone the-iphone">
<div class="the-iphone-dot"></div> <div class="the-iphone-dot"></div>
<div class="the-iphone-line"></div> <div class="the-iphone-line"></div>
<div class="the-iphone-screen"></div> <div class="the-iphone-screen"></div>
<div class="the-iphone-button"></div> <div class="the-iphone-button"></div>
</div>
</div> </div>
</div>
<div class="phone-wrap phone-wrap--android" style="transform: translate3d(0px, 27.45px, 0px) scale(1); opacity: 1;"> <div class="phone-wrap phone-wrap--android" style="transform: translate3d(0px, 27.45px, 0px) scale(1); opacity: 1;">
<div class="phone phone--android the-android"> <div class="phone phone--android the-android">
<div class="the-android-dot"></div> <div class="the-android-dot"></div>
<div class="the-android-line"></div> <div class="the-android-line"></div>
<div class="the-android-screen"></div> <div class="the-android-screen"></div>
<div class="the-android-button"></div> <div class="the-android-button"></div>
</div>
</div> </div>
</div> </div>
<div class="white-gradient"></div>
<div class="promo-background">
<div class="circle"></div>
</div>
</div> </div>
<div [@toggle-small-bar]="expanded" class="small-nav-background"> <div class="white-gradient"></div>
<div class="long-container"> <div class="promo-background">
<img [@toggle-logo-and-text]="expanded" class="small-logo" src="../../assets/small-logo.png"> <div class="circle"></div>
<div [@toggle-logo-and-text]="expanded" class="small-title-container"> </div>
<div class="small-title">Whats Open</div> <div class="check-code-button">
<div class="small-sub-title">A Student-Built App</div> Check out the code
</div> </div>
<div class="links" [@toggle-links]="expanded"> </div>
<div class="link-font">Feedback</div> <div [@toggle-small-bar]="state" class="small-nav-background">
<div class="link-font">About</div> <div class="long-container">
<div class="link-font">Our Projects</div> <img [@toggle-logo-and-text]="state" class="small-logo" src="../../assets/small-logo.png">
</div> <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>
<div class="check-code-button"> <div class="collapsed-links">
Check out the code <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> </div>
<div class="collapsed-check-code-button">
Check out the code
</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