Skip to content

Commit dac6ba4

Browse files
mtyakamtyaka
authored
Merge pull request #132 from open-craft/cgopalan/adjust-feedback-popup-styles
[MCKIN-5772] Adjust feedback popup styles
2 parents 86e7024 + 969d544 commit dac6ba4

File tree

5 files changed

+158
-26
lines changed

5 files changed

+158
-26
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ install:
1212
- "pip install selenium==2.53.0"
1313
- "pip uninstall -y xblock-drag-and-drop-v2"
1414
- "python setup.py sdist"
15-
- "pip install dist/xblock-drag-and-drop-v2-2.0.18.tar.gz"
15+
- "pip install dist/xblock-drag-and-drop-v2-2.1.1.tar.gz"
1616
script:
1717
- pep8 drag_and_drop_v2 tests --max-line-length=120
1818
- pylint drag_and_drop_v2

‎Changelog.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
Version 2.1.1 (2017-09-26)
2+
---------------------------
3+
4+
* Enforce XBlock variable types (PR #104)
5+
* Improvements for mobile (PRs #132, #133, #134)
6+
17
Version 2.0.14 (2017-01-17)
28
---------------------------
39

‎drag_and_drop_v2/public/css/drag_and_drop.css

Lines changed: 105 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,19 @@
112112
z-index: 10 !important;
113113
}
114114

115+
@media screen and (max-width: 480px) {
116+
/* Horizontal scroll for item bank on mobile */
117+
.xblock--drag-and-drop .item-bank {
118+
-ms-flex-flow: row nowrap;
119+
flex-flow: row nowrap;
120+
overflow-x: auto;
121+
}
122+
123+
.xblock--drag-and-drop .drag-container .item-bank .option {
124+
flex-shrink: 0;
125+
}
126+
}
127+
115128
.xblock--drag-and-drop .drag-container .option.specified-width img {
116129
width: 100%; /* If the image is smaller than the specified width, make it larger */
117130
}
@@ -405,30 +418,118 @@
405418
max-width: 100%;
406419
}
407420

408-
.xblock--drag-and-drop .popup .close-feedback-popup-button {
421+
.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
409422
cursor: pointer;
410423
margin-top: 8px;
411424
color: #ffffff;
412425
font-family: "fontawesome";
413426
font-size: 18pt;
414427
}
415428

416-
.ltr .xblock--drag-and-drop .popup .close-feedback-popup-button {
429+
.xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
430+
display: none;
431+
}
432+
433+
.xblock--drag-and-drop .popup .popup-header-icon {
434+
display: none;
435+
}
436+
437+
.xblock--drag-and-drop .popup .popup-header-text {
438+
display: none;
439+
}
440+
441+
.xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
442+
color: #ff143e;
443+
}
444+
445+
.ltr .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
417446
float: right;
418447
margin-right: 8px;
419448
margin-left: 20px;
420449
}
421450

422-
.rtl .xblock--drag-and-drop .popup .close-feedback-popup-button {
451+
.rtl .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
423452
float: left;
424453
margin-right: 20px;
425454
margin-left: 8px;
426455
}
427456

428-
.xblock--drag-and-drop .popup .close-feedback-popup-button:focus {
457+
.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button:focus {
429458
outline: 2px dotted white;
430459
}
431460

461+
@media screen and (max-width: 480px) {
462+
.xblock--drag-and-drop .popup .popup-content p {
463+
text-align: center;
464+
}
465+
466+
.xblock--drag-and-drop .popup {
467+
background-color: #fff;
468+
border-radius: 10px;
469+
text-align: center;
470+
box-shadow: 0 0 100px rgba(0,0,0,0.4);
471+
border: none;
472+
max-height: 90vh;
473+
}
474+
475+
.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
476+
display: none;
477+
}
478+
479+
.xblock--drag-and-drop .popup.popup-incorrect {
480+
background-color: #fff;
481+
}
482+
483+
.xblock--drag-and-drop .popup .popup-header-icon {
484+
display: inline-block;
485+
margin-top: 10px;
486+
color: #629a2c;
487+
font-size: 20pt;
488+
}
489+
490+
.xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
491+
color: #ff143e;
492+
}
493+
494+
.xblock--drag-and-drop .popup .popup-header-text {
495+
display: block;
496+
padding: 2px 0 8px;
497+
font-weight: 600;
498+
}
499+
500+
.xblock--drag-and-drop .popup .popup-content {
501+
color: #629a2c;
502+
margin: 10px 0px 0px 0px;
503+
font-size: 14px;
504+
background-color: #f4ffe7;
505+
padding: 20px;
506+
border-color: #eee;
507+
border-style: solid;
508+
border-width: 1px 0 1px 0;
509+
}
510+
511+
.xblock--drag-and-drop .popup .popup-content ul {
512+
list-style-position: inside;
513+
padding: 0;
514+
}
515+
516+
.xblock--drag-and-drop .popup .popup-content.popup-content-incorrect {
517+
color: #ff143e;
518+
background-color: #ffe8ec;
519+
}
520+
521+
.xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
522+
display: inline;
523+
cursor: pointer;
524+
margin-top: 10px;
525+
margin-bottom: 10px;
526+
color: #3384ca;
527+
font-size: 12pt;
528+
padding: 10px;
529+
}
530+
}
531+
532+
432533
/*** edX pattern library components ***/
433534

434535
/* reset stock edx-platform button styles */
@@ -586,19 +687,6 @@
586687
}
587688
}
588689

589-
@media screen and (max-width: 480px) {
590-
/* Horizontal scroll for item bank on mobile */
591-
.xblock--drag-and-drop .drag-container .item-bank .option {
592-
flex-shrink: 0;
593-
}
594-
595-
.xblock--drag-and-drop .item-bank {
596-
-ms-flex-flow: row nowrap;
597-
flex-flow: row nowrap;
598-
overflow-x: auto;
599-
}
600-
}
601-
602690
.xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
603691
border-collapse: collapse;
604692
padding: 0 5px;

‎drag_and_drop_v2/public/js/drag_and_drop.js

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -427,11 +427,19 @@ function DragAndDropTemplates(configuration) {
427427
return h("li", {innerHTML: message.message});
428428
}))
429429
];
430-
popup_content = h("div.popup-content", {}, have_messages ? content_items : []);
430+
popup_content = h(
431+
ctx.last_action_correct ? "div.popup-content" : "div.popup-content.popup-content-incorrect",
432+
{},
433+
have_messages ? content_items : []
434+
);
431435
} else {
432-
popup_content = h("div.popup-content", {}, msgs.map(function(message) {
433-
return h("p", {innerHTML: message.message});
434-
}))
436+
popup_content = h(
437+
ctx.last_action_correct ? "div.popup-content" : "div.popup-content.popup-content-incorrect",
438+
{},
439+
msgs.map(function(message) {
440+
return h("p", {innerHTML: message.message});
441+
})
442+
);
435443
}
436444

437445
return h(
@@ -441,7 +449,7 @@ function DragAndDropTemplates(configuration) {
441449
},
442450
[
443451
h(
444-
'button.unbutton.close-feedback-popup-button',
452+
'button.unbutton.close-feedback-popup-button.close-feedback-popup-desktop-button',
445453
{},
446454
[
447455
h(
@@ -460,7 +468,37 @@ function DragAndDropTemplates(configuration) {
460468
)
461469
]
462470
),
463-
popup_content
471+
h(
472+
ctx.last_action_correct ? 'div.popup-header-icon' : 'div.popup-header-icon.popup-header-icon-incorrect',
473+
{},
474+
[
475+
h(
476+
ctx.last_action_correct ? 'span.icon.fa.fa-check-circle' : 'span.icon.fa.fa-exclamation-circle',
477+
{
478+
attributes: {
479+
'aria-hidden': true
480+
}
481+
}
482+
)
483+
]
484+
),
485+
h(
486+
'div.popup-header-text',
487+
{},
488+
ctx.last_action_correct ? gettext("Correct") : gettext("Incorrect")
489+
),
490+
popup_content,
491+
h(
492+
'button.unbutton.close-feedback-popup-button.close-feedback-popup-mobile-button',
493+
{},
494+
[
495+
h(
496+
'span',
497+
{},
498+
gettext("Close")
499+
)
500+
]
501+
)
464502
]
465503
)
466504
};
@@ -1092,7 +1130,7 @@ function DragAndDropBlock(runtime, element, configuration) {
10921130
var focusItemFeedbackPopup = function() {
10931131
var popup = $root.find('.item-feedback-popup');
10941132
if (popup.length && popup.is(":visible")) {
1095-
popup.find('.close-feedback-popup-button').focus();
1133+
popup.find('.close-feedback-popup-button:visible').focus();
10961134
return true;
10971135
}
10981136
return false;

‎setup.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ def package_data(pkg, root_list):
2323

2424
setup(
2525
name='xblock-drag-and-drop-v2',
26-
version='2.0.18',
26+
version='2.1.1',
2727
description='XBlock - Drag-and-Drop v2',
2828
packages=['drag_and_drop_v2'],
2929
install_requires=[

0 commit comments

Comments
 (0)