renamed tree and inline modules to ModeText & ModeConnections

assets/dist/main.css

@@ -1,17 +1,15 @@
-/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
    ========================================================================== */
 
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
@@ -19,16 +17,11 @@ html {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
+ * Remove the margin in all browsers.
  */
 
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
+body {
+  margin: 0;
 }
 
 /**
@@ -44,25 +37,6 @@ h1 {
 /* Grouping content
    ========================================================================== */
 
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-
-figcaption,
-figure,
-main { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
@@ -88,17 +62,15 @@ pre {
    ========================================================================== */
 
 /**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ * Remove the gray background on active links in IE 10.
  */
 
 a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
+  background-color: transparent;
 }
 
 /**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 
@@ -108,15 +80,6 @@ abbr[title] {
   text-decoration: underline dotted; /* 2 */
 }
 
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
@@ -138,23 +101,6 @@ samp {
   font-size: 1em; /* 2 */
 }
 
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
 /**
  * Add the correct font size in all browsers.
  */
@@ -188,44 +134,19 @@ sup {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
- */
-
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
+ * Remove the border on images inside links in IE 10.
  */
 
 img {
   border-style: none;
 }
 
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
 /* Forms
    ========================================================================== */
 
 /**
- * Remove the margin in Firefox and Safari.
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
  */
 
 button,
@@ -233,7 +154,10 @@ input,
 optgroup,
 select,
 textarea {
-  margin: 0;
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
 /**
@@ -257,16 +181,14 @@ select { /* 1 */
 }
 
 /**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * Correct the inability to style clickable types in iOS and Safari.
  */
 
 button,
-html [type="button"], /* 1 */
+[type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
 }
 
 /**
@@ -292,6 +214,14 @@ button:-moz-focusring,
   outline: 1px dotted ButtonText;
 }
 
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
@@ -309,17 +239,15 @@ legend {
 }
 
 /**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
 
 progress {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
+  vertical-align: baseline;
 }
 
 /**
- * Remove the default vertical scrollbar in IE.
+ * Remove the default vertical scrollbar in IE 10+.
  */
 
 textarea {
@@ -327,8 +255,8 @@ textarea {
 }
 
 /**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
  */
 
 [type="checkbox"],
@@ -357,10 +285,9 @@ textarea {
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
@@ -379,12 +306,10 @@ textarea {
    ========================================================================== */
 
 /*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
+ * Add the correct display in Edge, IE 10+, and Firefox.
  */
 
-details, /* 1 */
-menu {
+details {
   display: block;
 }
 
@@ -396,30 +321,19 @@ summary {
   display: list-item;
 }
 
-/* Scripting
+/* Misc
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
- */
-
-canvas {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
+ * Add the correct display in IE 10+.
  */
 
 template {
   display: none;
 }
 
-/* Hidden
-   ========================================================================== */
-
 /**
- * Add the correct display in IE 10-.
+ * Add the correct display in IE 10.
  */
 
 [hidden] {
@@ -822,17 +736,19 @@ header {
         color: #000; }
 
 .sticky-clone-wrapper {
-  padding-top: 5em;
+  padding-top: 6em;
+  padding-bottom: 1em;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 4;
+  width: 100%;
   background-color: white; }
   .sticky-clone-wrapper h1.part-title {
     font-size: 1.6em; }
-    body.inline .sticky-clone-wrapper h1.part-title {
+    body.mode-connections .sticky-clone-wrapper h1.part-title {
       margin: 0 0 0 70px; }
-    body.tree .sticky-clone-wrapper h1.part-title {
+    body.mode-text .sticky-clone-wrapper h1.part-title {
       margin: 0 0 0 70px; }
 
 main#content {
@@ -849,13 +765,13 @@ main#content {
 section.intro {
   margin-left: 70px; }
 
-main#content.inline h1.part-title {
+main#content.mode-text h1.part-title {
   margin: 1em 0 0 70px; }
 
-main#content.inline h2.title, main#content.inline h4.filet {
+main#content.mode-text h2.title, main#content.mode-text h4.filet {
   margin: 1em 0 0 70px; }
 
-main#content.inline section.enonce {
+main#content.mode-text section.enonce {
   width: 450px;
   margin: 1em 0 1em 70px;
   overflow-x: visible;
@@ -863,38 +779,38 @@ main#content.inline section.enonce {
   font-size: 16px;
   font-kerning: auto;
   line-height: 1.4; }
-  main#content.inline section.enonce h2 {
+  main#content.mode-text section.enonce h2 {
     font-size: 1em;
     font-weight: 300;
     margin: 0;
     cursor: pointer; }
-  main#content.inline section.enonce h3 {
+  main#content.mode-text section.enonce h3 {
     font-size: 0.9em;
     font-weight: 300;
     margin: 0;
     cursor: pointer; }
-  main#content.inline section.enonce div.text {
+  main#content.mode-text section.enonce div.text {
     font-size: 1.3em; }
-    main#content.inline section.enonce div.text div.paragraph {
+    main#content.mode-text section.enonce div.text div.paragraph {
       margin-bottom: 1em; }
-      main#content.inline section.enonce div.text div.paragraph div.opened-link {
+      main#content.mode-text section.enonce div.text div.paragraph div.opened-link {
         display: inline; }
-      main#content.inline section.enonce div.text div.paragraph a.link, main#content.inline section.enonce div.text div.paragraph span.link.text {
+      main#content.mode-text section.enonce div.text div.paragraph a.link, main#content.mode-text section.enonce div.text div.paragraph span.link.text {
         font-weight: 600;
         text-decoration: none;
         color: inherit; }
-      main#content.inline section.enonce div.text div.paragraph span.link.text:after {
+      main#content.mode-text section.enonce div.text div.paragraph span.link.text:after {
         content: ':'; }
-      main#content.inline section.enonce div.text div.paragraph section.enonce, main#content.inline section.enonce div.text div.paragraph section.item {
+      main#content.mode-text section.enonce div.text div.paragraph section.enonce, main#content.mode-text section.enonce div.text div.paragraph section.item {
         padding-left: 2em;
         border-left: 1px solid #999; }
-      main#content.inline section.enonce div.text div.paragraph img {
+      main#content.mode-text section.enonce div.text div.paragraph img {
         float: left; }
 
