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

MOBILE-3100 Accessibility: Fix issues when changing font sizes

main
Mark Johnson 2019-08-08 16:11:14 +01:00
parent 9ea37af4c9
commit de2c297b3c
5 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/app.scss
View File

@ -649,13 +649,16 @@ ion-app.app-root {
.toolbar img.core-bar-button-image,
.toolbar .core-bar-button-image img {
padding: 0;
width: 100%;
height: 100%;
max-width: $core-toolbar-button-image-width - 1;
max-height: $core-toolbar-button-image-width - 1;
width: $core-toolbar-button-image-width;
height: $core-toolbar-button-image-width;
max-width: $core-toolbar-button-image-width;
border-radius: 50%;
}
.toolbar-ios {
height: 52px;
}
// Footer with auto height.
.footer.footer-adjustable {
height: auto;
@ -1147,3 +1150,10 @@ ion-app.platform-desktop {
.ion-md-funnel::before {
content: "\f182";
}
// Fix icon size in lists, to prevent them scaling with text.
.item, .item-inner {
> ion-icon {
font-size: 28px;
}
}

1
src/components/ion-tabs/ion-tabs.scss
View File

@ -3,6 +3,7 @@ $core-sidetab-size: 60px !default;
ion-app.app-root core-ion-tabs {
.tabbar {
z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one.
height: 56px;
.core-ion-tabs-loading {
height: 100%;

2
src/components/tabs/tabs.scss
View File

@ -74,7 +74,7 @@ ion-app.app-root.ios .core-tabs-bar .tab-slide {
max-width: $tabs-ios-tab-max-width;
min-height: $tabs-ios-tab-min-height;
font-size: $tabs-ios-tab-font-size + 4;
font-size: $tabs-ios-tab-font-size;
font-weight: $tabs-ios-tab-font-weight;
color: $tabs-ios-tab-text-color;
}

2
src/core/settings/pages/general/general.ts
View File

@ -68,7 +68,7 @@ export class CoreSettingsGeneralPage {
this.selectedLanguage = currentLanguage;
});
this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0]).then((fontSize) => {
this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).then((fontSize) => {
this.selectedFontSize = fontSize;
this.fontSizes = CoreConfigConstants.font_sizes.map((size) => {
return {

23
src/theme/variables.scss
View File

@ -229,6 +229,29 @@ $popover-wp-width: $popover-width;
$item-wp-divider-background: $item-divider-background;
$item-wp-divider-color: $item-divider-color;
// Font sizes
// ---------------------------------------------------
// Some font sizes are defined in absolute pixels by ionic,
// override these with relative sizes so they are resizable.
$alert-ios-message-font-size: 1.4rem;
$alert-ios-title-font-size: 2.2rem;
$alert-ios-sub-title-font-size: 1.6rem;
$alert-md-message-font-size: 1.4rem;
$alert-md-title-font-size: 2.2rem;
$alert-md-sub-title-font-size: 1.6rem;
$alert-button-font-size: 1.4rem;
$tabs-ios-tab-font-size: 1.4rem;
$chip-ios-font-size: 1.3rem;
$chip-md-font-size: 1.3rem;
// Icon sizes
// ---------------------------------------------------
// Some font icons have relative sizes set by ionic,
// define absolute sizes so they aren't scaled with text.
$tabs-md-tab-icon-size: 24px;
$tabs-md-tab-min-height: 56px;
$tabs-ios-tab-min-height: 56px;
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can