EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3149 style: Fix collapsible items on tablet

main
Pau Ferrer Ocaña 2022-02-25 11:37:31 +01:00
parent d4515ca74c
commit 079d914de6
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/directives/collapsible-item.ts
View File

@ -153,7 +153,11 @@ export class CoreCollapsibleItemDirective implements OnInit {
this.expanded = expand; this.expanded = expand;
this.element.classList.toggle('collapsible-expanded', expand); this.element.classList.toggle('collapsible-expanded', expand);
this.element.classList.toggle('collapsible-collapsed', !expand); this.element.classList.toggle('collapsible-collapsed', !expand);
this.element.style.maxHeight = expand ? '' : (this.maxHeight + buttonHeight) + 'px'; if (expand) {
this.element.style.setProperty('--max-height', this.maxHeight + buttonHeight + 'px');
} else {
this.element.style.removeProperty('--max-height');
}
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');

7
src/core/directives/format-text.ts
View File

@ -320,8 +320,11 @@ export class CoreFormatTextDirective implements OnChanges {
this.expanded = expand; this.expanded = expand;
this.element.classList.toggle('collapsible-expanded', expand); this.element.classList.toggle('collapsible-expanded', expand);
this.element.classList.toggle('collapsible-collapsed', !expand); this.element.classList.toggle('collapsible-collapsed', !expand);
this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px'; if (expand) {
this.element.style.setProperty('--max-height', this.maxHeight + 'px');
} else {
this.element.style.removeProperty('--max-height');
}
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');
if (!toggleButton || !toggleText) { if (!toggleButton || !toggleText) {

1
src/theme/globals.mixins.scss
View File

@ -270,6 +270,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);
max-height: calc(var(--max-height), auto);
.collapsible-toggle-arrow { .collapsible-toggle-arrow {
transform: rotate(90deg); transform: rotate(90deg);