Added 'contact us' link to image not loading warning. Added code to w…

…rap 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

@@ -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);
 

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',
     );
 });

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));
     }
 }
 

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">