Include Gridster

sachinsawant71 · Oct 31, 2014 · 02c2bdb · 02c2bdb
1 parent a8ea549
commit 02c2bdb
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 24 deletions.
diff --git a/bower.json b/bower.json
@@ -14,6 +14,7 @@
         "highcharts"       : "*",
         "hope"             : "*",
         "jquery"           : "*",
+        "gridster"         : "*",
         "moment"           : "*",
         "stylmethods"      : "*",
         "tuktuk"           : "*",

diff --git a/gulpfile.js b/gulpfile.js
@@ -27,6 +27,7 @@ var source = {
 var dependencies = {
     js   :[ 'bower_components/jquery/dist/jquery.min.js',
             'bower_components/hope/hope.js',
+            'bower_components/gridster/dist/jquery.gridster.min.js',
             'bower_components/moment/min/moment.min.js',
             'bower_components/highcharts/highcharts.js',
             // 'bower_components/highcharts/modules/canvas-tools.js',
@@ -40,7 +41,8 @@ var dependencies = {
             'bower_components/highcharts/themes/dark-unica.js',
             'bower_components/ua-parser-js/src/ua-parser.js'
           ],
-    css  :[ 'bower_components/tuktuk/tuktuk.grid.css']};
+    css  :[ 'bower_components/tuktuk/tuktuk.grid.css',
+            'bower_components/gridster/dist/jquery.gridster.min.css']};
 
 var banner = ['/**',
   ' * <%= pkg.name %> - <%= pkg.description %>',

diff --git a/www/index.html b/www/index.html
@@ -18,30 +18,31 @@
         <link rel="stylesheet" href="assets/css/zen.audit.css">
     </head>
     <body data-atoms="app">
-        <header>ZEN.audit</header>
-        <section>
-            <div class="row">
-              <article class="column_8" data-zen="memory"></article>
-              <article class="column_2" data-zen="memory-total"></article>
-              <article class="column_2" data-zen="memory-free"></article>
-              <article class="column_2" data-zen="memory-load"></article>
-            </div>
-            <div class="row">
-              <article class="column_2" data-zen="request-latence"></article>
-              <article class="column_8" data-zen="request"></article>
-              <article class="column_2" data-zen="request-requests"></article>
-              <article class="column_2" data-zen="request-bandwidth"></article>
-            </div>
-            <div class="row">
-              <article class="column_4" data-zen="browsers"></article>
-              <article class="column_4" data-zen="devices"></article>
-              <article class="column_4" data-zen="os"></article>
-            </div>
-            <div class="row">
-              <article class="column_12" data-zen="urls"></article>
-            </div>
+          <header>ZEN.audit</header>
+
+          <div class="gridster">
+            <ul>
+                <li data-row="1" data-col="1" data-sizex="6" data-sizey="2" data-zen="memory"></li>
+                <li data-row="1" data-col="7" data-sizex="1" data-sizey="1" data-zen="memory-total" class="color idx0"></li>
+                <li data-row="1" data-col="8" data-sizex="1" data-sizey="1" data-zen="memory-free" class="color idx1"></li>
+                <li data-row="2" data-col="7" data-sizex="1" data-sizey="1" data-zen="memory-load" class="color idx2"></li>
+                <li data-row="2" data-col="8" data-sizex="1" data-sizey="1"></li>
+
+                <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" data-zen="request-latence" class="color idx0"></li>
+                <li data-row="3" data-col="2" data-sizex="1" data-sizey="1" data-zen="request-requests" class="color idx1"></li>
+                <li data-row="4" data-col="1" data-sizex="1" data-sizey="1" data-zen="request-bandwidth" class="color idx2"></li>
+                <li data-row="4" data-col="2" data-sizex="1" data-sizey="1" data-zen="request-users"></li>
+                <li data-row="3" data-col="3" data-sizex="6" data-sizey="2" data-zen="request"></li>
+
+                <li data-row="6" data-col="1" data-sizex="2" data-sizey="2" data-zen="methods"></li>
+                <li data-row="6" data-col="3" data-sizex="2" data-sizey="2" data-zen="codes"></li>
+                <li data-row="6" data-col="5" data-sizex="2" data-sizey="2" data-zen="browsers"></li>
+                <li data-row="6" data-col="5" data-sizex="2" data-sizey="2" data-zen="devices"></li>
+                <li data-row="6" data-col="5" data-sizex="2" data-sizey="2" data-zen="os"></li>
+                <li data-row="6" data-col="5" data-sizex="6" data-sizey="2" data-zen="urls"></li>
+            </ul>
+        </div>
 
-        </section>
         <footer>Handcrafted with ♥ by Tapquo, S.L.</footer>
 
         <script src="assets/js/zen.audit.dependencies.js"></script>