design update of tableview

index.html

@@ -20,7 +20,7 @@
 	<link rel="icon" type="image/png" sizes="96x96" href="res/favicon/favicon-96x96.png">
 	<link rel="icon" type="image/png" sizes="16x16" href="res/favicon/favicon-16x16.png">
 
-    <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.10/release/featherlight.min.css" type="text/css" rel="stylesheet" />
+    <!--link href="//cdn.rawgit.com/noelboss/featherlight/1.7.10/release/featherlight.min.css" type="text/css" rel="stylesheet" /-->
 
     <link href="lib/cust/main.css" rel="stylesheet">
 </head>

lib/cust/main.css

@@ -2,7 +2,7 @@
 	IMPORTS
 */
 
-@font-face {
+/*@font-face {
     font-family: DINPro;
     font-weight: normal;
     src: url(../../res/fonts/DINPro-Light.ttf);
@@ -11,7 +11,7 @@
     font-family: DINPro;
     font-weight: bold;
     src: url(../../res/fonts/DINPro-Bold.ttf);
-}
+}*/
 
 /*
 	GENERAL SETUP
@@ -33,7 +33,6 @@ body {
 /*
 	UTILITY CLASSES
 */
-
 .smooth {
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
@@ -73,7 +72,6 @@ body {
 /*
 	MAIN FRAMEWORK
 */
-
 .wrapper-main {
     height: 100%;
     width: 100%;
@@ -110,8 +108,7 @@ body {
     height: 100vh;
     grid-column: 2;
     background: #eee;
-    /*width: 100%;*/
-    overflow: auto;
+    overflow: hidden;
 }
 
 /*
@@ -122,18 +119,6 @@ body {
     float: left;
 }
 
-/*
-	LOG BAR
-*/
-
-.alertCont {
-    position: fixed;
-    z-index: 10000;
-    left: 50%;
-    top: 10px;
-    transform: translateX(-50%);
-}
-
 /*
     ANNOUNCE TOOL
 */

src/index.js

@@ -17,7 +17,6 @@ class Layout {
   view(vnode) {
     return m('div.wrapper-main.smooth', [
       m(Sidebar),
-      m('div.navbar.navbar-defailt.navbar-main'),
       m('div.wrapper-content', vnode.children),
     ]);
   }

src/listcontroller.js

@@ -29,7 +29,7 @@ export default class DatalistController {
     // check this and return nothing
     const query = {};
     Object.keys(this.query).forEach((key) => { query[key] = this.query[key]; });
-    query.max_results = 5;
+    query.max_results = 10;
     query.page = pageNum;
 
     return new Promise((resolve, reject) => {

src/views/tableView.js

@@ -10,7 +10,7 @@ const tableStyles = [
     '.tabletool': {
       display: 'grid',
       height: '100%',
-      'grid-template-rows': '100px calc(100% - 100px)',
+      'grid-template-rows': '48px calc(100% - 48px)',
     },
     '.toolbar': {
       'grid-row': 1,
@@ -18,7 +18,10 @@ const tableStyles = [
     },
     '.scrollTable': {
       'grid-row': 2,
-      height: '100%',
+      'background-color': 'white',
+    },
+    '.tableTile': {
+      padding: '10px',
     },
   },
 ];
@@ -40,10 +43,9 @@ export default class TableView {
    *       https://docs.mongodb.com/v3.2/reference/operator/query/
    *       e.g. : { where: {name: somename } }
    */
-  constructor({ attrs: { keys, titles } }) {
+  constructor({ attrs: { keys } }) {
     this.search = '';
     this.tableKeys = keys;
-    this.tableTitles = titles;
   }
 
   getItemData(data) {
@@ -61,9 +63,12 @@ export default class TableView {
 
   item() {
     return (data, opts) => m(ListTile, {
-      style: { padding: '10px' },
+      className: 'themed-list-tile',
+      hoverable: true,
+      compactFront: true,
       content: m('div', {
         onclick() { m.route.set(`/${data._links.self.href}`); },
+        className: 'tableTile',
         style: { width: '100%', display: 'flex' },
       }, this.getItemData(data)),
     });
@@ -72,6 +77,7 @@ export default class TableView {
   view({
     attrs: {
       controller,
+      titles,
       onAdd = () => {},
     },
   }) {
@@ -82,8 +88,10 @@ export default class TableView {
     return m('div.tabletool', [
       m(Toolbar, {
         className: 'toolbar',
+        compact: true,
         content: [
           m(Search, {
+            compact: true,
             textfield: {
               label: 'Search',
               onChange: ({ value }) => {
@@ -103,8 +111,21 @@ export default class TableView {
         ],
       }),
       m(List, {
+        borders: true,
         className: 'scrollTable',
-        tiles: m(infinite, controller.infiniteScrollParams(this.item())),
+        tiles: [
+          m(ListTile, {
+            className: 'tableTile',
+            content: m(
+              'div',
+              { style: { width: '100%', display: 'flex' } },
+              titles.map(title => m('div', {
+                style: { width: `${95 / this.tableKeys.length}%` },
+              }, title)),
+            ),
+          }),
+          m(infinite, controller.infiniteScrollParams(this.item())),
+        ],
       }),
     ]);
   }