Skip to content

Commit

Permalink
fix wording
Browse files Browse the repository at this point in the history
  • Loading branch information
@jendiamond
jendiamond committed Jun 28, 2023
1 parent 4b2b7b1 commit 26613f4
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 192 deletions.
174 changes: 41 additions & 133 deletions app/assets/stylesheets/base/layout/body/_body.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,181 +57,89 @@
/* --------------- */

// Terms of User Modal
// terms_of_use_90day

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
left: 0;
display: none; /* Hidden by default */
align-self: center;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
left: 0;
z-index: 5; /* Sit on top */
max-width: 500px;
overflow: auto; /* Enable scroll if needed */
height: 100%; /* Full height */
}

/* Modal Content/Box */
.modal-content {
background-color: #f7f2ea;
margin: 4% auto;
padding: 25%;
border: 1px solid #87331a;
background-color: white;
width: 92%;
border: 1.5px solid #f7f2ea;
}

.modal-terms-of-use {
.modal__terms-of-use {
padding: 5px;
font-size: $text-14;
padding: 20px;
}

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

// Modal Header
.modal-headersite-navbar__logo-block {
background-color: #87331a;
padding: 15px;
}
.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 {
.modal__logo-title {
font-family: 'Dosis', sans-serif;
line-height: 1.25;
align-self: flex-end;
}

.modal__logo-title {
font-size: $text-28;
color: white;
align-self: flex-start;
font-size: $text-24;
color: #87331a;
text-transform: uppercase;
margin-bottom: 5px;

@media (max-width: 800px) {
font-size: $text-24;
}

@media (max-width: 600px) {
font-size: $text-18;
}
}

.modal__logo-subtitle--sinai {
display: block;
font-size: $text-14;
font-weight: 500;
color: #e5e5e5;

@media (max-width: 800px) {
font-size: $text-14;
}

@media (max-width: 600px) {
font-size: 11px;
font-size: $text-20;
}
}

/* The Close Button */
.modal-button {
font-weight: 200;
display: flex;
align-self: center;
justify-content: center;
align-content: center;

cursor: pointer;
background: linear-gradient(#87331a, #962605);
opacity:unset;
background: #f7f2ea;
width: 50%;
padding: 10px;
margin-bottom: 25px;
border-radius: 1px;
color: white;
padding: 5px;
color: #87331a;
text-align: center;
text-shadow: 0 0 0 0;
border-style: none;

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

.modal-button:hover {
background: linear-gradient(
#323232,#191919);
color: white;
text-decoration: none;
cursor: pointer;
font-size: 16px;
text-align: center;
text-shadow: 0 0 0 0;
opacity:unset;
padding: 10px;
margin-bottom:50px;
}

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

.close {
display: flex;
align-self: center;
text-shadow: 0 0 0 0;
font-weight: 400;
}
.close:hover {
color: white;
}

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

.terms-title {
font-size: 20px;
text-align: center;
color: #87331a;
font-family: 'Dosis', sans-serif;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 16px;
padding:5px;
cursor: pointer;
background: #f7f2ea;
border: 1px solid #f7f2ea;
opacity:unset;
}

.terms-subtitle {
font-size: 18px;
margin-bottom: 1.25rem;
text-transform: uppercase;
.close:hover {
font-size: 16px;
color: black;
opacity:unset;
}
30 changes: 11 additions & 19 deletions app/views/layouts/blacklight/base.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,33 +52,25 @@
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">
<div id="termsOfUseModal" class="modal">
<!-- Modal content -->
<div class="modal-content">

<!-- HEADER -->
<div class=' modal-headersite-navbar__logo-block site-navbar__logo-block--sinai'>
<div class='modal__logo-block--sinai-text-logo'>
<span class='modal__logo-title'>Sinai Manuscripts Digital Library</span><br>
<span class="modal__logo-subtitle--sinai">A publication of St. Catherine's Monastery of the Sinai, Egypt</span>
<div class='modal__logo-title'>Sinai Manuscripts Digital Library
</div>
</div>
<!-- End of Header -->

<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>
<div class='modal__terms-of-use'>
<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 class='modal-terms'>For more information, see the Terms of Use below.</p>
<p>Click "I AGREE" to continue using the site.</p>
</div>

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

<button class="modal-button"><span class="close modal-close">I AGREE <br>to the Sinai Manuscripts Digital Library<br>Terms of Use</span></button>
</div>
<hr />
<div class='terms'>
<%= render partial: 'shared/terms_of_use_modal' %>
</div>
</div>
</div>
<!-- End of Modal -->
Expand All @@ -105,7 +97,7 @@

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

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
Expand Down
40 changes: 0 additions & 40 deletions app/views/shared/_terms_of_use_modal.html.erb
View file

This file was deleted.

0 comments on commit 26613f4

Please sign in to comment.