Commit eb18593b authored by MrMan's avatar MrMan

Add some missing styling

parent 33c17509
......@@ -5,21 +5,25 @@ var LHS_NAV_ITEMS = [
badgeCSSBgColor: "#2285c6",
badgeContent: 2,
selected: true,
route: "/inbox",
},
{
title: "Starred",
iconImgSrc: "static/images/icons/star-full-white.svg",
route: "/starred",
},
{
title: "Draft",
iconImgSrc: "static/images/icons/file-line-white.svg",
route: "/draft",
},
{
title: "Important",
iconImgSrc: "static/images/icons/exclamation-triangle-white.svg",
route: "/important",
},
];
......@@ -175,7 +179,7 @@ var NavItem = {
]));
}
return m("li", {class: classes.join(" ")}, children);
return m("li.clickable", {class: classes.join(" ")}, children);
}
};
......@@ -363,11 +367,11 @@ var MailPageSubNav = {
},
};
var InboxPage = {
var InboxRHS = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.inbox-page", [
return m(".component.inbox-rhs", [
// Colored header
m(RHSHeader, {class: "inbox-blue-bg white-fg", title: "Inbox", newCount: newCount}),
......@@ -380,13 +384,22 @@ var InboxPage = {
}
};
var StarredEmailsPage = {
var InboxPage = {
view: function() {
return m(".component.app-page.inbox-page", [
m(LHSNav),
m(InboxRHS),
]);
}
};
var StarredRHS = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.starred-emails-page", [
return m(".component.starred-rhs", [
// Colored header
m(RHSHeader, {class: "starred-orange-bg white-fg", title: "Inbox", newCount: newCount}),
m(RHSHeader, {class: "starred-orange-bg white-fg", title: "Starred", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
......@@ -397,13 +410,22 @@ var StarredEmailsPage = {
}
};
var DraftEmailsPage = {
var StarredPage = {
view: function() {
return m(".component.app-page.starred-page", [
m(LHSNav),
m(StarredRHS),
]);
}
};
var DraftRHS = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.draft-emails-page", [
return m(".component.draft-rhs", [
// Colored header
m(RHSHeader, {class: "draft-gray-bg white-fg", title: "Inbox", newCount: newCount}),
m(RHSHeader, {class: "draft-gray-bg white-fg", title: "Draft", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
......@@ -414,13 +436,22 @@ var DraftEmailsPage = {
}
};
var ImportantEmailsPage = {
var DraftPage = {
view: function() {
return m(".component.app-page.draft-page", [
m(LHSNav),
m(DraftRHS),
]);
}
};
var ImportantRHS = {
view: function(vnode) {
var newCount = vnode.attrs.newCount;
return m(".component.important-emails-page", [
return m(".component.important-rhs", [
// Colored header
m(RHSHeader, {class: "important-gray-bg white-fg", title: "Inbox", newCount: newCount}),
m(RHSHeader, {class: "important-red-bg white-fg", title: "Important", newCount: newCount}),
// Container with buttons
m(MailPageSubNav),
......@@ -431,31 +462,18 @@ var ImportantEmailsPage = {
}
};
var MailContent = {
oninit: function() {
this.subpage = "inbox";
},
view: function() {
// TODO: decide *which* view to show
switch (this.subpage) {
case "starred": return m(StarredEmailsPage);
case "draft": return m(DraftEmailsPage);
case "draft": return m(ImportantEmailsPage);
case "inbox":
default:
return m(InboxPage, {newCount: 2});
}
}
};
var App = {
var ImportantPage = {
view: function() {
return m("div", {class: "component app"}, [
return m(".component.app-page.important-page", [
m(LHSNav),
m(MailContent),
m(ImportantRHS),
]);
}
};
m.mount(document.body, App);
m.route(document.body, "/inbox", {
"/inbox": InboxPage,
"/starred": StarredPage,
"/draft": DraftPage,
"/important": ImportantPage,
});
......@@ -66,6 +66,11 @@ img.icon-lg { height: 2em; }
.inbox-blue-bg { background-color: #2285c6; }
.white-fg { color: white; }
/** https://flatuicolors.com/palette/defo */
.draft-gray-bg { background-color: #7f8c8d; }
.important-red-bg { background-color: #e74c3c; }
.starred-orange-bg { background-color: #f39c12; }
.gray-boxed {
padding: 0.5em;
background-color: #DDD;
......@@ -76,16 +81,18 @@ img.icon-lg { height: 2em; }
.valign-mid { vertical-align: middle; }
/*******/
/* App */
/*******/
.component.app {
.app-page {
display: flex;
flex-direction: columns;
min-height: 100%;
width: 100%;
}
.app-page > div:nth-of-type(2) {
width: 100%;
}
/**********/
/* LHSNav */
/**********/
......@@ -261,11 +268,3 @@ img.icon-lg { height: 2em; }
padding-right: 1em;
justify-content: space-between;
}
/*********/
/* Inbox */
/*********/
.component.inbox-page {
width: 100%;
}
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