From 99f0a4a208254e1de0c80f800636803c98116afe Mon Sep 17 00:00:00 2001
From: David Joy <davidjoy@users.noreply.github.com>
Date: Tue, 3 Nov 2020 16:04:41 -0500
Subject: [PATCH] fix: make LTI modals full-screen (#268)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes TNL-7410

This causes LTI modals in courseware to take up the whole screen.  It does this by creating a new “dialogClassName” value that we then use to override the default heights/widths of the Bootstrap modal.

We also remove the title of the iframe, which just takes up space and detracts from the LTI content.
---
 src/courseware/course/sequence/Unit.jsx |  7 +++++--
 src/index.scss                          | 21 +++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx
index 5f03097e..f49f1331 100644
--- a/src/courseware/course/sequence/Unit.jsx
+++ b/src/courseware/course/sequence/Unit.jsx
@@ -147,14 +147,17 @@ function Unit({
                     allow="microphone *; camera *; midi *; geolocation *; encrypted-media *"
                     frameBorder="0"
                     src={modalOptions.url}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                    }}
                   />
                 )}
             </>
           )}
-          title={modalOptions.title}
           onClose={() => { setModalOptions({ open: false }); }}
           open
-          dialogClassName="modal-lg"
+          dialogClassName="modal-lti"
         />
       )}
       <div className="unit-iframe-wrapper">
diff --git a/src/index.scss b/src/index.scss
index 416b99b2..d08c2987 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -319,6 +319,27 @@ $primary: #1176B2;
   }
 }
 
+// This class forces any modals using 'modal-lti' as their dialogClassName to take up the whole
+// window (retaining padding around the edge).  Bootstrap modals don't have a full-screen
+// size like this.  Because of the hack below around react-focus-on's div, it would be better long-term to pull this into Paragon and perhaps call it "modal-full" or something like that.
+.modal-lti {
+  height: 100%;
+  max-width: 100%;
+
+  // I don't like this.  We need to set a height of 100% on a div created by react-focus-on, a
+  // package we use in our Modal.  That div has no class name or ID, so instead we're uniquely
+  // identifying it by based on a unique attribute it has which its siblings don't share.
+  > div[data-focus-lock-disabled=false] {
+    height: 100%;
+  }
+
+  // Along with setting the height of modal-content's parent div from react-focus-on, we need to
+  // set modal-content's height as well to get the modal to expand to full-screen height.
+  .modal-content {
+    height: 100%;
+  }
+}
+
 // Import component-specific sass files
 @import 'courseware/course/celebration/CelebrationModal.scss';
 @import 'courseware/course/content-tools/calculator/calculator.scss';