EVOgeek
/
Vmeda.Online
1
0
Fork 1
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 -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -15,10 +15,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()">
</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"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text>
</ion-label>
</ion-item>
</ion-list>
</div>

45
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.
:host {
--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;
.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;

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 -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -14,9 +14,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()">
</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"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text>
</ion-label>
</ion-item>
</ion-list>
</div>

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

@ -1,5 +1,4 @@
// 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.
}
@ -19,7 +18,7 @@
}
div.droparea img {
border: 1px solid var(--gray-darker);
border: 1px solid var(--core-dd-question-border);
max-width: 100%;
}
@ -109,8 +108,8 @@
div.markertexts span.markertext {
margin: 0 5px;
z-index: 2;
background-color: var(--white);
border: 2px solid var(--gray-darker);
background-color: var(--ion-item-background);
border: 2px solid var(--core-dd-question-border);
padding: 5px;
display: inline-block;
zoom: 1;
@ -124,6 +123,7 @@
border-width: 2px;
border-color: var(--yellow);
position: absolute;
color: var(--black);
}
span.wrongpart {
background-color: var(--yellow-light);
@ -135,6 +135,7 @@
opacity: 0.6;
margin: 5px;
display: inline-block;
color: var(--black);
}
div.dragitems img.target,
div.draghomes img.target {
@ -147,4 +148,3 @@
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 -->
<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-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
<ion-item>
@ -14,10 +14,12 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
(afterRender)="textRendered()">
</core-format-text>
<core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
[text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
</core-format-text>
<div class="drags"></div>
</ion-label>
</ion-item>
</ion-list>
</div>

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

@ -1,7 +1,6 @@
@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.
}
@ -24,7 +23,7 @@
.drop {
display: inline-block;
text-align: center;
border: 1px solid var(--gray-darker);
border: 1px solid var(--core-dd-question-border);
margin-bottom: 2px;
border-radius: 5px;
cursor: pointer;
@ -39,7 +38,7 @@
word-wrap: break-word;
}
.draghome, .drag.unplaced{
border: 1px solid var(--gray-darker);
border: 1px solid var(--core-dd-question-border);
}
.draghome {
visibility: hidden;
@ -50,16 +49,12 @@
line-height: 25px;
cursor: pointer;
}
.drag.selected {
.drag.selected,
.drop.selected {
z-index: 3;
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 .draghome,
&.notreadonly .drop,
@ -85,30 +80,30 @@
@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);
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);
}
sub, sup {
@ -123,4 +118,3 @@
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-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

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

@ -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};

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

@ -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};