bachir/app.ethica-spinoza.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

in my way to display full titles on connection mode

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-02-24 12:41:59 +01:00
parent 2ce27b3245
commit f69747ac0a
7 changed files with 161 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/dist/main.css
Vendored
+22 -34
View File
@@ -745,32 +745,31 @@ header {
width: 100%; width: 100%;
background-color: white; } background-color: white; }
.sticky-clone-wrapper h1.part-title { .sticky-clone-wrapper h1.part-title {
font-size: 1.6em; } margin: 0 0 0 70px; }
body.mode-connections .sticky-clone-wrapper h1.part-title {
margin: 0 0 0 70px; }
body.mode-text .sticky-clone-wrapper h1.part-title {
margin: 0 0 0 70px; }
.sticky-clone-wrapper h2.title {
font-size: 1em; }
body.mode-connections .sticky-clone-wrapper h2.title {
margin: 0 0 0 70px; }
body.mode-text .sticky-clone-wrapper h2.title {
margin: 0 0 0 70px; }
main#content { main#content {
margin-top: 5em; } margin-top: 5em; }
main#content h1.part-title {
font-size: 1.6em;
width: 450px; }
main#content section.part { main#content section.part {
position: relative; } position: relative; }
main#content h2.title, main#content h2.filet {
font-size: 1em;
width: 450px; }
section.intro { section.intro {
margin-left: 70px; } margin-left: 70px; }
h1.part-title {
font-size: 1.8em;
margin: 0 0 0 70px;
font-weight: normal;
letter-spacing: 0.3em; }
h1.part-title em {
font-size: 0.7em;
letter-spacing: normal; }
h2.title {
font-size: 1.2em;
font-weight: normal;
margin: 1em 0 0 70px;
line-height: 1; }
main#content.mode-text h1.part-title { main#content.mode-text h1.part-title {
margin: 1em 0 0 70px; } margin: 1em 0 0 70px; }
@@ -813,33 +812,27 @@ main#content.mode-text section.enonce {
main#content.mode-text section.enonce div.text div.paragraph img { main#content.mode-text section.enonce div.text div.paragraph img {
float: left; } float: left; }
main#content.mode-connections h1.part-title {
margin: 0 0 0 70px; }
main#content.mode-connections h2.title, main#content.mode-connections h4.filet {
margin: 0 0 0 70px; }
.dot { .dot {
margin: 0 0 0 70px; margin: 0 0 0 70px;
position: relative; position: relative;
border: 1px solid white; border: 1px solid white;
width: 500px; } width: 550px; }
.dot > p.summary { .dot > p.summary {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin: 0; margin: 0 0 0 0.6em;
opacity: 0; opacity: 0;
transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
width: 385px; } max-width: 475px; }
.dot:not(.disabled) > p.summary { .dot:not(.disabled) > span.title, .dot:not(.disabled) > p.summary {
cursor: pointer; } cursor: pointer; }
.dot.disabled > p.summary { .dot.disabled > span.title, .dot.disabled > p.summary {
cursor: default; } cursor: default; }
.dot > section.text { .dot > section.text {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin: 0; margin: 0;
width: 385px; } width: 435px; }
.dot > section.text p { .dot > section.text p {
margin: 0; } margin: 0; }
.dot > section.text p:not(:last-child) { .dot > section.text p:not(:last-child) {
@@ -876,13 +869,8 @@ main#content.mode-connections h2.title, main#content.mode-connections h4.filet {
.dot:hover > p.summary, .dot.opened > p.summary, .dot.highlight > p.summary { .dot:hover > p.summary, .dot.opened > p.summary, .dot.highlight > p.summary {
opacity: 1; opacity: 1;
transition: opacity 0.4s ease-in-out; } transition: opacity 0.4s ease-in-out; }
.dot:hover > span.id, .dot.opened > span.id, .dot.highlight > span.id {
opacity: 1;
transition: opacity 0.4s ease-in-out; }
.dot.disabled > * { .dot.disabled > * {
color: grey; } color: grey; }
.dot:not(.opened) {
line-height: 0.7; }
footer { footer {
position: fixed; position: fixed;
assets/dist/main.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/dist/main.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/main.scss
+70 -45
View File
@@ -22,7 +22,7 @@ html, body{
} }
$header_height:5em; $header_height:5em;
$dot_w:500px; $dot_w:550px;
$bullet_w:40px; $bullet_w:40px;
$margin_left:50px + ($bullet_w/2); $margin_left:50px + ($bullet_w/2);
@@ -139,23 +139,23 @@ header{
width:100%; width:100%;
background-color: white; background-color: white;
h1.part-title{ h1.part-title{
font-size: 1.6em; // // font-size: 1.6em;
body.mode-connections &{ // // body.mode-connections &{
margin: 0 0 0 $margin_left; // // margin: 0 0 0 $margin_left;
} // }
body.mode-text &{ // body.mode-text &{
margin:0 0 0 $margin_left; margin:0 0 0 $margin_left;
} // }
}
h2.title{
font-size: 1em;
body.mode-connections &{
margin: 0 0 0 $margin_left;
}
body.mode-text &{
margin:0 0 0 $margin_left;
}
} }
// h2.title{
// font-size: 1em;
// body.mode-connections &{
// margin: 0 0 0 $margin_left;
// }
// body.mode-text &{
// margin:0 0 0 $margin_left;
// }
// }
} }
main#content{ main#content{
@@ -166,20 +166,20 @@ main#content{
// width: 450px; // width: 450px;
// } // }
h1.part-title{ // h1.part-title{
font-size: 1.6em; // font-size: 1.6em;
width:450px; // width:450px;
} // }
section.part{ section.part{
position: relative; position: relative;
} }
h2.title, h2.filet{ // h2.title, h2.filet{
font-size: 1em; // font-size: 1em;
width:450px; // width:450px;
// margin: 1em 0; // // margin: 1em 0;
} // }
} }
@@ -187,6 +187,28 @@ section.intro{
margin-left: $margin_left; margin-left: $margin_left;
} }
// Commons
h1.part-title{
font-size: 1.8em;
margin:0 0 0 $margin_left;
font-weight: normal;
letter-spacing: 0.3em;
em{
font-size: 0.7em;
letter-spacing: normal;
}
}
h2.title{
font-size: 1.2em;
font-weight: normal;
margin:1em 0 0 $margin_left;
line-height: 1;
}
// ____ __ _ // ____ __ _
// / _/___ / / (_)___ ___ // / _/___ / / (_)___ ___
// / // __ \/ / / / __ \/ _ \ // / // __ \/ / / / __ \/ _ \
@@ -271,13 +293,9 @@ main#content.mode-text{
// / / / / / __/ __/ // / / / / / __/ __/
// /_/ /_/ \___/\___/ // /_/ /_/ \___/\___/
main#content.mode-connections{ main#content.mode-connections{
// h2.title, h4.filet{
h1.part-title{ // margin:0 0 0 $margin_left;
margin:0 0 0 $margin_left; // }
}
h2.title, h4.filet{
margin:0 0 0 $margin_left;
}
} }
.dot{ .dot{
margin:0 0 0 $margin_left; margin:0 0 0 $margin_left;
@@ -305,16 +323,23 @@ main#content.mode-connections{
// font-size: 15px; // font-size: 15px;
// font-kerning: none; // font-kerning: none;
// } // }
>span.title{
}
>p.summary{ >p.summary{
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin: 0; margin: 0 0 0 0.6em;
opacity: 0; opacity: 0;
transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
width : $dot_w - $margin_left - $bullet_w -5px; max-width : $dot_w - $margin_left -5px;
}
&:not(.disabled) {
>span.title,>p.summary{cursor: pointer;}
}
&.disabled {
>span.title,>p.summary{cursor: default;}
} }
&:not(.disabled) > p.summary{cursor: pointer;}
&.disabled > p.summary{cursor: default;}
>section.text{ >section.text{
display: inline-block; display: inline-block;
@@ -372,20 +397,20 @@ main#content.mode-connections{
opacity: 1; opacity: 1;
transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
} }
>span.id{ // >span.id{
opacity: 1; // opacity: 1;
// transform: translate3d(-0.5em, 0, 0); // // transform: translate3d(-0.5em, 0, 0);
// transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out; // // transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out; // transition: opacity 0.4s ease-in-out;
} // }
} }
&.disabled>*{ &.disabled>*{
color:grey; color:grey;
} }
&:not(.opened){ // &:not(.opened){
line-height: 0.7; // line-height: 0.8;
} // }
} }
assets/modules/ModeConnections.js
+30 -79
View File
@@ -27,75 +27,12 @@ var _Dot = {
links:null, links:null,
parents:[], parents:[],
lang:_dbs.lang, lang:_dbs.lang,
setupDotType(vn){
// var rx_id = /^(\d)(app|agd|\d\d|pr|ad|ap|c|p|d|a)(cd|sc|\d\d|d|c|a|l|p|\d)?(e|\d|sc)?(d|c|a|sc)?$/;
// var m = this.id.match(rx_id);
// if(m){
// switch(true){
// case /^\d{2}$/.test(m[2]):
// switch(true){
// case /^cd$/.test(m[3]) : this.dottype = 'corollaire-demo'; break;
// case /^sc$/.test(m[3]) : this.dottype = 'scolie'; break;
// case /^d$/.test(m[3]) : this.dottype = 'demonstration'; break;
// case /^c$/.test(m[3]) :
// switch(true){
// case /^sc$/.test(m[4]): this.dottype = 'scolie'; break;
// case /^d$/.test(m[4]) : this.dottype = 'demonstration'; break;
// case /^d$/.test(m[5]) : this.dottype = 'demonstration'; break;
// case /^sc$/.test(m[5]): this.dottype = 'scolie'; break;
// case /^\d$/.test(m[4]): this.dottype = 'corollaire'; break;
// case !m[4] : this.dottype = 'corollaire'; break;
// }
// break;
// case /^a$/.test(m[3]) : this.dottype = 'axiom'; break;
// case /^l$/.test(m[3]) :
// switch(true){
// case /^d$/.test(m[5]) : this.dottype = 'demonstration'; break;
// case /^sc$/.test(m[5]): this.dottype = 'scolie'; break;
// case !m[5] : this.dottype = 'lemme'; break;
// }
// break;
// case /^p$/.test(m[3]) : this.dottype = 'postulat'; break;
// case /^\d$/.test(m[3]) : this.dottype = '??'; break;
// case /^\d{2}$/.test(m[3]) : this.dottype = '??'; break;
// case !m[3] : this.dottype = 'proposition'; break;
// }
// break;
// case /^app|ap$/.test(m[2]) : this.dottype = 'appendice'; break;
// case /^agd$/.test(m[2]) : this.dottype = 'def-gen-affect'; break;
// case /^pr$/.test(m[2]) : this.dottype = 'preface'; break;
// case /^ad$/.test(m[2]) :
// switch(true){
// case /^e$/.test(m[4]) :this.dottype = 'explication'; break;
// case !m[4] :this.dottype = 'def-affect'; break;
// }
// break;
// case /^c$/.test(m[2]) : this.dottype = 'chapitre'; break;
// case /^p$/.test(m[2]) : this.dottype = 'postulat'; break;
// case /^d$/.test(m[2]) :
// switch(true){
// case /^e$/.test(m[4]) : this.dottype = 'explication'; break;
// case !m[4] : this.dottype = 'definition'; break;
// }
// break;
// case /^a$/.test(m[2]) : this.dottype = 'axiom'; break;
// }
// // }
// }
// console.log(`${this.id} -> ${this.dottype}`,m);
//
// // TODO: fix false ids
// // we have app and ap for appendice (1app | 4ap)
// // 213def ??
// // 209cd demo ou corollaire-demo ??
// // 210csc scolie ou corollaire-scolie ??
// // 213l1d demo ??
},
setupTitle(vn){ setupTitle(vn){
this.title = vn.attrs.title; this.title = vn.attrs.title;
if(!this.title){ if(!this.title){
this.title = this.type; this.title = this.type;
} }
this.title = markdown.renderInline(this.title);
}, },
setuptext(vn){ setuptext(vn){
// console.log('setuptext', vn); // console.log('setuptext', vn);
@@ -113,16 +50,15 @@ var _Dot = {
}, },
oninit(vn){ oninit(vn){
// console.log('Dot init : vn',vn);
this.id = vn.attrs.id; this.id = vn.attrs.id;
this.type = vn.attrs.type; this.type = vn.attrs.type;
// this.title = vn.attrs.title || "title";
// this.setupDotType(vn);
this.dottype = vn.attrs.dottype; this.dottype = vn.attrs.dottype;
this.setupTitle(vn); this.setupTitle(vn);
this.setuptext(vn); this.setuptext(vn);
console.log(`${this.id} -> ${this.dottype}`); // console.log(`${this.id} -> ${this.dottype}`);
if(typeof vn.attrs.active !== 'undefined') if(typeof vn.attrs.active !== 'undefined')
this.active = vn.attrs.active; this.active = vn.attrs.active;
@@ -150,6 +86,7 @@ var _Dot = {
if(this.lang != _dbs.lang){ if(this.lang != _dbs.lang){
this.lang = _dbs.lang; this.lang = _dbs.lang;
this.setuptext(vn); this.setuptext(vn);
this.setupTitle(vn);
} }
}, },
view(vn){ view(vn){
@@ -158,15 +95,17 @@ var _Dot = {
// console.log('_Dot view '+this.id+' parents :',this.parents); // console.log('_Dot view '+this.id+' parents :',this.parents);
var dot_content = [ var dot_content = [
// links to // links to
// TODO: add dottype class to nested dots
this.links.to.length this.links.to.length
? m('nav', {'class':'links to'}, this.links.to.map(id => { ? m('nav', {'class':'links to'}, this.links.to.map(id => {
// console.log(id); // console.log(id);
if(typeof _dbs.data_byid[_dbs.lang][id] !== 'undefined'){ if(typeof _dbs.data_byid[_dbs.lang][id] !== 'undefined'){
var obj = _dbs.data_byid[_dbs.lang][id];
// console.log('link to : obj', obj);
return m(_Dot, { return m(_Dot, {
"id":id, "id":id,
'text':_dbs.data_byid[_dbs.lang][id].text, 'text':obj.text,
'type':'', 'dottype':obj.dottype,
'type':obj.type,
// passe the memory of crossed dots plus the current one // passe the memory of crossed dots plus the current one
'parents':vn.state.parents.concat([vn.state.id]), 'parents':vn.state.parents.concat([vn.state.id]),
// activate link only if not in parents (already went through it) // activate link only if not in parents (already went through it)
@@ -175,7 +114,7 @@ var _Dot = {
} }
}) })
) )
: null, : null, // if no links to, add nothing
// id // id
// m('span', {'class':'id'}, this.id), // this.type+' '+ // m('span', {'class':'id'}, this.id), // this.type+' '+
// bullet // bullet
@@ -214,12 +153,14 @@ var _Dot = {
// links from // links from
this.links.from.length this.links.from.length
? m('nav', {'class':'links from'}, this.links.from.map(id => { ? m('nav', {'class':'links from'}, this.links.from.map(id => {
// retrun a dot var obj = _dbs.data_byid[_dbs.lang][id];
// TODO: add dottype class to nested dots // console.log('link from : obj', obj);
// return a dot
return m(_Dot, { return m(_Dot, {
"id":id, "id":id,
'text':_dbs.data_byid[_dbs.lang][id].text, 'text':obj.text,
'type':'', 'dottype':obj.dottype,
'type':obj.type,
// passe the memory of crossed dots plus the current one // passe the memory of crossed dots plus the current one
'parents':vn.state.parents.concat([vn.state.id]), 'parents':vn.state.parents.concat([vn.state.id]),
// activate link only if not in parents (already went through it) // activate link only if not in parents (already went through it)
@@ -227,14 +168,20 @@ var _Dot = {
}); });
}) })
) )
: null : null, // if no links from, add nothing
]; ];
}else{ }else{
// preview dot // preview dot
var dot_content = [ var dot_content = [
// m('span', {'class':'id'}, this.id), // this.type+' '+ // m('span', {'class':'id'}, this.id), // this.type+' '+
// m('span', {'class':'bullet'}, m.trust('•')), // m('span', {'class':'bullet'}, m.trust('•')),
m('span', {'class':'title'}, m.trust(this.title)), m('span', {
'class':'title',
onclick(e){
// TODO: animate openening (text and links separatly)
vn.state.opened = true;
}
}, m.trust(this.title)), // TODO: on nested dot add full description : Part 1, Prop 8, scolie
m('p', { m('p', {
'class':'summary', 'class':'summary',
onclick(e){ onclick(e){
@@ -247,7 +194,11 @@ var _Dot = {
return m('div',{ return m('div',{
'uid':this.id, 'uid':this.id,
'class':`dot ${this.dottype}` 'class':`dot ${this.dottype}`,
// onclick(e){
// // TODO: animate openening (text and links separatly)
// vn.state.opened = true;
// }
}, },
dot_content dot_content
); );
@@ -352,7 +303,7 @@ var _Enonce = {
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text); // if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
return [ return [
// create dot // create dot
m(_Dot, {"id":this.id, 'text':this.text,'type':this.title, 'dottype':this.dottype}), m(_Dot, {"id":this.id, 'text':this.text, 'type':this.title, 'dottype':this.dottype}),
// addd children // addd children
this.childs.map(c => { return m(_Child, c); }) this.childs.map(c => { return m(_Child, c); })
] ]
assets/modules/dbs.js
+5 -4
View File
@@ -78,6 +78,7 @@ module.exports = {
}, },
parseByID(callback){ parseByID(callback){
// create a id keyed array of contents
// loop through laguages // loop through laguages
for(l in this.data){ for(l in this.data){
// console.log('l', l); // console.log('l', l);
@@ -93,18 +94,18 @@ module.exports = {
// guess the type from the id // guess the type from the id
// console.log(this.data[l][p].enonces[e].id); // console.log(this.data[l][p].enonces[e].id);
this.data[l][p].enonces[e].dottype = this.setupType(this.data[l][p].enonces[e].id); this.data[l][p].enonces[e].dottype = this.setupType(this.data[l][p].enonces[e].id);
// records childs in array keyed by ids
this.data_byid[l][this.data[l][p].enonces[e].id] = this.data[l][p].enonces[e];
} }
// records childs in flat array by ids
this.data_byid[l][this.data[l][p].enonces[e].id] = this.data[l][p].enonces[e];
// loop through childs // loop through childs
for (c in this.data[l][p].enonces[e].childs){ for (c in this.data[l][p].enonces[e].childs){
// console.log(_db[p][e][c]); // console.log(_db[p][e][c]);
if(this.data[l][p].enonces[e].childs[c].id){ if(this.data[l][p].enonces[e].childs[c].id){
// guess the type from the id // guess the type from the id
this.data[l][p].enonces[e].childs[c].dottype = this.setupType(this.data[l][p].enonces[e].childs[c].id); this.data[l][p].enonces[e].childs[c].dottype = this.setupType(this.data[l][p].enonces[e].childs[c].id);
// records childs in array keyed by ids
this.data_byid[l][this.data[l][p].enonces[e].childs[c].id] = this.data[l][p].enonces[e].childs[c];
} }
// records childs in flat array by ids
this.data_byid[l][this.data[l][p].enonces[e].childs[c].id] = this.data[l][p].enonces[e].childs[c];
} }
} }
} }
webpack.config.js
+31
View File
@@ -45,9 +45,40 @@ module.exports = {
}), }),
new UglifyJsPlugin({ new UglifyJsPlugin({
sourceMap: true, sourceMap: true,
parallel:4,
uglifyOptions: { uglifyOptions: {
ecma: 8, ecma: 8,
// disable most of compress to gain in compilation speed
// https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1
compress: { compress: {
arrows: false,
booleans: false,
// cascade: false,
collapse_vars: false,
comparisons: false,
computed_props: false,
hoist_funs: false,
hoist_props: false,
hoist_vars: false,
if_return: false,
inline: false,
join_vars: false,
keep_infinity: true,
loops: false,
negate_iife: false,
properties: false,
reduce_funcs: false,
reduce_vars: false,
sequences: false,
side_effects: false,
switches: false,
top_retain: false,
toplevel: false,
typeofs: false,
unused: false,
conditionals: false,
dead_code: true,
evaluate: false,
warnings: false warnings: false
}, },
} }