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

MOBILE-3320 quiz: Improve drag and drop question styles

main
Pau Ferrer Ocaña 2021-05-28 14:15:42 +02:00
parent f55d59c1c2
commit 0e70d9e353
9 changed files with 289 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
View File

@ -1,4 +1,4 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container"> <div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
<!-- Content is outside the core-loading to let the script calculate drag items position --> <!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading> <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -15,10 +15,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()"> (afterRender)="textRendered()">
</core-format-text> </core-format-text>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label>
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" <core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()"> [text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </div>

55
src/addons/qtype/ddimageortext/component/ddimageortext.scss
View File

@ -2,18 +2,29 @@
// Style ddimageortext content a bit. Almost all these styles are copied from Moodle. // Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
:host { :host {
.addon-qtype-ddimageortext-container { --ddimageortext-border-drop: var(--gray-darker);
min-height: 80px; // To display the loading. --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 { .qtext {
margin-bottom: 0.5em; margin-bottom: 0.5em;
display: block; display: block;
} }
div.droparea img { div.droparea img {
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
max-width: 100%; max-width: 100%;
} }
@ -27,9 +38,9 @@
} }
div.draghome { div.draghome {
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
cursor: pointer; cursor: pointer;
background-color: #B0C4DE; background-color: var(--ddimageortext-draghome-background);
display: inline-block; display: inline-block;
height: auto; height: auto;
width: auto; width: auto;
@ -39,37 +50,40 @@
@for $i from 0 to length($core-dd-question-colors) { @for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} { .group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1); background: nth($core-dd-question-colors, $i + 1);
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
} }
} }
.group2 { .group2 {
border-radius: 10px 0 0 0; border-radius: var(--core-dd-question-radius) 0 0 0;
} }
.group3 { .group3 {
border-radius: 0 10px 0 0; border-radius: 0 var(--core-dd-question-radius) 0 0;
} }
.group4 { .group4 {
border-radius: 0 0 10px 0; border-radius: 0 0 var(--core-dd-question-radius) 0;
} }
.group5 { .group5 {
border-radius: 0 0 0 10px; border-radius: 0 0 0 var(--core-dd-question-radius);
} }
.group6 { .group6 {
border-radius: 0 10px 10px 0; border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
} }
.group7 { .group7 {
border-radius: 10px 0 0 10px; border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
} }
.group8 { .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 { .drag {
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
color: var(--ion-text-color);
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
} }
.drag.placed {
border: 1px solid var(--ddimageortext-border-drop);
}
.dragitems.readonly .drag { .dragitems.readonly .drag {
cursor: auto; cursor: auto;
} }
@ -85,16 +99,11 @@
.drag img { .drag img {
display: block; display: block;
} }
div.ddarea {
text-align : center;
position: relative;
}
.dropbackground { .dropbackground {
margin:0 auto; margin:0 auto;
} }
.dropzone { .dropzone {
border: 1px solid var(--gray-darker); border: 1px solid var(--ddimageortext-border-drop);
position: absolute; position: absolute;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
@ -104,7 +113,7 @@
} }
div.dragitems div.draghome, div.dragitems div.drag { 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 { .drag.beingdragged {
z-index: 3; z-index: 3;

8
src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
View File

@ -1,4 +1,4 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container"> <div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
<!-- Content is outside the core-loading to let the script calculate drag items position --> <!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading> <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -14,9 +14,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()"> (afterRender)="textRendered()">
</core-format-text> </core-format-text>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label>
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" <core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()"> [text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </div>

18
src/addons/qtype/ddmarker/component/ddmarker.scss
View File

@ -1,10 +1,9 @@
// Style ddmarker content a bit. Almost all these styles are copied from Moodle. // Style ddmarker content a bit. Almost all these styles are copied from Moodle.
:host { .addon-qtype-ddmarker-container {
.addon-qtype-ddmarker-container {
min-height: 80px; // To display the loading. min-height: 80px; // To display the loading.
} }
core-format-text ::ng-deep { core-format-text ::ng-deep {
.ddarea, .ddform { .ddarea, .ddform {
user-select: none; user-select: none;
} }
@ -19,7 +18,7 @@
} }
div.droparea img { div.droparea img {
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
max-width: 100%; max-width: 100%;
} }
@ -102,15 +101,15 @@
div.draghomes div.marker, div.draghomes div.marker,
div.marker, div.marker,
div.drag { div.drag {
font: 13px/1.231 arial,helvetica,clean,sans-serif; font: 13px/1.231 arial, helvetica, clean, sans-serif;
} }
div.dragitems span.markertext, div.dragitems span.markertext,
div.draghomes span.markertext, div.draghomes span.markertext,
div.markertexts span.markertext { div.markertexts span.markertext {
margin: 0 5px; margin: 0 5px;
z-index: 2; z-index: 2;
background-color: var(--white); background-color: var(--ion-item-background);
border: 2px solid var(--gray-darker); border: 2px solid var(--core-dd-question-border);
padding: 5px; padding: 5px;
display: inline-block; display: inline-block;
zoom: 1; zoom: 1;
@ -124,6 +123,7 @@
border-width: 2px; border-width: 2px;
border-color: var(--yellow); border-color: var(--yellow);
position: absolute; position: absolute;
color: var(--black);
} }
span.wrongpart { span.wrongpart {
background-color: var(--yellow-light); background-color: var(--yellow-light);
@ -135,6 +135,7 @@
opacity: 0.6; opacity: 0.6;
margin: 5px; margin: 5px;
display: inline-block; display: inline-block;
color: var(--black);
} }
div.dragitems img.target, div.dragitems img.target,
div.draghomes img.target { div.draghomes img.target {
@ -146,5 +147,4 @@
div.draghomes div.marker img.target { div.draghomes div.marker img.target {
display: none; display: none;
} }
}
} }

8
src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
View File

@ -1,8 +1,8 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container"> <div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
<!-- Content is outside the core-loading to let the script calculate drag items position --> <!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading> <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
<ion-item class="ion-text-wrap addon-qtype-ddwtos-container" [hidden]="!ddQuestion.loaded"> <ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label> <ion-label>
<ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card"> <ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
<ion-item> <ion-item>
@ -14,10 +14,12 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
(afterRender)="textRendered()"> (afterRender)="textRendered()">
</core-format-text> </core-format-text>
<core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId" <core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
[text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()"> [text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
</core-format-text> </core-format-text>
<div class="drags"></div> <div class="drags"></div>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </div>

36
src/addons/qtype/ddwtos/component/ddwtos.scss
View File

@ -1,12 +1,11 @@
@import "~core/features/question/question"; @import "~core/features/question/question";
// Style ddwtos content a bit. Almost all these styles are copied from Moodle. // Style ddwtos content a bit. Almost all these styles are copied from Moodle.
:host { .addon-qtype-ddwtos-container {
.addon-qtype-ddwtos-container {
min-height: 80px; // To display the loading. min-height: 80px; // To display the loading.
} }
core-format-text ::ng-deep, .drags ::ng-deep { core-format-text ::ng-deep, .drags ::ng-deep {
.qtext { .qtext {
margin-bottom: 0.5em; margin-bottom: 0.5em;
display: block; display: block;
@ -24,7 +23,7 @@
.drop { .drop {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
margin-bottom: 2px; margin-bottom: 2px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
@ -39,7 +38,7 @@
word-wrap: break-word; word-wrap: break-word;
} }
.draghome, .drag.unplaced{ .draghome, .drag.unplaced{
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
} }
.draghome { .draghome {
visibility: hidden; visibility: hidden;
@ -50,16 +49,12 @@
line-height: 25px; line-height: 25px;
cursor: pointer; cursor: pointer;
} }
.drag.selected { .drag.selected,
.drop.selected {
z-index: 3; z-index: 3;
box-shadow: var(--core-dd-question-selected-shadow); box-shadow: var(--core-dd-question-selected-shadow);
} }
.drop.selected {
border-color: var(--yellow-light);
box-shadow: 0 0 5px 5px var(--yellow-light);
}
&.notreadonly .drag, &.notreadonly .drag,
&.notreadonly .draghome, &.notreadonly .draghome,
&.notreadonly .drop, &.notreadonly .drop,
@ -85,30 +80,30 @@
@for $i from 0 to length($core-dd-question-colors) { @for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} { .group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1); background: nth($core-dd-question-colors, $i + 1);
color: var(--ion-text-color); color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
} }
} }
.group2 { .group2 {
border-radius: 10px 0 0 0; border-radius: var(--core-dd-question-radius) 0 0 0;
} }
.group3 { .group3 {
border-radius: 0 10px 0 0; border-radius: 0 var(--core-dd-question-radius) 0 0;
} }
.group4 { .group4 {
border-radius: 0 0 10px 0; border-radius: 0 0 var(--core-dd-question-radius) 0;
} }
.group5 { .group5 {
border-radius: 0 0 0 10px; border-radius: 0 0 0 var(--core-dd-question-radius);
} }
.group6 { .group6 {
border-radius: 0 10px 10px 0; border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
} }
.group7 { .group7 {
border-radius: 10px 0 0 10px; border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
} }
.group8 { .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);
} }
sub, sup { sub, sup {
@ -122,5 +117,4 @@
sub { sub {
bottom: -0.2em; bottom: -0.2em;
} }
}
} }

2
src/theme/globals.variables.scss
View File

@ -237,7 +237,7 @@ $colors-dark: (
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default; $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 * Layout Breakpoints

1
src/theme/theme.dark.scss
View File

@ -117,6 +117,7 @@
--core-question-feedback-background-color: var(--yellow-dark); --core-question-feedback-background-color: var(--yellow-dark);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); --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-bg: #{$addon-messages-message-bg-dark};
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark}; --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark};

2
src/theme/theme.light.scss
View File

@ -275,6 +275,8 @@
--core-question-feedback-background-color: var(--yellow-light); --core-question-feedback-background-color: var(--yellow-light);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark); --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) { @if ($core-more-icon) {
--core-more-icon: #{$core-more-icon}; --core-more-icon: #{$core-more-icon};