From 5d20d4faa7ebf36737f656235195c0cf1d172005 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 13 May 2021 12:05:43 +0200 Subject: [PATCH] MOBILE-3752 a11y: Minor accessibility improvements --- src/addons/mod/data/data-forms.scss | 2 -- src/addons/mod/data/data.scss | 2 -- src/core/components/file/file.scss | 31 ------------------- src/core/components/file/file.ts | 1 - .../components/user-avatar/user-avatar.scss | 2 ++ .../block/components/block/block.scss | 5 +-- .../course-blocks/course-blocks.scss | 2 -- .../course/components/format/format.scss | 27 ---------------- .../course-module-description.scss | 17 ---------- .../core-courses-course-list-item.html | 7 +++-- src/core/features/login/pages/site/site.html | 2 +- src/core/features/login/pages/site/site.scss | 8 ----- .../features/mainmenu/pages/home/home.scss | 7 ----- .../search-box/core-search-box.html | 4 +-- src/theme/globals.variables.scss | 4 +-- src/theme/theme.base.scss | 21 ++++++++++--- 16 files changed, 29 insertions(+), 113 deletions(-) delete mode 100644 src/core/components/file/file.scss delete mode 100644 src/core/features/course/components/module-description/course-module-description.scss diff --git a/src/addons/mod/data/data-forms.scss b/src/addons/mod/data/data-forms.scss index 02b7e4ec3..2834bfc25 100644 --- a/src/addons/mod/data/data-forms.scss +++ b/src/addons/mod/data/data-forms.scss @@ -22,8 +22,6 @@ .addon-data-advanced-search { padding: 16px; width: 100%; - // @todo check if needed - // @include safe-area-padding-horizontal(16px !important, 16px !important); } .addon-data-contents form, diff --git a/src/addons/mod/data/data.scss b/src/addons/mod/data/data.scss index 62141a4e3..59fe03bd5 100644 --- a/src/addons/mod/data/data.scss +++ b/src/addons/mod/data/data.scss @@ -17,8 +17,6 @@ $grid-column-paddings: ( white-space: normal; word-break: break-word; padding: 16px; - // @todo check if needed - // @include safe-area-padding-horizontal(16px !important, 16px !important); background-color: var(--ion-item-background); border-width: 1px 0; diff --git a/src/core/components/file/file.scss b/src/core/components/file/file.scss deleted file mode 100644 index 98ce8714a..000000000 --- a/src/core/components/file/file.scss +++ /dev/null @@ -1,31 +0,0 @@ -:host { - // @todo - // .card-md core-file + core-file > .item-md.item-block > .item-inner, - // core-file + core-file > .item-md.item-block > .item-inner { - // border-top: 1px solid $list-md-border-color; - // } - - // .card-ios core-file + core-file > .item-ios.item-block > .item-inner, - // core-file + core-file > .item-ios.item-block > .item-inner { - // border-top: $hairlines-width solid $list-ios-border-color; - // .buttons { - // min-height: 53px; - // min-width: 58px; - // } - // } - - // core-file > .item.item-block > .item-inner { - // border-bottom: 0; - // @include safe-area-padding(null, 0px, null, null); - // .buttons { - // display: flex; - // flex-flow: row; - // align-items: center; - // z-index: 1; - // justify-content: space-around; - // align-content: center; - // min-height: 52px; - // min-width: 53px; - // } - // } -} \ No newline at end of file diff --git a/src/core/components/file/file.ts b/src/core/components/file/file.ts index f595bf994..85874ef89 100644 --- a/src/core/components/file/file.ts +++ b/src/core/components/file/file.ts @@ -34,7 +34,6 @@ import { CoreWSFile } from '@services/ws'; @Component({ selector: 'core-file', templateUrl: 'core-file.html', - styleUrls: ['file.scss'], }) export class CoreFileComponent implements OnInit, OnDestroy { diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss index 0e5964432..e9f3b02df 100644 --- a/src/core/components/user-avatar/user-avatar.scss +++ b/src/core/components/user-avatar/user-avatar.scss @@ -1,5 +1,7 @@ :host { position: relative; + width: var(--core-avatar-size); + height: var(--core-avatar-size); .clickable { cursor: pointer; diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss index 2d22d09be..6fdef379d 100644 --- a/src/core/features/block/components/block/block.scss +++ b/src/core/features/block/components/block/block.scss @@ -4,9 +4,6 @@ background: var(--background); ion-item-divider { - min-height: 60px; - .core-button-spinner { - margin: 0; - } + min-height: var(--item-divider-min-height); } } diff --git a/src/core/features/block/components/course-blocks/course-blocks.scss b/src/core/features/block/components/course-blocks/course-blocks.scss index 314fa25ff..cba246bb4 100644 --- a/src/core/features/block/components/course-blocks/course-blocks.scss +++ b/src/core/features/block/components/course-blocks/course-blocks.scss @@ -16,7 +16,6 @@ box-shadow: none !important; flex-grow: 1; max-width: 100%; - // @todo @include core-split-area-start(); } div.core-course-blocks-side { @@ -24,7 +23,6 @@ min-width: var(--side-blocks-min-width); box-shadow: var(--side-blocks-box-shadow); z-index: 2; - // @todo @include core-split-area-end(); } .core-course-blocks-content, diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss index 027504d87..b79f185c3 100644 --- a/src/core/features/course/components/format/format.scss +++ b/src/core/features/course/components/format/format.scss @@ -52,31 +52,4 @@ } } -// @todo -// .item-divider { -// .label { -// margin-top: 0; -// margin-bottom: 0; -// } - -// core-format-text { -// line-height: 44px; -// } - -// ion-badge core-format-text { -// line-height: normal; -// margin-bottom: 9px; -// } - -// &.core-section-download .label{ -// @include margin(null, 0, null, null); -// } -// } - -// div.core-section-download { -// @include padding(null, 0, null, null); -// } - -// - } diff --git a/src/core/features/course/components/module-description/course-module-description.scss b/src/core/features/course/components/module-description/course-module-description.scss deleted file mode 100644 index 7ba1e696e..000000000 --- a/src/core/features/course/components/module-description/course-module-description.scss +++ /dev/null @@ -1,17 +0,0 @@ -// @todo Review commented styles. -// ion-app.app-root { -// .safe-area-page, -// .safe-padding-horizontal { -// core-course-module-description { -// padding-left: 0 !important; -// padding-right: 0 !important; -// .item-ios.item-block { -// @include safe-area-padding-horizontal($item-ios-padding-end / 2, null); - -// .item-inner { -// @include safe-area-padding-horizontal(null, $item-ios-padding-end / 2); -// } -// } -// } -// } -// } diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html index 29b0c1e82..83aa9653e 100644 --- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html +++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html @@ -28,7 +28,10 @@

- + + diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html index 58e5818a7..4556094d4 100644 --- a/src/core/features/login/pages/site/site.html +++ b/src/core/features/login/pages/site/site.html @@ -93,7 +93,7 @@ (ionCancel)="filterChanged()" [placeholder]="'core.login.findyoursite' | translate"> - + diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss index bcc7e8f43..7d95f4de4 100644 --- a/src/core/features/login/pages/site/site.scss +++ b/src/core/features/login/pages/site/site.scss @@ -2,14 +2,6 @@ margin-bottom: 20px; } -.searchbar-ios { - background: transparent; - - .searchbar-input { - background-color: white; // @todo $searchbar-ios-toolbar-input-background; - } -} - .item { &.core-login-need-help { margin-top: 16px; diff --git a/src/core/features/mainmenu/pages/home/home.scss b/src/core/features/mainmenu/pages/home/home.scss index 4f17ae77c..dfede2f3b 100644 --- a/src/core/features/mainmenu/pages/home/home.scss +++ b/src/core/features/mainmenu/pages/home/home.scss @@ -17,10 +17,3 @@ $core-dashboard-logo: false !default; display: none; } } - -ion-badge.core-course-download-courses-progress { - display: block; - // @include float(start); - // @include margin(12px, 12px, null, 12px); -} - diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html index 9d71300f2..eec04febf 100644 --- a/src/core/features/search/components/search-box/core-search-box.html +++ b/src/core/features/search/components/search-box/core-search-box.html @@ -6,11 +6,11 @@ [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)"> - - diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 23e5aa06d..3e762425d 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -228,7 +228,7 @@ $core-login-text-color-dark: $white !default; $core-star-color: $brand-color !default; $core-large-avatar-size: 90px !default; -$core-avatar-size: 40px !default; +$core-avatar-size: 44px !default; $core-send-message-input-background: $gray !default; $core-send-message-input-color: $black !default; @@ -252,7 +252,7 @@ $addon-messages-avatar-size: 30px !default; $addon-messages-discussion-badge: $primary !default; $addon-messages-discussion-badge-text: $white !default; -$addon-forum-avatar-size: 28px !default; +$addon-forum-avatar-size: 44px !default; $addon-forum-border-color: $gray !default; $addon-forum-highlight-color: $gray-lighter !default; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 3f2725a31..5381e35fb 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -1,4 +1,4 @@ -@import "./globals.mixins.ionic.scss"; +@import "./globals.scss"; // Common styles. .text-left { text-align: left; } @@ -126,7 +126,9 @@ ion-button.button-small ion-icon.faicon[slot] { font-size: 1.5em !important; } -[dir=rtl] ion-icon.icon-flip-rtl { +[dir=rtl] ion-icon.icon-flip-rtl, +[dir=rtl] ion-item::part(detail-icon), +[dir=rtl] ion-icon.item-detail-icon { transform: scaleX(-1); } @@ -206,7 +208,7 @@ ion-toolbar { // Modals. .core-modal-fullscreen .modal-wrapper { position: absolute; - // @todo @include position(0 !important, null, null, 0 !important); + @include position(0 !important, null, null, 0 !important); display: block; width: 100% !important; height: 100% !important; @@ -218,11 +220,10 @@ ion-toolbar { @media only screen and (min-height: 400px) and (min-width: 300px) { .core-modal-lateral { - // @todo @include core-split-area-end(); .modal-wrapper { position: absolute; - @include position(0 !important, 0 !important, 0 !important, auto); + @include position(0 !important, 0 !important, 0 !important, unset !important); display: block; height: 100% !important; width: auto; @@ -425,6 +426,16 @@ ion-select::part(text) { text-decoration: underline; } +core-block ion-item-divider .core-button-spinner { + display: flex; + align-items: center; + @include margin-horizontal(10px); + + ion-badge.core-course-download-courses-progress { + @include margin(null, 12px, null, null); + } +} + // Horizontal scrolling elements .core-horizontal-scroll { display: flex;