diff --git a/.gitignore b/.gitignore index e669aabf455827705c81829b43e331227f997eea..91affb2268228030f769aa536aa4111733cd4df1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .ftpconfig node_modules/ +package-lock.json diff --git a/lib/cust/main.css b/lib/cust/main.css deleted file mode 100644 index d22985dc10e29b14d184b331af4ee0dd71ad3e1f..0000000000000000000000000000000000000000 --- a/lib/cust/main.css +++ /dev/null @@ -1,123 +0,0 @@ -/* - IMPORTS -*/ - -/* - GENERAL SETUP -*/ - -html, body { - width: 100%; - height: 100%; -} -body { - overflow: hidden; -} - -/* - UTILITY CLASSES -*/ -.smooth { - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; - -o-transition: all 0.5s ease; - transition: all 0.5s ease; -} - -/* - LOGIN PANEL -*/ - -.loginPanel { - width: 100%; - height: 100%; - top: 0%; - left: 0%; - display: flex; - align-items: center; - justify-content: center; - position: fixed; - z-index: 20; - /*background: rgba(30,30,30,.9);*/ - background: rgba(31, 45, 84, 1); -} -.loginPanel>div { - box-shadow: 0 0 2em #000; -} -.loginPanel .login-logo { - width: 70%; -} - -/* - MAIN FRAMEWORK -*/ -.wrapper-main { - height: 100%; - width: 100%; - display: grid; - grid-template-columns: 280px auto; -} -.wrapper-sidebar { - z-index: 10; - grid-column: 1; - height: 100%; - overflow-y: auto; - position: fixed; - background: #222; - color: #fff; - box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); -} -.wrapper-sidebar .navbar li { - float: none; - display: block; -} -.wrapper-sidebar ul li a { - color: inherit; -} -.wrapper-sidebar ul li a:hover, .wrapper-sidebar ul li a:active, .wrapper-sidebar ul li a:focus { - color: #000; -} -.wrapper-sidebar>div { - padding: 1em; -} -.wrapper-sidebar .sidebar-logo { - width: 100%; -} -.wrapper-content { - padding: 3em; - height: 100vh; - grid-column: 2; - background: #eee; - overflow: hidden; - width: 100%; -} - -/* - ANNOUNCE TOOL -*/ - -.selected{ - background: #98FB98; -} -.featured{ - background: salmon; -} - -.selectedcolor{ - background: #98FB98; -} -.featuredcolor{ - background: salmon; -} -.footer { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - background-color: red; - color: white; - text-align: center; -} - - - diff --git a/src/index.js b/src/index.js index 46647d37c2790cb28100a3485248d5d4c6441cb4..fee7d341d902bf5f349f7014387583a0e887ff09 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,6 @@ import newEvent from './events/newEvent'; import viewEvent from './events/viewEvent'; import eventDraft from './events/eventDraft'; import eventWithExport from './events/eventWithExport'; -import Sidebar from './sidebar'; import Layout from './layout'; // import AnnounceTool from './announceTool'; import './style'; diff --git a/src/layout.js b/src/layout.js index eaa0fb04d5dfcc5ccb3c45e4bfa861b095cf3275..24e0220c155eebcedd0fa86b138b2b1b86e8bc9b 100644 --- a/src/layout.js +++ b/src/layout.js @@ -10,23 +10,32 @@ const layoutStyle = [ padding: 0, margin: 0, }, + '.main-toolbar': { + backgroundColor: '#1f2d54', + color: '#fff', + height: '72px', + 'grid-column': '1 / span 2', + 'grid-row': 1, + }, '.wrapper-main': { height: '100%', width: '100%', display: 'grid', 'grid-template-columns': '200px auto', + 'grid-template-rows': '72px auto', }, '.wrapper-sidebar': { 'grid-column': 1, + 'grid-row': 2, height: '100%', 'overflow-y': 'auto', - position: 'fixed', background: '#cccccc', color: 'white', }, '.wrapper-content': { - height: '100vh', + height: 'calc(100vh - 72px)', 'grid-column': 2, + 'grid-row': 2, background: '#eee', overflow: 'hidden', }, @@ -53,16 +62,10 @@ class Menupoint { 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(Toolbar, { className: 'main-toolbar' }, [ + m(ToolbarTitle, { text: 'AMIV Admintools' }), + ]), m( 'nav.mdc-drawer.mdc-drawer--permanent.mdc-typography.wrapper-sidebar', { style: { width: '200px' } }, diff --git a/src/views/elements.js b/src/views/elements.js index 2981ae4ab65960bb7ad8392ad186d146e98465f9..3e60b74ddf111fe15266b3f55fb5b2f42e566ab0 100644 --- a/src/views/elements.js +++ b/src/views/elements.js @@ -1,32 +1,23 @@ import m from 'mithril'; -import { IconButton } from 'polythene-mithril'; +import { IconButton, TextField } from 'polythene-mithril'; -export class inputGroup { - constructor(vnode) { +export class textInput { + constructor({ attrs: { getErrors } }) { // Link the error-getting function from the binding this.getErrors = () => []; - if (vnode.attrs.getErrors) { - this.getErrors = vnode.attrs.getErrors; + if (getErrors) { + this.getErrors = getErrors; } } - view(vnode) { + view({ attrs }) { // set display-settings accoridng to error-state - let errorField = null; - let groupClasses = vnode.attrs.classes ? vnode.attrs.classes : ''; const errors = this.getErrors(); - if (errors.length > 0) { - errorField = m('span.help-block', `Error: ${errors.join(', ')}`); - groupClasses += ' has-error'; - } - return m('div.form-group', { class: groupClasses }, [ - m(`label[for=${vnode.attrs.name}]`, vnode.attrs.title), - m(`input[name=${vnode.attrs.name}][id=${vnode.attrs.name}].form-control`, { - value: vnode.attrs.value, onchange: vnode.attrs.onchange, - }), - errorField, - ]); + const attributes = Object.assign({}, attrs); + attributes.valid = errors.length > 0; + attributes.error = errors.join(', '); + return m(TextField, attributes); } }