bachir/gdp_vuewp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

toc levels improvement #1255 #1933

Browse Source
This commit is contained in:
bachir
2023-02-28 15:53:47 +01:00
parent 67d890a365
commit 01cd27353a
2 changed files with 115 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+101 -50
View File
@@ -818,69 +818,120 @@ section[role="main-content"]{
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
line-height: $base-line / 2; line-height: $base-line / 2;
section.tocitem{ // section.tocitem{
position: relative; // position: relative;
&:after{ // &:after{
display: block; // display: block;
position:absolute; // position:absolute;
top:0; right:0; // top:0; right:0;
color: red; // color: red;
content: attr(type); // content: attr(type);
font-size: 11px; // font-size: 11px;
} // border: 1px solid red;
} // border-radius: 3px;
// padding: 0px 2px;
// }
// }
>ul{ >ul{
ul{ >li{
li{ section.tocitem{
ul{ ul{
overflow: hidden; overflow: hidden;
max-height: 10000px; max-height: 10000px;
transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out;
// transform: scaleY(1); &:not(.opened):not(.init_opened){
// transform-origin: top;
// transition: transform 0.3s ease-in-out;
&:not(.opened){
// height:0;
max-height:0; max-height:0;
transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1); transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
// transform: scaleY(0);
} }
// &.opened{ &:not([level="1"]){
// border: 1px solid red; border-left: 0.5px solid $grisclair;
// } margin-bottom: 0em;
// padding-left: 1em; li{
border-left: 0.5px solid $grisclair; padding:0 0 0 1em;
// min-height: 1em; }
margin-bottom: 0em;
li{
// min-height: 1em;
// border-left: 1px solid red;
padding:0 0 0 1em;
} }
} }
&.notitle>ul>li{
padding:0;
}
} }
} }
.toc-title{
@include title4grey;
&.active,
&:hover{
color:$grisfonce;
font-weight: 600;
}
&.loaded{
color:$grisfonce;
}
&.notitle{
color: red;
}
}
h2.toc-title{font-size: 1.1em;}
h3.toc-title{font-size: 1em;}
h4.toc-title{font-size: 0.9em;}
h5.toc-title{font-size: 0.8em;}
h6.toc-title{font-size: 0.7em;}
// span.toc-title{font-size: 0.882em;}
} }
.toc-title{
@include title4grey;
&.active,
&:hover{
color:$grisfonce;
font-weight: 600;
}
&.loaded{
color:$grisfonce;
}
&.notitle{
color: red;
}
}
h2.toc-title{font-size: 1.1em;}
h3.toc-title{font-size: 1em;}
h4.toc-title{font-size: 0.9em;}
h5.toc-title{font-size: 0.8em;}
h6.toc-title{font-size: 0.7em;}
// span.toc-title{font-size: 0.882em;}
// >ul{
// ul{
// li{
// ul{
// overflow: hidden;
// max-height: 10000px;
// transition: max-height 0.5s ease-in-out;
// // transform: scaleY(1);
// // transform-origin: top;
// // transition: transform 0.3s ease-in-out;
// &:not(.opened){
// // height:0;
// max-height:0;
// transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
// // transform: scaleY(0);
// }
// // &.opened{
// // border: 1px solid red;
// // }
// // padding-left: 1em;
// border-left: 0.5px solid $grisclair;
// // min-height: 1em;
// margin-bottom: 0em;
// li{
// // min-height: 1em;
// // border-left: 1px solid red;
// padding:0 0 0 1em;
// }
// }
// }
// }
// .toc-title{
// @include title4grey;
// &.active,
// &:hover{
// color:$grisfonce;
// font-weight: 600;
// }
// &.loaded{
// color:$grisfonce;
// }
// &.notitle{
// color: red;
// }
// }
// h2.toc-title{font-size: 1.1em;}
// h3.toc-title{font-size: 1em;}
// h4.toc-title{font-size: 0.9em;}
// h5.toc-title{font-size: 0.8em;}
// h6.toc-title{font-size: 0.7em;}
// // span.toc-title{font-size: 0.882em;}
// }
} }
div#page-nav{ div#page-nav{
src/components/Content/TocItem.vue
+14 -6
View File
@@ -4,13 +4,14 @@
:level="level" :level="level"
:type="item.type" :type="item.type"
class="tocitem" class="tocitem"
:class="{active: isActive, loaded: isLoaded, notitle: noTitle, init_opened: isInitOpened, opened: isOpened}"
> >
<component <component
:is="titlelevel" :is="titlelevel"
v-if="title" v-if="title"
class="toc-title" class="toc-title"
:uuid="item.uuid" :uuid="item.uuid"
:class="{active: isActive, loaded: isLoaded, notitle: noTitle}" :class="{active: isActive, loaded: isLoaded, notitle: noTitle, init_opened: isInitOpened, opened: isOpened}"
> >
<a <a
:href="'/texts/'+editionid+'/'+item.uuid" :href="'/texts/'+editionid+'/'+item.uuid"
@@ -24,7 +25,9 @@
<ul <ul
v-if="children.length" v-if="children.length"
class="toc-list" class="toc-list"
:class="{opened: isOpened}" :level="level"
:type="item.type"
:class="{init_opened: isInitOpened, opened: isOpened}"
> >
<li v-for="child in children" :key="child.uuid"> <li v-for="child in children" :key="child.uuid">
<TocItem <TocItem
@@ -58,6 +61,7 @@ export default {
loadedtextsuuids: Array loadedtextsuuids: Array
}, },
data: () => ({ data: () => ({
isInitOpened: false,
isOpened: false, isOpened: false,
noTitle: false noTitle: false
}), }),
@@ -80,8 +84,9 @@ export default {
} else if (this.item.title) { } else if (this.item.title) {
return this.item.title return this.item.title
} else { } else {
console.log('TOC no title', this.item) // console.log('TOC no title', this.item)
return this.item.type // return this.item.type
return null
} }
}, },
titlelevel () { titlelevel () {
@@ -122,8 +127,11 @@ export default {
if (typeof this.$route.params.textid !== 'undefined') { if (typeof this.$route.params.textid !== 'undefined') {
this.isOpened = this.$route.params.textid.indexOf(this.item.uuid) >= 0 this.isOpened = this.$route.params.textid.indexOf(this.item.uuid) >= 0
} }
if (['book', 'volume'].indexOf(this.item.type) >= 0) { // if (this.level <= 2 && ['book', 'volume'].indexOf(this.item.type) === -1) {
this.isOpened = true if (this.level === 1 ||
(this.level === 2 && ['part', 'book', 'volume', 'front', 'body', 'back', 'div'].indexOf(this.item.type) >= 0)
) {
this.isInitOpened = true
} }
if (!this.item.title) { if (!this.item.title) {
this.noTitle = true this.noTitle = true