Merge branch 'add-boards-grid-page'

src/app/boards/boards-controller.js

@@ -94,4 +94,40 @@ angular.module('noterious')
     };
 
     ctrl.getBoards();
+
+
+    ctrl.gridsterOpts = {
+      columns: 12, // the width of the grid, in columns
+      pushing: true, // whether to push other items out of the way on move or resize
+      floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
+      swapping: false, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
+      width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
+      colWidth: 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
+      rowHeight: 80, // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
+      margins: [10, 10], // the pixel distance between each widget
+      outerMargin: true, // whether margins apply to outer edges of the grid
+      isMobile: false, // stacks the grid items if true
+      mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
+      mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
+      minColumns: 1, // the minimum columns the grid must have
+      minRows: 1, // the minimum height of the grid, in rows
+      maxRows: 100,
+      defaultSizeX: 3, // the default width of a gridster item, if not specifed
+      defaultSizeY: 2, // the default height of a gridster item, if not specified
+      minSizeX: 3, // minimum column width of an item
+      maxSizeX: null, // maximum column width of an item
+      minSizeY: 2, // minumum row height of an item
+      maxSizeY: null, // maximum row height of an item
+      resizable: {
+        enabled: true
+      },
+      draggable: {
+        enabled: true, // whether dragging items is supported
+        handle: '.my-class', // optional selector for resize handle
+        start: function(event, $element, widget) {}, // optional callback fired when drag is started,
+        drag: function(event, $element, widget) {}, // optional callback fired when item is moved,
+        stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging
+      }
+    };
   });
+

src/app/boards/boards-grid-mdv.tmpl.html

@@ -0,0 +1,10 @@
+
+<div>
+    <ul  gridster="ctrl.gridsterOpts" >
+        <li class="boards" gridster-item="board" ng-repeat="(boardId, board) in ctrl.boards">
+            <simple-board
+                    class="simple-board"
+            ></simple-board>
+        </li>
+    </ul>
+</div>

src/app/noterious.js

@@ -4,7 +4,8 @@ angular.module('noterious', [
   'ui.router',
   'ngAnimate',
   'firebase',
-  'noterious.common'
+  'noterious.common',
+  'gridster'
 ])
   .constant('ENDPOINT_URI', 'https://noterious.firebaseio.com/')
   .config(function ($stateProvider, $urlRouterProvider) {
@@ -28,6 +29,17 @@ angular.module('noterious', [
           }]
         }
       })
+      .state('sortBoards', {
+        url:'/boardsGrid',
+        templateUrl: 'app/boards/boards-grid-mdv.tmpl.html',
+        controller: 'BoardsCtrl',
+        controllerAs: 'ctrl',
+        resolve: {
+          'currentUser': ['Auth', function (Auth) {
+            return Auth.$requireAuth();
+          }]
+        }
+      })
       .state('notes', {
         url:'/boards/:boardId/notes',
         templateUrl: 'app/notes/notes-mdv.tmpl.html',

src/assets/css/noterious.css

@@ -384,8 +384,13 @@ a.view:hover, a.view:focus {
     border-right: 1px #CCC solid;
     margin: 0px;
     padding: 10px;
+    height: 100%;
+}
+.simple-board h3, .simple-note h3, .simple-board p, .simple-note p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-
 .bottom-right-corner {
     position: absolute;
     bottom: -85px;
@@ -415,6 +420,11 @@ a.view:hover, a.view:focus {
     opacity: 0.3;
 }
 
+/* Styling for Gridster Mobile */
+.gridster-mobile .gridster-item p {
+  word-wrap: break-word;
+  white-space: normal;
+}
 @media (max-width: 767px) {
   .collapsing, .collapse.in {
     z-index: 2;

src/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="assets/css/normalize.css">
     <link rel="stylesheet" href="assets/css/noterious.css">
     <link rel="stylesheet" href="assets/css/animations.css">
+    <link rel="stylesheet" href="assets/css/angular-gridster.min.css">
+
   </head>
   <body ng-controller="MainCtrl as main" ng-class="{loading:loadingView}" class="bg-{{main.currentColor}}">
     <div class="app-wrap">
@@ -49,6 +51,7 @@
     <script src="//cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
     <script src="//cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
     <script src="vendor/angular-ui-router.min.js"></script>
+    <script src="vendor/angular-gridster.min.js"></script>
 
     <script src="app/noterious.js"></script>
     <script src="app/common/common.js"></script>