Skip to content
Snippets Groups Projects
Commit 4e41bb97 authored by Douglas Hall's avatar Douglas Hall
Browse files

Change modal height and width configuration options to be viewport percentage based

parent dbb8e475
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lti_consumer/lti_consumer.py
+ 20
− 5
View file @ 4e41bb97
......@@ -339,21 +339,21 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
modal_height = Integer(
display_name="Modal Height",
help=(
"Enter the desired pixel height of the modal overlay which will contain the LTI tool. "
"Enter the desired viewport percentage height of the modal overlay which will contain the LTI tool. "
"This setting is only used when Hide External Tool is set to False and "
"LTI Launch Target is set to Modal."
),
default=405,
default=80,
scope=Scope.settings
)
modal_width = Integer(
display_name="Modal Width",
help=(
"Enter the desired pixel width of the modal overlay which will contain the LTI tool. "
"Enter the desired viewport percentage width of the modal overlay which will contain the LTI tool. "
"This setting is only used when Hide External Tool is set to False and "
"LTI Launch Target is set to Modal."
),
default=720,
default=80,
scope=Scope.settings
)
has_score = Boolean(
......@@ -834,7 +834,22 @@ class LtiConsumerXBlock(StudioEditableXBlockMixin, XBlock):
'ask_to_send_email': self.ask_to_send_email,
'button_text': self.button_text,
'inline_height': self.inline_height,
'modal_height': self.modal_height,
'modal_vertical_offset': self._get_modal_position_offset(self.modal_height),
'modal_horizontal_offset': self._get_modal_position_offset(self.modal_width),
'modal_width': self.modal_width,
'accept_grades_past_due': self.accept_grades_past_due,
}
def _get_modal_position_offset(self, viewport_percentage):
"""
Returns the css position offset to apply to the modal window
element when launch_target is modal. This enables us to position
the modal window as a percentage of the viewport dimensions.
Arguments:
viewport_percentage (int): The percentage of the viewport that the modal should occupy
Returns:
float: The css position offset to apply to the modal window
"""
return (100 - viewport_percentage) / 2
lti_consumer/static/css/student.css
+ 1
− 1
View file @ 4e41bb97
.xblock-student_view.xblock-student_view-lti_consumer h2.problem-header{display:inline-block}.xblock-student_view.xblock-student_view-lti_consumer div.problem-progress{display:inline-block;padding-left:5px;color:#666;font-weight:100;font-size:1em}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer{margin:0 auto}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link{font-size:14px;background-color:#f6f6f6;padding:20px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link{margin-bottom:0;text-align:right}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link button{font-size:13px;line-height:20.72px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal{top:80px !important}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .inner-wrapper{height:100%;padding:0 0 0 0}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer form.ltiLaunchForm{display:none}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer iframe.ltiLaunchFrame{width:100%;height:100%;display:block;border:0px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer h4.problem-feedback-label{font-weight:100;font-size:1em;font-family:"Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer div.problem-feedback{margin-top:5px;margin-bottom:5px}.lean-overlay{background:transparent;background-image:radial-gradient(circle at 50% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.6));display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:100}
.xblock-student_view.xblock-student_view-lti_consumer h2.problem-header{display:inline-block}.xblock-student_view.xblock-student_view-lti_consumer div.problem-progress{display:inline-block;padding-left:5px;color:#666;font-weight:100;font-size:1em}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer{margin:0 auto}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link{font-size:14px;background-color:#f6f6f6;padding:20px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link{margin-bottom:0;text-align:right}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link button{font-size:13px;line-height:20.72px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal{position:fixed;opacity:0;z-index:11000;box-sizing:border-box;margin-left:0;height:auto;padding:8px;border-radius:3px;box-shadow:0 0 5px 0 rgba(0,0,0,0.4);background:#464646;color:#3c3c3c}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .close-modal{display:inline-block;position:absolute;right:2px;top:0px;z-index:100;cursor:pointer;padding:10px;background:transparent;border:none;text-align:center}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .close-modal .fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .lti-modal .inner-wrapper{height:100%;padding:0 0 0 0}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer form.ltiLaunchForm{display:none}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer iframe.ltiLaunchFrame{width:100%;height:100%;display:block;border:0px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer h4.problem-feedback-label{font-weight:100;font-size:1em;font-family:"Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer div.problem-feedback{margin-top:5px;margin-bottom:5px}.lean-overlay{background:transparent;background-image:radial-gradient(circle at 50% 30%, rgba(0,0,0,0.4), rgba(0,0,0,0.6));display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:100}
lti_consumer/static/js/xblock_lti_consumer.js
+ 3
− 7
View file @ 4e41bb97
......@@ -27,16 +27,11 @@ function LtiConsumerXBlock(runtime, element) {
$("#" + overlay_id).css({"display": "block", opacity: 0});
$("#" + overlay_id).fadeTo(200, o.overlay);
$(modal_id).css({
"display": "block",
"position": "fixed",
"opacity": 0,
"z-index": 11000,
"left": 50 + "%",
"margin-left": -(modal_width / 2) + "px",
"top": o.top + "px"
"display": "block"
});
$(modal_id).fadeTo(200, 1);
$(modal_id).attr('aria-hidden', false);
$('body').css('overflow', 'hidden');
e.preventDefault();
......@@ -65,6 +60,7 @@ function LtiConsumerXBlock(runtime, element) {
$("#" + overlay_id).fadeOut(200);
$(modal_id).css({"display": "none"});
$(modal_id).attr('aria-hidden', true);
$('body').css('overflow', 'auto');
$trigger.focus();
}
}
......
lti_consumer/static/sass/student.scss
+ 29
− 1
View file @ 4e41bb97
......@@ -31,7 +31,35 @@
}
.lti-modal {
top: 80px !important;
position: fixed;
opacity: 0;
z-index: 11000;
box-sizing: border-box;
margin-left: 0;
height: auto;
padding: 8px;
border-radius: 3px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
background: #464646;
color: #3c3c3c;
.close-modal {
display: inline-block;
position: absolute;
right: 2px;
top: 0px;
z-index: 100;
cursor: pointer;
padding: 10px;
background: transparent;
border: none;
text-align: center;
.fa {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
}
}
.inner-wrapper {
height: 100%;
......
lti_consumer/templates/html/student.html
+ 1
− 1
View file @ 4e41bb97
......@@ -50,7 +50,7 @@
id="${element_id}-lti-modal"
class="modal lti-modal"
aria-hidden="true"
style="width:${modal_width}px; height:${modal_height}px;"
style="width:${modal_width}%; left:${modal_horizontal_offset}%; top:${modal_vertical_offset}%; bottom:${modal_vertical_offset}%;"
>
<div class="inner-wrapper" role="dialog">
<button class="close-modal">
......
lti_consumer/tests/unit/test_lti_consumer.py
+ 17
− 1
View file @ 4e41bb97
......@@ -671,9 +671,25 @@ class TestGetContext(TestLtiConsumerXBlock):
context_keys = (
'launch_url', 'element_id', 'element_class', 'launch_target', 'display_name', 'form_url', 'hide_launch',
'has_score', 'weight', 'module_score', 'comment', 'description', 'ask_to_send_username',
'ask_to_send_email', 'button_text', 'modal_height', 'modal_width', 'accept_grades_past_due'
'ask_to_send_email', 'button_text', 'modal_vertical_offset', 'modal_horizontal_offset', 'modal_width',
'accept_grades_past_due'
)
context = self.xblock._get_context_for_template() # pylint: disable=protected-access
for key in context_keys:
self.assertIn(key, context)
class TestGetModalPositionOffset(TestLtiConsumerXBlock):
"""
Unit tests for LtiConsumerXBlock._get_modal_position_offset()
"""
def test_offset_calculation(self):
"""
Test `_get_modal_position_offset` returns the correct value
"""
offset = self.xblock._get_modal_position_offset(self.xblock.modal_height) # pylint: disable=protected-access
# modal_height defaults to 80, so offset should equal 10
self.assertEqual(offset, 10)
setup.py
+ 1
− 1
View file @ 4e41bb97
......@@ -22,7 +22,7 @@ def package_data(pkg, roots):
setup(
name='lti_consumer-xblock',
version='1.0.2',
version='1.0.3',
description='This XBlock implements the consumer side of the LTI specification.',
packages=[
'lti_consumer',
......
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