From 01cd27353a905554b539a69b6d9108fcf667c65a Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 28 Feb 2023 15:53:47 +0100 Subject: [PATCH] toc levels improvement #1255 #1933 --- assets/css/app.scss | 151 +++++++++++++++++++---------- src/components/Content/TocItem.vue | 20 ++-- 2 files changed, 115 insertions(+), 56 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index b3cfc78..bc5badc 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -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{ diff --git a/src/components/Content/TocItem.vue b/src/components/Content/TocItem.vue index f9e6fd0..98b70c2 100644 --- a/src/components/Content/TocItem.vue +++ b/src/components/Content/TocItem.vue @@ -4,13 +4,14 @@ :level="level" :type="item.type" class="tocitem" + :class="{active: isActive, loaded: isLoaded, notitle: noTitle, init_opened: isInitOpened, opened: isOpened}" >
  • ({ + 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