diff --git a/demo/app.js b/demo/app.js
index d2fddb4..77ff0ac 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -2,14 +2,25 @@ angular.module('app', ['jtt_bricklayer']);
angular.module('app')
.controller("appController", function ($scope, $timeout) {
+ $scope.createElement = function (position) {
+ return {
+ color: '#' + Math.random().toString(16).substr(-6),
+ height: sizes[Math.floor(Math.random() * sizes.length)],
+ width: sizes[Math.floor(Math.random() * sizes.length)],
+ }
+ };
+
$scope.data = [];
- var heights = [30, 40, 50, 60, 70, 90, 100, 120, 150, 200];
+ $scope.appendNew = function () {
+ $scope.data.push($scope.createElement());
+ };
- for (var i = 0; i < 60; i++) {
- $scope.data.push({
- color: '#' + Math.random().toString(16).substr(-6),
- height: heights[Math.floor(Math.random() * heights.length)],
- });
+ var sizes = [220, 250, 260, 270, 290, 300, 310, 330, 400, 430, 450, 480, 500];
+
+ for (var i = 0; i < 10; i++) {
+ $scope.appendNew();
}
+
+
});
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index e9d0198..b81d6bf 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,7 +3,8 @@
-
+
+
angular-bricklayer
@@ -25,27 +26,33 @@
/* Bricklayer calculates its column sizes from the `bricklayer-column-sizer` element. You can give it some width with media queries to make it responsive */
@media screen and (min-width: 300px) {
.bricklayer-column-sizer {
- /* If page is greater than 300px, columns will be 20% wide. */
- width: 20%;
+ width: 33.333%;
}
}
@media screen and (min-width: 400px) {
.bricklayer-column-sizer {
- /* If page is greater than 400px, columns will be 10% wide, which are more narrow. */
- width: 10%;
+ width: 25%;
}
}
@media screen and (min-width: 700px) {
.bricklayer-column-sizer {
- /* If page is greater than 700px, columns will be 5% wide. That means there will be lots of columns */
- width: 5%;
+ width: 20%;
}
}
.box {
margin: 10px 0;
+ padding: 10px;
+ border: 1px solid black;
+ }
+
+ img {
+ width: 100%;
+ height: auto;
+ border: 1px solid black;
+ display:block;
}
@@ -54,14 +61,13 @@
+
+
-
-
-
-
-
+
+
![]()
+