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-y: auto;
line-height: $base-line / 2;
section.tocitem{
position: relative;
&:after{
display: block;
position:absolute;
top:0; right:0;
color: red;
content: attr(type);
font-size: 11px;
}
}
// section.tocitem{
// position: relative;
// &:after{
// display: block;
// position:absolute;
// top:0; right:0;
// color: red;
// content: attr(type);
// font-size: 11px;
// border: 1px solid red;
// border-radius: 3px;
// padding: 0px 2px;
// }
// }
>ul{
ul{
li{
>li{
section.tocitem{
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;
&:not(.opened):not(.init_opened){
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;
&:not([level="1"]){
border-left: 0.5px solid $grisclair;
margin-bottom: 0em;
li{
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{
src/components/Content/TocItem.vue
+14 -6
View File
@@ -4,13 +4,14 @@
:level="level"
:type="item.type"
class="tocitem"
:class="{active: isActive, loaded: isLoaded, notitle: noTitle, init_opened: isInitOpened, opened: isOpened}"
>
<component
:is="titlelevel"
v-if="title"
class="toc-title"
:uuid="item.uuid"
:class="{active: isActive, loaded: isLoaded, notitle: noTitle}"
:class="{active: isActive, loaded: isLoaded, notitle: noTitle, init_opened: isInitOpened, opened: isOpened}"
>
<a
:href="'/texts/'+editionid+'/'+item.uuid"
@@ -24,7 +25,9 @@
<ul
v-if="children.length"
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">
<TocItem
@@ -58,6 +61,7 @@ export default {
loadedtextsuuids: Array
},
data: () => ({
isInitOpened: false,
isOpened: false,
noTitle: false
}),
@@ -80,8 +84,9 @@ export default {
} else if (this.item.title) {
return this.item.title
} else {
console.log('TOC no title', this.item)
return this.item.type
// console.log('TOC no title', this.item)
// return this.item.type
return null
}
},
titlelevel () {
@@ -122,8 +127,11 @@ export default {
if (typeof this.$route.params.textid !== 'undefined') {
this.isOpened = this.$route.params.textid.indexOf(this.item.uuid) >= 0
}
if (['book', 'volume'].indexOf(this.item.type) >= 0) {
this.isOpened = true
// if (this.level <= 2 && ['book', 'volume'].indexOf(this.item.type) === -1) {
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) {
this.noTitle = true