Commit 3b5f3a1c authored by MrMan's avatar MrMan

Start laying out header

parent 36097df8
////////////////////
// LHS Navigation //
////////////////////
var HeaderButton = {
view: function(vnode) {
const text = vnode.attrs.title || "Compose Mail";
const iconName = vnode.attrs.iconName || "pencil-white.svg";
const iconPrefix = "static/images/icons/";
return m("button", {class: "component header-button"}, [
m("span", text),
m("img", {href: iconPrefix + iconName }),
]);
}
};
var LHSNavHeader = {
view: function() {
return m("header", [
m(HeaderButton),
]);
}
};
var LHSNavPageList;
var LHSNavLabelList;
var LHSNavItem;
var LHSNav = {
view: function() {
return m("div", {class: "component lhs-nav"}, [
m(LHSNavHeader),
m("hr"),
// m(LHSNavPageList),
// m("hr"),
// m(LHSNavLabelList),
]);
}
};
var MailContent = {
view: function() {
return m("div", {class: "component mail-content"}, [
m("h1", "RHS Stuff here"),
]);
}
};
var App = {
view: function() {
return m("div", [
m("h1", "MithMail"),
m("span", "Hello world"),
return m("div", {class: "component app"}, [
m(LHSNav),
m(MailContent),
]);
}
};
......
......@@ -4,6 +4,8 @@
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MithMail</title>
<link rel="stylesheet" href="static/css/app.css"/>
</head>
<body>
<script src="static/vendor/mithril/1.1.6/mithril.min.js"></script>
......
......@@ -8,11 +8,11 @@
"license": "MIT",
"private": true,
"scripts": {
"build": "npm run build-html && npm run build-js",
"build": "npm run build-static && npm run build-html && npm run build-js",
"build-html": "cp index.html dist/",
"build-js": "cp app.js dist/",
"build-static": "mkdir -p dist && cp -r static dist/",
"build-watch": "ls index.html app.js | entr -rc npm run build",
"build-watch": "ls index.html app.js static/css/app.css | entr -rc npm run build",
"serve": "./node_modules/.bin/http-server dist/"
},
"devDependencies": {
......
html,body {
margin: 0;
height: 100%;
width: 100%;
}
/*******/
/* App */
/*******/
.component.app {
display: flex;
flex-direction: columns;
}
/**********/
/* LHSNav */
/**********/
.component .lhs-nav {
min-width: 25vw;
height: 100%;
background-color: #2e3740;
color: white;
}
.component .lhs-nav hr {
width: 80%;
border: 1px solid #202529;
}
Markdown is supported
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