From 2f9855ad4a576d7a4c069c459f070201e886c9a1 Mon Sep 17 00:00:00 2001
From: Hermann Blum <hermannsblum@yahoo.de>
Date: Thu, 30 Nov 2017 15:15:26 +0100
Subject: [PATCH] add exisiting layout with sidebar
---
src/index.js | 31 +++++++++++++++++++++++++------
src/sidebar.js | 25 +++++++++++++++++++++++++
2 files changed, 50 insertions(+), 6 deletions(-)
create mode 100644 src/sidebar.js
diff --git a/src/index.js b/src/index.js
index 9c7f442..ce76ae1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
import { LoginScreen } from './login';
import TableView from './views/tableView';
import { UserModal, UserTable } from './userTool';
+import Sidebar from './sidebar';
const m = require('mithril');
@@ -9,24 +10,42 @@ document.body.appendChild(main);
const root = main;
+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),
+ ]);
+ }
+}
+
+function layoutWith(view) {
+ return {
+ view() {
+ return m(Layout, m(view));
+ },
+ };
+}
+
m.route(root, '/users', {
- '/users': UserTable,
- '/users/:id': UserModal,
- '/events': {
+ '/users': layoutWith(UserTable),
+ '/users/:id': layoutWith(UserModal),
+ '/events': layoutWith({
view() {
return m(TableView, {
resource: 'events',
keys: ['title_de', 'time_start', 'show_website', 'spots', 'signup_count'],
});
},
- },
- '/groups': {
+ }),
+ '/groups': layoutWith({
view() {
return m(TableView, {
resource: 'groups',
keys: ['name'],
});
},
- },
+ }),
'/login': LoginScreen,
});
diff --git a/src/sidebar.js b/src/sidebar.js
new file mode 100644
index 0000000..555022e
--- /dev/null
+++ b/src/sidebar.js
@@ -0,0 +1,25 @@
+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' }),
+ ]),
+ ]));
+ }
+}
--
GitLab