Commit 833bf3af authored by mdsecurity's avatar mdsecurity

restarting dev

parent c5cba8d7
No preview for this file type
<app-location-view ></app-location-view>
Hi
\ No newline at end of file
<div class="app-container">
<nav class="navbar navbar-light bg-faded">
<div class="centered two-third">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline float-xs-right">
<!--<input class="form-control" type="text" placeholder="Search">-->
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="mountain-backgound">
<!--<img class="mountain-backgound" src="../assets/mountains.png">-->
<nav class="navbar navbar-light bg-faded transparent-nav ">
<div class="centered one-third">
<form class=" form-inline ">
<div class="form-group ">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1............................</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
</div>
<div class="card-content">
<div *ngFor="let location of locations" class="location-card card col-xs">
<img class="location-background-picture" src="{{location.picture}}" alt="Card image">
<img class="location-circle-picture" src="{{secondPic}}" alt="Card image">
<div class="card-block">
<h4 class="card-title mb-0">{{location._name}}</h4>
<p class="card-text">Opening Time: {{location.openTimes[dayOfTheWeek] | date:'shortTime'}}</p>
<p class="card-text">Closing Time: {{location.closeTimes[dayOfTheWeek] | date:'shortTime'}}</p>
</div>
</div>
</div>
</div>
//card
$card-spacing: .75rem;
$card-width: 20rem;
$card-height: 20rem;
$card-border-radius:0.25rem;
$card-border:1px solid rgba(0, 0, 0, 0.125);
$sidebar-icon-diameter:5rem;
//picture height
$card-background-height: 8.5rem;
//card circle pictuer
$card-circle-picture-diameter:7rem;
@import '../../styles.scss';
.centered {
margin-left: auto;
margin-right: auto;
}
.two-third{
width: 66%;
}
.one-third{
width: 39%;
}
.mountain-backgound {
background-image: url("../assets/mountains.png");
background-size: contain;
// background-attachment: fixed;
padding-top: 285px;
width:100%;
height: 100%;
}
@mixin transition($transition...) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
.transparent-nav {
background-color: rgba(247, 247, 249,.5);
}
.location-card {
width: $card-width;
height: $card-height;
margin: $card-spacing;
padding: 0px;
border-radius: $card-border-radius;
border: 0;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.location-card:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.location-background-picture {
height: $card-background-height;
width: 100%;
margin-bottom:$card-circle-picture-diameter/2;
}
.location-circle-picture {
position: absolute;
right:($card-width/2) - ($card-circle-picture-diameter/2);
top:$card-background-height - ($card-circle-picture-diameter/2);
border-radius:50%;
border:5px solid rgba(255, 255, 255, 1);
box-shadow: 0 0 1px white;
height: $card-circle-picture-diameter;
width: $card-circle-picture-diameter;
}
.sidebar {
height: 100%;
width: 98px;
//20%
background-color: #2b2b2b;
transition:all .5s cubic-bezier(0.55, 0, 0.1, 1);
color: #D7D7D4;
}
.main-content {
width:100%;
height:100%;
background: center center no-repeat scroll #f2f2f2;// #f5f5ef light cream
background-image: url('../assets/clock.png'); // possible use the mason M logo here
background-repeat: repeat;
}
.card-content {
display:flex;
margin-left: .5rem;
margin-right: .5rem;
// float:right;
}
/* 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 { LocationViewComponent } from './location-view.component';
describe('LocationViewComponent', () => {
let component: LocationViewComponent;
let fixture: ComponentFixture<LocationViewComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LocationViewComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LocationViewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Location } from '../location';
@Component({
selector: 'app-location-view',
templateUrl: './location-view.component.html',
styleUrls: ['./location-view.component.scss']
})
export class LocationViewComponent implements OnInit {
locations: Location[] = [];
dayOfTheWeek: number;
secondPic = '../assets/BKing.jpg';
icon1 = '../assets/square.jpeg';
icon2 = '../assets/Adobe.png';
icon3 = '../assets/Fedex.jpg';
gmuLogo = '../assets/GMU_PLogo_RGB.jpg';
constructor() { }
ngOnInit() {
this.dayOfTheWeek = new Date().getDay();
let date = new Date();
let openTimes: Date[] = [date,
date,
date,
date,
date,
date,
date];
let closeTimes: Date[] = [date,
date,
date,
date,
date,
date,
date];
let picture = '../assets/JC.jpg';
this.locations[0] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
this.locations[1] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
this.locations[2] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
// this.locations[3] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
// this.locations[4] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
// this.locations[5] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
// this.locations[6] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
}
}
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