EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 core: Fix navigation bar text overflow

main
Pau Ferrer Ocaña 2021-06-08 13:16:03 +02:00
parent 5ad0326910
commit 0d7e252ca2
4 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/addons/blog/pages/entries/entries.html
View File

@ -64,14 +64,12 @@
<ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label> <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
</ion-item> </ion-item>
</ion-card-content> </ion-card-content>
<ion-row class="ion-text-center" *ngIf="entry.lastmodified > entry.created"> <div class="ion-text-center ion-margin-bottom" *ngIf="entry.lastmodified > entry.created">
<ion-col>
<ion-note> <ion-note>
<ion-icon name="fas-clock" <ion-icon name="fas-clock"
[attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}} [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
</ion-note> </ion-note>
</ion-col> </div>
</ion-row>
</ion-card> </ion-card>
</ng-container> </ng-container>
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError"></core-infinite-loading> <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError"></core-infinite-loading>

12
src/core/components/navigation-bar/core-navigation-bar.html
View File

@ -1,20 +1,20 @@
<ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next"> <ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
<ion-row> <ion-row>
<ion-col class="ion-text-start" size="4"> <ion-col class="ion-text-start ion-padding-end" [size]="info ? 4 : 6">
<ion-button *ngIf="previous" class="core-navigation-bar-arrow" <ion-button *ngIf="previous" class="core-navigation-bar-arrow" fill="outline"
[title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)"> [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> <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" <core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" aria-hidden="true"> [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" aria-hidden="true">
</core-format-text> </core-format-text>
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col class="ion-text-center ion-padding-horizontal" size="4"> <ion-col class="ion-text-center" size="4" *ngIf="info">
<ion-button fill="clear" *ngIf="info" (click)="showInfo()" [attr.aria-label]="title"> <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-icon slot="icon-only" name="fas-info-circle" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
</ion-col> </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)" <ion-button *ngIf="next" class="core-navigation-bar-arrow" [attr.aria-label]="nextTitle || ('core.next' | translate)"
(click)="action?.emit(next)"> (click)="action?.emit(next)">
<core-format-text *ngIf="nextTitle" [text]="nextTitle" [component]="component" [componentId]="componentId" <core-format-text *ngIf="nextTitle" [text]="nextTitle" [component]="component" [componentId]="componentId"

5
src/core/components/navigation-bar/navigation-bar.scss
View File

@ -4,9 +4,4 @@
ion-icon { ion-icon {
flex-shrink: 0; flex-shrink: 0;
} }
core-format-text {
overflow: hidden;
text-overflow: ellipsis;
}
} }

32
src/theme/theme.base.scss
View File

@ -145,10 +145,42 @@ ion-app.ios ion-header h2 {
} }
// Correctly inherit ion-text-wrap onto labels. // 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 { ion-item.ion-text-wrap ion-label {
white-space: normal !important; 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 { @each $color-name, $value in $colors {
$value: map-get($colors, $color-name); $value: map-get($colors, $color-name);
$base: map-get($value, base); $base: map-get($value, base);