+
-
+
@@ -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/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/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/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/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index 8bc9d4b3e..b20e3c3c4 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -3,7 +3,8 @@
--tabs-color: var(--core-tab-color);
--height: 56px;
height: 100%;
- display: block;
+ display: flex;
+ flex-direction: column;
ion-tabs {
background: transparent;
@@ -82,7 +83,7 @@
z-index: 1;
&.selected {
- display: block;
+ display: contents;
}
ion-header {
@@ -95,6 +96,11 @@
}
}
}
+
+ div.core-tabs-content-container {
+ flex-grow: 1;
+ position: relative;
+ }
}
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 @@
-
+
+
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 361dbc538..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
@@ -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;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index fbf74fb8f..a01a65d6b 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;
}
@@ -514,6 +518,10 @@ ion-select::part(text) {
white-space: normal;
}
+ion-select::part(icon) {
+ opacity: 1;
+}
+
ion-searchbar {
.searchbar-search-icon.ios {
top: 4px;
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};