mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 20:22:18 +00:00
Tweaked chapter list item styles
- Improves animation smoothness - Changed animation slideup/down animations to use max-height instead of height to better avoid jutter at the end. - Cleaned spacing to match page items in books listing.
This commit is contained in:
parent
4759fa1e1f
commit
b030c1398b
@ -12,14 +12,14 @@ class ChapterToggle {
|
|||||||
const list = this.elem.parentNode.querySelector('.inset-list');
|
const list = this.elem.parentNode.querySelector('.inset-list');
|
||||||
this.elem.classList.add('open');
|
this.elem.classList.add('open');
|
||||||
this.elem.setAttribute('aria-expanded', 'true');
|
this.elem.setAttribute('aria-expanded', 'true');
|
||||||
slideDown(list, 240);
|
slideDown(list, 180);
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
const list = this.elem.parentNode.querySelector('.inset-list');
|
const list = this.elem.parentNode.querySelector('.inset-list');
|
||||||
this.elem.classList.remove('open');
|
this.elem.classList.remove('open');
|
||||||
this.elem.setAttribute('aria-expanded', 'false');
|
this.elem.setAttribute('aria-expanded', 'false');
|
||||||
slideUp(list, 240);
|
slideUp(list, 180);
|
||||||
}
|
}
|
||||||
|
|
||||||
click(event) {
|
click(event) {
|
||||||
|
@ -49,7 +49,7 @@ export function slideUp(element, animTime = 400) {
|
|||||||
const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
|
const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
|
||||||
const currentPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
|
const currentPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
|
||||||
const animStyles = {
|
const animStyles = {
|
||||||
height: [`${currentHeight}px`, '0px'],
|
maxHeight: [`${currentHeight}px`, '0px'],
|
||||||
overflow: ['hidden', 'hidden'],
|
overflow: ['hidden', 'hidden'],
|
||||||
paddingTop: [currentPaddingTop, '0px'],
|
paddingTop: [currentPaddingTop, '0px'],
|
||||||
paddingBottom: [currentPaddingBottom, '0px'],
|
paddingBottom: [currentPaddingBottom, '0px'],
|
||||||
@ -73,7 +73,7 @@ export function slideDown(element, animTime = 400) {
|
|||||||
const targetPaddingTop = computedStyles.getPropertyValue('padding-top');
|
const targetPaddingTop = computedStyles.getPropertyValue('padding-top');
|
||||||
const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
|
const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
|
||||||
const animStyles = {
|
const animStyles = {
|
||||||
height: ['0px', `${targetHeight}px`],
|
maxHeight: ['0px', `${targetHeight}px`],
|
||||||
overflow: ['hidden', 'hidden'],
|
overflow: ['hidden', 'hidden'],
|
||||||
paddingTop: ['0px', targetPaddingTop],
|
paddingTop: ['0px', targetPaddingTop],
|
||||||
paddingBottom: ['0px', targetPaddingBottom],
|
paddingBottom: ['0px', targetPaddingBottom],
|
||||||
|
@ -460,8 +460,7 @@ ul.pagination {
|
|||||||
padding: $-m;
|
padding: $-m;
|
||||||
> div {
|
> div {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: $-xs 0;
|
padding: 0 0 $-xs 0;
|
||||||
margin-top: -$-xs;
|
|
||||||
}
|
}
|
||||||
.entity-chip {
|
.entity-chip {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<h4 class="entity-list-item-name break-text">{{ $chapter->name }}</h4>
|
<h4 class="entity-list-item-name break-text">{{ $chapter->name }}</h4>
|
||||||
<div class="entity-item-snippet">
|
<div class="entity-item-snippet">
|
||||||
<p class="text-muted break-text mb-s">{{ $chapter->getExcerpt() }}</p>
|
<p class="text-muted break-text">{{ $chapter->getExcerpt() }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
Loading…
Reference in New Issue
Block a user