diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.scss b/src/addons/storagemanager/pages/course-storage/course-storage.scss index 29bc1c7d8..87de86c13 100644 --- a/src/addons/storagemanager/pages/course-storage/course-storage.scss +++ b/src/addons/storagemanager/pages/course-storage/course-storage.scss @@ -1,7 +1,6 @@ @import "~theme/globals"; :host { - --core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb}); --course-storage-max-activity-height: 120px; ion-card.section ion-card-header { @@ -23,8 +22,8 @@ min-height: var(--course-storage-max-activity-height); position: absolute; @include position(0, 0, null, 0); - background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px)); - background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 20px)); + background: -webkit-linear-gradient(top, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px)); + background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px)); z-index: 6; pointer-events: none; } diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts index c7f069354..d572a0586 100644 --- a/src/core/directives/collapsible-item.ts +++ b/src/core/directives/collapsible-item.ts @@ -64,8 +64,8 @@ export class CoreCollapsibleItemDirective implements OnInit { } this.maxHeight = this.maxHeight < defaultMaxHeight ? defaultMaxHeight : this.maxHeight; - if (!this.maxHeight || (window.innerWidth > 576 && window.innerHeight > 576)) { - // Do not collapse on big screens. + if (!this.maxHeight) { + // Do not collapse. return; } @@ -91,9 +91,6 @@ export class CoreCollapsibleItemDirective implements OnInit { */ protected calculateHeight(): void { // @todo: Work on calculate this height better. - if (!this.maxHeight) { - return; - } // Remove max-height (if any) to calculate the real height. const initialMaxHeight = this.element.style.maxHeight; @@ -117,7 +114,11 @@ export class CoreCollapsibleItemDirective implements OnInit { this.toggleExpandEnabled = 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.element.style.maxHeight = !enable || this.expanded + ? '' + : this.maxHeight + 'px'; + return; } @@ -128,6 +129,7 @@ export class CoreCollapsibleItemDirective implements OnInit { const toggleText = document.createElement('span'); toggleText.classList.add('collapsible-toggle-text'); + toggleText.classList.add('sr-only'); toggleButton.appendChild(toggleText); const expandArrow = document.createElement('span'); diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts index b87e1fbe0..cf080adea 100644 --- a/src/core/directives/format-text.ts +++ b/src/core/directives/format-text.ts @@ -279,23 +279,28 @@ export class CoreFormatTextDirective implements OnChanges { */ protected setExpandButtonEnabled(enable: boolean): void { this.toggleExpandEnabled = enable; - this.element.classList.toggle('core-text-formatted', enable); + this.element.classList.toggle('collapsible-enabled', enable); + + if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) { + this.element.style.maxHeight = !enable || this.expanded + ? '' + : this.maxHeight + 'px'; - if (!enable || this.element.querySelector('ion-button.core-format-text-toggle')) { return; } // Add expand/collapse buttons const toggleButton = document.createElement('ion-button'); - toggleButton.classList.add('core-format-text-toggle'); + toggleButton.classList.add('collapsible-toggle'); toggleButton.setAttribute('fill', 'clear'); const toggleText = document.createElement('span'); - toggleText.classList.add('core-format-text-toggle-text'); + toggleText.classList.add('collapsible-toggle-text'); + toggleText.classList.add('sr-only'); toggleButton.appendChild(toggleText); const expandArrow = document.createElement('span'); - expandArrow.classList.add('core-format-text-arrow'); + expandArrow.classList.add('collapsible-toggle-arrow'); toggleButton.appendChild(expandArrow); this.element.appendChild(toggleButton); @@ -313,12 +318,12 @@ export class CoreFormatTextDirective implements OnChanges { expand = !this.expanded; } this.expanded = expand; - this.element.classList.toggle('core-text-format-expanded', expand); - this.element.classList.toggle('core-text-format-collapsed', !expand); + this.element.classList.toggle('collapsible-expanded', expand); + this.element.classList.toggle('collapsible-collapsed', !expand); this.element.style.maxHeight = expand ? '' : this.maxHeight + 'px'; - const toggleButton = this.element.querySelector('ion-button.core-format-text-toggle'); - const toggleText = toggleButton?.querySelector('.core-format-text-toggle-text'); + const toggleButton = this.element.querySelector('ion-button.collapsible-toggle'); + const toggleText = toggleButton?.querySelector('.collapsible-toggle-text'); if (!toggleButton || !toggleText) { return; } @@ -396,8 +401,7 @@ export class CoreFormatTextDirective implements OnChanges { this.element.classList.add('core-disable-media-adapt'); this.contentSpan.innerHTML = ''; // Remove current contents. - if (this.maxHeight && result.div.innerHTML != '' && - (window.innerWidth < 576 || window.innerHeight < 576)) { // Don't collapse in big screens. + if (this.maxHeight && result.div.innerHTML != '') { // Move the children to the current element to be able to calculate the height. CoreDomUtils.moveChildren(result.div, this.contentSpan); diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 1aa0b8c1e..02581a519 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -4,13 +4,11 @@ core-format-text { --core-format-text-background: var(--background, var(--ion-item-background)); - --core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb}); --core-format-text-viewer-icon-background: rgba(255, 255, 255, .5); --core-format-text-loader-shine: 251,251,251; } body.dark core-format-text { - --core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-dark-rgb}); --core-format-text-viewer-icon-background: rgba(0, 0, 0, .5); --core-format-text-loader-shine: 90,90,90; } @@ -51,12 +49,12 @@ core-format-text { display: inline; } - .core-format-text-toggle { + .collapsible-toggle { display: none !important; } } - .core-format-text-toggle { + .collapsible-toggle { display: none; } @@ -84,81 +82,21 @@ core-format-text { } // This is to allow clicks in radio/checkbox content. - &.core-text-formatted { + &.collapsible-enabled { cursor: pointer; pointer-events: auto; - .core-format-text-toggle { - display: block; - position: absolute; - bottom: 0; - left: 0; - right: 0; - text-align: center; - z-index: 7; - text-transform: none; - text-align: end; - font-size: 14px; - background-color: var(--core-format-text-background); - color: var(--text-color); - margin: 0; - - - .core-format-text-arrow { - width: var(--a11y-min-target-size); - height: var(--a11y-min-target-size); - - background-position: center; - background-repeat: no-repeat; - background-size: 14px 14px; - @include core-transition(transform, 500ms); - - @include push-arrow-color(626262, true); - - @include darkmode() { - @include push-arrow-color(ffffff, true); - } - } - } - - &.core-text-format-collapsed { - overflow: hidden; - min-height: 50px; - - .core-format-text-arrow { - transform: rotate(90deg); - } - - &:before { - content: ''; - height: 100%; - position: absolute; - @include position(null, 0, 0, 0); - background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px)); - background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px)); - z-index: 6; - } - } - - &.core-text-format-expanded { - max-height: none !important; - - padding-bottom: 50px; // So the Show less button can fit. - - .core-format-text-arrow { - transform: rotate(-90deg); - } - } + @include collapsible-item(); } } @if ($core-format-text-never-shorten) { &[maxHeight], &[ng-reflect-max-height] { - &.core-text-formatted.core-text-format-expanded { + &.collapsible-enabled.collapsible-expanded { max-height: none !important; - .core-format-text-toggle { + .collapsible-toggle { display: none !important; } diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss index 0082bb1e5..f9529da61 100644 --- a/src/theme/globals.mixins.scss +++ b/src/theme/globals.mixins.scss @@ -219,9 +219,84 @@ --horizontal-margin: 6px; } } - } +@mixin collapsible-item() { + --display-toggle: none; + .collapsible-toggle { + display: var(--display-toggle); + } + + @include media-breakpoint-down(sm) { + &.collapsible-enabled { + position:relative; + --display-toggle: block; + + .collapsible-toggle { + position: absolute; + @include position (null, 0, 0, null); + text-align: center; + z-index: 7; + text-transform: none; + font-size: 14px; + font-weight: normal; + background-color: var(--collapsible-toggle-background); + color: var(--collapsible-toggle-text); + min-height: var(--a11y-min-target-size); + min-width: var(--a11y-min-target-size); + --border-radius: var(--huge-radius); + border-radius: var(--border-radius); + --padding-start: 0px; + --padding-end: 0px; + margin: 0px; + + .collapsible-toggle-arrow { + width: var(--a11y-min-target-size); + height: var(--a11y-min-target-size); + + background-position: center; + background-repeat: no-repeat; + background-size: 14px 14px; + @include core-transition(transform, 500ms); + + @include push-arrow-color(626262, true); + + @include darkmode() { + @include push-arrow-color(ffffff, true); + } + } + } + + &.collapsible-collapsed { + overflow: hidden; + min-height: calc(var(--collapsible-min-button-height) + 12px); + + .collapsible-toggle-arrow { + transform: rotate(90deg); + } + + &:before { + content: ''; + height: 100%; + position: absolute; + @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: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 56px), rgba(var(--background-gradient-rgb), 1) calc(100% - 5px)); + z-index: 6; + } + } + + &.collapsible-expanded { + max-height: none !important; + padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit. + + .collapsible-toggle-arrow { + transform: rotate(-90deg); + } + } + } + } +} // Color mixins. @function get_brightness($color) { diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 0ac775748..461393019 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1439,77 +1439,7 @@ ion-grid.core-no-grid > ion-row { } [collapsible-item] { - --collapsible-display-toggle: none; - --collapsible-toggle-background: var(--ion-item-background); - --collapsible-min-button-height: 44px; - - .collapsible-toggle { - display: var(--collapsible-display-toggle); - } - - &.collapsible-enabled { - --collapsible-display-toggle: block; - - .collapsible-toggle { - display: var(--collapsible-display-toggle); - position: absolute; - bottom: 0; - left: 0; - right: 0; - text-align: center; - z-index: 7; - text-transform: none; - text-align: end; - font-size: 14px; - background-color: var(--collapsible-toggle-background); - color: var(--text-color); - margin: 0; - - .collapsible-toggle-arrow { - width: var(--a11y-min-target-size); - height: var(--a11y-min-target-size); - - background-position: center; - background-repeat: no-repeat; - background-size: 14px 14px; - @include core-transition(transform, 500ms); - - @include push-arrow-color(626262, true); - - @include darkmode() { - @include push-arrow-color(ffffff, true); - } - } - } - - &.collapsible-collapsed { - overflow: hidden; - min-height: calc(var(--collapsible-min-button-height) + 12); - - .collapsible-toggle-arrow { - transform: rotate(90deg); - } - - &:before { - content: ''; - height: 100%; - position: absolute; - @include position(null, 0, 0, 0); - background: -webkit-linear-gradient(top, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px)); - background: linear-gradient(to bottom, rgba(var(--core-format-text-background-gradient-rgb), 0) calc(100% - 60px), rgba(var(--core-format-text-background-gradient-rgb), 1) calc(100% - 40px)); - z-index: 6; - } - } - - &.collapsible-expanded { - max-height: none !important; - padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit. - - .collapsible-toggle-arrow { - transform: rotate(-90deg); - } - } - } + @include collapsible-item(); } ion-header.no-title { diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 206f6e2d4..6f0743f7c 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -97,6 +97,10 @@ --core-combobox-color: var(--text-color); --core-combobox-border-color: var(--core-input-stroke); + --collapsible-toggle-background: var(--light); + + --background-gradient-rgb: #{$ion-item-background-dark-rgb}; + --core-login-background: var(--gray-900); --core-login-text-color: var(--white); --core-login-input-background: var(--core-login-background); diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 448d88505..32b099920 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -288,6 +288,12 @@ --selected-item-color: var(--primary); --selected-item-border-width: 5px; + --collapsible-toggle-background: var(--light); + --collapsible-min-button-height: 44px; + --collapsible-toggle-text: var(--text-color); + + --background-gradient-rgb: #{$ion-item-background-rgb}; + --core-login-background: var(--white); --core-login-text-color: var(--gray-900); --core-login-input-background: var(--white);