Merge branch 'main' into APPS-2332_add-contents-contents-note-to-drop…

…down-title-search

app/assets/stylesheets/theme_sinai/components/_si-terms-of-use-modal.scss

@@ -0,0 +1,92 @@
+// Terms of Use Modal - appears every 90 days
+
+/* 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;
+  }
+}
+
+/* Modal Content/Box */
+.si-terms-of-use-modal-group {
+  margin: 4% auto;
+  padding: 1.25rem;
+  width: 92%;
+  background-color: $white;
+  border: 1px solid $sinai-primary-dk;
+}
+
+.si-terms-of-use-modal-title {
+  margin-bottom: 5px;
+  font-size: $text-24;
+  font-family: 'Dosis', sans-serif;
+  line-height: 1.25;
+  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 {
+  margin-bottom: 20px;
+  padding: 5px;
+  font-size: $text-14;
+}
+
+/* The Close Button */
+.si-terms-of-use-modal-button {
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+  margin: auto 25%;
+  padding: 5px;
+  width: 50%;
+  text-align: center;
+  color: $sinai-primary-dk;
+  background: $sinai-secondary;
+  border-style: none;
+  text-shadow: 0 0 0 0;
+
+  @media (max-width: 767px) {
+    margin: 0;
+    width: 100%;
+  }
+}
+
+.close {
+  display: flex;
+  align-self: center;
+  padding: 5px;
+  font-size: 16px;
+  font-family: 'Dosis', sans-serif;
+  font-weight: 500;
+  text-align: center;
+  color: $sinai-primary-dk;
+  background: $sinai-secondary;
+  border: 1px solid $sinai-secondary;
+  opacity: unset;
+  text-shadow: 0 0 0 0;
+  cursor: pointer;
+}
+
+.close:hover {
+  font-size: 16px;
+  color: $sinai-black;
+  opacity: unset;
+}

app/assets/stylesheets/theme_sinai/elements/_si-colors.scss

@@ -1,5 +1,6 @@
 $sinai-primary: #ab2f0a;
 $sinai-primary-lt: #bb583a;
+$sinai-primary-dk: #87331a;
 $sinai-secondary: #f7f2ea;
 $sinai-secondary-dk: #e2dbcf;
 $sinai-black: #2a2a2a;

app/assets/stylesheets/theme_sinai/theme_sinai.scss

@@ -28,3 +28,4 @@
 @import 'theme_sinai/pages/_si-authn-page';
 @import 'theme_sinai/pages/_si-static-page';
 @import 'theme_sinai/components/_si-auth-modal';
+@import 'theme_sinai/components/_si-terms-of-use-modal';

app/controllers/application_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class ApplicationController < ActionController::Base
-  before_action :display_banner?, :sinai_authn_check, :add_legacy_views, :cors_preflight_check, :set_default_sort
+  before_action :display_banner?, :sinai_authn_check, :add_legacy_views, :cors_preflight_check, :set_default_sort, :display_term_of_use?
   after_action :cors_set_access_control_headers
 
   def add_legacy_views
@@ -95,6 +95,28 @@ def set_auth_cookies
     }
   end
 
+  # TERMS OF USE MODAL
+  def term_of_use_cookie?
+    cookies[:set_modal]
+  end
+
+  def set_term_of_use_cookie
+    cookies[:set_modal] = {
+      value: 'Set this Modal',
+      expires: Time.zone.now + 90.days
+    }
+  end
+
+  def display_term_of_use?
+    if term_of_use_cookie?
+      @term_of_use_modal_option = "none"
+    else
+      @term_of_use_modal_option = "block"
+      set_term_of_use_cookie
+    end
+  end
+  # End Terms of Use Modal
+
   def create_encrypted_string
     cipher.encrypt
     cipher.key = ENV['CIPHER_KEY']

app/views/layouts/blacklight/base.html.erb

@@ -27,12 +27,10 @@
 
       <%= favicon_link_tag 'favicon.ico' %>
 
-    <% if Flipflop.sinai? %>
     <%= stylesheet_link_tag 'https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600&display=swap' %>
     <%= stylesheet_link_tag 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap' %>
