From 112f00bcb51a73c1113204ae7e95d0e0f7d160a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 8 Mar 2022 11:25:37 +0100 Subject: [PATCH] MOBILE-3814 format-text: collapsible item directive replaces maxHeight --- .../addon-mod-assign-feedback-plugin.html | 2 +- .../addon-mod-assign-submission-plugin.html | 2 +- .../addon-mod-assign-feedback-comments.html | 4 +- ...ddon-mod-assign-submission-onlinetext.html | 4 +- .../lesson/pages/user-retake/user-retake.html | 2 +- .../index/addon-mod-workshop-index.html | 10 +- src/addons/notifications/pages/list/list.html | 2 +- src/core/directives/collapsible-item.ts | 41 +++-- src/core/directives/format-text.ts | 170 +++--------------- .../core-course-module-description.html | 2 +- .../module-info/core-course-module-info.html | 2 +- .../module-summary/module-summary.html | 4 +- .../pages/course-summary/course-summary.html | 5 +- .../courses/pages/categories/categories.html | 2 +- .../features/grades/pages/course/course.html | 4 +- src/theme/components/collapsible-item.scss | 82 +++++++++ src/theme/components/format-text.scss | 39 +--- src/theme/globals.mixins.scss | 72 -------- src/theme/theme.base.scss | 4 - src/theme/theme.scss | 1 + 20 files changed, 166 insertions(+), 288 deletions(-) create mode 100644 src/theme/components/collapsible-item.scss diff --git a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html index fce2551b7..413cb3751 100644 --- a/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html +++ b/src/addons/mod/assign/components/feedback-plugin/addon-mod-assign-feedback-plugin.html @@ -8,7 +8,7 @@ {{ 'addon.mod_assign.feedbacknotsupported' | translate }}

-

diff --git a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html index 0359f704c..e466eb7b5 100644 --- a/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html +++ b/src/addons/mod/assign/components/submission-plugin/addon-mod-assign-submission-plugin.html @@ -8,7 +8,7 @@ {{ 'addon.mod_assign.submissionnotsupported' | translate }}

-

diff --git a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html index d622f39aa..3bcfbbb0f 100644 --- a/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html +++ b/src/addons/mod/assign/feedback/comments/component/addon-mod-assign-feedback-comments.html @@ -3,8 +3,8 @@

{{ plugin.name }}

- +

diff --git a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html index 639d40c26..fe1dc1a17 100644 --- a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html +++ b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html @@ -4,8 +4,8 @@

{{ plugin.name }}

{{ 'addon.mod_assign.numwords' | translate: {'$a': words} }}

- +

diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html index 6b90ad1b0..428f88da9 100644 --- a/src/addons/mod/lesson/pages/user-retake/user-retake.html +++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html @@ -87,7 +87,7 @@

{{ 'addon.mod_lesson.question' | translate }}

- diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html index e36cc1c0f..5dd51d9ff 100644 --- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html +++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html @@ -58,8 +58,8 @@

{{ 'addon.mod_workshop.conclusion' | translate }}

- + @@ -91,8 +91,8 @@

{{ 'addon.mod_workshop.areainstructauthors' | translate }}

- + @@ -141,7 +141,7 @@

{{ 'addon.mod_workshop.areainstructreviewers' | translate }}

- diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html index 17f97fcf5..965a5158d 100644 --- a/src/addons/notifications/pages/list/list.html +++ b/src/addons/notifications/pages/list/list.html @@ -64,7 +64,7 @@ + [collapsible-item]="120"> diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts index b097611a3..32db35299 100644 --- a/src/core/directives/collapsible-item.ts +++ b/src/core/directives/collapsible-item.ts @@ -46,6 +46,7 @@ export class CoreCollapsibleItemDirective implements OnInit { protected toggleExpandEnabled = false; protected expanded = false; protected maxHeight = defaultMaxHeight; + protected expandedHeight = 0; protected loadingChangedListener?: CoreEventObserver; constructor(el: ElementRef) { @@ -72,9 +73,10 @@ export class CoreCollapsibleItemDirective implements OnInit { return; } + this.element.classList.add('collapsible-item'); + // Calculate the height now. await this.calculateHeight(); - setTimeout(() => this.calculateHeight(), 200); // Try again, sometimes the first calculation is wrong. // Recalculate the height if a parent core-loading displays the content. this.loadingChangedListener = @@ -82,7 +84,6 @@ export class CoreCollapsibleItemDirective implements OnInit { if (data.loaded && CoreDomUtils.closest(this.element.parentElement, '#' + data.uniqueId)) { // The element is inside the loading, re-calculate the height. await this.calculateHeight(); - setTimeout(() => this.calculateHeight(), 200); } }); } @@ -93,9 +94,15 @@ export class CoreCollapsibleItemDirective implements OnInit { * @param element Element. */ protected async waitFormatTextsRendered(element: Element): Promise { - const formatTexts = Array - .from(element.querySelectorAll('core-format-text')) - .map(element => CoreComponentsRegistry.resolve(element, CoreFormatTextDirective)); + let formatTextElements: HTMLElement[] = []; + + if (this.element.tagName == 'CORE-FORMAT-TEXT') { + formatTextElements = [this.element]; + } else { + formatTextElements = Array.from(element.querySelectorAll('core-format-text')); + } + + const formatTexts = formatTextElements.map(element => CoreComponentsRegistry.resolve(element, CoreFormatTextDirective)); await Promise.all(formatTexts.map(formatText => formatText?.rendered())); } @@ -103,22 +110,25 @@ export class CoreCollapsibleItemDirective implements OnInit { /** * Calculate the height and check if we need to display show more or not. */ - protected async calculateHeight(): Promise { - await this.waitFormatTextsRendered(this.element); - + protected async calculateHeight(retries = 3): Promise { // Remove max-height (if any) to calculate the real height. - const initialMaxHeight = this.element.style.maxHeight; - this.element.style.maxHeight = 'none'; + this.element.classList.add('collapsible-loading-height'); + + await this.waitFormatTextsRendered(this.element); await CoreUtils.nextTick(); - const height = CoreDomUtils.getElementHeight(this.element) || 0; + this.expandedHeight = CoreDomUtils.getElementHeight(this.element) || 0; // Restore the max height now. - this.element.style.maxHeight = initialMaxHeight; + this.element.classList.remove('collapsible-loading-height'); // If cannot calculate height, shorten always. - this.setExpandButtonEnabled(!height || height >= this.maxHeight); + this.setExpandButtonEnabled(!this.expandedHeight || this.expandedHeight >= this.maxHeight); + + if (this.expandedHeight == 0 && retries > 0) { + setTimeout(() => this.calculateHeight(retries - 1), 200); + } } /** @@ -163,8 +173,11 @@ export class CoreCollapsibleItemDirective implements OnInit { protected setMaxHeight(maxHeight?: number): void { if (maxHeight) { this.element.style.setProperty('--max-height', maxHeight + buttonHeight + 'px'); + } else if (this.expandedHeight) { + this.element.style.setProperty('--max-height', this.expandedHeight + 'px'); } else { this.element.style.removeProperty('--max-height'); + } } @@ -195,7 +208,7 @@ export class CoreCollapsibleItemDirective implements OnInit { * * @param e Click event. */ - protected elementClicked(e: MouseEvent): void { + elementClicked(e: MouseEvent): void { if (e.defaultPrevented) { // Ignore it if the event was prevented by some other listener. return; diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts index 90030cdf2..ef15c4f68 100644 --- a/src/core/directives/format-text.ts +++ b/src/core/directives/format-text.ts @@ -22,10 +22,10 @@ import { SimpleChange, Optional, ViewContainerRef, + ViewChild, } from '@angular/core'; import { IonContent } from '@ionic/angular'; -import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events'; import { CoreSites } from '@services/sites'; import { CoreDomUtils } from '@services/utils/dom'; import { CoreIframeUtils, CoreIframeUtilsProvider } from '@services/utils/iframe'; @@ -40,6 +40,7 @@ import { CoreFilterDelegate } from '@features/filter/services/filter-delegate'; import { CoreFilterHelper } from '@features/filter/services/filter-helper'; import { CoreSubscriptions } from '@singletons/subscriptions'; import { CoreComponentsRegistry } from '@singletons/components-registry'; +import { CoreCollapsibleItemDirective } from './collapsible-item'; /** * Directive to format text rendered. It renders the HTML and treats all links and media, using CoreLinkDirective @@ -55,6 +56,8 @@ import { CoreComponentsRegistry } from '@singletons/components-registry'; }) export class CoreFormatTextDirective implements OnChanges { + @ViewChild(CoreCollapsibleItemDirective) collapsible?: CoreCollapsibleItemDirective; + @Input() text?: string; // The text to format. @Input() siteId?: string; // Site ID to use. @Input() component?: string; // Component for CoreExternalContentDirective. @@ -73,23 +76,18 @@ export class CoreFormatTextDirective implements OnChanges { @Input() hideIfEmpty = false; // If true, the tag will contain nothing if text is empty. @Input() fullOnClick?: boolean | string; // @deprecated on 4.0 Won't do anything. - @Input() fullTitle?: string; // @deprecated on 4.0 Won't do anything.. + @Input() fullTitle?: string; // @deprecated on 4.0 Won't do anything. /** * Max height in pixels to render the content box. It should be 50 at least to make sense. - * Using this parameter will force display: block to calculate height better. - * If you want to avoid this use class="inline" at the same time to use display: inline-block. */ - @Input() maxHeight?: number; + @Input() maxHeight?: number; // @deprecated on 4.0 Use collapsible-item directive instead. @Output() afterRender: EventEmitter; // Called when the data is rendered. @Output() onClick: EventEmitter = new EventEmitter(); // Called when clicked. protected element: HTMLElement; - protected expanded = false; - protected loadingChangedListener?: CoreEventObserver; protected emptyText = ''; protected contentSpan: HTMLElement; - protected toggleExpandEnabled = false; constructor( element: ElementRef, @@ -122,8 +120,6 @@ export class CoreFormatTextDirective implements OnChanges { */ ngOnChanges(changes: { [name: string]: SimpleChange }): void { if (changes.text || changes.filter || changes.contextLevel || changes.contextInstanceId) { - this.setExpandButtonEnabled(false); - this.formatAndRenderContents(); } } @@ -269,101 +265,6 @@ export class CoreFormatTextDirective implements OnChanges { }); } - /** - * Calculate the height and check if we need to display show more or not. - */ - protected async calculateHeight(): Promise { - // @todo: Work on calculate this height better. - if (!this.maxHeight) { - return; - } - - await this.rendered(); - - // Remove max-height (if any) to calculate the real height. - const initialMaxHeight = this.element.style.maxHeight; - this.element.style.maxHeight = 'none'; - - await CoreUtils.nextTick(); - - const height = this.getElementHeight(this.element); - - // Restore the max height now. - this.element.style.maxHeight = initialMaxHeight; - - // If cannot calculate height, shorten always. - this.setExpandButtonEnabled(!height || height >= this.maxHeight); - } - - /** - * Set max height to element. - * - * @param maxHeight Max height if collapsed or undefined if expanded. - */ - protected setMaxHeight(maxHeight?: number): void { - if (maxHeight) { - this.element.style.setProperty('--max-height', maxHeight + 'px'); - } else { - this.element.style.removeProperty('--max-height'); - } - } - - /** - * Sets if expand button is enabled or not. - * - * @param enable Wether enable or disable. - */ - protected setExpandButtonEnabled(enable: boolean): void { - this.toggleExpandEnabled = enable; - this.element.classList.toggle('collapsible-enabled', enable); - - if (!enable || this.element.querySelector('ion-button.collapsible-toggle')) { - this.setMaxHeight(!enable || this.expanded? undefined : this.maxHeight); - - return; - } - - // Add expand/collapse buttons - const toggleButton = document.createElement('ion-button'); - toggleButton.classList.add('collapsible-toggle'); - toggleButton.setAttribute('fill', 'clear'); - - const toggleText = document.createElement('span'); - toggleText.classList.add('collapsible-toggle-text'); - toggleText.classList.add('sr-only'); - toggleButton.appendChild(toggleText); - - const expandArrow = document.createElement('span'); - expandArrow.classList.add('collapsible-toggle-arrow'); - toggleButton.appendChild(expandArrow); - - this.element.appendChild(toggleButton); - - this.toggleExpand(this.expanded); - } - - /** - * Expand or collapse text. - * - * @param expand Wether expand or collapse text. If undefined, will toggle. - */ - protected toggleExpand(expand?: boolean): void { - if (expand === undefined) { - expand = !this.expanded; - } - this.expanded = expand; - this.element.classList.toggle('collapsible-collapsed', !expand); - this.setMaxHeight(!expand? this.maxHeight: undefined); - - const toggleButton = this.element.querySelector('ion-button.collapsible-toggle'); - const toggleText = toggleButton?.querySelector('.collapsible-toggle-text'); - if (!toggleButton || !toggleText) { - return; - } - toggleText.innerHTML = expand ? Translate.instant('core.showless') : Translate.instant('core.showmore'); - toggleButton.setAttribute('aria-expanded', expand ? 'true' : 'false'); - } - /** * Listener to call when the element is clicked. * @@ -385,24 +286,18 @@ export class CoreFormatTextDirective implements OnChanges { return; } - if (!this.toggleExpandEnabled) { - // Nothing to do on click, just stop. - return; - } - - e.preventDefault(); - e.stopPropagation(); - - this.toggleExpand(); + this.collapsible?.elementClicked(e); } /** * Finish the rendering, displaying the element again and calling afterRender. */ - protected finishRender(): void { + protected async finishRender(): Promise { // Show the element again. this.element.classList.remove('core-format-text-loading'); + await CoreUtils.nextTick(); + // Emit the afterRender output. this.afterRender.emit(); } @@ -413,15 +308,12 @@ export class CoreFormatTextDirective implements OnChanges { protected async formatAndRenderContents(): Promise { if (!this.text) { this.contentSpan.innerHTML = this.emptyText; // Remove current contents. - this.finishRender(); + + await this.finishRender(); return; } - // In AOT the inputs and ng-reflect aren't in the DOM sometimes. Add them so styles are applied. - if (this.maxHeight && !this.element.getAttribute('maxHeight')) { - this.element.setAttribute('maxHeight', String(this.maxHeight)); - } if (!this.element.getAttribute('singleLine')) { this.element.setAttribute('singleLine', String(CoreUtils.isTrueOrOne(this.singleLine))); } @@ -434,36 +326,22 @@ 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 != '') { - // Move the children to the current element to be able to calculate the height. - CoreDomUtils.moveChildren(result.div, this.contentSpan); + // Move the children to the current element to be able to calculate the height. + CoreDomUtils.moveChildren(result.div, this.contentSpan); - // Calculate the height now. - this.calculateHeight(); - setTimeout(() => this.calculateHeight(), 200); // Try again, sometimes the first calculation is wrong. + await CoreUtils.nextTick(); - // Add magnifying glasses to images. - this.addMagnifyingGlasses(); - - if (!this.loadingChangedListener) { - // Recalculate the height if a parent core-loading displays the content. - this.loadingChangedListener = - CoreEvents.on(CoreEvents.CORE_LOADING_CHANGED, (data: CoreEventLoadingChangedData) => { - if (data.loaded && CoreDomUtils.closest(this.element.parentElement, '#' + data.uniqueId)) { - // The format-text is inside the loading, re-calculate the height. - this.calculateHeight(); - setTimeout(() => this.calculateHeight(), 200); - } - }); - } - } else { - CoreDomUtils.moveChildren(result.div, this.contentSpan); - - // Add magnifying glasses to images. - this.addMagnifyingGlasses(); + // Use collapsible-item directive instead. + if (this.maxHeight && !this.collapsible) { + this.collapsible = new CoreCollapsibleItemDirective(new ElementRef(this.element)); + this.collapsible.height = this.maxHeight; + this.collapsible.ngOnInit(); } + // Add magnifying glasses to images. + this.addMagnifyingGlasses(); + if (result.options.filter) { // Let filters handle HTML. We do it here because we don't want them to block the render of the text. CoreFilterDelegate.handleHtml( @@ -479,7 +357,7 @@ export class CoreFormatTextDirective implements OnChanges { } this.element.classList.remove('core-disable-media-adapt'); - this.finishRender(); + await this.finishRender(); } /** diff --git a/src/core/features/course/components/module-description/core-course-module-description.html b/src/core/features/course/components/module-description/core-course-module-description.html index 0f6d34c0a..1476d7476 100644 --- a/src/core/features/course/components/module-description/core-course-module-description.html +++ b/src/core/features/course/components/module-description/core-course-module-description.html @@ -1,7 +1,7 @@ - diff --git a/src/core/features/course/components/module-info/core-course-module-info.html b/src/core/features/course/components/module-info/core-course-module-info.html index 430c40a72..aea829834 100644 --- a/src/core/features/course/components/module-info/core-course-module-info.html +++ b/src/core/features/course/components/module-info/core-course-module-info.html @@ -46,7 +46,7 @@ + [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="expandDescription ? null : 120"> diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html index f60653532..a510cf893 100644 --- a/src/core/features/course/components/module-summary/module-summary.html +++ b/src/core/features/course/components/module-summary/module-summary.html @@ -49,7 +49,7 @@ {{ 'core.description' | translate}}

+ [contextInstanceId]="module.id" [courseId]="courseId" [collapsible-item]="120"> @@ -169,7 +169,7 @@

{{ 'core.grades.feedback' | translate}}

-

diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html index 88300031a..9fbfb57a4 100644 --- a/src/core/features/course/pages/course-summary/course-summary.html +++ b/src/core/features/course/pages/course-summary/course-summary.html @@ -72,7 +72,8 @@

{{'core.summary' | translate}}

- + @@ -104,7 +105,7 @@ : - diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html index e7c8280b4..fa208cdca 100644 --- a/src/core/features/courses/pages/categories/categories.html +++ b/src/core/features/courses/pages/categories/categories.html @@ -34,7 +34,7 @@

-

diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html index 6cbbae4e4..2c237cf64 100644 --- a/src/core/features/grades/pages/course/course.html +++ b/src/core/features/grades/pages/course/course.html @@ -55,7 +55,7 @@ - @@ -124,7 +124,7 @@

{{ 'core.grades.feedback' | translate}}

-

diff --git a/src/theme/components/collapsible-item.scss b/src/theme/components/collapsible-item.scss new file mode 100644 index 000000000..979f5854a --- /dev/null +++ b/src/theme/components/collapsible-item.scss @@ -0,0 +1,82 @@ + +.collapsible-item { + --display-toggle: none; + --max-height: none; + + &.collapsible-loading-height { + display: block !important; + height: auto !important; + --max-height: none !important; + --display-toggle: none !important; + } + + .collapsible-toggle { + display: var(--display-toggle); + } + + @include media-breakpoint-down(sm) { + &.collapsible-enabled { + position: relative; + padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit. + --display-toggle: block; + @include core-transition(height max-height, 500ms); + height: calc(var(--max-height, auto)); + + .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; + transform: rotate(-90deg); + + @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; + } + } + } + } +} diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 02581a519..7cca7ef2c 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -48,14 +48,6 @@ core-format-text { opacity: 0; display: inline; } - - .collapsible-toggle { - display: none !important; - } - } - - .collapsible-toggle { - display: none; } .core-format-text-content { @@ -68,33 +60,20 @@ core-format-text { word-wrap: break-word; } - &[maxHeight], - &[ng-reflect-max-height] { + &.collapsible-item { display: block; - position: relative; - width: 100%; - overflow: hidden; - - /* Force display inline */ - &.inline { - display: inline-block; - width: auto; - } - // This is to allow clicks in radio/checkbox content. - &.collapsible-enabled { - cursor: pointer; - pointer-events: auto; + cursor: pointer; + pointer-events: auto; - @include collapsible-item(); + .core-format-text-content { + display: block; } - } - @if ($core-format-text-never-shorten) { - &[maxHeight], - &[ng-reflect-max-height] { - &.collapsible-enabled.collapsible-expanded { - max-height: none !important; + @if ($core-format-text-never-shorten) { + &.collapsible-enabled { + --display-toggle: none !important; + --max-height: none !important; .collapsible-toggle { display: none !important; diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss index cbde34e92..9c0882ebb 100644 --- a/src/theme/globals.mixins.scss +++ b/src/theme/globals.mixins.scss @@ -226,78 +226,6 @@ } } -@mixin collapsible-item() { - --display-toggle: none; - .collapsible-toggle { - display: var(--display-toggle); - } - - @include media-breakpoint-down(sm) { - &.collapsible-enabled { - position:relative; - padding-bottom: var(--collapsible-min-button-height); // So the Show less button can fit. - --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; - transform: rotate(-90deg); - - @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); - max-height: calc(var(--max-height, auto)); - - .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; - } - } - } - } -} - // Color mixins. @function get_brightness($color) { @return (red($color) + green($color) + blue($color)) / 3; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 8f5230675..a08dc3fa9 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1419,10 +1419,6 @@ ion-grid.core-no-grid > ion-row { right: 0; } -[collapsible-item] { - @include collapsible-item(); -} - [collapsible-footer] { &.footer-collapsed { --core-collapsible-footer-height: 0; diff --git a/src/theme/theme.scss b/src/theme/theme.scss index cd0769b6d..83f8fc8d9 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -20,6 +20,7 @@ /* Components */ @import "./components/collapsible-header.scss"; +@import "./components/collapsible-item.scss"; @import "./components/format-text.scss"; @import "./components/rubrics.scss"; @import "./components/mod-label.scss";