From 33ccbe2ede23ac25ff4a0a560b9363ea59741329 Mon Sep 17 00:00:00 2001 From: Jonathan Hornung Date: Sat, 23 Apr 2016 22:24:30 +0200 Subject: [PATCH] improved demo --- demo/app.js | 23 +++++++++++++++++------ demo/index.html | 32 +++++++++++++++++++------------- 2 files changed, 36 insertions(+), 19 deletions(-) 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 @@ + +
-
-
-
-
-
+
+ +
-