-    <% end %>
 
-    <%= stylesheet_link_tag (Flipflop.sinai? ? "sinai" : "ursus"), media: "all" %>
+    <%= stylesheet_link_tag "sinai", media: "all" %>
     <%= javascript_include_tag "application", defer: Rails.env.development? ? false : true %>
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
@@ -45,10 +43,34 @@
     <% end %>
 
     <div class="site-container" <%= schema_org_markup %>>
+      <!-- HEADER -->
       <%= render partial: 'shared/header/header_navbar' %>
       <%= render 'catalog/banners/homepage_banner' %>
 
-      <% if Flipflop.sinai? && controller.controller_name == 'catalog' && controller.action_name == 'show' %>
+      <!-- TERMS OF USE MODAL -->
+      <% if @term_of_use_modal_option == "block" %>
+        <div id="termsOfUseModal" style="display: block" 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>
+
+            <div class='si-terms-of-use-modal-content'>
+              <p>Manuscript images from the Sinai Manuscripts Digital Library should not be used without the express consent of St. Catherine's Monastery of the Sinai. This includes use in published works and social media.</p>
+              <br>
+
+              <p>For more information, see the Terms of Use.</p>
+
+              <p>Click "I AGREE" to continue using the site.</p>
+            </div>
+
+            <button class="si-terms-of-use-modal-button" onclick="closeModal()"><span class="close">I AGREE</span></button>
+          </div>
+        </div>
+      <% end %>
+      <!-- End of Modal -->
+
+      <!-- BODY -->
+      <% if controller.controller_name == 'catalog' && controller.action_name == 'show' %>
 
         <main class="main-content-container container-constrained container-constrained__item-page--sinai">
           <%= content_for(:container_header) %>
@@ -62,8 +84,19 @@
         </main>
       <% end %>
 
+      <!-- FOOTER -->
       <%= render partial: 'shared/footer/footer' %>
       <%= render partial: 'shared/modal' %>
     </div>
   </body>
 </html>
+
+<script>
+  // Get the modal
+  var modal = document.getElementById("termsOfUseModal");
+
+  // When the user clicks on "I Agree", close the modal
+  function closeModal() {
+    modal.style.display = "none";
+  }
+</script>

e2e/cypress/e2e/sinai_homepage.cy.js

@@ -1,25 +1,28 @@
 describe('Sinai Homepage', () => {
-  it('Visit the Sinai Homepage', () => {
+  beforeEach(() => {
     cy.visit(Cypress.env('SINAI_BASE_URL'));
+    cy.get('.si-terms-of-use-modal-block');
+    cy.contains('p', 'Manuscript images');
+    cy.get('.si-terms-of-use-modal-button').click();
+  });
+
+  it('Visit the Sinai Homepage', () => {
     cy.percySnapshot();
   });
 
   it('Sinai Manuscripts Digital Library Logo', () => {
-    cy.visit(Cypress.env('SINAI_BASE_URL'));
     cy.get('.site-navbar__logo-block--sinai');
     cy.viewport(1440, 900)
     cy.percySnapshot();
   });
 
   it('Search Component', () => {
-    cy.visit(Cypress.env('SINAI_BASE_URL'));
-    cy.get('.nav').contains('Search').click(); 
+    cy.get('.nav').contains('Search').click();
     cy.url().should('include', 'search_field=all_fields');
   });
 
   // Navbar Links
   it('About Link', () => {
-    cy.visit(Cypress.env('SINAI_BASE_URL'));
     cy.contains('a', 'About');
     cy.get('[href="/about"]').click({ force: true });
     cy.url().should('include', '/about');

e2e/cypress/e2e/sinai_search.cy.js

@@ -2,6 +2,9 @@
 describe('Sinai Search', () => {
   beforeEach(() => {
     cy.visit(Cypress.env('SINAI_BASE_URL') + '/catalog');
+    cy.get('.si-terms-of-use-modal-block');
+    cy.contains('p', 'Manuscript images');
+    cy.get('.si-terms-of-use-modal-button').click();
   });
 
   it('Search Blank', () => {