MOBILE-3814 collapsible: Fix height errors

main
Pau Ferrer Ocaña 2022-03-09 11:42:50 +01:00
parent d8bc60d4e2
commit 44ba6878a1
3 changed files with 35 additions and 14 deletions

View File

@ -59,6 +59,10 @@ export class CoreCollapsibleItemDirective implements OnInit {
* @inheritdoc * @inheritdoc
*/ */
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
if (this.height === null) {
return;
}
if (typeof this.height === 'string') { if (typeof this.height === 'string') {
this.maxHeight = this.height === '' this.maxHeight = this.height === ''
? defaultMaxHeight ? defaultMaxHeight
@ -141,7 +145,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
this.element.classList.toggle('collapsible-enabled', enable); this.element.classList.toggle('collapsible-enabled', enable);
if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) { if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) {
this.setMaxHeight(!enable || this.expanded? undefined : this.maxHeight); this.setHeight(!enable || this.expanded ? undefined : this.maxHeight);
return; return;
} }
@ -168,15 +172,15 @@ export class CoreCollapsibleItemDirective implements OnInit {
/** /**
* Set max height to element. * Set max height to element.
* *
* @param maxHeight Max height if collapsed or undefined if expanded. * @param height Max height if collapsed or undefined if expanded.
*/ */
protected setMaxHeight(maxHeight?: number): void { protected setHeight(height?: number): void {
if (maxHeight) { if (height) {
this.element.style.setProperty('--max-height', maxHeight + buttonHeight + 'px'); this.element.style.setProperty('--height', height + 'px');
} else if (this.expandedHeight) { } else if (this.expandedHeight) {
this.element.style.setProperty('--max-height', this.expandedHeight + 'px'); this.element.style.setProperty('--height', this.expandedHeight + 'px');
} else { } else {
this.element.style.removeProperty('--max-height'); this.element.style.removeProperty('--height');
} }
} }
@ -192,7 +196,7 @@ export class CoreCollapsibleItemDirective implements OnInit {
} }
this.expanded = expand; this.expanded = expand;
this.element.classList.toggle('collapsible-collapsed', !expand); this.element.classList.toggle('collapsible-collapsed', !expand);
this.setMaxHeight(!expand? this.maxHeight: undefined); this.setHeight(!expand ? this.maxHeight: undefined);
const toggleButton = this.element.querySelector('ion-button.collapsible-toggle'); const toggleButton = this.element.querySelector('ion-button.collapsible-toggle');
const toggleText = toggleButton?.querySelector('.collapsible-toggle-text'); const toggleText = toggleButton?.querySelector('.collapsible-toggle-text');

View File

@ -1,12 +1,12 @@
.collapsible-item { .collapsible-item {
--display-toggle: none; --display-toggle: none;
--max-height: none; --height: none;
&.collapsible-loading-height { &.collapsible-loading-height {
display: block !important; display: block !important;
height: auto !important; height: auto !important;
--max-height: none !important; --height: auto !important;
--display-toggle: none !important; --display-toggle: none !important;
} }
@ -15,12 +15,12 @@
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
&.collapsible-enabled { &.collapsible-enabled:not(.collapsible-loading-height) {
position: relative; position: relative;
padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit. padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit.
--display-toggle: block; --display-toggle: block;
@include core-transition(height max-height, 500ms); @include core-transition(height max-height, 300ms);
height: calc(var(--max-height, auto)); height: calc(var(--height, auto) + var(--collapsible-min-button-height));
.collapsible-toggle { .collapsible-toggle {
position: absolute; position: absolute;
@ -62,6 +62,7 @@
&.collapsible-collapsed { &.collapsible-collapsed {
overflow: hidden; overflow: hidden;
min-height: calc(var(--collapsible-min-button-height) + 12px); min-height: calc(var(--collapsible-min-button-height) + 12px);
height: var(--height, auto);
.collapsible-toggle-arrow { .collapsible-toggle-arrow {
transform: rotate(90deg); transform: rotate(90deg);
@ -69,7 +70,7 @@
&:before { &:before {
content: ''; content: '';
height: 100%; height: 60px;
position: absolute; position: absolute;
@include position(null, 0, 0, 0); @include position(null, 0, 0, 0);
background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px)); background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px));

View File

@ -70,6 +70,16 @@ core-format-text {
display: block; display: block;
} }
&.collapsible-enabled {
.core-format-text-content {
display: block;
max-height: none;
}
&.collapsible-collapsed .core-format-text-content {
overflow: hidden;
}
}
@if ($core-format-text-never-shorten) { @if ($core-format-text-never-shorten) {
&.collapsible-enabled { &.collapsible-enabled {
--display-toggle: none !important; --display-toggle: none !important;
@ -85,6 +95,12 @@ core-format-text {
} }
} }
} }
&.collapsible-item.inline {
display: inline-block;
&.collapsible-enabled .core-format-text-content {
display: inline-block;
}
}
.core-adapted-img-container { .core-adapted-img-container {
position: relative; position: relative;