From e5ba41921b5a2b1ca68e38e6ec9786086eba34b9 Mon Sep 17 00:00:00 2001
From: Hermann Blum <hermannsblum@yahoo.de>
Date: Sat, 17 Mar 2018 15:04:25 +0100
Subject: [PATCH] new layout styling
---
index.html | 2 +-
package.json | 1 +
src/index.js | 11 +----
src/layout.js | 108 ++++++++++++++++++++++++++++++++++++++++++
src/sidebar.js | 26 ----------
src/views/elements.js | 2 +
6 files changed, 113 insertions(+), 37 deletions(-)
create mode 100644 src/layout.js
delete mode 100644 src/sidebar.js
diff --git a/index.html b/index.html
index 2346026..8e349c0 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@
<!--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">
+ <!--link href="lib/cust/main.css" rel="stylesheet"-->
</head>
<body>
diff --git a/package.json b/package.json
index e415967..632e715 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
},
"author": "Hermann Blum et al",
"dependencies": {
+ "@material/drawer": "^0.30.0",
"ajv": "^5.5.0",
"axios": "^0.17.1",
"mithril": "^1.1.6",
diff --git a/src/index.js b/src/index.js
index 94446b6..61412e9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,7 +7,7 @@ import EventTable from './events/table';
import newEvent from './events/newEvent';
import viewEvent from './events/viewEvent';
import eventDraft from './events/eventDraft';
-import Sidebar from './sidebar';
+import Layout from './layout';
// import AnnounceTool from './announceTool';
import './style';
@@ -16,15 +16,6 @@ document.body.appendChild(main);
const root = main;
-class Layout {
- view(vnode) {
- return m('div.wrapper-main.smooth', [
- m(Sidebar),
- m('div.wrapper-content', vnode.children),
- ]);
- }
-}
-
function layoutWith(view) {
return {
view() {
diff --git a/src/layout.js b/src/layout.js
new file mode 100644
index 0000000..eaa0fb0
--- /dev/null
+++ b/src/layout.js
@@ -0,0 +1,108 @@
+import m from 'mithril';
+import '@material/drawer';
+import { List, ListTile, Icon, Toolbar, ToolbarTitle } from 'polythene-mithril';
+import { styler } from 'polythene-core-css';
+import { icons } from './views/elements';
+
+const layoutStyle = [
+ {
+ body: {
+ padding: 0,
+ margin: 0,
+ },
+ '.wrapper-main': {
+ height: '100%',
+ width: '100%',
+ display: 'grid',
+ 'grid-template-columns': '200px auto',
+ },
+ '.wrapper-sidebar': {
+ 'grid-column': 1,
+ height: '100%',
+ 'overflow-y': 'auto',
+ position: 'fixed',
+ background: '#cccccc',
+ color: 'white',
+ },
+ '.wrapper-content': {
+ height: '100vh',
+ 'grid-column': 2,
+ background: '#eee',
+ overflow: 'hidden',
+ },
+ },
+];
+styler.add('layout', layoutStyle);
+
+class Menupoint {
+ view({ attrs: { title, href, icon = null } }) {
+ return m(ListTile, {
+ url: {
+ href,
+ oncreate: m.route.link,
+ },
+ front: icon ? m(Icon, {
+ avatar: true,
+ svg: m.trust(icon),
+ }) : '',
+ title,
+ });
+ }
+}
+
+export default class Layout {
+ view({ children }) {
+ return m('div', [
+ m(Toolbar, {
+ style: {
+ backgroundColor: '#1f2d54',
+ color: '#fff',
+ height: '72px',
+ },
+ }, [
+ m(ToolbarTitle, { text: 'AMIV Admintools' }),
+ ]),
+ m('div.wrapper-main.smooth', [
+ m(
+ 'nav.mdc-drawer.mdc-drawer--permanent.mdc-typography.wrapper-sidebar',
+ { style: { width: '200px' } },
+ m(List, {
+ className: 'drawer-menu',
+ header: {
+ title: 'Menu',
+ },
+ tiles: [
+ m(Menupoint, {
+ href: '/users',
+ icon: icons.iconUsersSVG,
+ title: 'Users',
+ }),
+ m(Menupoint, {
+ href: '/events',
+ icon: icons.iconEventSVG,
+ title: 'Events',
+ }),
+ m(Menupoint, {
+ href: '/groups',
+ title: 'Groups',
+ }),
+ m(Menupoint, {
+ href: '/announce',
+ title: 'Announce',
+ }),
+ ],
+ }),
+ ),
+ m('div.wrapper-content', children),
+ ]),
+
+ /*return m('div.wrapper-sidebar.smooth', m('div.container-fluid', [
+ m('a[href=/]', { oncreate: m.route.link }, [
+ m('img.sidebar-logo[src="res/logo/main.svg"]'),
+ ]),
+ m('ul.nav.nav-pills.nav-stacked.nav-sidebar', [
+ ]),
+ ]));*/
+ ]);
+ }
+}
diff --git a/src/sidebar.js b/src/sidebar.js
deleted file mode 100644
index e113e4e..0000000
--- a/src/sidebar.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const m = require('mithril');
-
-class Button {
- view(vnode) {
- return m('li', m('a', { href: vnode.attrs.href, oncreate: m.route.link }, [
- m('span.glyphicon', { class: `glyphicon-${vnode.attrs.glyph}` }),
- m.trust(` ${vnode.attrs.title}`),
- ]));
- }
-}
-
-export default class Sidebar {
- view() {
- return m('div.wrapper-sidebar.smooth', m('div.container-fluid', [
- m('a[href=/]', { oncreate: m.route.link }, [
- m('img.sidebar-logo[src="res/logo/main.svg"]'),
- ]),
- m('ul.nav.nav-pills.nav-stacked.nav-sidebar', [
- m(Button, { href: '/users', glyph: 'list-alt', title: 'Users' }),
- m(Button, { href: '/events', glyph: 'calendar', title: 'Events' }),
- m(Button, { href: '/groups', glyph: 'blackboard', title: 'Groups' }),
- m(Button, { href: '/announce', glyph: 'bullhorn', title: 'Announce' }),
- ]),
- ]));
- }
-}
diff --git a/src/views/elements.js b/src/views/elements.js
index f39db2a..ece2c28 100644
--- a/src/views/elements.js
+++ b/src/views/elements.js
@@ -57,6 +57,8 @@ export const icons = {
iconSearchSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>',
iconBackSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>',
iconClearSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+ iconUsersSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
+ iconEventSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
};
export const BackButton = {
--
GitLab