Skip to content
Snippets Groups Projects
Commit e5ba4192 authored by Hermann's avatar Hermann
Browse files

new layout styling

parent e5810eff
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 1
− 1
View file @ e5ba4192
......@@ -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>
......
package.json
+ 1
− 0
View file @ e5ba4192
......@@ -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",
......
src/index.js
+ 1
− 10
View file @ e5ba4192
......@@ -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() {
......
src/layout.js 0 → 100644
+ 108
− 0
View file @ e5ba4192
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', [
]),
]));*/
]);
}
}
src/sidebar.js deleted 100644 → 0
+ 0
− 26
View file @ e5810eff
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' }),
]),
]));
}
}
src/views/elements.js
+ 2
− 0
View file @ e5ba4192
......@@ -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 = {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment