Skip to content

Commit

Permalink
APPS-1198_add-a-terms-of-use-reminder
Browse files Browse the repository at this point in the history
  • Loading branch information
@jendiamond
jendiamond committed Jun 27, 2023
1 parent 8dfb265 commit 974b88d
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 52 deletions.
161 changes: 115 additions & 46 deletions app/assets/stylesheets/base/layout/body/_body.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,71 +45,140 @@
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
z-index: 5; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
background-color: #f7f2ea;
margin: 4% auto;
padding: 25%;
border: 1px solid #87331a;
width: 92%;
}

.modal-terms {
margin: 20px auto;
}

.modal-terms-of-use {
font-size: $text-18;
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

// Modal Header
.modal-header {
padding: 2px 5px;
background-color: #87331a;
color: white;
}

.modal-logo-block {
display: flex;
align-items: flex-start;
justify-content: center;
white-space: nobreak;

@media (min-width: 1430px) {
width: 520px;
}

@media (max-width: 991px) {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
}

@media (max-width: 767px) {
padding-left: 1rem;
display: flex;
flex-direction: column;
}

@media (max-width: 374px) {
flex-direction: column;
align-items: flex-start;
justify-content: unset;
}
}

.modal__logo-img--sinai {
color: white;
padding-right: 5px;
height: 66px;
}

.modal__logo-block--sinai-text-logo {
font-family: 'Dosis', sans-serif;
line-height: 1.25;
align-self: flex-end;
}

.modal__logo-title {
font-size: $text-28;
color: white;
text-transform: uppercase;
}

.modal-logo-subtitle--sinai {
display: block;
font-size: $text-18;
font-weight: 500;
color: white;
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
.modal-button {
cursor: pointer;
background: linear-gradient(#87331a, #962605);
opacity:unset;
width: 50%;
padding: 10px;
margin-bottom:50px;
border-radius: 5px;
color: white;
text-align: center;
text-shadow: 0 0 0 0;
font-weight: 400;

@media (max-width: 767px) {
width: 100%;
}
}

.close:hover,
.close:focus {
color: black;
.modal-button:hover {
background: linear-gradient(gray, rgb(72, 71, 71));
color: white;
text-decoration: none;
cursor: pointer;
font-size: 18px;
text-align: center;
text-shadow: 0 0 0 0;
opacity:unset;
padding: 10px;
margin-bottom:50px;
}

.modal-close {
color: white;
font-size: 18px;
text-shadow: 0 0 0 0;
float:none;
opacity:unset;
}

// .modal-terms-of-use {
// background-color: pink;
// }
// .modal-header {
// font-size: 14px;
// text-transform: uppercase;
// }
// button#openModal {
// font-size: 2em;
// color: orangered;
// background-color: whitesmoke;
// width: 50%;
// margin: 15px;
// z-index: 3;

// }
// .modal-close {
// margin: 5px 5px 5px 15px;
// padding: 3px 10px;
// font-size: 0.9rem;
// background-color: #0b3954;
// border-radius: 0.7rem;
// color: white;
// }

// .modal-close:hover,
// .modal-close:focus {
// color: pink;
// text-decoration: none;
// cursor: pointer;
// }
.close {
text-shadow: 0 0 0 0;
}

/* Margin over Terms of Use */
.terms {
margin-top: 50px;
}

/* ------------------------- */

Expand Down
35 changes: 29 additions & 6 deletions app/views/layouts/blacklight/base.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,23 +48,46 @@
<%= render 'catalog/banners/homepage_banner' %>

<%# TERMS OF USE MODAL %>
<!-- TERMS OF USE MODAL -->

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">
<div id="modalTermsOfUse" class="modal modal-dialog-centered">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal..</p>
<div class="modal-header">
<div class='site-navbar__logo-block site-navbar__logo-block--sinai'>
<%= image_tag('sinai-logos/logo-sinai-no-text-wht.png', class: 'site-navbar__logo-img--sinai', alt: 'Sinai Manuscripts Digital Library') %>
<div class='modal__logo-block--sinai-text-logo'>
<span class='modal__logo-title'>Sinai Manuscripts Digital Library</span>
<span class="modal__logo-subtitle--sinai">A publication of St. Catherine's Monastery of the Sinai, Egypt</span>
</div>
</div>
</div>

<div class='modal-terms-of-use'>
<p class='modal-terms'>Manuscript images from the Sinai Manuscripts Digital Library should not be used without the express consent of St. Catherine's Monastery of the Sinai.</p>

<p class='modal-terms'>This includes use in published works and social media.</p>

<p class='modal-terms'>For more information, see the Terms of Use below.</p>

<p class='modal-terms'>Click "I AGREE..." to continue using the site.</p>
</div>

<button class="modal-button"><span class="close modal-close">I AGREE <br>to the Sinai Manuscripts Digital Library<br>Terms of Use</span></button>

<hr />

<%= render partial: 'shared/terms_of_use_modal' %>
</div>

</div>


<!-- BODY -->
<main class="main-content-container container-constrained container-constrained__item-page--sinai">
<%= content_for(:container_header) %>
<%= content_for?(:content) ? yield(:content) : yield %>
Expand All @@ -79,7 +102,7 @@

<script>
// Get the modal
var modal = document.getElementById("myModal");
var modal = document.getElementById("modalTermsOfUse");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
Expand Down
42 changes: 42 additions & 0 deletions app/views/shared/_terms_of_use_modal.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@

<div class="terms sinai-static-page-inner-container">
<div class='static-page__title-row'>
<h1 class='static-page__title--sinai'>Terms of Use</h1>
</div>

<div class='static-page__row'>
<p class='static-page__text static-page__text--sinai'>St. Catherine’s Monastery of the Sinai, Egypt, is pleased to make images of manuscripts in its library accessible for online study. The Monastery asks that users accessing images of its manuscripts agree to the following terms and conditions: <strong><a class='si-link' href='#terms'>*</a></strong>
</p>
</div>

<div class='static-page__row'>
<h3 class='static-page__subtitle static-page__subtitle--sinai'>For Researchers</h3>
<p class='static-page__text static-page__text--sinai'>Researchers are invited to study the images online. Images may not be downloaded for publication or redistribution without the prior <%= link_to 'written permission of St. Catherine’s Monastery of the Sinai.', '/contact', class: 'si-link' %></p>
<p class='static-page__text static-page__text--sinai'>Researchers who access the images online are free to publish their findings and quote from the manuscripts in scholarly or other publications, whether electronic or in print. See the "For Publications" section below for how to cite references to the online content.</p>
<p class='static-page__text static-page__text--sinai'>However, any researcher planning to publish an edition (including a transcription, translation, or comprehensive scholarly analysis) of a manuscript or one of the texts it contains is asked to <%= link_to 'consult first with St. Catherine’s Monastery.', '/contact', class: 'si-link' %></p>
</div>

<hr class='divider'>

<div class='static-page__row'>
<h3 class='static-page__subtitle static-page__subtitle--sinai'>For Publications</h3>

<p class='static-page__text static-page__text--sinai'>Inquiries to St. Catherine’s Monastery about permission to reproduce or publish an image or approval to publish an edition should be sent to: <%= mail_to '[email protected]', '[email protected]', class: ' si-link' %>.</p>
<p class='static-page__text static-page__text--sinai'>References in publications to the online images and descriptions of the manuscripts should be accompanied by the following credit line: “Sinai Manuscripts Digital Library, a publication of St. Catherine’s Monastery of the Sinai in collaboration with EMEL and UCLA. <%= mail_to 'sinaimanuscripts.library.ucla.edu', 'sinaimanuscripts.library.ucla.edu', class: 'si-link' %>”</p>
<p class='static-page__text static-page__text--sinai'>St. Catherine’s Monastery may, at its discretion, require that an additional credit line or caption be added to published images, as part of its permission for publication.</p>
<p class='static-page__text static-page__text--sinai .si-link'>We request that electronic copies of publications based on images presented on this site be sent to the following email address: <%= mail_to '[email protected]', '[email protected]', class: 'si-link' %>. In the event that electronic copies of publications are not available, please send one printed copy to:</p>
<strong>
Saint Catherine’s Monastery of the Sinai<br>
26 Doryleou, Ampelokipi, Athens 11521, Greece
</strong>
</div>

<hr class='divider'>

<div class='static-page__row'>
<a name='terms'></a>
<p class='static-page__text static-page__text--sinai'><strong><span class='si-link'>*</span></strong> The terms and conditions on this page rehearse the user agreement from the <%= link_to 'Sinai-ID Registration', 'https://sinai-id.org/users/sign_up', target: '_blank', rel: 'noopener', class: 'si-link' %>. Violation of these terms and conditions may result in the suspension of your user account and notification to the Monastery of the violation.</p>
<p class='static-page__text static-page__text--sinai'>Users are invited to review the <%= link_to 'Privacy Policy', 'https://sinai-id.org/static_pages/spp_privacy', target: '_blank', rel: 'noopener', class: 'si-link' %> associated with their login. Registration data is managed by the Early Manuscripts Electronic Library (EMEL). If you ever wish to delete your user account, email a request to <%= mail_to '[email protected]', '[email protected]', class: 'si-link' %>, and EMEL will remove your account data from its database.</p>
</div>
</div>

0 comments on commit 974b88d

Please sign in to comment.