From 82c2e3c69b3927318ea585f77d3dbaa273d1005b Mon Sep 17 00:00:00 2001
From: JenDiamond <thejendiamond@gmail.com>
Date: Wed, 12 Jul 2023 12:25:43 -0700
Subject: [PATCH] center modal and gray back (#109)

---
 .../components/_si-terms-of-use-modal.scss    | 26 +++++++------------
 app/controllers/application_controller.rb     |  2 +-
 app/views/layouts/blacklight/base.html.erb    |  4 +--
 3 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/theme_sinai/components/_si-terms-of-use-modal.scss b/app/assets/stylesheets/theme_sinai/components/_si-terms-of-use-modal.scss
index 9284b3f3..17ec2c17 100644
--- a/app/assets/stylesheets/theme_sinai/components/_si-terms-of-use-modal.scss
+++ b/app/assets/stylesheets/theme_sinai/components/_si-terms-of-use-modal.scss
@@ -3,28 +3,24 @@
 /* The Modal (background) */
 .si-terms-of-use-modal-block {
   position: absolute; /* Stay in place */
-  top: 15%;
-  left: 25%;
   display: none; /* Hidden by default */
-  align-self: center;
-  overflow: auto; /* Enable scroll if needed */
-  max-width: 600px;
-  height: 100%; /* Full height */
-  z-index: 5; /* Sit on top */
-
-  @media (max-width: 767px) {
-    top: 0;
-    left: 0;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 7; /* Sit on top */
 }
 
 /* Modal Content/Box */
 .si-terms-of-use-modal-group {
-  margin: 4% auto;
   padding: 1.25rem;
   width: 92%;
+  max-width: 600px;
   background-color: $white;
   border: 1px solid $sinai-primary-dk;
+  z-index: 5; /* Sit on top */
 }
 
 .si-terms-of-use-modal-title {
@@ -35,10 +31,6 @@
   align-self: flex-start;
   color: $sinai-primary-dk;
   text-transform: uppercase;
-
-  @media (max-width: 800px) {
-    font-size: $text-20;
-  }
 }
 
 .si-terms-of-use-modal-content {
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 31478173..3a32e9fa 100755
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -111,7 +111,7 @@ def display_term_of_use?
     if term_of_use_cookie?
       @term_of_use_modal_option = "none"
     else
-      @term_of_use_modal_option = "block"
+      @term_of_use_modal_option = "flex"
       set_term_of_use_cookie
     end
   end
diff --git a/app/views/layouts/blacklight/base.html.erb b/app/views/layouts/blacklight/base.html.erb
index 89db1c3c..96fca6fd 100644
--- a/app/views/layouts/blacklight/base.html.erb
+++ b/app/views/layouts/blacklight/base.html.erb
@@ -48,8 +48,8 @@
       <%= render 'catalog/banners/homepage_banner' %>
 
       <!-- TERMS OF USE MODAL -->
-      <% if @term_of_use_modal_option == "block" %>
-        <div id="termsOfUseModal" style="display: block" class="si-terms-of-use-modal-block">
+      <% if @term_of_use_modal_option == "flex" %>
+        <div id="termsOfUseModal" style="display: flex" class="si-terms-of-use-modal-block">
           <!-- Modal content -->
           <div class="si-terms-of-use-modal-group">
             <div class='si-terms-of-use-modal-title'>Sinai Manuscripts Digital Library</div>