diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d9668a7..ab9e208 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
diff --git a/main.js b/main.js
index c0c735b..a5b1e2e 100644
--- a/main.js
+++ b/main.js
@@ -14,13 +14,14 @@ require('./fonts/opensans/opensans.css');
var m = require('mithril');
-console.log("DataItems", DataItems);
+// console.log("DataItems", DataItems);
var DataItemsBySlug = {};
-for (item of DataItems) {
- DataItemsBySlug[item.slug] = item;
+for (item in DataItems) {
+ // console.log(item);
+ DataItemsBySlug[DataItems[item].slug] = DataItems[item];
}
-console.log("DataItemsBySlug", DataItemsBySlug);
+// console.log("DataItemsBySlug", DataItemsBySlug);
// __ _ __
// / / (_)___ / /__
@@ -31,12 +32,21 @@ var _Link = {
targetslug:"",
opened:false,
oninit: function(vn){
+ // console.log("vn.attrs", vn.attrs);
vn.state.targetslug = vn.attrs.href.replace(/^.*\/(.+)$/, "$1").replace(/^(.+)\/$/, "$1");
},
view: function(vn){
if(vn.state.opened){
// return m('div', "Hello "+vn.state.targetslug);
- return m(_Item, DataItemsBySlug[vn.state.targetslug]);
+ // console.log('vn.state.targetslug', vn.state);
+ return m('div', {'class':'opened-link'},
+ [
+ m('span', {'class':"link text"}, vn.children),
+ m(_Item, DataItemsBySlug[vn.state.targetslug])
+ ]
+ );
+
+
}else{
return m('a', {
'class':'link',
@@ -64,6 +74,7 @@ var _Text = {
// initiaize text childNodes array
vn.state.textchilds = [];
// parse html string to virtual dom
+ // console.log('vn.attrs.text',vn.attrs.text);
var textdom = new DOMParser().parseFromString(vn.attrs.text, "text/html");
// get the text nodes (avoid html document extra)
var childs = textdom.getElementsByTagName('body')[0].childNodes;
@@ -81,18 +92,21 @@ var _Text = {
if(typeof childs[i].childNodes[j].localName != "undefined"){
switch (childs[i].childNodes[j].localName) {
case 'a':
+ // console.log('childs[i].childNodes[j]', childs[i].childNodes[j]);
p.childs.push({
tag:'a',
- href:childs[i].childNodes[j].href,
+ href:childs[i].childNodes[j].attributes.href.value,
text:childs[i].childNodes[j].innerHTML
});
break;
}
}else{
// if textnode
+ // console.log(childs[i].childNodes[j]);
+ // console.log("["+childs[i].childNodes[j].textContent+"]");
p.childs.push({
tag:'#text',
- text:childs[i].childNodes[j].data
+ text:childs[i].childNodes[j].textContent //+ (childs[i].childNodes[j].nextSibling ? " " : "")
});
}
}
@@ -108,6 +122,7 @@ var _Text = {
vn.state.textchilds.map(function(p,i){
// create paragraph and loop through text and link nodes
return m('div', {'class':'paragraph'}, p.childs.map(function(c,j) {
+ console.log('c',c);
// return p.childs.map(function(c,j) {
// create text and link node
switch (c.tag) {
@@ -118,13 +133,14 @@ var _Text = {
}, c.text);
break;
case '#text':
+ // console.log("["+c.text+"]");
return m.trust(c.text);
break;
}
}) // /map
- ) // /m.div.paragraph
+ ); // /m.div.paragraph
}) // /map
- ) // /m.div.text
+ ); // /m.div.text
} // view:
}
@@ -134,7 +150,15 @@ var _Text = {
// _/ // /_/ __/ / / / / /
// /___/\__/\___/_/ /_/ /_/
var _Item = {
+ slug:null,
+ part:null,
+ type:null,
active:0,
+ oninit: function(vn){
+ // console.log('vn.attrs', vn.attrs);
+ vn.state.slug = vn.attrs.slug;
+ vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
+ },
view: function(vn){
return m("section", {
'id':vn.attrs.slug,
@@ -147,7 +171,7 @@ var _Item = {
onclick: function(e){
vn.state.active = vn.state.active ? 0 : 1;
}
- }, vn.attrs.title),
+ }, "Part "+vn.state.part+" : "+vn.attrs.title),
// create text node
m(_Text, {'text':vn.attrs.text, 'slug':vn.attrs.slug})
]
diff --git a/scss/main.scss b/scss/main.scss
index 9e3d376..a6e0e6e 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -5,25 +5,38 @@
// @Last modified time: 18-04-2017
// @License: GPL-V3
+$fs:16px;
+
+@mixin base_font{
+ font-family: 'amiri', sans-serif;
+ font-size: 16px;
+ font-kerning: auto;
+ line-height: 1.4;
+}
html, body{
- font-size: 16px;
- font-family: 'amiri', sans-serif;
+ @include base_font;
position: relative;
+ margin:0;
+ padding:0;
}
#app{
position: relative;
+ text-align: center;
+ margin: 0 auto;
}
main#content{
display:inline-block;
- margin: 0 auto;
+ text-align: left;
}
section.item{
- width:350px;
+ width:450px;
margin: 1em 0;
+ overflow-x: visible;
+ @include base_font;
// max-height:14px;
// overflow: hidden;
// transition: max-height 0.5s ease-in-out;
@@ -33,15 +46,32 @@ section.item{
h1{
font-size: 0.750em;
+ font-weight: 300;
margin: 0;
cursor:pointer;
}
- div.text div.paragraph{
- margin-bottom: 1em;
- }
- div.text section.item{
- padding-left:2em;
- border-left: 1px solid #999;
+ div.text{
+ font-size: 1.3em;
+ div.paragraph{
+ margin-bottom: 1em;
+
+ div.opened-link{
+ display:inline;
+ }
+ a.link, span.link.text{
+ font-weight: 600;
+ text-decoration: none;
+ color: inherit;
+ }
+ span.link.text:after{
+ content:':'
+ }
+ section.item{
+ padding-left:2em;
+ border-left: 1px solid #999;
+ }
+ }
+
}
}