Skip to content

X
xblock-drag-and-drop-v2
Commit 7b02d59b by Chandrakant Gopalan Committed by Matjaz Gregoric
Options

Adjust feedback popup styles for mobile

parent 86e70248
Showing with 150 additions and 24 deletions
drag_and_drop_v2/public/css/drag_and_drop.css
......@@ -112,6 +112,19 @@
z-index: 10 !important;
}
@media screen and (max-width: 480px) {
/* Horizontal scroll for item bank on mobile */
.xblock--drag-and-drop .item-bank {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
overflow-x: auto;
}
.xblock--drag-and-drop .drag-container .item-bank .option {
flex-shrink: 0;
}
}
.xblock--drag-and-drop .drag-container .option.specified-width img {
width: 100%; /* If the image is smaller than the specified width, make it larger */
}
......@@ -405,7 +418,7 @@
max-width: 100%;
}
.xblock--drag-and-drop .popup .close-feedback-popup-button {
.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
cursor: pointer;
margin-top: 8px;
color: #ffffff;
......@@ -413,22 +426,110 @@
font-size: 18pt;
}
.ltr .xblock--drag-and-drop .popup .close-feedback-popup-button {
.xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
display: none;
}
.xblock--drag-and-drop .popup .popup-header-icon {
display: none;
}
.xblock--drag-and-drop .popup .popup-header-text {
display: none;
}
.xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
color: #ff143e;
}
.ltr .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
float: right;
margin-right: 8px;
margin-left: 20px;
}
.rtl .xblock--drag-and-drop .popup .close-feedback-popup-button {
.rtl .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
float: left;
margin-right: 20px;
margin-left: 8px;
}
.xblock--drag-and-drop .popup .close-feedback-popup-button:focus {
.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button:focus {
outline: 2px dotted white;
}
@media screen and (max-width: 480px) {
.xblock--drag-and-drop .popup .popup-content p {
text-align: center;
}
.xblock--drag-and-drop .popup {
background-color: #fff;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 100px rgba(0,0,0,0.4);
border: none;
max-height: 90vh;
}
.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
display: none;
}
.xblock--drag-and-drop .popup.popup-incorrect {
background-color: #fff;
}
.xblock--drag-and-drop .popup .popup-header-icon {
display: inline-block;
margin-top: 10px;
color: #629a2c;
font-size: 20pt;
}
.xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
color: #ff143e;
}
.xblock--drag-and-drop .popup .popup-header-text {
display: block;
padding: 2px 0 8px;
font-weight: 600;
}
.xblock--drag-and-drop .popup .popup-content {
color: #629a2c;
margin: 10px 0px 0px 0px;
font-size: 14px;
background-color: #f4ffe7;
padding: 20px;
border-color: #eee;
border-style: solid;
border-width: 1px 0 1px 0;
}
.xblock--drag-and-drop .popup .popup-content ul {
list-style-position: inside;
padding: 0;
}
.xblock--drag-and-drop .popup .popup-content.popup-content-incorrect {
color: #ff143e;
background-color: #ffe8ec;
}
.xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
display: inline;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
color: #3384ca;
font-size: 12pt;
padding: 10px;
}
}
/*** edX pattern library components ***/
/* reset stock edx-platform button styles */
......@@ -586,19 +687,6 @@
}
}
@media screen and (max-width: 480px) {
/* Horizontal scroll for item bank on mobile */
.xblock--drag-and-drop .drag-container .item-bank .option {
flex-shrink: 0;
}
.xblock--drag-and-drop .item-bank {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
overflow-x: auto;
}
}
.xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
border-collapse: collapse;
padding: 0 5px;
......
drag_and_drop_v2/public/js/drag_and_drop.js
......@@ -427,11 +427,19 @@ function DragAndDropTemplates(configuration) {
return h("li", {innerHTML: message.message});
}))
];
popup_content = h("div.popup-content", {}, have_messages ? content_items : []);
popup_content = h(
ctx.last_action_correct ? "div.popup-content" : "div.popup-content.popup-content-incorrect",
{},
have_messages ? content_items : []
);
} else {
popup_content = h("div.popup-content", {}, msgs.map(function(message) {
return h("p", {innerHTML: message.message});
}))
popup_content = h(
ctx.last_action_correct ? "div.popup-content" : "div.popup-content.popup-content-incorrect",
{},
msgs.map(function(message) {
return h("p", {innerHTML: message.message});
})
);
}
return h(
......@@ -441,7 +449,7 @@ function DragAndDropTemplates(configuration) {
},
[
h(
'button.unbutton.close-feedback-popup-button',
'button.unbutton.close-feedback-popup-button.close-feedback-popup-desktop-button',
{},
[
h(
......@@ -460,7 +468,37 @@ function DragAndDropTemplates(configuration) {
)
]
),
popup_content
h(
ctx.last_action_correct ? 'div.popup-header-icon' : 'div.popup-header-icon.popup-header-icon-incorrect',
{},
[
h(
ctx.last_action_correct ? 'span.icon.fa.fa-check-circle' : 'span.icon.fa.fa-exclamation-circle',
{
attributes: {
'aria-hidden': true
}
}
)
]
),
h(
'div.popup-header-text',
{},
ctx.last_action_correct ? gettext("Correct") : gettext("Incorrect")
),
popup_content,
h(
'button.unbutton.close-feedback-popup-button.close-feedback-popup-mobile-button',
{},
[
h(
'span',
{},
gettext("Close")
)
]
)
]
)
};
......@@ -1092,7 +1130,7 @@ function DragAndDropBlock(runtime, element, configuration) {
var focusItemFeedbackPopup = function() {
var popup = $root.find('.item-feedback-popup');
if (popup.length && popup.is(":visible")) {
popup.find('.close-feedback-popup-button').focus();
popup.find('.close-feedback-popup-button:visible').focus();
return true;
}
return false;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment