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">-->
<!--<div class="place-window">-->
<app-place-window></app-place-window>
<!--</div>-->
<!--<app-context-bar></app-context-bar>-->
......
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="close-nav-bar-button-container">
<div class="close-nav-bar-button" (click)="toggleState()"></div>
<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="header-background">
<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">
<desc>Created with Sketch.</desc>
<defs>
<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">
<rect x="-6" y="-6" width="127" height="127" fill="white"></rect>
<use xlink:href="#clock-1" fill="black"></use>
</mask>
</defs>
<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>
<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>
<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>
<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>
<circle id="clock-Oval-3" fill="#354052" cx="58" cy="57" r="4"></circle>
</g>
</svg>
<div class="title">What's Open</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">
<desc>Created with Sketch.</desc>
<defs>
<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">
<rect x="-6" y="-6" width="127" height="127" fill="white"></rect>
<use xlink:href="#clock-1" fill="black"></use>
</mask>
</defs>
<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>
<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>
<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>
<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>
<circle id="clock-Oval-3" fill="#354052" cx="58" cy="57" r="4"></circle>
</g>
</svg>
<div class="title">What's Open</div>
</div>
</div>
<div class="phones">
<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="the-iphone-dot"></div>
<div class="the-iphone-line"></div>
<div class="the-iphone-screen"></div>
<div class="the-iphone-button"></div>
</div>
<div class="phones">
<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="the-iphone-dot"></div>
<div class="the-iphone-line"></div>
<div class="the-iphone-screen"></div>
<div class="the-iphone-button"></div>
</div>
</div>
<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="the-android-dot"></div>
<div class="the-android-line"></div>
<div class="the-android-screen"></div>
<div class="the-android-button"></div>
</div>
<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="the-android-dot"></div>
<div class="the-android-line"></div>
<div class="the-android-screen"></div>
<div class="the-android-button"></div>
</div>
</div>
<div class="white-gradient"></div>
<div class="promo-background">
<div class="circle"></div>
</div>
</div>
<div [@toggle-small-bar]="expanded" 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">
<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>
<div class="white-gradient"></div>
<div class="promo-background">
<div class="circle"></div>
</div>
<div class="check-code-button">
Check out the code
</div>
</div>
<div [@toggle-small-bar]="state" class="small-nav-background">
<div class="long-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="check-code-button">
Check out the code
<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="collapsed-check-code-button">
Check out the code
</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