GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3320 core: Fix navigation bar text overflow

Browse Source
This commit is contained in:
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

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

@ -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>

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-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"

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

@ -4,9 +4,4 @@
ion-icon {
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.
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);