From a281ce2d4f6098195d460606a9c67b6e43c9864c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 14 Jun 2021 13:54:53 +0200 Subject: [PATCH 1/2] MOBILE-3320 quiz: Add fake item styles to avoid ion items problems --- .../component/addon-qtype-multianswer.html | 14 ++- src/theme/theme.base.scss | 98 ++++++++++++++++++- 2 files changed, 102 insertions(+), 10 deletions(-) diff --git a/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html b/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html index a8e0b18df..2f64ecb03 100644 --- a/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html +++ b/src/addons/qtype/multianswer/component/addon-qtype-multianswer.html @@ -1,10 +1,8 @@ - - - - - - +
+ + +
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 57b941d1e..64d00583b 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -146,13 +146,15 @@ ion-app.ios ion-header h2 { // Correctly inherit ion-text-wrap onto labels. -.item ion-label core-format-text .core-format-text-content > * { +.item ion-label core-format-text .core-format-text-content > *, +.fake-ion-item core-format-text .core-format-text-content > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.item.ion-text-wrap ion-label core-format-text .core-format-text-content > * { +.item.ion-text-wrap ion-label core-format-text .core-format-text-content > *, +.fake-ion-item.ion-text-wrap core-format-text .core-format-text-content > * { white-space: normal; } @@ -783,6 +785,98 @@ audio.core-media-adapt-width { width: 100%; } +// Fake item. +div.fake-ion-item { + position: relative; + align-items: center; + justify-content: space-between; + outline: none; + color: var(--ion-text-color); + background: var(--ion-item-background); + text-align: initial; + text-decoration: none; + overflow: hidden; + box-sizing: border-box; + +} + +html.md div.fake-ion-item { + font-size: 16px; + font-weight: normal; + text-transform: none; + @include padding(null, 16px, null, 16px); + @include margin(11px, null, 10px, null); + + h1 { + @include margin(0, 0, 2px); + font-size: 24px; + font-weight: normal; + } + + h2 { + @include margin(2px, 0); + font-size: 16px; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + @include margin(2px, 0); + + font-size: 14px; + font-weight: normal; + + line-height: normal; + } + + p { + @include margin(0, 0, 2px); + font-size: 14px; + line-height: 20px; + text-overflow: inherit; + overflow: inherit; + } +} + +html.ios div.fake-ion-item { + font-size: 14px; + @include padding(null, 10px, null, 20px); + @include margin(10px, 8px, 10px, null); + + h1 { + @include margin(3px, 0, 2px); + font-size: 22px; + font-weight: normal; + } + + h2 { + @include margin(0, 0, 2px); + font-size: 17px; + font-weight: normal; + } + + h3, + h4, + h5, + h6 { + @include margin(0, 0, 3px); + font-size: 14px; + font-weight: normal; + line-height: normal; + } + + p { + @include margin(0, 0, 2px 0); + font-size: 14px; + line-height: normal; + text-overflow: inherit; + overflow: inherit; + } + +} + // Make links clickable when inside radio or checkbox items. Style part. @media (hover: hover) { ion-item.item-multiple-inputs:hover::part(native) { From a91a30e92e8db8aeeeba35b6fe64735b0bb1ee18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 14 Jun 2021 15:42:38 +0200 Subject: [PATCH 2/2] MOBILE-3320 core: Move fab buttons to the closest ion-content --- src/core/directives/fab.ts | 13 +++++++++++-- src/theme/components/format-text.scss | 1 - src/theme/theme.base.scss | 13 +++++-------- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/core/directives/fab.ts b/src/core/directives/fab.ts index 05009e894..d3d0677cb 100644 --- a/src/core/directives/fab.ts +++ b/src/core/directives/fab.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Directive, OnDestroy } from '@angular/core'; +import { Directive, ElementRef, OnDestroy } from '@angular/core'; import { IonContent } from '@ionic/angular'; /** @@ -31,8 +31,10 @@ export class CoreFabDirective implements OnDestroy { protected scrollElement?: HTMLElement; protected done = false; + protected element: HTMLElement; - constructor(protected content: IonContent) { + constructor(el: ElementRef, protected content: IonContent) { + this.element = el.nativeElement; this.asyncInit(); } @@ -43,6 +45,13 @@ export class CoreFabDirective implements OnDestroy { if (this.content) { this.scrollElement = await this.content.getScrollElement(); if (!this.done) { + // Move element to the nearest ion-content if it's not the parent + if (this.element.parentElement?.nodeName != 'ION-CONTENT') { + const ionContent = this.element.closest('ion-content'); + ionContent?.appendChild(this.element); + } + + // Add space at the bottom to let the user see the whole content. const bottom = parseInt(this.scrollElement.style.paddingBottom, 10) || 0; this.scrollElement.style.paddingBottom = (bottom + CoreFabDirective.PADDINGBOTTOM) + 'px'; this.done = true; diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index cd98501fb..b4aebafba 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -292,7 +292,6 @@ core-rich-text-editor .core-rte-editor { @include core-headings(); p { - font-size: 1.4rem; margin-bottom: 1rem; } diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 64d00583b..1d66e9ca3 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -761,18 +761,15 @@ textarea:not([core-auto-rows]) { height: 200px; } -ion-fab[core-fab] { - position: fixed; -} - -ion-content > ion-fab[core-fab] { - position: absolute; -} - ion-back-button.md::part(text) { display: none; } +// Hide close button because when present is read on voice over. +ion-fab[core-fab] ion-fab-button::part(close-icon) { + display: none; +} + .core-media-adapt-width { max-width: 100%; }