diff --git a/opentech/public/funds/templates/public_funds/includes/project_listing.html b/opentech/public/funds/templates/public_funds/includes/project_listing.html index cdf06d082455691d1258a4a7ffe61fba84f1394d..f7ad0f4ee87df7fbf5654cbfca91017e2c7db997 100644 --- a/opentech/public/funds/templates/public_funds/includes/project_listing.html +++ b/opentech/public/funds/templates/public_funds/includes/project_listing.html @@ -1,12 +1,12 @@ {% load wagtailcore_tags wagtailimages_tags %} <a class="media-box {{ class }}" href="{% pageurl project %}"> - {% image project.icon max-210x235 as project_icon %} + {% image project.icon max-210x210 as project_icon %} {% include "utils/includes/media_box_icon.html" with page_icon=project_icon listing=True %} <div class="media-box__content"> <h4>{{ project.title }}</h4> {% if project.listing_summary or project.introduction %} - <h5 class="media-box__teaser">{{ project.listing_summary|default:project.introduction|truncatechars_html:160 }}</h5> + <p class="media-box__teaser">{{ project.listing_summary|default:project.introduction|truncatechars_html:160 }}</p> {% endif %} </div> </a> diff --git a/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html b/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html index 1d439aedafe1992f6edf647b0d0e392904bec059..2137b22e826fbf0f44690dabfe1235b8c72f945a 100644 --- a/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html +++ b/opentech/public/funds/templates/public_funds/includes/reviewer_listing.html @@ -1,6 +1,6 @@ {% load wagtailcore_tags wagtailimages_tags %} <a class="media-box {{ class }}" href="{% pageurl person %}"> - {% image person.photo max-210x235 as person_photo %} + {% image person.photo fill-210x210 as person_photo %} {% include "utils/includes/media_box_icon.html" with page_icon=person_photo listing=True %} <div class="media-box__content"> diff --git a/opentech/public/utils/templates/utils/includes/media_box_icon.html b/opentech/public/utils/templates/utils/includes/media_box_icon.html index 535b850ceb031f619bb1d5a2cc875136215e34c6..3e5f1ba8a876203f196f3ef260e38690cca16801 100644 --- a/opentech/public/utils/templates/utils/includes/media_box_icon.html +++ b/opentech/public/utils/templates/utils/includes/media_box_icon.html @@ -1,15 +1,15 @@ {% load wagtailimages_tags %} -{% image page.icon max-210x235 as page_icon %} +{% image page.icon max-210x210 as page_icon %} {% if page_icon %} - <div class="media-box__image-container" style="background-image:url('{{ page_icon.url }}')"> - <img class="media-box__image media-box__image--small" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}"> + <div class="media-box__image-container"> + <img class="media-box__image" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}"> </div> {% else %} {% if listing %} <div class="media-box__image-container"> {% endif %} - <div class="media-box__default-image {% if listing %}media-box__image media-box__image--small media-box__default-image--small{% endif %}"> + <div class="media-box__default-image {% if listing %}media-box__image{% endif %}"> <svg><use xlink:href="#logo-mobile-no-text"></use></svg> </div> {% if listing %} diff --git a/opentech/static_src/src/sass/public/components/_media-box.scss b/opentech/static_src/src/sass/public/components/_media-box.scss index fd29f1d7a1b9f7e0b5563f27149dc840760bac66..ded4c699c19a40a4dad97e4be80f3db6b2a91977 100644 --- a/opentech/static_src/src/sass/public/components/_media-box.scss +++ b/opentech/static_src/src/sass/public/components/_media-box.scss @@ -25,30 +25,16 @@ } &__image-container { - position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 170px; - background-repeat: no-repeat; - background-size: cover; @include media-query(mob-landscape) { width: 210px; height: 210px; } - - &::before { - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - height: 100%; - background-color: rgba(27, 27, 27, .8); // sass-lint:disable-line no-color-literals - content: ''; - } } &__image {