diff --git a/app/assets/stylesheets/dm/components/_practice_card.scss b/app/assets/stylesheets/dm/components/_practice_card.scss index f687a75bb..e0f061404 100644 --- a/app/assets/stylesheets/dm/components/_practice_card.scss +++ b/app/assets/stylesheets/dm/components/_practice_card.scss @@ -83,8 +83,8 @@ } .dm-practice-card-img-container { + height: 165px; min-width: 100%; - height: auto; display: flex; justify-content: center; align-items: center; diff --git a/app/views/clinical_resource_hubs/_crh_show.js.erb b/app/views/clinical_resource_hubs/_crh_show.js.erb index 97ef75765..65f284d5a 100644 --- a/app/views/clinical_resource_hubs/_crh_show.js.erb +++ b/app/views/clinical_resource_hubs/_crh_show.js.erb @@ -79,6 +79,7 @@ function searchPracticesByCrh() { moreText: 'Load more', noMoreText: 'No more results' }); + replaceImagePlaceholders('#search-results .dm-practice-card'); } // Search practices and populate the page function search(query, category, radioVal) { diff --git a/app/views/clinical_resource_hubs/show.html.erb b/app/views/clinical_resource_hubs/show.html.erb index 9f96e3fcc..660c9bbcc 100644 --- a/app/views/clinical_resource_hubs/show.html.erb +++ b/app/views/clinical_resource_hubs/show.html.erb @@ -7,6 +7,7 @@ <% provide :head_tags do %> <%= javascript_include_tag '_practice_card_utilities', 'data-turbolinks-track': 'reload' %> + <%= javascript_include_tag 'shared/_signed_resource', 'data-turbolinks-track': 'false', defer: true %> <%= javascript_tag 'data-turbolinks-track': 'reload' do %> <%= render partial: 'crh_show', formats: [:js] %> diff --git a/app/views/practices/_search.js.erb b/app/views/practices/_search.js.erb index da1dc8822..15047056f 100644 --- a/app/views/practices/_search.js.erb +++ b/app/views/practices/_search.js.erb @@ -127,6 +127,22 @@ function buildPracticeCard(result) { return cardHtml; } +function replaceImagePlaceholders(parentSelector) { + $(parentSelector).each(function() { + // If either the 'src' or the hidden input are undefined, return an empty string + var imageSelector = $(this).find('.practice-card-img-placeholder'); + var imagePracticeId = imageSelector ? imageSelector.attr('data-practice-id') : null; + var practiceImagePath = imageSelector ? imageSelector.attr('data-practice-image') : null; + var practiceName = $(this).find('.dm-practice-title').text(); + + if (imagePracticeId && practiceImagePath) { + fetchSignedResource(practiceImagePath).then(signedImgUrl => { + replacePlaceholderWithImage(signedImgUrl, imagePracticeId, practiceName); + }); + } + }); +} + function replacePlaceholderWithImage(imageUrl, practiceId, practiceName) { loadImage(imageUrl, function(loadedImageSrc) { var imgTag = @@ -279,20 +295,7 @@ function searchPracticesPage() { // Print results to the page document.querySelector('#search-results').innerHTML = finalResults; // After the html for the card has been built and applied to the DOM, replace the image 'src' based on the signed url - $('#search-results .dm-practice-card').each(function() { - // If either the 'src' or the hidden input are undefined, return an empty string - var imageSelector = $(this).find('.practice-card-img-placeholder'); - var imagePracticeId = imageSelector ? imageSelector.attr('data-practice-id') : null; - var practiceImagePath = imageSelector ? imageSelector.attr('data-practice-image') : null; - var practiceName = $(this).find('.dm-practice-title').text(); - if (imagePracticeId && practiceImagePath) { - fetchSignedResource( - practiceImagePath, - ).then(signedImgUrl => { - replacePlaceholderWithImage(signedImgUrl, imagePracticeId, practiceName) - }); - } - }); + replaceImagePlaceholders('#search-results .dm-practice-card'); $(SEARCH_RESULTS).showMoreItems({ startNum: 12, diff --git a/app/views/visns/_show.js.erb b/app/views/visns/_show.js.erb index ebf40a5eb..2cdf62d60 100644 --- a/app/views/visns/_show.js.erb +++ b/app/views/visns/_show.js.erb @@ -64,13 +64,14 @@ function searchPracticesByVisn() { $(SEARCH_RESULTS).removeClass('display-none'); // Print results to the page document.querySelector('#search-results').innerHTML = finalResults; - + $(SEARCH_RESULTS).showMoreItems({ startNum: 6, afterNum: 6, moreText: 'Load more', noMoreText: 'No more results' }); + replaceImagePlaceholders('#search-results .dm-practice-card'); } // Search practices and populate the page function search(query, category, radioVal) { diff --git a/app/views/visns/show.html.erb b/app/views/visns/show.html.erb index 275eacb0a..db257edec 100644 --- a/app/views/visns/show.html.erb +++ b/app/views/visns/show.html.erb @@ -2,6 +2,7 @@ <% provide :footer_classes, 'bg-gray-2' %> <% provide :head_tags do %> <%= javascript_include_tag '_practice_card_utilities', 'data-turbolinks-track': 'reload' %> + <%= javascript_include_tag 'shared/_signed_resource', 'data-turbolinks-track': 'false', defer: true %> <%= javascript_tag 'data-turbolinks-track': 'reload' do %> <%= render partial: 'show', formats: [:js] %> <%# set visnNumber before loading the visns/show file %>