Commit dce005b9 authored by mdsecurity's avatar mdsecurity

finished header

parent a623218a
No preview for this file type
<div class="app-container">
<app-nav-bar></app-nav-bar>
<app-context-bar></app-context-bar>
</div>
\ No newline at end of file
<app-nav-bar></app-nav-bar>
<div class="main-content">
<div class="place-window">
<app-place-window></app-place-window>
</div>
<app-context-bar></app-context-bar>
</div>
</div>
.app-container{
height:100%;
width:100%;
}
.main-content{
width:100%;
height:100%;
display: flex;
flex-direction: row;
// background-color: #00FFFF
}
.place-window{
width: 100%;
height: 100%;
// background-color: blue;
padding-right:30px;
padding-left:30px;
}
.center {
margin-left: 100px;
margin-right: auto;
// width: 100%;
}
\ No newline at end of file
......@@ -10,6 +10,9 @@ import { TimeRangeComponent } from './context-bar/time-range/time-range.componen
import { TimeRangeBarComponent } from './context-bar/time-range/time-range-bar/time-range-bar.component';
import { MapComponent } from './context-bar/map/map.component';
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';
@NgModule({
declarations: [
AppComponent,
......@@ -18,7 +21,10 @@ import { SafeUrlPipe } from './safe-url.pipe';
TimeRangeComponent,
TimeRangeBarComponent,
MapComponent,
SafeUrlPipe
SafeUrlPipe,
PlaceWindowComponent,
PlaceCardComponent,
AreaComponent
],
imports: [
BrowserModule,
......
......@@ -3,7 +3,7 @@
.context-bar {
height: 100%;
width: 374px;
float: right;
// float: right;
padding-left: 11px;
padding-right: 11px;
}
......
<div class="area-card-header">
<div class="hexagon center">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
<h3 class="area-title">FAVORITES</h3>
<hr>
</div>
<app-place-card></app-place-card>
\ No newline at end of file
$hex-border-color: #C1C7CD;
.hexagon {
position: relative;
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;
border-right: solid 2.1px $hex-border-color;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 42.43px;
height: 42.43px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 6.69px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 55.8000px;
height: 32.21614502078112px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-16.1081px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-16.1081px);
transform: rotate(45deg) scaleY(1.7321) translateY(-16.1081px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -21.2132px;
border-top: solid 2.9698px $hex-border-color;
border-right: solid 2.9698px $hex-border-color;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -21.2132px;
border-bottom: solid 2.9698px $hex-border-color;
border-left: solid 2.9698px $hex-border-color;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 1.2124px;
left: 0;
width: 55.8000px;
height: 32.2161px;
z-index: 2;
background: inherit;
}
.center {
margin-left: auto;
margin-right: auto;
// width: 100%;
}
.area-title {
text-align: center;
color:#68768C;
}
hr {
height:1.5px;
background-color:rgba(104, 118, 140, 0.5);
}
\ No newline at end of file
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AreaComponent } from './area.component';
describe('AreaComponent', () => {
let component: AreaComponent;
let fixture: ComponentFixture<AreaComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AreaComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AreaComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-area',
templateUrl: './area.component.html',
styleUrls: ['./area.component.scss']
})
export class AreaComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="light-card place-card">
<img src="../../assets/BKing.jpg" class="place-picture">
<div class="place-status">
<div class="status-text">OPEN</div>
<hr class="hr-vertical">
</div>
</div>
@import '../../../../color-palette';
.place-card {
width: 199px;
height: 111px;
display: flex;
flex-direction: row;
align-items: center;
}
.light-card {
background-color: $white;
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: $border-color;
}
.place-picture {
height: 84px;
width: 84px;
border: 5px solid $border-color;
border-radius: 50%;
}
.place-status {
height: 18px;
width: 71px;
background-color: $open-green;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
}
.hr-vertical{
height: 18px;
background-color: $white;
opacity: 0.6;
width:1px;
margin:0px;
margin-top: 0px;
margin-bottom: 0px;
}
.status-text {
width:30px;
height:11px;
font-family: HelveticaNeue;
font-size: 9px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
// text-align: center;
color: $white;
}
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { PlaceCardComponent } from './place-card.component';
describe('PlaceCardComponent', () => {
let component: PlaceCardComponent;
let fixture: ComponentFixture<PlaceCardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlaceCardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlaceCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-place-card',
templateUrl: './place-card.component.html',
styleUrls: ['./place-card.component.scss']
})
export class PlaceCardComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<app-area></app-area>
\ No newline at end of file
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { PlaceWindowComponent } from './place-window.component';
describe('PlaceWindowComponent', () => {
let component: PlaceWindowComponent;
let fixture: ComponentFixture<PlaceWindowComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlaceWindowComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlaceWindowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-place-window',
templateUrl: './place-window.component.html',
styleUrls: ['./place-window.component.scss']
})
export class PlaceWindowComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
......@@ -4,7 +4,8 @@ $bluegrey: #7f8fa4;
$border-color: #e6eaee;
$pale-grey: #dfe3e9;
$background-color: #eff3f6;
$open-green:#3AC550;
$closed-grey:#C4B9B9;
// $color-palette: (
// 'white' : #ffffff,
// 'primary' : #354052,
......
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