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%;
background-color: white; }
.sticky-clone-wrapper h1.part-title {
font-size: 1.6em; }
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; }
margin: 0 0 0 70px; }
main#content {
margin-top: 5em; }
main#content h1.part-title {
font-size: 1.6em;
width: 450px; }
main#content section.part {
position: relative; }
main#content h2.title, main#content h2.filet {
font-size: 1em;
width: 450px; }
section.intro {
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 {
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 {
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 {
margin: 0 0 0 70px;
position: relative;
border: 1px solid white;
width: 500px; }
width: 550px; }
.dot > p.summary {
display: inline-block;
vertical-align: top;
margin: 0;
margin: 0 0 0 0.6em;
opacity: 0;
transition: opacity 0.4s ease-in-out;
width: 385px; }
.dot:not(.disabled) > p.summary {
max-width: 475px; }
.dot:not(.disabled) > span.title, .dot:not(.disabled) > p.summary {
cursor: pointer; }
.dot.disabled > p.summary {
.dot.disabled > span.title, .dot.disabled > p.summary {
cursor: default; }
.dot > section.text {
display: inline-block;
vertical-align: top;
margin: 0;
width: 385px; }
width: 435px; }
.dot > section.text p {
margin: 0; }
.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 {
opacity: 1;
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 > * {
color: grey; }
.dot:not(.opened) {
line-height: 0.7; }
footer {
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
+71 -46
View File
@@ -22,7 +22,7 @@ html, body{
}
$header_height:5em;
$dot_w:500px;
$dot_w:550px;
$bullet_w:40px;
$margin_left:50px + ($bullet_w/2);
@@ -139,23 +139,23 @@ header{
width:100%;
background-color: white;
h1.part-title{
font-size: 1.6em;
body.mode-connections &{
margin: 0 0 0 $margin_left;
}
body.mode-text &{
// // font-size: 1.6em;
// // 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;
}
// }
}
// 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{
@@ -166,20 +166,20 @@ main#content{
// width: 450px;
// }
h1.part-title{
font-size: 1.6em;
width:450px;
}
// h1.part-title{
// font-size: 1.6em;
// width:450px;
// }
section.part{
position: relative;
}
h2.title, h2.filet{
font-size: 1em;
width:450px;
// margin: 1em 0;
}
// h2.title, h2.filet{
// font-size: 1em;
// width:450px;
// // margin: 1em 0;
// }
}
@@ -187,6 +187,28 @@ section.intro{
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{
h1.part-title{
margin:0 0 0 $margin_left;
}
h2.title, h4.filet{
margin:0 0 0 $margin_left;
}
// h2.title, h4.filet{
// margin:0 0 0 $margin_left;
// }
}
.dot{
margin:0 0 0 $margin_left;
@@ -305,17 +323,24 @@ main#content.mode-connections{
// font-size: 15px;
// font-kerning: none;
// }
>span.title{
}
>p.summary{
display: inline-block;
vertical-align: top;
margin: 0;
margin: 0 0 0 0.6em;
opacity: 0;
transition: opacity 0.4s ease-in-out;
width : $dot_w - $margin_left - $bullet_w -5px;
max-width : $dot_w - $margin_left -5px;
}
&:not(.disabled) > p.summary{cursor: pointer;}
&.disabled > p.summary{cursor: default;}
&:not(.disabled) {
>span.title,>p.summary{cursor: pointer;}
}
&.disabled {
>span.title,>p.summary{cursor: default;}
}
>section.text{
display: inline-block;
vertical-align: top;
@@ -372,20 +397,20 @@ main#content.mode-connections{
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
>span.id{
opacity: 1;
// transform: translate3d(-0.5em, 0, 0);
// transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
// >span.id{
// opacity: 1;
// // transform: translate3d(-0.5em, 0, 0);
// // transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
// transition: opacity 0.4s ease-in-out;
// }
}
&.disabled>*{
color:grey;
}
&:not(.opened){
line-height: 0.7;
}
// &:not(.opened){
// line-height: 0.8;
// }
}
assets/modules/ModeConnections.js
+30 -79
View File
@@ -27,75 +27,12 @@ var _Dot = {
links:null,
parents:[],
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){
this.title = vn.attrs.title;
if(!this.title){
this.title = this.type;
}
this.title = markdown.renderInline(this.title);
},
setuptext(vn){
// console.log('setuptext', vn);
@@ -113,16 +50,15 @@ var _Dot = {
},
oninit(vn){
// console.log('Dot init : vn',vn);
this.id = vn.attrs.id;
this.type = vn.attrs.type;
// this.title = vn.attrs.title || "title";
// this.setupDotType(vn);
this.dottype = vn.attrs.dottype;
this.setupTitle(vn);
this.setuptext(vn);
console.log(`${this.id} -> ${this.dottype}`);
// console.log(`${this.id} -> ${this.dottype}`);
if(typeof vn.attrs.active !== 'undefined')
this.active = vn.attrs.active;
@@ -150,6 +86,7 @@ var _Dot = {
if(this.lang != _dbs.lang){
this.lang = _dbs.lang;
this.setuptext(vn);
this.setupTitle(vn);
}
},
view(vn){
@@ -158,15 +95,17 @@ var _Dot = {
// console.log('_Dot view '+this.id+' parents :',this.parents);
var dot_content = [
// links to
// TODO: add dottype class to nested dots
this.links.to.length
? m('nav', {'class':'links to'}, this.links.to.map(id => {
// console.log(id);
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, {
"id":id,
'text':_dbs.data_byid[_dbs.lang][id].text,
'type':'',
'text':obj.text,
'dottype':obj.dottype,
'type':obj.type,
// passe the memory of crossed dots plus the current one
'parents':vn.state.parents.concat([vn.state.id]),
// 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
// m('span', {'class':'id'}, this.id), // this.type+' '+
// bullet
@@ -214,12 +153,14 @@ var _Dot = {
// links from
this.links.from.length
? m('nav', {'class':'links from'}, this.links.from.map(id => {
// retrun a dot
// TODO: add dottype class to nested dots
var obj = _dbs.data_byid[_dbs.lang][id];
// console.log('link from : obj', obj);
// return a dot
return m(_Dot, {
"id":id,
'text':_dbs.data_byid[_dbs.lang][id].text,
'type':'',
'text':obj.text,
'dottype':obj.dottype,
'type':obj.type,
// passe the memory of crossed dots plus the current one
'parents':vn.state.parents.concat([vn.state.id]),
// 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{
// preview dot
var dot_content = [
// m('span', {'class':'id'}, this.id), // this.type+' '+
// 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', {
'class':'summary',
onclick(e){
@@ -247,7 +194,11 @@ var _Dot = {
return m('div',{
'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
);
@@ -352,7 +303,7 @@ var _Enonce = {
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
return [
// 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
this.childs.map(c => { return m(_Child, c); })
]
assets/modules/dbs.js
+5 -4
View File
@@ -78,6 +78,7 @@ module.exports = {
},
parseByID(callback){
// create a id keyed array of contents
// loop through laguages
for(l in this.data){
// console.log('l', l);
@@ -93,18 +94,18 @@ module.exports = {
// guess the type from the 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);
// 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
for (c in this.data[l][p].enonces[e].childs){
// console.log(_db[p][e][c]);
if(this.data[l][p].enonces[e].childs[c].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);
// 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({
sourceMap: true,
parallel:4,
uglifyOptions: {
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: {
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
},
}