COmmit

README.md

@@ -1,30 +1,21 @@
-# MovieReservationApp
+# Movie Reservation App - Angular 2
 
 This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.28.3.
 
-## 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.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
-
-## Build
+## Immediate deployment
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
+Place the 'dist' folder onto your web server to run the application.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+## Building from local
 
-## Running end-to-end tests
+Run `npm install angular-cli` if angular-cli is not installed already, followed by `ng serve` to deploy the application via the angular cli.
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+## 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.
 
-## Deploying to GitHub Pages
+## Build
 
-Run `ng github-pages:deploy` to deploy to GitHub Pages.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
 
 ## Further help
 

angular-cli.json

@@ -18,7 +18,8 @@
       "tsconfig": "tsconfig.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
       "scripts": [],
       "environments": {

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
+    "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",

src/app/app.component.html

@@ -1,3 +1,3 @@
-<h1>
-  {{title}}
-</h1>
+<div class="container">
+    <seat-list></seat-list>
+</div>

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+
 }

src/app/app.module.ts

@@ -4,10 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { SeatComponent } from './seat/seat.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    SeatComponent
   ],
   imports: [
     BrowserModule,

src/styles.css

@@ -1 +1,32 @@
 /* You can add global styles to this file, and also import other style files */
+body,
+main::before {
+    font-family: 'Open Sans', sans-serif;
+    background: url(https://images8.alphacoders.com/453/thumb-1920-453112.jpg) 0 / cover fixed;
+}
+
+main {
+    margin: 60px auto;
+    position: relative;
+    padding: 10px 5px;
+    background: hsla(0,0%,10%,.15);
+    font-size: 20px;
+    line-height: 1.5;
+    border-radius: 10px;
+    width: 45%;
+    min-width: 500px;
+    box-shadow: 0px 0px 10px #000;
+    overflow: hidden;
+}
+
+main::before {
+    content: '';
+    margin: -35px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    filter: blur(5px);
+    z-index: -1;
+}