Commit cd8cb044 authored by mdsecurity's avatar mdsecurity
Browse files

started on the new design

parent 5e038c66
{
"vsicons.presets.angular": true
"vsicons.presets.angular": true
}
\ No newline at end of file
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-beta.31",
"version": "1.0.0-rc.4",
"name": "whats-open-web"
},
"apps": [
......@@ -19,13 +19,13 @@
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.scss"
"styles.scss",
"../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"
],
"scripts": [
"./sw-loader.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
......
{
{
"name": "whats-open-web",
"version": "0.0.0",
"license": "MIT",
......@@ -17,6 +17,7 @@
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "^3.4.0",
......@@ -26,7 +27,7 @@
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/cli": "1.0.0-beta.31",
"@angular/cli": "^1.0.0-rc.4",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
......@@ -36,8 +37,8 @@
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "^1.0.2",
"protractor": "~5.1.0",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
......
......@@ -6,6 +6,7 @@ $pale-grey: #dfe3e9;
$background-color: #eff3f6;
$open-green:#3AC550;
$closed-grey:#C4B9B9;
$shadow-color:rgba(43,61,73,.15);
// $color-palette: (
// 'white' : #ffffff,
// 'primary' : #354052,
......
@import "color-palette";
@import "text-styles";
.light-card {
background-color: $white;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: $border-color;
}
.shadows{
box-shadow: 12px 15px 20px 0px $shadow-color;
}
\ No newline at end of file
// @import "color-palette";
// @import "color-palette";
/* Text styles */
.selected-nav {
......@@ -10,6 +11,7 @@
text-align: center;
color: $primary;
}
.deselected-nav {
font-family: HelveticaNeue-Medium;
font-size: 14px;
......@@ -72,8 +74,9 @@
text-align: left;
color: $bluegrey;
}
.tag-text{
width:20px;
.tag-text {
width: 20px;
font-family: HelveticaNeue-Bold;
font-size: 8px;
font-weight: normal;
......@@ -82,6 +85,7 @@
text-align: center;
color: $white;
}
.timeline-text {
width: 36px;
height: 16px;
......@@ -93,7 +97,8 @@
text-align: center;
color: $primary;
}
.campus-location-text{
.campus-location-text {
font-family: HelveticaNeue-Light;
font-size: 13px;
font-weight: normal;
......@@ -102,31 +107,31 @@
text-align: center;
color: $primary;
}
.search-box-text{
font-family: HelveticaNeue-Medium;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
// text-align: center;
color: $primary;
.search-bar-text {
font-family: NunitoSans-Regular;
font-size: 18px;
color: rgba(53, 64, 82, 0.15);
letter-spacing: -0.45px;
}
.area-title {
font-family: HelveticaNeue-Medium;
font-size: 20px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
text-align: center;
color:#68768C;
text-align: center;
color: #68768C;
}
.content-bar-title{
font-family: HelveticaNeue-Medium;
.content-bar-title {
font-family: HelveticaNeue-Medium;
font-size: 32px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
text-align: left;
color: $primary;
margin-left: 50.5px;
}
\ No newline at end of file
margin-left: 50.5px;
}
<div class="app-container">
<app-nav-bar></app-nav-bar>
<div class="main-content">
<app-filter-bar></app-filter-bar>
<div class="place-window">
<app-search-bar></app-search-bar>
<!--<div class="place-window">
<app-place-window></app-place-window>
</div>
<app-context-bar></app-context-bar>
</div>-->
<!--<app-context-bar></app-context-bar>-->
</div>
</div>
......@@ -6,8 +6,8 @@
width:100%;
height: 100%;
display: flex;
flex-direction: row;
padding-top: 50px;
flex-direction: column;
// padding-top: 50px;
}
.place-window{
......
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import { FormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
......@@ -13,8 +14,9 @@ import { SafeUrlPipe } from './safe-url.pipe';
import { PlaceWindowComponent } from './place-window/place-window.component';
import { PlaceCardComponent } from './place-window/area/place-card/place-card.component';
import { AreaComponent } from './place-window/area/area.component';
import { FilterBarComponent } from './filter-bar/filter-bar.component';
import { ShowHideArrowComponent } from './context-bar/show-hide-arrow/show-hide-arrow.component';
import { FeedbackDialogComponent } from './place-window/area/place-card/feedback-dialog/feedback-dialog.component';
import { SearchBarComponent } from './search-bar/search-bar.component';
@NgModule({
declarations: [
AppComponent,
......@@ -27,15 +29,18 @@ import { ShowHideArrowComponent } from './context-bar/show-hide-arrow/show-hide-
PlaceWindowComponent,
PlaceCardComponent,
AreaComponent,
FilterBarComponent,
ShowHideArrowComponent
ShowHideArrowComponent,
FeedbackDialogComponent,
SearchBarComponent
],
imports: [
BrowserModule,
// FormsModule,
HttpModule
FormsModule,
HttpModule,
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
entryComponents:[FeedbackDialogComponent]
})
export class AppModule { }
<div class="context-bar-button-container">
<!--<button class="show-hide-button"(click)="show=!show">Click Me</button>-->
<app-show-hide-arrow class="show-hide-button" [isRight]='true' (change)="show = $event"></app-show-hide-arrow>
<button (click)="tempf()">Click</button>
<app-show-hide-arrow class="show-hide-button" [isRight]='false' (change)="show = $event"></app-show-hide-arrow>
<!--<button (click)="tempf()">Click</button>-->
<div [ngClass]="(show)?'light-card context-bar-open' : 'light-card context-bar-closed'">
<div class="context-bar-header">
......
......@@ -8,7 +8,7 @@ import { Place } from '../place';
})
export class ContextBarComponent implements OnInit {
show = true;
show = false;
place: Place = new Place();
error: any;
constructor(private dataProvider: DataProviderService) { }
......@@ -21,10 +21,10 @@ export class ContextBarComponent implements OnInit {
);
}
tempf() {
if(localStorage.getItem('facilities')){
console.log(localStorage.getItem('facilities'))
}else{
localStorage.setItem('facilities','hi');
}
// if(localStorage.getItem('facilities')){
// console.log(localStorage.getItem('facilities'))
// }else{
// localStorage.setItem('facilities','hi');
// }
}
}
......@@ -12,6 +12,7 @@ import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/DefaultIfEmpty';
@Injectable()
export class DataProviderService {
......@@ -31,19 +32,19 @@ export class DataProviderService {
return this.placesObs;
} else {
const facilities = localStorage.getItem('facilities');
if (facilities){
if (facilities) {
this.places = this.extractData(JSON.parse(facilities));
this.placesObs = Observable.of(this.places);
return this.placesObs;
} else {
this.placesObs = this.http.get(this.Url)
.map((data) => {
.map((data) => {
this.placesObs = null;
data = data.json();
this.places = this.extractData(data);
this.contextPlace = this.places[0];
localStorage.setItem('facilities',JSON.stringify(data));
// console.log(this.contextPlace);
localStorage.setItem('facilities', JSON.stringify(data));
return this.places;
})
.catch(this.handleError).share();
......@@ -97,7 +98,6 @@ export class DataProviderService {
}
return places;
}
private handleError(error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
......
<div class=" filter-bar">
<div class="campus-location">
<i class="fa fa-map-marker campus-location-icon" aria-hidden="true"></i>
<div class="campus-location-text">GMU, Fairfax Campus</div>
</div>
<div>
<!--<i class="fa fa-search search-box-icon" aria-hidden="true"></i>-->
<input type="text" class="form-control search-box search-box-text" placeholder="Search a location">
</div>
</div>
@import '../../global-styles';
.filter-bar {
width: 176.48px;
display: flex;
flex-direction: column;
padding-left: 8px;
box-sizing: content-box;
background-color: rgba(255,255,255,0);
position:absolute;
}
.search-box {
border-width: 1px;
border-radius: 4px;
width: 157px;
height: 31px;
border-color: $primary;
border-style: solid;
padding: 0px;
padding-left: 5px;
}
.input-group {
width: 157px;
height: 31px;
position: relative;
}
.campus-location {
display: flex;
flex-direction: row;
}
.campus-location-icon {
margin-right: 8px;
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-filter-bar',
templateUrl: './filter-bar.component.html',
styleUrls: ['./filter-bar.component.scss']
})
export class FilterBarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="nav-bar">
<div class="nav-icon"></div>
<a class="selected-nav nav-link" href="#">What's Open</a>
<a class="deselected-nav nav-link"href="#">Feedback</a>
<a class="deselected-nav nav-link"href="#">About</a>
<!-- <div class="nav-bar"> -->
<!-- <div class="nav-icon"></div> -->
<!-- <a class="selected-nav nav-link" href="#">What's Open</a> -->
<!-- <a class="deselected-nav nav-link"href="#">Feedback</a> -->
<!-- <a class="deselected-nav nav-link"href="#">About</a> -->
<!-- -->
<!-- <i class="fa fa-user-circle fa-2x user-icon"></i> -->
<!-- <img class="menu-arrow" src="../../assets/menu-arrow.png"> -->
<!-- </div> -->
<div class="nav-bar-background">
<div class="white-gradient"></div>
</div>
<i class="fa fa-user-circle fa-2x user-icon"></i>
<img class="menu-arrow" src="../../assets/menu-arrow.png">
</div>
@import "../../color-palette";
@import "../../text-styles";
.nav-icon {
height: 40px;
width: 40px;
margin-right: 17px;
margin-left: 24px;
background-color: $background-color;
.nav-bar-background{
position: relative;
width: 100%;
height:55%;
top:0px;
left:0px;
background:#efefef;
overflow:hidden;
}
.nav-link {
margin-right: 12px;
.phone-background{
position:absolute;
width:1080px;
height:1080px;
background-color:#006633;
top:-248px;
left: 700px;
border-radius:100%;
// opacity:0;
}
.nav-bar {
background-color: $white;
height: 50px;
width: 100%;
display: flex;
align-items: center;
position: absolute;
top:0px;
// border-radius: 0;
// margin-bottom: 0;
}
.user-icon {
margin-left: auto;
.white-gradient{
z-index:5;
position:absolute;
width: 43%;
height:100%;
top:0px;
right:0px;
background: #006633;
background-image: radial-gradient(48% 50%, rgba(255,255,255,0.54) 51%, rgba(255,255,255,0.00) 100%);
background-image: radial-gradient(52% 50%, rgba(255,255,255,0.20) 47%, rgba(255,255,255,0.00) 100%);
}
.menu-arrow {
margin-left: 6px;
margin-right: 40px;
}
\ No newline at end of file
<div class="area-card-header">
<!--<div class="area-card-header">-->
<!--<div class="hexagon center">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>-->
<div class="area-title">FAVORITES</div>
<hr>
</div>
<!--<div class="area-title">FAVORITES</div>-->
<!--<hr>-->
<!--</div>-->
<div class="place-card-holder">
<div *ngFor="let place of places; let i = index;">
<app-place-card [place]="place"></app-place-card>
......
......@@ -5,7 +5,6 @@ $hex-border-color: #C1C7CD;
width: 60px;
height: 34.64px;
margin: 17.32px 0;
background-image: url("../../assets/JC.jpg");
background-size: auto 64.4323px;
background-position: center;
border-left: solid 2.1px $hex-border-color;
......
<h1 md-dialog-title>Dialog</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions>
<button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
<button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
</div>
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