Commit f745b1d0 authored by mdsecurity's avatar mdsecurity

new anguar cli and sidebar

  sidebar and main content are now set up properly
parent 9ffc4fc3
......@@ -9,5 +9,5 @@ insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = 0
max_line_length = off
trim_trailing_whitespace = false
# WhatsOpenA2
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.20-4.
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.22-1.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
......
{
"project": {
"version": "1.0.0-beta.20-4",
"version": "1.0.0-beta.22-1",
"name": "whats-open-a2"
},
"apps": [
......@@ -41,7 +41,7 @@
}
},
"defaults": {
"styleExt": "scss",
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
......
<h1>
{{title}}
</h1>
<!--<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand mb-0"> {{title}}</h1>
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary fa fa-search " type="submit"></button>
</form>
</nav>-->
<app-location-view ></app-location-view>
......@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app works!';
title: string = 'What\'s Open';
}
......@@ -4,10 +4,12 @@ import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LocationViewComponent } from './location-view/location-view.component';
@NgModule({
declarations: [
AppComponent
AppComponent,
LocationViewComponent
],
imports: [
BrowserModule,
......
<div class="app-container">
<div class="sidebar">
Where is this element
Send Nudes
</div>
<div class="main-content">
hi
<!--<button (click)="showSidebar = !showSidebar;">Toggle style</button>-->
<div *ngFor="let location of locations" class="location card col-xs">
<img class="location-picture" src="{{location.picture}}" 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-spacing: .5rem;
$card-width: 20rem;
$sidebar-width:17rem;
@import '../../styles.scss';
.app-container {
@extend .container;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
padding-right: 0;
padding-left: 0;
margin-right: 0;
margin-left: 0;
display: flex;
}
.location {
max-width: $card-width;
min-width: $card-width;
margin-top: $card-spacing;
margin-left: $card-spacing;
margin-right: $card-spacing;
margin-bottom: $card-spacing;
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:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.location-picture {
margin-top: 2*$card-spacing;
height: 11rem;
width: 18rem;
display: block;
}
.sidebar {
height: 100%;
width: 25%;
background-color: #e3e8ef;
transition:all .5s cubic-bezier(0.55, 0, 0.1, 1);
}
.main-content {
width:75%;
height:100%;
display:flex;
background: url(https://dl.dropboxusercontent.com/u/3400459/CodePen/Fullscreen-DIVs/dark-orange.png) center center no-repeat scroll #DC554F;
}
@mixin transition($transition...) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
\ 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 { 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;
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/meTomeKermit.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');
}
}
export class Location {
_name: string;
picture: string;
_status: string;
openTimes: Date[];
closeTimes: Date[];
constructor(name: string, openTimes: Date[],
closeTimes: Date[], picture: string, status: string) {
this._name = name;
this.openTimes = openTimes;
this.closeTimes = closeTimes;
this.picture = picture;
this._status = status;
}
}
......@@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<body >
<app-root>Loading...</app-root>
</body>
</html>
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
@import '../node_modules/bootstrap/scss/bootstrap';
html
{
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
}
body {
height: inherit;
}
\ No newline at end of file
......@@ -16,7 +16,6 @@
"spaces"
],
"label-position": true,
"label-undefined": true,
"max-line-length": [
true,
140
......@@ -39,7 +38,6 @@
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-key": true,
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
......@@ -49,8 +47,6 @@
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-unreachable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
......@@ -93,12 +89,8 @@
"check-type"
],
"directive-selector-prefix": [true, "app"],
"component-selector-prefix": [true, "app"],
"directive-selector-name": [true, "camelCase"],
"component-selector-name": [true, "kebab-case"],
"directive-selector-type": [true, "attribute"],
"component-selector-type": [true, "element"],
"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
......@@ -108,6 +100,7 @@
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true,
"no-access-missing-member": true,
"templates-use-public": true,
"invoke-injectable": true
}
......
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