From 07a669d1b0b769e94fe3aeffb0b0b69483046f63 Mon Sep 17 00:00:00 2001
From: connorhaugh <chaugh21@amherst.edu>
Date: Mon, 22 Nov 2021 09:03:05 -0500
Subject: [PATCH] feat: style new window modal
---
README.rst | 4 +-
lti_consumer/static/css/student.css | 2 +-
lti_consumer/static/js/xblock_lti_consumer.js | 6 +-
lti_consumer/static/sass/student.scss | 79 +++++++++++++++++++
4 files changed, 86 insertions(+), 5 deletions(-)
diff --git a/README.rst b/README.rst
index b4acde7..98caee1 100644
--- a/README.rst
+++ b/README.rst
@@ -318,7 +318,9 @@ Please do not report security issues in public. Send security concerns via email
Changelog
=========
-3.1.1 - 2021-11-12
+Please See the [releases tab](https://github.com/edx/xblock-lti-consumer/releases) for the complete changelog.
+
+3.1.2 - 2021-11-12
-------------------
* The modal to confirm information transfer on open of lti in new tab/window has been updated
diff --git a/lti_consumer/static/css/student.css b/lti_consumer/static/css/student.css
index 54e4d49..c89eb06 100644
--- a/lti_consumer/static/css/student.css
+++ b/lti_consumer/static/css/student.css
@@ -1 +1 @@
-.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;margin-top:20px;text-align:left}.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:0px;top:0px;z-index:100;cursor:pointer;padding:10px;background-color:#fff !important;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}
+.ui-widget-overlay{background:#000;opacity:.5}.confirm-dialog{position:relative;z-index:1;max-width:500px;width:100vw;background:#fff;border-radius:.425rem;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 1.5rem;max-height:80vh;max-width:500px;box-shadow:0 10px 20px rgba(0,0,0,.15),0 8px 20px rgba(0,0,0,.15);border:0 solid rgba(0,0,0,.2);font-size:1.125rem;font-weight:400;line-height:1.55556;color:#454545;text-align:left}.confirm-dialog .ui-dialog-titlebar-close{visibility:hidden}.confirm-dialog .ui-dialog-buttonpane{position:sticky;border-color:#fff;border-width:0px;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;background-color:#fff}.confirm-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1.125rem;font-weight:400}.confirm-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button{color:#fff;background:none;background-color:#0a3055;border-color:#0a3055;border-radius:6px}.confirm-dialog div.ui-dialog-titlebar{background-color:#fff;border-top-left-radius:6.8px;border-top-right-radius:6.8px;box-shadow:none;box-sizing:content-box;color:#454545;font-family:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:18px;font-weight:700;height:32px;justify-content:center;line-height:28.0001px;min-height:32px;padding-bottom:0px;padding-left:24px;padding-right:24px;padding-top:16px;position:sticky;text-align:left;text-size-adjust:100%;top:0px}.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:#785dd6;padding:20px}.xblock-student_view.xblock-student_view-lti_consumer div.lti_consumer .wrapper-lti-link .lti-link{margin-bottom:0;margin-top:20px;text-align:left}.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,.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:0px;top:0px;z-index:100;cursor:pointer;padding:10px;background-color:#fff !important;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}/*# sourceMappingURL=student.css.map */
diff --git a/lti_consumer/static/js/xblock_lti_consumer.js b/lti_consumer/static/js/xblock_lti_consumer.js
index 9991c4f..db835be 100644
--- a/lti_consumer/static/js/xblock_lti_consumer.js
+++ b/lti_consumer/static/js/xblock_lti_consumer.js
@@ -110,7 +110,7 @@ function LtiConsumerXBlock(runtime, element) {
function confirmDialog(message) {
var def = $.Deferred();
$('<div></div>').appendTo('body') // TODO: this will need some cute styling. It looks like trash but it works.
- .html('<div><h6>' + message + '</h6></div>')
+ .html('<div><p>' + message + '</p></div>')
.dialog({
modal: true,
title: 'Confirm',
@@ -118,6 +118,7 @@ function LtiConsumerXBlock(runtime, element) {
autoOpen: true,
width: 'auto',
resizable: false,
+ dialogClass: 'confirm-dialog',
buttons: {
OK: function() {
$('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
@@ -133,8 +134,7 @@ function LtiConsumerXBlock(runtime, element) {
close: function(event, ui) {
$(this).remove();
}
- });
-
+ }).prev().css('background', 'white').css('color', '#000').css('border-color', 'transparent');
return def.promise();
};
diff --git a/lti_consumer/static/sass/student.scss b/lti_consumer/static/sass/student.scss
index fba0179..d5e9047 100644
--- a/lti_consumer/static/sass/student.scss
+++ b/lti_consumer/static/sass/student.scss
@@ -1,8 +1,87 @@
+.ui-widget-overlay {
+ background: #000;
+ opacity: .5;
+}
+.confirm-dialog{
+ position: relative;
+ z-index: 1;
+ max-width: 500px;
+ width: 100vw;
+ background: #fff;
+ border-radius: .425rem;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin: 0 1.5rem;
+ max-height: 80vh;
+ max-width: 500px;
+ box-shadow: 0 10px 20px rgb(0 0 0 / 15%), 0 8px 20px rgb(0 0 0 / 15%);
+ border: 0 solid rgba(0,0,0,.2);
+ font-size: 1.125rem;
+ font-weight: 400;
+ line-height: 1.55556;
+ color: #454545;
+ text-align: left;
+
+ .ui-dialog-titlebar-close {
+ visibility: hidden;
+ }
+ .ui-dialog-buttonpane {
+ position: sticky;
+ border-color: #fff;
+ border-width: 0px;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ background-color: #fff;
+ .ui-dialog-buttonset {
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
+ font-size: 1.125rem;
+ font-weight: 400;
+ .ui-button {
+ color: #fff;
+ background:none;
+ background-color: #0a3055;
+ border-color: #0a3055;
+ border-radius: 6px;
+ }
+ }
+ }
+
+
+ div.ui-dialog-titlebar{
+ background-color: rgb(255, 255, 255);
+ border-top-left-radius: 6.8px;
+ border-top-right-radius:6.8px;
+ box-shadow: none;
+ box-sizing: content-box;
+ color:rgb(69, 69, 69);
+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-size:18px;
+ font-weight:700;
+ height:32px;
+ justify-content:center;
+ line-height:28.0001px;
+ min-height:32px;
+ padding-bottom:0px;
+ padding-left:24px;
+ padding-right:24px;
+ padding-top:16px;
+ position:sticky;
+ text-align:left;
+ text-size-adjust:100%;
+ top:0px;
+ }
+}
+
.xblock-student_view.xblock-student_view-lti_consumer {
h2.problem-header {
display: inline-block;
}
+
+
div.problem-progress {
display: inline-block;
padding-left: 5px;
--
GitLab