From bff1a55e034d01a4c8cd04b0ac692d1d99df011c Mon Sep 17 00:00:00 2001
From: Josh Stegmaier <104993387+joshuastegmaier@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:59:07 -0400
Subject: [PATCH] Added 'contact us' link to image not loading warning. Added
 code to wrap HTML alerts in a span to stop justification from doing weird
 things. Updated styles using division to take care of sass deprecation
 warning (#2583)

---
 concordia/static/js/src/base.js                      | 11 +++++++----
 concordia/static/js/src/viewer.js                    | 10 +++++++---
 concordia/static/scss/base.scss                      | 11 +++++++++--
 concordia/templates/transcriptions/asset_detail.html |  1 +
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/concordia/static/js/src/base.js b/concordia/static/js/src/base.js
index c1d4a0e88..444c224fb 100644
--- a/concordia/static/js/src/base.js
+++ b/concordia/static/js/src/base.js
@@ -62,18 +62,21 @@ function displayHtmlMessage(level, message, uniqueId) {
         .removeAttr('hidden')
         .removeAttr('id');
 
-    $newMessage.addClass('alert-' + level);
     if (level == 'error') {
-        /* class for red background */
-        $newMessage.addClass('alert-danger');
+        // Class for red background
+        level = 'danger';
     }
 
+    $newMessage.addClass('alert-' + level);
+
     if (uniqueId) {
         $('#' + uniqueId).remove();
         $newMessage.attr('id', uniqueId);
     }
 
-    $newMessage.prepend(message);
+    // Add a span to the message to ensure justified
+    // styles don't end up splitting the text
+    $newMessage.prepend('<span>' + message + '</span>');
 
     $messages.append($newMessage);
 
diff --git a/concordia/static/js/src/viewer.js b/concordia/static/js/src/viewer.js
index c797817c7..4a741b718 100644
--- a/concordia/static/js/src/viewer.js
+++ b/concordia/static/js/src/viewer.js
@@ -1,4 +1,4 @@
-/* global OpenSeadragon screenfull debounce displayMessage */
+/* global OpenSeadragon screenfull debounce displayHtmlMessage */
 
 const viewerData = document.getElementById('viewer-data').dataset;
 
@@ -225,9 +225,13 @@ seadragonViewer.addHandler('open-failed', function () {
     // We don't use the eventData or error message
     // because it contains the image URL, which we don't
     // want to display
-    displayMessage(
+    let contactUs =
+        '<strong><a class="alert-link" href="' +
+        viewerData.contactUrl +
+        '">contact us</a></strong>';
+    displayHtmlMessage(
         'error',
-        'Unable to display image',
+        'Unable to display image - ' + contactUs,
         'openseadragon-open-failed',
     );
 });
diff --git a/concordia/static/scss/base.scss b/concordia/static/scss/base.scss
index 0c3393378..dd622516b 100644
--- a/concordia/static/scss/base.scss
+++ b/concordia/static/scss/base.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $gray-100: #f6f6f6;
 $gray-200: #efefef;
 $gray-300: $gray-200;
@@ -213,6 +215,11 @@ header.border-bottom {
     &.alert-danger {
         background-color: $red;
         color: #fff;
+
+        .alert-link {
+            color: #fff;
+            font-weight: bolder;
+        }
     }
 
     &.alert-dismissible {
@@ -1019,12 +1026,12 @@ body .disabled > .page-link {
     height: 0;
     overflow: hidden;
     /* stylelint-disable-next-line scss/no-global-function-names */
-    padding-top: percentage(9 / 16);
+    padding-top: percentage(math.div(9, 16));
     position: relative;
 
     @include media-breakpoint-up(sm) {
         /* stylelint-disable-next-line scss/no-global-function-names */
-        padding-top: percentage(240 / 320);
+        padding-top: percentage(math.div(240, 320));
     }
 }
 
diff --git a/concordia/templates/transcriptions/asset_detail.html b/concordia/templates/transcriptions/asset_detail.html
index c06dbed5f..07a68f78c 100644
--- a/concordia/templates/transcriptions/asset_detail.html
+++ b/concordia/templates/transcriptions/asset_detail.html
@@ -29,6 +29,7 @@
     <script id="viewer-data"
             data-prefix-url="{% static 'openseadragon/build/openseadragon/images/' %}"
             data-tile-source-url="{% asset_media_url asset %}?canvas"
+            data-contact-url="{% url 'contact' %}"
     ></script>
 
     <script type="importmap">