Merge pull request #1236 from OpenTechFund/feature/project-people-image-display

Remove background effect on media-box and set fill-210x210 for all pe…

Author: frjo

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>

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

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 %}

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 {