Skip to content
This repository was archived by the owner on Mar 5, 2024. It is now read-only.

Commit c249cdc

Browse files
BTMortonBTMorton
committed
Add demo project. Closes #35. Update grid items to auto-register on init.
1 parent 4528866 commit c249cdc

File tree

11 files changed

+195
-0
lines changed

11 files changed

+195
-0
lines changed

‎demo/app/app.component.js‎

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app/app.component.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app/app.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {Component} from 'angular2/core';
2+
import {NgGrid, NgGridItem} from 'angular2-grid';
3+
4+
@Component({
5+
selector: 'my-app',
6+
template: '<h1>My First Angular 2 App</h1><div class="grid" [ngGrid]><div class="grid-item" [ngGridItem]></div></div>',
7+
directives: [NgGrid, NgGridItem]
8+
})
9+
export class AppComponent {}

‎demo/app/boot.js‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app/boot.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app/boot.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import {bootstrap} from 'angular2/platform/browser'
2+
import {AppComponent} from './app.component'
3+
4+
bootstrap(AppComponent);

‎demo/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<html>
2+
3+
<head>
4+
<title>Angular 2 QuickStart</title>
5+
6+
<!-- 1. Load libraries -->
7+
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
8+
<script src="node_modules/systemjs/dist/system.src.js"></script>
9+
<script src="node_modules/rxjs/bundles/Rx.js"></script>
10+
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
11+
<link rel="stylesheet" href="style.css" />
12+
13+
<!-- 2. Configure SystemJS -->
14+
<script>
15+
System.config({
16+
paths: {
17+
'angular2-grid': 'node_modules/angular2-grid/dist/NgGrid.js'
18+
},
19+
packages: {
20+
app: {
21+
format: 'register',
22+
defaultExtension: 'js'
23+
}
24+
}
25+
});
26+
System.import('app/boot')
27+
.then(null, console.error.bind(console));
28+
</script>
29+
30+
</head>
31+
32+
<!-- 3. Display the application -->
33+
<body>
34+
<my-app>Loading...</my-app>
35+
</body>
36+
37+
</html>

‎demo/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "angular2-quickstart",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"tsc": "tsc",
6+
"tsc:w": "tsc -w",
7+
"lite": "lite-server",
8+
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
9+
},
10+
"license": "ISC",
11+
"dependencies": {
12+
"angular2": "2.0.0-beta.0",
13+
"systemjs": "0.19.6",
14+
"es6-promise": "^3.0.2",
15+
"es6-shim": "^0.33.3",
16+
"reflect-metadata": "0.1.2",
17+
"rxjs": "5.0.0-beta.0",
18+
"zone.js": "0.5.10",
19+
"angular2-grid": "~0.3.7"
20+
},
21+
"devDependencies": {
22+
"concurrently": "^1.0.0",
23+
"lite-server": "^1.3.1",
24+
"typescript": "^1.7.3"
25+
}
26+
}

‎demo/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.grid {
2+
background-color: #efefef;
3+
width: 100%;
4+
min-height: 750px;
5+
}
6+
7+
.grid-item {
8+
background-color: #ffffff;
9+
-webkit-transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
10+
-moz-transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
11+
-o-transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
12+
transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, right 0.25s, bottom 0.25s;
13+
border: solid 1px;
14+
}
15+
16+
.grid-item:active, .grid-item.moving {
17+
z-index: 2;
18+
-webkit-transition: none;
19+
-moz-transition: none;
20+
-o-transition: none;
21+
transition: none;
22+
}
23+
24+
.grid-placeholder {
25+
background-color: rgba(0, 0, 0, 0.3);
26+
}
27+
28+
@media (max-width: 767px) {
29+
.grid {
30+
width: 100% !important;
31+
height: auto !important;
32+
padding: 10px;
33+
}
34+
.grid-item {
35+
position: static !important;
36+
width: 100% !important;
37+
margin-bottom: 10px;
38+
}
39+
.grid-item:last-child {
40+
margin-bottom: 0;
41+
}
42+
}

‎demo/tsconfig.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES5",
4+
"module": "system",
5+
"moduleResolution": "node",
6+
"sourceMap": true,
7+
"emitDecoratorMetadata": true,
8+
"experimentalDecorators": true,
9+
"removeComments": false,
10+
"noImplicitAny": false
11+
},
12+
"exclude": [
13+
"node_modules"
14+
]
15+
}

0 commit comments

Comments
 (0)