From f55d59c1c2f1cdd4f2d47f4ffd27f74f2a33a80a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 28 May 2021 13:22:39 +0200 Subject: [PATCH 1/6] MOBILE-3320 a11y: Fixed some clickable and coloring issues --- .../mod/forum/components/index/index.ts | 3 ++ .../mod/forum/components/post/post.html | 6 +-- .../mod/forum/components/post/post.scss | 3 +- src/addons/mod/forum/components/post/post.ts | 9 +++- .../send-message-form/send-message-form.scss | 43 +++++++++---------- .../course/components/format/format.scss | 9 +--- .../course-progress/course-progress.scss | 2 +- src/theme/globals.variables.scss | 4 +- 8 files changed, 40 insertions(+), 39 deletions(-) diff --git a/src/addons/mod/forum/components/index/index.ts b/src/addons/mod/forum/components/index/index.ts index e80e9a447..4e6178c66 100644 --- a/src/addons/mod/forum/components/index/index.ts +++ b/src/addons/mod/forum/components/index/index.ts @@ -667,6 +667,9 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom * @param discussion Discussion. */ async showOptionsMenu(event: Event, discussion: AddonModForumDiscussion): Promise { + event.preventDefault(); + event.stopPropagation(); + const popoverData = await CoreDomUtils.openPopover<{ action?: string; value: boolean }>({ component: AddonModForumDiscussionOptionsMenuComponent, componentProps: { diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html index 93910f69a..e6b7a3da7 100644 --- a/src/addons/mod/forum/components/post/post.html +++ b/src/addons/mod/forum/components/post/post.html @@ -93,9 +93,9 @@ - {{ 'addon.mod_forum.reply' | translate }} + (click)="showReplyForm($event)"> + + {{ 'addon.mod_forum.reply' | translate }} diff --git a/src/addons/mod/forum/components/post/post.scss b/src/addons/mod/forum/components/post/post.scss index bea8f1b1b..1dcf74beb 100644 --- a/src/addons/mod/forum/components/post/post.scss +++ b/src/addons/mod/forum/components/post/post.scss @@ -1,7 +1,7 @@ @import "~theme/globals"; :host .addon-mod_forum-post { - background-color: var(--white); + background-color: var(--ion-item-background); border-bottom: 1px solid var(--addon-forum-border-color); .addon-forum-star { @@ -21,6 +21,7 @@ margin-top: 8px; margin-bottom: 8px; font-weight: bold; + flex-grow: 1; ion-icon { @include margin(0, 6px, 0, 0); diff --git a/src/addons/mod/forum/components/post/post.ts b/src/addons/mod/forum/components/post/post.ts index 594aa3f82..a9f5cc381 100644 --- a/src/addons/mod/forum/components/post/post.ts +++ b/src/addons/mod/forum/components/post/post.ts @@ -306,8 +306,13 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges /** * Set this post as being replied to. + * + * @param event Click event. */ - async showReplyForm(): Promise { + async showReplyForm(event: Event): Promise { + event.preventDefault(); + event.stopPropagation(); + if (this.replyData.isEditing) { // User is editing a post, data needs to be resetted. Ask confirm if there is unsaved data. try { @@ -323,7 +328,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges ); }); } - } catch (error) { + } catch { // Cancelled. } diff --git a/src/core/components/send-message-form/send-message-form.scss b/src/core/components/send-message-form/send-message-form.scss index ce52b352e..2e4ef33ca 100644 --- a/src/core/components/send-message-form/send-message-form.scss +++ b/src/core/components/send-message-form/send-message-form.scss @@ -1,25 +1,24 @@ :host { - background: var(--white); + form { + position: relative; + display: flex; + align-items: center; + width: 100%; + background: var(--ion-item-background); + } - form { - position: relative; - display: flex; - align-items: center; - width: 100%; - } - - .core-send-message-input { - appearance: none; - display: block; - width: 100%; - border: 0; - font-family: inherit; - background: var(--core-send-message-input-background); - color: var(--core-send-message-input-color); - border-radius: 21px; - line-height: 20px; - padding: 9px 12px 11px; - margin: 5px 10px; - resize: vertical; - } + .core-send-message-input { + appearance: none; + display: block; + width: 100%; + border: 0; + font-family: inherit; + background: var(--core-send-message-input-background); + color: var(--core-send-message-input-color); + border-radius: 21px; + line-height: 20px; + padding: 9px 12px 11px; + margin: 5px 10px; + resize: vertical; + } } diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss index 3e556b5d2..0d3002196 100644 --- a/src/core/features/course/components/format/format.scss +++ b/src/core/features/course/components/format/format.scss @@ -12,13 +12,6 @@ margin-top: 0; margin-bottom: 0; } - - progress { - .progress-bar-fallback, - &[value]::-webkit-progress-bar { - background-color: var(--white); - } - } } } @@ -30,7 +23,7 @@ cursor: pointer; pointer-events: auto; position: relative; - background: white; + background: var(--ion-item-background); img { position: absolute; diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss index 8ca42ef7f..f460d17b7 100644 --- a/src/core/features/courses/components/course-progress/course-progress.scss +++ b/src/core/features/courses/components/course-progress/course-progress.scss @@ -30,7 +30,7 @@ transition: all 50ms ease-in-out; &.core-course-color-img { - background: white; + background: var(--ion-item-background); } img { diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 361dbc538..9b3816e6d 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -378,8 +378,8 @@ $addon-forum-avatar-size: 44px !default; $addon-forum-border-color: $gray !default; $addon-forum-highlight-color: $gray-lighter !default; -$addon-forum-border-color-dark: $gray-darker !default; -$addon-forum-highlight-color-dark: $gray-dark !default; +$addon-forum-border-color-dark: $gray-dark !default; +$addon-forum-highlight-color-dark: $gray-darker !default; $core-more-icon: null !default; $core-more-item-border: null !default; From 0e70d9e3530a02720cf7028857431833b4c325d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 28 May 2021 14:15:42 +0200 Subject: [PATCH 2/6] MOBILE-3320 quiz: Improve drag and drop question styles --- .../component/addon-qtype-ddimageortext.html | 9 +- .../component/ddimageortext.scss | 55 ++-- .../component/addon-qtype-ddmarker.html | 8 +- .../qtype/ddmarker/component/ddmarker.scss | 264 +++++++++--------- .../ddwtos/component/addon-qtype-ddwtos.html | 8 +- src/addons/qtype/ddwtos/component/ddwtos.scss | 214 +++++++------- src/theme/globals.variables.scss | 2 +- src/theme/theme.dark.scss | 1 + src/theme/theme.light.scss | 2 + 9 files changed, 289 insertions(+), 274 deletions(-) diff --git a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html index a05a766cd..ff3cb646f 100644 --- a/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html +++ b/src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html @@ -1,4 +1,4 @@ - +
@@ -15,10 +15,13 @@ [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()"> - + + + + - +
diff --git a/src/addons/qtype/ddimageortext/component/ddimageortext.scss b/src/addons/qtype/ddimageortext/component/ddimageortext.scss index 8487bbcdf..f39426055 100644 --- a/src/addons/qtype/ddimageortext/component/ddimageortext.scss +++ b/src/addons/qtype/ddimageortext/component/ddimageortext.scss @@ -2,18 +2,29 @@ // Style ddimageortext content a bit. Almost all these styles are copied from Moodle. :host { - .addon-qtype-ddimageortext-container { - min-height: 80px; // To display the loading. - } + --ddimageortext-border-drop: var(--gray-darker); + --ddimageortext-draghome-background: nth($core-dd-question-colors, 2); +} + +.addon-qtype-ddimageortext-container { + min-height: 80px; // To display the loading. +} + +core-format-text ::ng-deep { + + div.ddarea { + text-align: center; + position: relative; + margin-top: 10px; + user-select: none; - core-format-text ::ng-deep { .qtext { margin-bottom: 0.5em; display: block; } div.droparea img { - border: 1px solid var(--gray-darker); + border: 1px solid var(--core-dd-question-border); max-width: 100%; } @@ -27,9 +38,9 @@ } div.draghome { - border: 1px solid var(--gray-darker); + border: 1px solid var(--core-dd-question-border); cursor: pointer; - background-color: #B0C4DE; + background-color: var(--ddimageortext-draghome-background); display: inline-block; height: auto; width: auto; @@ -39,37 +50,40 @@ @for $i from 0 to length($core-dd-question-colors) { .group#{$i + 1} { background: nth($core-dd-question-colors, $i + 1); + color: get_contrast_color(nth($core-dd-question-colors, $i + 1)); } } .group2 { - border-radius: 10px 0 0 0; + border-radius: var(--core-dd-question-radius) 0 0 0; } .group3 { - border-radius: 0 10px 0 0; + border-radius: 0 var(--core-dd-question-radius) 0 0; } .group4 { - border-radius: 0 0 10px 0; + border-radius: 0 0 var(--core-dd-question-radius) 0; } .group5 { - border-radius: 0 0 0 10px; + border-radius: 0 0 0 var(--core-dd-question-radius); } .group6 { - border-radius: 0 10px 10px 0; + border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0; } .group7 { - border-radius: 10px 0 0 10px; + border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius); } .group8 { - border-radius: 10px 10px 10px 10px; + border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius); } .drag { - border: 1px solid var(--gray-darker); - color: var(--ion-text-color); + border: 1px solid var(--core-dd-question-border); cursor: pointer; z-index: 2; } + .drag.placed { + border: 1px solid var(--ddimageortext-border-drop); + } .dragitems.readonly .drag { cursor: auto; } @@ -85,16 +99,11 @@ .drag img { display: block; } - - div.ddarea { - text-align : center; - position: relative; - } .dropbackground { margin:0 auto; } .dropzone { - border: 1px solid var(--gray-darker); + border: 1px solid var(--ddimageortext-border-drop); position: absolute; z-index: 1; cursor: pointer; @@ -104,7 +113,7 @@ } div.dragitems div.draghome, div.dragitems div.drag { - font:13px/1.231 arial,helvetica,clean,sans-serif; + font: 13px/1.231 arial, helvetica, clean, sans-serif; } .drag.beingdragged { z-index: 3; diff --git a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html index cb66752d6..39a60a78d 100644 --- a/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html +++ b/src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html @@ -1,4 +1,4 @@ - +
@@ -14,9 +14,13 @@ [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" (afterRender)="textRendered()"> + + + + - +
diff --git a/src/addons/qtype/ddmarker/component/ddmarker.scss b/src/addons/qtype/ddmarker/component/ddmarker.scss index e9b68df0a..b62ffbfcd 100644 --- a/src/addons/qtype/ddmarker/component/ddmarker.scss +++ b/src/addons/qtype/ddmarker/component/ddmarker.scss @@ -1,150 +1,150 @@ // Style ddmarker content a bit. Almost all these styles are copied from Moodle. -:host { - .addon-qtype-ddmarker-container { - min-height: 80px; // To display the loading. +.addon-qtype-ddmarker-container { + min-height: 80px; // To display the loading. +} + +core-format-text ::ng-deep { + .ddarea, .ddform { + user-select: none; } - core-format-text ::ng-deep { - .ddarea, .ddform { - user-select: none; - } + .qtext { + margin-bottom: 0.5em; + display: block; + } - .qtext { - margin-bottom: 0.5em; - display: block; - } + .droparea { + display: inline-block; + } - .droparea { - display: inline-block; - } + div.droparea img { + border: 1px solid var(--core-dd-question-border); + max-width: 100%; + } - div.droparea img { - border: 1px solid var(--gray-darker); - max-width: 100%; - } + .dropzones svg { + z-index: 3; + } - .dropzones svg { - z-index: 3; - } + .dragitem.beingdragged .markertext { + z-index: 5; + box-shadow: var(--core-dd-question-selected-shadow); + } - .dragitem.beingdragged .markertext { - z-index: 5; - box-shadow: var(--core-dd-question-selected-shadow); - } - - .dragitems, // Previous to 3.9. - .draghomes { - &.readonly { - .dragitem, - .marker { - cursor: auto; - } - } - - .dragitem, // Previous to 3.9. - .draghome, - .marker { - vertical-align: top; - cursor: pointer; - position: relative; - margin: 10px; - display: inline-block; - &.dragplaceholder { - display: none; - visibility: hidden; - - &.active { - display: inline-block; - } - } - - &.unplaced { - position: relative; - } - &.placed { - position: absolute; - opacity: 0.6; - } - } - } - - .droparea { + .dragitems, // Previous to 3.9. + .draghomes { + &.readonly { .dragitem, .marker { - cursor: pointer; - position: absolute; - vertical-align: top; - z-index: 2; + cursor: auto; } } - div.ddarea { - text-align: center; + .dragitem, // Previous to 3.9. + .draghome, + .marker { + vertical-align: top; + cursor: pointer; position: relative; - } - div.ddarea .dropzones, - div.ddarea .markertexts { - top: 0; - left: 0; - min-height: 80px; - position: absolute; - text-align: start; - } - - .dropbackground { - margin: 0 auto; - } - - div.dragitems div.draghome, - div.dragitems div.dragitem, - div.draghome, - div.drag, - div.draghomes div.marker, - div.marker, - div.drag { - font: 13px/1.231 arial,helvetica,clean,sans-serif; - } - div.dragitems span.markertext, - div.draghomes span.markertext, - div.markertexts span.markertext { - margin: 0 5px; - z-index: 2; - background-color: var(--white); - border: 2px solid var(--gray-darker); - padding: 5px; + margin: 10px; display: inline-block; - zoom: 1; - border-radius: 10px; - color: var(--ion-text-color); - } - div.markertexts span.markertext { - z-index: 3; - background-color: var(--yellow-light); - border-style: solid; - border-width: 2px; - border-color: var(--yellow); - position: absolute; - } - span.wrongpart { - background-color: var(--yellow-light); - border-style: solid; - border-width: 2px; - border-color: var(--yellow); - padding: 5px; - border-radius: 10px; - opacity: 0.6; - margin: 5px; - display: inline-block; - } - div.dragitems img.target, - div.draghomes img.target { - position: absolute; - left: -7px; /* This must be half the size of the target image, minus 0.5. */ - top: -7px; /* In other words, this works for a 15x15 cross-hair. */ - } - div.dragitems div.draghome img.target, - div.draghomes div.marker img.target { - display: none; + &.dragplaceholder { + display: none; + visibility: hidden; + + &.active { + display: inline-block; + } + } + + &.unplaced { + position: relative; + } + &.placed { + position: absolute; + opacity: 0.6; + } } } + + .droparea { + .dragitem, + .marker { + cursor: pointer; + position: absolute; + vertical-align: top; + z-index: 2; + } + } + + div.ddarea { + text-align: center; + position: relative; + } + div.ddarea .dropzones, + div.ddarea .markertexts { + top: 0; + left: 0; + min-height: 80px; + position: absolute; + text-align: start; + } + + .dropbackground { + margin: 0 auto; + } + + div.dragitems div.draghome, + div.dragitems div.dragitem, + div.draghome, + div.drag, + div.draghomes div.marker, + div.marker, + div.drag { + font: 13px/1.231 arial, helvetica, clean, sans-serif; + } + div.dragitems span.markertext, + div.draghomes span.markertext, + div.markertexts span.markertext { + margin: 0 5px; + z-index: 2; + background-color: var(--ion-item-background); + border: 2px solid var(--core-dd-question-border); + padding: 5px; + display: inline-block; + zoom: 1; + border-radius: 10px; + color: var(--ion-text-color); + } + div.markertexts span.markertext { + z-index: 3; + background-color: var(--yellow-light); + border-style: solid; + border-width: 2px; + border-color: var(--yellow); + position: absolute; + color: var(--black); + } + span.wrongpart { + background-color: var(--yellow-light); + border-style: solid; + border-width: 2px; + border-color: var(--yellow); + padding: 5px; + border-radius: 10px; + opacity: 0.6; + margin: 5px; + display: inline-block; + color: var(--black); + } + div.dragitems img.target, + div.draghomes img.target { + position: absolute; + left: -7px; /* This must be half the size of the target image, minus 0.5. */ + top: -7px; /* In other words, this works for a 15x15 cross-hair. */ + } + div.dragitems div.draghome img.target, + div.draghomes div.marker img.target { + display: none; + } } diff --git a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html index 3e3feddae..86b733857 100644 --- a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html +++ b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html @@ -1,8 +1,8 @@ - +
- + @@ -14,10 +14,12 @@ [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()"> + +
- +
diff --git a/src/addons/qtype/ddwtos/component/ddwtos.scss b/src/addons/qtype/ddwtos/component/ddwtos.scss index 4173fe334..e5b4ccfb5 100644 --- a/src/addons/qtype/ddwtos/component/ddwtos.scss +++ b/src/addons/qtype/ddwtos/component/ddwtos.scss @@ -1,126 +1,120 @@ @import "~core/features/question/question"; // Style ddwtos content a bit. Almost all these styles are copied from Moodle. -:host { - .addon-qtype-ddwtos-container { - min-height: 80px; // To display the loading. +.addon-qtype-ddwtos-container { + min-height: 80px; // To display the loading. +} + +core-format-text ::ng-deep, .drags ::ng-deep { + .qtext { + margin-bottom: 0.5em; + display: block; } - core-format-text ::ng-deep, .drags ::ng-deep { - .qtext { - margin-bottom: 0.5em; - display: block; - } + .draghome { + margin-bottom: 1em; + max-width: calc(100%); + } - .draghome { - margin-bottom: 1em; - max-width: calc(100%); - } + .answertext { + margin-bottom: 0.5em; + } - .answertext { - margin-bottom: 0.5em; - } + .drop { + display: inline-block; + text-align: center; + border: 1px solid var(--core-dd-question-border); + margin-bottom: 2px; + border-radius: 5px; + cursor: pointer; + } + .draghome, .drag { + display: inline-block; + text-align: center; + background: transparent; + border: 0; + white-space: normal; + overflow: visible; + word-wrap: break-word; + } + .draghome, .drag.unplaced{ + border: 1px solid var(--core-dd-question-border); + } + .draghome { + visibility: hidden; + } + .drag { + z-index: 2; + border-radius: 5px; + line-height: 25px; + cursor: pointer; + } + .drag.selected, + .drop.selected { + z-index: 3; + box-shadow: var(--core-dd-question-selected-shadow); + } - .drop { - display: inline-block; - text-align: center; - border: 1px solid var(--gray-darker); - margin-bottom: 2px; - border-radius: 5px; - cursor: pointer; - } - .draghome, .drag { - display: inline-block; - text-align: center; - background: transparent; - border: 0; - white-space: normal; - overflow: visible; - word-wrap: break-word; - } - .draghome, .drag.unplaced{ - border: 1px solid var(--gray-darker); - } - .draghome { - visibility: hidden; - } - .drag { - z-index: 2; - border-radius: 5px; - line-height: 25px; - cursor: pointer; - } - .drag.selected { - z-index: 3; - box-shadow: var(--core-dd-question-selected-shadow); - } + &.notreadonly .drag, + &.notreadonly .draghome, + &.notreadonly .drop, + &.notreadonly .answercontainer { + cursor: pointer; + border-radius: 5px; + } - .drop.selected { - border-color: var(--yellow-light); - box-shadow: 0 0 5px 5px var(--yellow-light); - } + &.readonly .drag, + &.readonly .draghome, + &.readonly .drop, + &.readonly .answercontainer { + cursor: default; + } - &.notreadonly .drag, - &.notreadonly .draghome, - &.notreadonly .drop, - &.notreadonly .answercontainer { - cursor: pointer; - border-radius: 5px; - } + span.incorrect { + background-color: var(--core-question-incorrect-color-bg); + } + span.correct { + background-color: var(--core-question-correct-color-bg); + } - &.readonly .drag, - &.readonly .draghome, - &.readonly .drop, - &.readonly .answercontainer { - cursor: default; + @for $i from 0 to length($core-dd-question-colors) { + .group#{$i + 1} { + background: nth($core-dd-question-colors, $i + 1); + color: get_contrast_color(nth($core-dd-question-colors, $i + 1)); } + } - span.incorrect { - background-color: var(--core-question-incorrect-color-bg); - } - span.correct { - background-color: var(--core-question-correct-color-bg); - } + .group2 { + border-radius: var(--core-dd-question-radius) 0 0 0; + } + .group3 { + border-radius: 0 var(--core-dd-question-radius) 0 0; + } + .group4 { + border-radius: 0 0 var(--core-dd-question-radius) 0; + } + .group5 { + border-radius: 0 0 0 var(--core-dd-question-radius); + } + .group6 { + border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0; + } + .group7 { + border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius); + } + .group8 { + border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius); + } - @for $i from 0 to length($core-dd-question-colors) { - .group#{$i + 1} { - background: nth($core-dd-question-colors, $i + 1); - color: var(--ion-text-color); - } - } - - .group2 { - border-radius: 10px 0 0 0; - } - .group3 { - border-radius: 0 10px 0 0; - } - .group4 { - border-radius: 0 0 10px 0; - } - .group5 { - border-radius: 0 0 0 10px; - } - .group6 { - border-radius: 0 10px 10px 0; - } - .group7 { - border-radius: 10px 0 0 10px; - } - .group8 { - border-radius: 10px 10px 10px 10px; - } - - sub, sup { - font-size: 80%; - position: relative; - vertical-align: baseline; - } - sup { - top: -0.4em; - } - sub { - bottom: -0.2em; - } + sub, sup { + font-size: 80%; + position: relative; + vertical-align: baseline; + } + sup { + top: -0.4em; + } + sub { + bottom: -0.2em; } } diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 9b3816e6d..18da1f961 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -237,7 +237,7 @@ $colors-dark: ( $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default; -$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default; +$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default; /* * Layout Breakpoints diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 9b88dac3c..8bc2df0ef 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -117,6 +117,7 @@ --core-question-feedback-background-color: var(--yellow-dark); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); + --core-dd-question-border: var(--gray-light); --addon-messages-message-bg: #{$addon-messages-message-bg-dark}; --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark}; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 9f992fe7b..85c1d11dc 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -275,6 +275,8 @@ --core-question-feedback-background-color: var(--yellow-light); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark); + --core-dd-question-radius: 10px; + --core-dd-question-border: var(--gray-darker); @if ($core-more-icon) { --core-more-icon: #{$core-more-icon}; From f5c5b0e65e2d93bd58a222b2fd36c9dcb5b6d4e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 28 May 2021 14:34:50 +0200 Subject: [PATCH 3/6] MOBILE-3320 style: Layout improvements --- src/addons/blog/pages/entries/entries.html | 2 +- .../components/calendar/addon-calendar-calendar.html | 2 +- .../addon-calendar-upcoming-events.html | 2 +- src/addons/messages/pages/contacts/contacts.html | 4 ++-- src/core/components/tabs/tabs.scss | 10 ++++++++-- 5 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html index e168d0f2b..94e0fb5e2 100644 --- a/src/addons/blog/pages/entries/entries.html +++ b/src/addons/blog/pages/entries/entries.html @@ -11,7 +11,7 @@ - + {{ 'addon.blog.showonlyyourentries' | translate }} diff --git a/src/addons/calendar/components/calendar/addon-calendar-calendar.html b/src/addons/calendar/components/calendar/addon-calendar-calendar.html index 62d65cc20..a0aae3188 100644 --- a/src/addons/calendar/components/calendar/addon-calendar-calendar.html +++ b/src/addons/calendar/components/calendar/addon-calendar-calendar.html @@ -8,7 +8,7 @@ - + diff --git a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html index d8ac7e917..46de2aacf 100644 --- a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html +++ b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html @@ -1,4 +1,4 @@ - + diff --git a/src/addons/messages/pages/contacts/contacts.html b/src/addons/messages/pages/contacts/contacts.html index 43623185f..dcdd35ab1 100644 --- a/src/addons/messages/pages/contacts/contacts.html +++ b/src/addons/messages/pages/contacts/contacts.html @@ -24,7 +24,7 @@ - + - + Date: Fri, 28 May 2021 16:16:34 +0200 Subject: [PATCH 4/6] MOBILE-3320 loading: Improve core-loading layout and animations --- .../addon-block-activitymodules.html | 2 +- .../myoverview/addon-block-myoverview.html | 2 +- .../addon-block-recentlyaccessedcourses.html | 2 +- .../addon-block-recentlyaccesseditems.html | 2 +- .../sitemainmenu/addon-block-sitemainmenu.html | 2 +- .../starredcourses/addon-block-starredcourses.html | 2 +- .../components/timeline/addon-block-timeline.html | 6 +++--- .../components/index/addon-mod-assign-index.html | 2 +- .../submission/addon-mod-assign-submission.html | 2 +- .../book/components/index/addon-mod-book-index.html | 2 +- .../chat/components/index/addon-mod-chat-index.html | 2 +- .../components/index/addon-mod-choice-index.html | 2 +- .../data/components/index/addon-mod-data-index.html | 2 +- .../components/index/addon-mod-feedback-index.html | 2 +- .../components/index/addon-mod-folder-index.html | 2 +- src/addons/mod/forum/components/index/index.html | 2 +- .../post-options-menu/post-options-menu.html | 2 +- .../components/index/addon-mod-glossary-index.html | 2 +- .../index/addon-mod-h5pactivity-index.html | 2 +- .../components/index/addon-mod-imscp-index.html | 2 +- .../components/index/addon-mod-lesson-index.html | 2 +- .../lti/components/index/addon-mod-lti-index.html | 2 +- .../page/components/index/addon-mod-page-index.html | 2 +- .../quiz/components/index/addon-mod-quiz-index.html | 2 +- .../components/index/addon-mod-resource-index.html | 2 +- .../components/index/addon-mod-scorm-index.html | 2 +- .../components/index/addon-mod-survey-index.html | 2 +- .../url/components/index/addon-mod-url-index.html | 2 +- .../wiki/components/index/addon-mod-wiki-index.html | 2 +- .../components/index/addon-mod-workshop-index.html | 2 +- src/addons/notes/pages/list/list.html | 2 +- src/core/components/loading/loading.scss | 13 +++++++++++-- src/core/components/loading/loading.ts | 12 ++++++------ .../course-blocks/core-block-course-blocks.html | 2 +- .../pre-rendered-block/core-block-pre-rendered.html | 2 +- .../h5p/components/h5p-iframe/core-h5p-iframe.html | 2 +- .../features/sharedfiles/components/list/list.html | 2 +- .../sharedfiles/services/handlers/upload.ts | 2 +- .../core-siteplugins-plugin-content.html | 2 +- 39 files changed, 56 insertions(+), 47 deletions(-) diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html index df2d9979c..fbd46e52c 100644 --- a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html +++ b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html @@ -3,7 +3,7 @@

{{ 'addon.block_activitymodules.pluginname' | translate }}

- + diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html index c5b90ffd9..405246a1f 100644 --- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html +++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html @@ -36,7 +36,7 @@ - +
diff --git a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html index 0bc7f105f..e5cc1f9e0 100644 --- a/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html +++ b/src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html @@ -20,7 +20,7 @@
- + diff --git a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html index db63e5599..4990142ad 100644 --- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html +++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html @@ -5,7 +5,7 @@ - +
{{ 'addon.block_sitemainmenu.pluginname' | translate }} - + diff --git a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html index afabaf9b9..21147e0c5 100644 --- a/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html +++ b/src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html @@ -20,7 +20,7 @@
- + diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html index bbce37627..fcba46bf8 100644 --- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html +++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html @@ -9,7 +9,7 @@ - +
@@ -35,12 +35,12 @@
- + + [fullscreen]="false" class="safe-area-page"> diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html index 15a9190fb..57360cf57 100644 --- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html +++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html @@ -28,7 +28,7 @@ - + + - + - + - + - + - + - + - + diff --git a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html index 10c2c85ae..bb7453974 100644 --- a/src/addons/mod/forum/components/post-options-menu/post-options-menu.html +++ b/src/addons/mod/forum/components/post-options-menu/post-options-menu.html @@ -1,4 +1,4 @@ - + diff --git a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html index 5f5ddf3c9..8e3bcab19 100644 --- a/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html +++ b/src/addons/mod/glossary/components/index/addon-mod-glossary-index.html @@ -49,7 +49,7 @@ [autoFocus]="true" [lengthCheck]="2" (onClear)="toggleSearch()" searchArea="AddonModGlossary-{{module.id}}"> - + diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html index 55c0b2c4b..f8d5e23ae 100644 --- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html +++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html @@ -30,7 +30,7 @@ - + - + - + diff --git a/src/addons/mod/lti/components/index/addon-mod-lti-index.html b/src/addons/mod/lti/components/index/addon-mod-lti-index.html index ab922bcde..39bfcafab 100644 --- a/src/addons/mod/lti/components/index/addon-mod-lti-index.html +++ b/src/addons/mod/lti/components/index/addon-mod-lti-index.html @@ -17,7 +17,7 @@ - + - + - + - + - + - + - + - + - + - +

{{user!.fullname}}

 diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss index 40ff0d19d..2cb4ac8ea 100644 --- a/src/core/components/loading/loading.scss +++ b/src/core/components/loading/loading.scss @@ -6,7 +6,6 @@ --loading-text-color: var(--ion-text-color); position: static; - @include core-transition(height, 200ms); color: var(--loading-text-color); ion-spinner { @@ -48,7 +47,7 @@ position: unset; } - &.core-loading-center { + &.core-loading-inline { display: block; .core-loading-container { @@ -56,4 +55,14 @@ position: relative; } } + + &.core-loading-loaded.core-loading-inline { + position: relative; + min-height: 102px; + + .core-loading-container { + padding-top: 10px; + position: absolute; + } + } } diff --git a/src/core/components/loading/loading.ts b/src/core/components/loading/loading.ts index 2c0e80675..7b3f0743d 100644 --- a/src/core/components/loading/loading.ts +++ b/src/core/components/loading/loading.ts @@ -49,6 +49,8 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit { @Input() hideUntil: unknown; // Determine when should the contents be shown. @Input() message?: string; // Message to show while loading. + @Input() protected fullscreen = true; // Use the whole screen. + @ViewChild('content') content?: ElementRef; uniqueId: string; @@ -69,6 +71,8 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit { // Default loading message. this.message = Translate.instant('core.loading'); } + + this.element.classList.toggle('core-loading-inline', !this.fullscreen); } /** @@ -78,11 +82,9 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit { // Add class if loaded on init. if (this.hideUntil) { this.element.classList.add('core-loading-loaded'); - this.content?.nativeElement.classList.add('core-loading-content'); - } else { - this.content?.nativeElement.classList.remove('core-loading-content'); - this.content?.nativeElement.classList.add('core-loading-content-loading'); } + + this.content?.nativeElement.classList.toggle('core-loading-content', !!this.hideUntil); } /** @@ -99,12 +101,10 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit { // Change CSS to force calculate height. // Removed 500ms timeout to avoid reallocating html. this.content?.nativeElement.classList.add('core-loading-content'); - this.content?.nativeElement.classList.remove('core-loading-content-loading'); }); } else { this.element.classList.remove('core-loading-loaded'); this.content?.nativeElement.classList.remove('core-loading-content'); - this.content?.nativeElement.classList.add('core-loading-content-loading'); } // Trigger the event after a timeout since the elements inside ngIf haven't been added to DOM yet. diff --git a/src/core/features/block/components/course-blocks/core-block-course-blocks.html b/src/core/features/block/components/course-blocks/core-block-course-blocks.html index 3eaacf421..120e60749 100644 --- a/src/core/features/block/components/course-blocks/core-block-course-blocks.html +++ b/src/core/features/block/components/course-blocks/core-block-course-blocks.html @@ -3,7 +3,7 @@
- + diff --git a/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html b/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html index c0c1ed41e..46b579a07 100644 --- a/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html +++ b/src/core/features/block/components/pre-rendered-block/core-block-pre-rendered.html @@ -7,7 +7,7 @@ - + + diff --git a/src/core/features/sharedfiles/components/list/list.html b/src/core/features/sharedfiles/components/list/list.html index 558525bdb..f41a0080a 100644 --- a/src/core/features/sharedfiles/components/list/list.html +++ b/src/core/features/sharedfiles/components/list/list.html @@ -6,7 +6,7 @@ - + + From 3fe165488f7739a9057fffe9feade5c5f892d454 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 28 May 2021 16:30:09 +0200 Subject: [PATCH 5/6] MOBILE-3320 style: Show mathjax inline on module titles --- src/theme/theme.base.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index fbf74fb8f..37cec8344 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -104,6 +104,10 @@ ion-header h2 { white-space: nowrap; overflow: hidden; pointer-events: auto; + + .filter_mathjaxloader_equation div { + display: inline !important; + } } ion-app.md ion-header h1, @@ -477,7 +481,7 @@ ion-card ion-item img.core-module-icon[slot="start"] { margin-left: 32px; } -.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation * { +.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div { display: inline !important; } From c589069e578a5d5f9678d8dcb34d833c81de5559 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 28 May 2021 16:37:33 +0200 Subject: [PATCH 6/6] MOBILE-3320 a11y: Remove opacity to select icon on dropdowns --- src/core/components/combobox/combobox.scss | 2 +- src/theme/theme.base.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index cffe1c11a..2d81ae419 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -52,6 +52,7 @@ ion-button { ion-select { &::part(icon) { margin: var(--icon-margin); + opacity: 1; } &::after { @@ -115,7 +116,6 @@ ion-button { width: 19px; height: 19px; position: relative; - opacity: 0.33; .select-icon-inner { left: 5px; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 37cec8344..a01a65d6b 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -518,6 +518,10 @@ ion-select::part(text) { white-space: normal; } +ion-select::part(icon) { + opacity: 1; +} + ion-searchbar { .searchbar-search-icon.ios { top: 4px;