From 0d7e252ca20ae03c862839cdb489cf5e112e1d8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 8 Jun 2021 13:16:03 +0200
Subject: [PATCH] MOBILE-3320 core: Fix navigation bar text overflow

---
 src/addons/blog/pages/entries/entries.html    | 14 ++++----
 .../navigation-bar/core-navigation-bar.html   | 12 +++----
 .../navigation-bar/navigation-bar.scss        |  5 ---
 src/theme/theme.base.scss                     | 32 +++++++++++++++++++
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index 73b15a137..9f4efbfec 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -64,14 +64,12 @@
                         <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
                     </ion-item>
                 </ion-card-content>
-                <ion-row class="ion-text-center" *ngIf="entry.lastmodified > entry.created">
-                    <ion-col>
-                        <ion-note>
-                            <ion-icon name="fas-clock"
-                                [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
-                        </ion-note>
-                    </ion-col>
-                </ion-row>
+                <div class="ion-text-center ion-margin-bottom" *ngIf="entry.lastmodified > entry.created">
+                    <ion-note>
+                        <ion-icon name="fas-clock"
+                            [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
+                    </ion-note>
+                </div>
             </ion-card>
         </ng-container>
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError"></core-infinite-loading>
diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html
index b04994a15..175e0f549 100644
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/src/core/components/navigation-bar/core-navigation-bar.html
@@ -1,20 +1,20 @@
 <ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
     <ion-row>
-        <ion-col class="ion-text-start" size="4">
-            <ion-button *ngIf="previous" class="core-navigation-bar-arrow"
-                [title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
+        <ion-col class="ion-text-start ion-padding-end" [size]="info ? 4 : 6">
+            <ion-button *ngIf="previous" class="core-navigation-bar-arrow" fill="outline"
+                [attr.aria-label]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
                 <ion-icon name="fas-arrow-left" [slot]="previousTitle ? 'start' : 'icon-only'" aria-hidden="true"></ion-icon>
                 <core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"
                     [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" aria-hidden="true">
                 </core-format-text>
             </ion-button>
         </ion-col>
-        <ion-col class="ion-text-center ion-padding-horizontal" size="4">
-            <ion-button fill="clear" *ngIf="info" (click)="showInfo()" [attr.aria-label]="title">
+        <ion-col class="ion-text-center" size="4" *ngIf="info">
+            <ion-button fill="clear" (click)="showInfo()" [attr.aria-label]="title">
                 <ion-icon slot="icon-only" name="fas-info-circle" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-col>
-        <ion-col class="ion-text-end" size="4">
+        <ion-col class="ion-text-end ion-padding-start" [size]="info ? 4 : 6">
             <ion-button *ngIf="next" class="core-navigation-bar-arrow" [attr.aria-label]="nextTitle || ('core.next' | translate)"
                 (click)="action?.emit(next)">
                 <core-format-text *ngIf="nextTitle" [text]="nextTitle" [component]="component" [componentId]="componentId"
diff --git a/src/core/components/navigation-bar/navigation-bar.scss b/src/core/components/navigation-bar/navigation-bar.scss
index c0219d1ac..f48edf9b3 100644
--- a/src/core/components/navigation-bar/navigation-bar.scss
+++ b/src/core/components/navigation-bar/navigation-bar.scss
@@ -4,9 +4,4 @@
     ion-icon {
         flex-shrink: 0;
     }
-
-    core-format-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
 }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index cf09aaa2e..5330f6576 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -145,10 +145,42 @@ ion-app.ios ion-header h2 {
 }
 
 // Correctly inherit ion-text-wrap onto labels.
+ion-item ion-label core-format-text .core-format-text-content > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 ion-item.ion-text-wrap ion-label {
     white-space: normal !important;
 }
 
+ion-button core-format-text .core-format-text-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+}
+
+ion-button > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-button.ion-text-wrap {
+    white-space: normal;
+    core-format-text .core-format-text-content {
+        white-space: normal;
+        display: contents;
+    }
+
+    & > * {
+        white-space: normal;
+    }
+}
+
+
 @each $color-name, $value in $colors {
     $value: map-get($colors, $color-name);
     $base: map-get($value, base);