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

Merge pull request #1677 from crazyserver/MOBILE-2577-2 

MOBILE-2577 quiz: Text wrap drag items
main
Juan Leyva 2018-12-19 10:36:40 +01:00 committed by GitHub
parent 0297c0fe25 d5ccef397d
commit 0cb327b1c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addon/qtype/ddwtos/classes/ddwtos.ts
View File

@ -14,6 +14,7 @@
import { CoreLoggerProvider } from '@providers/logger';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreTextUtilsProvider } from '@providers/utils/text';
/**
* Set of functions to get the CSS selectors.
@ -59,7 +60,8 @@ export class AddonQtypeDdwtosQuestion {
* @param {string[]} inputIds Ids of the inputs of the question (where the answers will be stored).
*/
constructor(logger: CoreLoggerProvider, protected domUtils: CoreDomUtilsProvider, protected container: HTMLElement,
protected question: any, protected readOnly: boolean, protected inputIds: string[]) {
protected question: any, protected readOnly: boolean, protected inputIds: string[],
protected textUtils: CoreTextUtilsProvider) {
this.logger = logger.getInstance('AddonQtypeDdwtosQuestion');
this.initializer(question);
@ -406,7 +408,7 @@ export class AddonQtypeDdwtosQuestion {
protected padToWidthHeight(node: HTMLElement, width: number, height: number): void {
node.style.width = width + 'px';
node.style.height = height + 'px';
node.style.lineHeight = height + 'px';
// Originally lineHeight was set as height to center the text but it comes on too height lines on multiline elements.
}
/**
@ -528,6 +530,7 @@ export class AddonQtypeDdwtosQuestion {
// Find max height and width.
groupItems.forEach((item) => {
item.innerHTML = this.textUtils.decodeHTML(item.innerHTML);
maxWidth = Math.max(maxWidth, Math.ceil(item.offsetWidth));
maxHeight = Math.max(maxHeight, Math.ceil(item.offsetHeight));
});

16
src/addon/qtype/ddwtos/component/ddwtos.scss
View File

@ -7,6 +7,7 @@ addon-qtype-ddwtos {
.draghome {
margin-bottom: 1em;
max-width: calc(100%);
}
.answertext {
@ -25,6 +26,9 @@ addon-qtype-ddwtos {
text-align: center;
background: transparent;
border: 0;
white-space: normal;
overflow: visible;
word-wrap: break-word;
}
.draghome, .drag.unplaced{
border: 1px solid $gray-darker;
@ -106,3 +110,15 @@ addon-qtype-ddwtos {
bottom: -0.2em;
}
}
addon-qtype-ddwtos .item-md .draghome {
max-width: calc(100% - #{($item-md-padding-start)});
}
addon-qtype-ddwtos .item-ios .draghome {
max-width: calc(100% - #{($item-ios-padding-start)});
}
addon-qtype-ddwtos .item-wp .draghome {
max-width: calc(100% - #{($item-wp-padding-start)});
}

2
src/addon/qtype/ddwtos/component/ddwtos.ts
View File

@ -93,7 +93,7 @@ export class AddonQtypeDdwtosComponent extends CoreQuestionBaseComponent impleme
this.domUtils.waitForImages(this.questionTextEl.nativeElement).then(() => {
// Create the instance.
this.questionInstance = new AddonQtypeDdwtosQuestion(this.loggerProvider, this.domUtils, this.element,
this.question, this.question.readOnly, this.inputIds);
this.question, this.question.readOnly, this.inputIds, this.textUtils);
this.questionHelper.treatCorrectnessIconsClicks(this.element, this.component, this.componentId);