MOBILE-4470 styles: Revisit text wrapping ellipsis

2024-05-14 11:22:46 +02:00 · 2024-05-14 11:22:46 +02:00 · f8e022c1fd
parent 58ef2f9e0e
commit f8e022c1fd
19 changed files with 57 additions and 68 deletions
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@ -9,9 +9,7 @@

        .ion-text-wrap ion-label {
            .item-heading, h2, p {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
+                @include ellipsis();
            }
        }
    }
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@ -52,8 +52,7 @@ h4.core-bold {
        flex-wrap: wrap;

        & > span {
-            overflow: hidden;
-            text-overflow: ellipsis;
+            @include ellipsis();
        }

    }
--- a/src/addons/messages/messages-common.scss
+++ b/src/addons/messages/messages-common.scss
@ -46,9 +46,7 @@
        }

        .addon-message-last-message-text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            @include ellipsis();
            flex-shrink: 1;
        }
    }
--- a/src/addons/messages/pages/discussion/discussion.scss
+++ b/src/addons/messages/pages/discussion/discussion.scss
@ -51,9 +51,7 @@
            }

            core-format-text {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+                @include ellipsis();
                flex-shrink: 1;
                display: block;
            }
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.scss
@ -1,10 +1,11 @@
+@use "theme/globals" as *;
+
 :host {
    .addon-mod_h5pactivity-table-header {
        font-weight: bold;

        ion-col {
-            overflow: hidden;
-            text-overflow: ellipsis;
+            @include ellipsis();
        }
    }

--- a/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.scss
+++ b/src/addons/mod/h5pactivity/pages/users-attempts/users-attempts.scss
@ -1,6 +1,7 @@
+@use "theme/globals" as *;
+
 :host {
    .addon-mod_h5pactivity-table-header ion-col {
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis();
    }
 }
--- a/src/addons/notifications/pages/list/list.scss
+++ b/src/addons/notifications/pages/list/list.scss
@ -7,11 +7,7 @@ ion-item.addon-notification-item {
        margin-bottom: 8px;
        p.item-heading {
            font-size: var(--text-size);
-            -webkit-line-clamp: 3;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            -webkit-box-orient: vertical;
-            display: -webkit-box;
+            @include ellipsis(3);
        }
        p {
            font-size: 12px;
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@ -63,11 +63,11 @@
        --padding-bottom: 8px;

        background: var(--background);
+
+        --color: var(--core-combobox-color);
        color: var(--color);
-        text-overflow: ellipsis;
-        white-space: nowrap;
+
        min-height: var(--a11y-sizing-minTargetSize);
-        overflow: hidden;
        box-shadow: var(--box-shadow);

        --highlight-color: transparent !important;
@ -121,7 +121,6 @@
    }

    ion-button {
-        --color: var(--core-combobox-color);
        --color-activated: var(--core-combobox-color);
        --color-focused: currentcolor;
        --color-hover: currentcolor;
@ -130,9 +129,7 @@

        .select-text {
            @include margin-horizontal(null, auto);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            @include ellipsis();
            font: var(--mdl-typography-label-font-lg);
        }

--- a/src/core/components/message/message.scss
+++ b/src/core/components/message/message.scss
@ -67,9 +67,7 @@
                    flex-grow: 1;
                    padding-left: .5rem;
                    padding-right: .5rem;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    @include ellipsis();
                    font-size: 16px;
                }
            }
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@ -61,9 +61,7 @@
                    max-width: 100%;

                    ion-label {
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        overflow: hidden;
+                        @include ellipsis();
                        word-wrap: break-word;
                        max-width: 100%;
                        line-height: 1.2em;
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@ -31,12 +31,12 @@
        <div collapsible-footer appearOnBottom *ngIf="displayCourseIndex && (previousSection || nextSection)" slot="fixed">
            <div class="core-course-section-nav-buttons safe-area-padding-horizontal list-item-limited-width">
                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" expand="block"
-                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
+                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name" class="ion-text-nowrap">
                    <ion-icon name="fas-arrow-left" slot="start" aria-hidden="true" />
                    <core-format-text [text]="previousSection.name" contextLevel="course" [contextInstanceId]="course.id" />
                </ion-button>
                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" expand="block"
-                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
+                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name" class="ion-text-nowrap">
                    <core-format-text [text]="nextSection.name" contextLevel="course" [contextInstanceId]="course.id" />
                    <ion-icon name="fas-arrow-right" slot="end" aria-hidden="true" />
                </ion-button>
--- a/src/core/features/course/components/course-format/course-format.scss
+++ b/src/core/features/course/components/course-format/course-format.scss
@ -5,9 +5,6 @@
    padding-right: 8px;

    ion-button {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
        flex: 1;
        margin-left: 4px;
        margin-right: 4px;
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@ -87,9 +87,7 @@ ion-card {
 .core-course-shortname {
    font-size: var(--shortname-size);
    color: var(--dark);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    @include ellipsis();
 }

 ion-chip {
@ -226,18 +224,13 @@ ion-card.core-course-list-card {

            // Clamp one line with ellipsis on tablet view, and 2 in mobile.
            .item-heading {
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
+                @include ellipsis();
            }

            @include media-breakpoint-down(md) {
                .item-heading {
                    // Addition lines for 2 line or multiline ellipsis
-                    display: -webkit-box !important;
-                    -webkit-line-clamp: 2;
-                    -webkit-box-orient: vertical;
-                    white-space: normal;
+                    @include ellipsis(2);
                }
            }

--- a/src/core/features/search/components/global-search-result/global-search-result.scss
+++ b/src/core/features/search/components/global-search-result/global-search-result.scss
@ -1,3 +1,5 @@
+@use "theme/globals" as *;
+
 :host ion-item {
    --core-global-search-result-image-size: 40px;
    --core-global-search-result-title-color: var(--text);
@ -52,14 +54,7 @@
        core-format-text {
            color: var(--core-global-search-result-content-color);

-            @supports (-webkit-line-clamp: 2) {
-                white-space: normal;
-                overflow: hidden;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-            }
-
+            @include ellipsis(2);
        }

        .result-context-wrapper {
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@ -620,9 +620,7 @@ core-rich-text-editor .core-rte-editor {
    .text-wrap     { white-space: normal !important; }
    .text-nowrap   { white-space: nowrap !important; }
    .text-truncate {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        @include ellipsis();
     }
    .text-left   { text-align: left !important; }
    .text-right  { text-align: right !important; }
--- a/src/theme/components/ion-button.scss
+++ b/src/theme/components/ion-button.scss
@ -5,13 +5,21 @@ ion-button {
    line-height: 120%;

    core-format-text {
-        white-space: normal;
        display: contents;
        line-height: 120%;
    }

-    & > * {
-        white-space: normal;
+    &.ion-text-nowrap {
+        @include ellipsis();
+
+        & > * {
+            @include ellipsis();
+
+        }
+
+        core-format-text {
+            display: block;
+        }
    }

    ion-spinner {
--- a/src/theme/components/ion-header.scss
+++ b/src/theme/components/ion-header.scss
@ -61,9 +61,7 @@ ion-header.header-md {
        @include padding(0, 16px);

        h1, h2, .subheading {
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
+            @include ellipsis();
            margin: 0;
        }

--- a/src/theme/components/ion-item.scss
+++ b/src/theme/components/ion-item.scss
@ -193,9 +193,7 @@ ion-toggle::part(label),
 ion-input > label {
    core-format-text,
    core-format-text > *:not(pre) {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @include ellipsis();
    }
 }

--- a/src/theme/helpers/custom.mixins.scss
+++ b/src/theme/helpers/custom.mixins.scss
@ -153,6 +153,24 @@
    border: 0;
 }

+@mixin ellipsis($lines: 1) {
+    @if ($lines == 1) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    } @else {
+        // Only supported on Android 124+, iOs 11+. https://caniuse.com/css-line-clamp
+        @supports (-webkit-line-clamp: 2) {
+            -webkit-line-clamp: $lines;
+            -webkit-box-orient: vertical;
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: normal;
+        }
+    }
+}
+
 /**
 * Same as item-push-svg-url but admits flip-rtl
 */