From 86990dc0593ba9f24f987702d988dff5ded1f8af Mon Sep 17 00:00:00 2001
From: Hermann Blum <hermannsblum@yahoo.de>
Date: Sat, 10 Mar 2018 22:03:12 +0100
Subject: [PATCH] design update of tableview
---
index.html | 2 +-
lib/cust/main.css | 21 +++------------------
src/index.js | 1 -
src/listcontroller.js | 2 +-
src/views/tableView.js | 33 +++++++++++++++++++++++++++------
5 files changed, 32 insertions(+), 27 deletions(-)
diff --git a/index.html b/index.html
index b813beb..2346026 100644
--- a/index.html
+++ b/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>
diff --git a/lib/cust/main.css b/lib/cust/main.css
index 78839fb..62a0288 100644
--- a/lib/cust/main.css
+++ b/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
*/
diff --git a/src/index.js b/src/index.js
index 7407bf3..d56ffd3 100644
--- a/src/index.js
+++ b/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),
]);
}
diff --git a/src/listcontroller.js b/src/listcontroller.js
index 0555549..bc759b3 100644
--- a/src/listcontroller.js
+++ b/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) => {
diff --git a/src/views/tableView.js b/src/views/tableView.js
index 4af95db..b58db22 100644
--- a/src/views/tableView.js
+++ b/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())),
+ ],
}),
]);
}
--
GitLab