-main#content.tree h1.part-title {
+main#content.mode-connections h1.part-title {
   margin: 0 0 0 70px; }
 
-main#content.tree h2.title, main#content.tree h4.filet {
+main#content.mode-connections h2.title, main#content.mode-connections h4.filet {
   margin: 0 0 0 70px; }
 
 .dot {
@@ -977,7 +893,8 @@ main#content.tree h2.title, main#content.tree h4.filet {
 footer {
   position: fixed;
   bottom: 0;
-  background-color: white; }
+  background-color: white;
+  width: 100%; }
   footer > * {
     margin-left: 1em; }
 

assets/main.js

@@ -19,8 +19,8 @@ var m = require('mithril');
 
 // var _helpers = require('modules/helpers');
 var _dbs = require('./modules/dbs');
-var _Inline = require('./modules/inline');
-var _Tree = require('./modules/tree');
+var _ModeText = require('./modules/ModeText');
+var _ModeConnections = require('./modules/ModeConnections');
 
 
 function init(){
@@ -29,9 +29,9 @@ function init(){
     console.log("Init _dbs.data_byid", _dbs.data_byid);
     console.log("Init _dbs.data_strct", _dbs.data_strct);
     m.route.prefix("");
-    m.route(document.body, "/lat/inline", {
-      "/:lang/inline": _Inline,
-      "/:lang/tree": _Tree,
+    m.route(document.body, "/lat/text", {
+      "/:lang/text": _ModeText,
+      "/:lang/connections": _ModeConnections
     });
   });
 };

assets/main.scss

@@ -131,17 +131,19 @@ header{
 
 
 .sticky-clone-wrapper{
-  padding-top: $header_height;
+  padding-top: $header_height+1em;
+  padding-bottom: 1em;
   position: fixed;
   top:0; left: 0;
   z-index: 4;
+  width:100%;
   background-color: white;
   h1.part-title{
     font-size: 1.6em;
-    body.inline &{
+    body.mode-connections &{
       margin: 0 0 0 $margin_left;
     }
-    body.tree &{
+    body.mode-text &{
       margin:0 0 0 $margin_left;
     }
   }
@@ -181,7 +183,7 @@ section.intro{
 //    / // __ \/ /   / / __ \/ _ \
 //  _/ // / / / /___/ / / / /  __/
 // /___/_/ /_/_____/_/_/ /_/\___/
-main#content.inline{
+main#content.mode-text{
   h1.part-title{
     margin: 1em 0 0 $margin_left;
   }
@@ -259,7 +261,7 @@ main#content.inline{
 //   / / / ___/ _ \/ _ \
 //  / / / /  /  __/  __/
 // /_/ /_/   \___/\___/
-main#content.tree{
+main#content.mode-connections{
 
   h1.part-title{
     margin:0 0 0 $margin_left;
@@ -385,4 +387,5 @@ footer{
   bottom: 0;
   background-color: white;
   >*{margin-left: 1em;}
+  width: 100%;
 }

assets/modules/tree.js → assets/modules/ModeConnections.js

@@ -343,24 +343,21 @@ var _Intro = {
 }
 
 
-//   ______
-//  /_  __/_______  ___
-//   / / / ___/ _ \/ _ \
-//  / / / /  /  __/  __/
-// /_/ /_/   \___/\___/
+//    ______                            __  _
+//   / ____/___  ____  ____  ___  _____/ /_(_)___  ____  _____
+//  / /   / __ \/ __ \/ __ \/ _ \/ ___/ __/ / __ \/ __ \/ ___/
+// / /___/ /_/ / / / / / / /  __/ /__/ /_/ / /_/ / / / (__  )
+// \____/\____/_/ /_/_/ /_/\___/\___/\__/_/\____/_/ /_/____/
 module.exports = {
-  // oninit : function(vn){
-  //   this.lang = vn.attrs.lang;
-  // },
   oncreate: function(vn){
-    document.body.classList.add('tree');
+    document.body.classList.add('mode-connections');
     _Ui.init();
   },
   view: function(vn){
-    console.log('_Tree view', vn.attrs.lang);
+    console.log('_ModeConnections view', vn.attrs.lang);
     return [
       m(_Header),
-      m('main', {id:"content", 'class':'tree'}, _dbs.data[vn.attrs.lang].map(function(p){
+      m('main', {id:"content", 'class':'mode-connections'}, _dbs.data[vn.attrs.lang].map(function(p){
           if(p.id == 'intro'){
             return m(_Intro,p);
           }else{
@@ -372,15 +369,3 @@ module.exports = {
     ];
   }
 }
-
-
-// function(){
-//   switch(_dbs.lang){
-//     case 'fr':
-//       return "Hello dots !";
-//       break;
-//     case 'bra':
-//       return '"Hola dots !"'
-//       break;
-//   }
-// }

assets/modules/inline.js → assets/modules/ModeText.js

@@ -197,7 +197,7 @@ var _Item = {
             onclick: function(e){
               vn.state.active = vn.state.active ? 0 : 1;
             }
-          }, this.type),
+          }, m.trust(markdown.renderInline(this.type))),
         // create text node
         m(_Text, {'text':this.text, 'id':this.id})
       ]
@@ -323,24 +323,25 @@ var _Intro = {
   }
 }
 
-//     ____      __    _
-//    /  _/___  / /   (_)___  ___
-//    / // __ \/ /   / / __ \/ _ \
-//  _/ // / / / /___/ / / / /  __/
-// /___/_/ /_/_____/_/_/ /_/\___/
+
+//   ______          __
+//  /_  __/__  _  __/ /_
+//   / / / _ \| |/_/ __/
+//  / / /  __/>  </ /_
+// /_/  \___/_/|_|\__/
 module.exports = {
   // oninit : function(vn){
   //   this.lang = vn.attrs.lang;
   // },
-  oncreate: function(vn){
-    document.body.classList.add('inline');
+  oncreate(vn){
+    document.body.classList.add('mode-text');
     _Ui.init();
   },
-  view: function(vn){
-    console.log('_Inline view', vn.attrs.lang);
+  view(vn){
+    console.log('_ModeText view', vn.attrs.lang);
     return [
       m(_Header),
-      m('main', {id:"content", 'class':'inline'}, _dbs.data[vn.attrs.lang].map(function(p){
+      m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map(function(p){
           console.log("MAP _dbs", p);
           if(p.id == 'intro'){
             return m(_Intro,p);

assets/modules/header.js

@@ -69,15 +69,15 @@ var _RouteMenu = {
       m('h3', 'Mode'),
       m('ul', [
         m('li', m('a', {
-          'href':'/'+lang+'/inline'+path[3],
+          'href':`/${lang}/text${path[3]}`,
           oncreate : m.route.link,
           onupdate : m.route.link
-        }, "inline")),
+        }, "Text")),
         m('li', m('a', {
-          'href':'/'+lang+'/tree'+path[3],
+          'href':`/${lang}/connections${path[3]}`,
           oncreate : m.route.link,
           onupdate : m.route.link
-        }, "tree")),
+        }, "Connections")),
       ])
     ]);
   }