Commit a623218a authored by mdsecurity's avatar mdsecurity

Content Bar V1 DONE

parent d0045ebf
No preview for this file type
<div class="app-container">
<app-nav-bar></app-nav-bar>
<app-context-bar></app-context-bar>
\ No newline at end of file
<app-context-bar></app-context-bar>
</div>
\ No newline at end of file
.app-container{
height:100%;
width:100%;
}
\ No newline at end of file
......@@ -7,13 +7,18 @@ import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { ContextBarComponent } from './context-bar/context-bar.component';
import { TimeRangeComponent } from './context-bar/time-range/time-range.component';
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';
@NgModule({
declarations: [
AppComponent,
NavBarComponent,
ContextBarComponent,
TimeRangeComponent
TimeRangeComponent,
TimeRangeBarComponent,
MapComponent,
SafeUrlPipe
],
imports: [
BrowserModule,
......
......@@ -45,5 +45,8 @@
</div>
</div>
</div>
<!--<hr>-->
<app-time-range></app-time-range>
<!--<hr>-->
<app-map></app-map>
</div>
......@@ -4,7 +4,8 @@
height: 100%;
width: 374px;
float: right;
padding: 11px;
padding-left: 11px;
padding-right: 11px;
}
.light-card {
......@@ -37,13 +38,15 @@ font-family: HelveticaNeue-Medium;
}
hr{
background-color: $border-color;
margin-top: 16.5px;
margin-bottom: 16.5px;
margin-top: 0px;
margin-bottom: 0px;
}
.info{
display: flex;
flex-direction: row;
// justify-content: space-between;
margin-top: 16.5px;
margin-bottom: 8.25px;
}
.column {
flex-grow: 1;
......@@ -75,7 +78,7 @@ hr{
}
.tag-container{
width: 168px;
height:78px;
// height:78px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
<div class="map-container">
<iframe width="352.37" height="246.8" frameborder="0" style="border:0" [src]="url | safeUrl" allowfullscreen>
</iframe>
</div>
.map-container {
display: block;
width:100%;
height:236.8px;
margin-top:8.25px;
}
\ 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 { MapComponent } from './map.component';
describe('MapComponent', () => {
let component: MapComponent;
let fixture: ComponentFixture<MapComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MapComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MapComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
apiKey: string = 'AIzaSyDErZWfk8iTlvVp9JAW8VcBYzN1MkL0V60';
url: string =('https://www.google.com/maps/embed/v1/place?key=' + this.apiKey + '&q=Space+Needle,Seattle+WA');
constructor() { }
ngOnInit() {
}
}
<svg width="350px" height="21px" viewBox="0 0 350 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Skinny Time Bar</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="350" height="21" rx="4"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="350" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<rect id="path-3" x="0" y="0" width="2" height="9"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-5">
<stop stop-color="#1991EB" offset="0%"></stop>
<stop stop-color="#2DA1F8" offset="100%"></stop>
</radialGradient>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-6">
<stop stop-color="#000000" stop-opacity="0.17" offset="0%"></stop>
<stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
</radialGradient>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Skinny-Time-Bar">
<g id="Time-Bar">
<use id="Base" stroke="#E6EAEE" mask="url(#mask-2)" stroke-width="2" fill="#FFFFFF" xlink:href="#path-1"></use>
<text id="Day" font-family="HelveticaNeue, Helvetica Neue" font-size="10" font-weight="normal" fill="#354052">
<tspan x="8.235" y="14">{{dayOfWeek}}</tspan>
</text>
<g id="Small-Ticks" transform="translate(53.000000, 7.620000)" fill="#354052" fill-opacity="0.75">
<rect id="Small-Tick" x="0.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="13" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="25.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="50.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="63" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="75.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="100.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="113" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="125.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="150.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="163" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="175.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="200.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="213" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="225.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="250.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="263" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="275.5" y="0" width="1" height="6"></rect>
</g>
<rect id="Horizontal-Line" fill-opacity="0.5" fill="#354052" x="42" y="9.75" width="300" height="1.5"></rect>
<g id="Big-Ticks" transform="translate(40.000000, 6.000000)">
<g id="Big-Tick">
<use fill="#354052" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
</g>
<rect id="Big-Tick" fill="#354052" x="50.1666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="100.333333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="150.5" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="200.666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="250.833333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="302" y="0" width="2" height="9"></rect>
</g>
<rect id="Time-Marker" fill-opacity="0.9" fill="url(#radialGradient-5)" [attr.x]="barX" y="4" [attr.width]="barWidth" height="13"
rx="6.5"></rect>
<rect id="ShadowEnd" fill="url(#radialGradient-6)" [attr.x]="endTimeTextX" y="4" width="35" height="13"></rect>
<text font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan [attr.x]="endTimeTextX" y="13">{{endTime | date:'shortTime'}}</tspan>
</text>
<rect id="ShadowStart" fill="url(#radialGradient-6)" [attr.x]="this.startTimeTextX" y="4" width="35" height="13"></rect>
<text font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan [attr.x]="this.startTimeTextX" y="13">{{startTime | date:'shortTime'}}</tspan>
</text>
</g>
</g>
</g>
</svg>
/* 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 { TimeRangeBarComponent } from './time-range-bar.component';
describe('TimeRangeBarComponent', () => {
let component: TimeRangeBarComponent;
let fixture: ComponentFixture<TimeRangeBarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TimeRangeBarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TimeRangeBarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Input } from '@angular/core';
import { Place } from '../../../place';
@Component({
selector: 'app-time-range-bar',
templateUrl: './time-range-bar.component.html',
styleUrls: ['./time-range-bar.component.scss']
})
export class TimeRangeBarComponent implements OnInit {
@Input() startTime: Date;
@Input() endTime: Date;
// blue bar x location and width
barX: number;
barWidth: number;
// width between startTimeX and barX
barStartWidth: number = 3;
// width between the end of the bar and the endTextX location
barEndWidth: number = 38;
// text x locations
startTimeTextX: number;
endTimeTextX: number;
dayOfWeek: string;
week: string[] = ["SUN","MON","TUE", "WED", "THU", "FRI", "SAT"];
constructor() { }
ngOnInit() {
// let time1 = new Date();
// time1.setHours(9);
// let time2 = new Date();
// time2.setHours(18);
// this.startTime = time1;
// this.endTime = time2;
this.barX = this.timeToPixel(this.startTime);
this.barWidth = this.timeToPixel(this.endTime) - this.barX;
this.startTimeTextX = this.barX + this.barStartWidth;
this.endTimeTextX = this.barWidth + this.barX - this.barEndWidth;
this.dayOfWeek = this.week[this.startTime.getDay()];
}
timeToPixel(date: Date): number {
// this equals 304(the length of the ticks) divided by the amount of minutes in a day
let pixelPerMinute = 0.2111111111111111;
return 40 + ((date.getHours() * 60 + date.getMinutes()) * pixelPerMinute);
}
}
hi there
<div *ngFor="let day of days;">
<svg width="350px" height="21px" viewBox="0 0 350 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>Skinny Time Bar</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="350" height="21" rx="4"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="350" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-3">
<stop stop-color="#1991EB" offset="0%"></stop>
<stop stop-color="#2DA1F8" offset="100%"></stop>
</radialGradient>
<text id="text-4" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="203" y="9">8:20 PM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<text id="text-6" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="4" y="9">6:20 AM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-7">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Skinny-Time-Bar">
<g id="Time-Bar">
<use id="Base" stroke="#E6EAEE" mask="url(#mask-2)" stroke-width="2" fill="#FFFFFF" xlink:href="#path-1"></use>
<text id="Day" font-family="HelveticaNeue, Helvetica Neue" font-size="10" font-weight="normal" fill="#354052">
<tspan x="8.235" y="14">MON</tspan>
</text>
<g id="Small-Ticks" transform="translate(53.000000, 7.620000)" fill="#354052" fill-opacity="0.75">
<rect id="Small-Tick" x="0.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="13" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="25.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="50.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="63" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="75.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="100.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="113" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="125.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="150.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="163" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="175.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="200.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="213" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="225.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="250.5" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="263" y="0" width="1" height="6"></rect>
<rect id="Small-Tick" x="275.5" y="0" width="1" height="6"></rect>
</g>
<rect id="Horizontal-Line" fill-opacity="0.5" fill="#354052" x="42" y="9.75" width="300" height="1.5"></rect>
<g id="Big-Ticks" transform="translate(40.000000, 6.000000)" fill="#354052">
<rect id="Big-Tick" x="0" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="50.1666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="100.333333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="150.5" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="200.666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="250.833333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="302" y="0" width="2" height="9"></rect>
</g>
<g id="Blue-Bar-with-Text" [attr.transform]="day[0]">
<rect id="Time-Marker" fill-opacity="0.9" fill="url(#radialGradient-3)" x="0" y="0" [attr.width]="day[1]" height="13" rx="6.5"></rect>
<g id="End-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-5)" xlink:href="#text-4"></use>
<use xlink:href="#text-4"></use>
</g>
<g id="Start-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-7)" xlink:href="#text-6"></use>
<use xlink:href="#text-6"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
<div class="time-range-bar-container">
<app-time-range-bar [startTime]="weekStartTimes[0]" [endTime]="weekEndTimes[0]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[1]" [endTime]="weekEndTimes[1]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[2]" [endTime]="weekEndTimes[2]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[3]" [endTime]="weekEndTimes[3]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[4]" [endTime]="weekEndTimes[4]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[5]" [endTime]="weekEndTimes[5]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[6]" [endTime]="weekEndTimes[6]"></app-time-range-bar>
</div>
.time-range-bar-container {
margin-top:8.25px;
margin-bottom: 1px;
}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Time } from '../../time';
import { Place } from '../../place';
@Component({
selector: 'app-time-range',
templateUrl: './time-range.component.html',
......@@ -7,18 +7,30 @@ import { Time } from '../../time';
})
export class TimeRangeComponent implements OnInit {
days: string[][] = [['translate(40, 4.000000)', '237']];
weekStartTimes: Date[] = [];
weekEndTimes: Date[] = [];
constructor() { }
constructor() {
}
ngOnInit() {
}
timeToPixel(time: Time): number {
let pixelPerMinute: number = 0.2111111111111111;
let past12 = pixelPerMinute * 60 * 12;
return 40 + ((time.hour * 60 + time.minute) * pixelPerMinute) + ((time.ampm == 'AM') ? 0 : past12);
let t1 = new Date();
let t2 = new Date();
// this.weekStartTimes = [t1, t1, t1, t1, t1, t1, t1];
// this.weekEndTimes = [t2, t2, t2, t2, t2, t2, t2];
for (let i = 0; i < 7; i++) {
t1 = new Date();
t2 = new Date();
t1.setDate(5 + Math.random() * 6);
t1.setHours((Math.random() * 10) + 1);
t2.setHours((Math.random() * 10) + 13);
this.weekStartTimes.push(t1);
this.weekEndTimes.push(t2);
}
}
}
export class Place {
_name: string;
name: string;
picture: string;
_status: string;
openTimes: Date[];
closeTimes: Date[];
constructor(name: string, openTimes: Date[],
closeTimes: Date[], picture: string, status: string) {
status: string;
startTimes: Date[];
endTimes: Date[];
constructor(name: string, startTimes: Date[],
endTimes: Date[], picture: string, status: string) {
this._name = name;
this.openTimes = openTimes;
this.closeTimes = closeTimes;
this.name = name;
this.startTimes = startTimes;
this.endTimes = endTimes;
this.picture = picture;
this._status = status;
this.status = status;
}
}
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { SaveUrlPipe } from './save-url.pipe';
describe('SaveUrlPipe', () => {
it('create an instance', () => {
let pipe = new SaveUrlPipe();
expect(pipe).toBeTruthy();
});
});
import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
@Pipe({
name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url): any {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
......@@ -8,26 +8,21 @@
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="350" height="21" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-3">
<rect id="path-3" x="0" y="0" width="2" height="9"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
<feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-5">
<stop stop-color="#1991EB" offset="0%"></stop>
<stop stop-color="#2DA1F8" offset="100%"></stop>
</radialGradient>
<text id="text-4" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="203" y="9">8:20 PM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<text id="text-6" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan x="4" y="9">6:20 AM</tspan>
</text>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-7">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-6">
<stop stop-color="#000000" stop-opacity="0.17" offset="0%"></stop>
<stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
</radialGradient>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Skinny-Time-Bar">
......@@ -57,26 +52,27 @@
<rect id="Small-Tick" x="275.5" y="0" width="1" height="6"></rect>
</g>
<rect id="Horizontal-Line" fill-opacity="0.5" fill="#354052" x="42" y="9.75" width="300" height="1.5"></rect>
<g id="Big-Ticks" transform="translate(40.000000, 6.000000)" fill="#354052">
<rect id="Big-Tick" x="0" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="50.1666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="100.333333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="150.5" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="200.666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="250.833333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" x="302" y="0" width="2" height="9"></rect>
</g>
<g id="Blue-Bar-with-Text" transform="translate(78.000000, 4.000000)">
<rect id="Time-Marker" fill-opacity="0.9" fill="url(#radialGradient-3)" x="0" y="0" width="237" height="13" rx="6.5"></rect>
<g id="End-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-5)" xlink:href="#text-4"></use>
<use xlink:href="#text-4"></use>
</g>
<g id="Start-Time" fill-opacity="1" fill="#FFFFFF">
<use filter="url(#filter-7)" xlink:href="#text-6"></use>
<use xlink:href="#text-6"></use>
<g id="Big-Ticks" transform="translate(40.000000, 6.000000)">
<g id="Big-Tick">
<use fill="#354052" fill-rule="evenodd" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
</g>
<rect id="Big-Tick" fill="#354052" x="50.1666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="100.333333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="150.5" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="200.666667" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="250.833333" y="0" width="2" height="9"></rect>
<rect id="Big-Tick" fill="#354052" x="302" y="0" width="2" height="9"></rect>
</g>
<rect id="Time-Marker" fill-opacity="0.9" fill="url(#radialGradient-5)" x="78" y="4" width="237" height="13" rx="6.5"></rect>
<rect id="ShadowEnd" fill="url(#radialGradient-6)" x="277" y="4" width="35" height="13"></rect>
<text id="End-Time" font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">