center modal and gray back

UCLALibrary · Jul 12, 2023 · 7ecc4f0 · 7ecc4f0
1 parent 1ad7cab
commit 7ecc4f0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 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
@@ -3,25 +3,21 @@
 /* The Modal (background) */
 .si-terms-of-use-modal-block {
   position: absolute; /* Stay in place */
-  top: 15%;
-  left: 25%;
+  z-index: 7; /* Sit on top */
   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);
 }
 
 /* Modal Content/Box */
 .si-terms-of-use-modal-group {
-  margin: 4% auto;
   padding: 1.25rem;
+  max-width: 600px;
+  z-index: 5; /* Sit on top */
   width: 92%;
   background-color: $white;
   border: 1px solid $sinai-primary-dk;
@@ -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
@@ -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
@@ -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>