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; + } + } + } }