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 6dd0cff5459016b44a376b1a0bb392b523b5e816..a6e573e908e8364a192e1e3a30b6d0885b700127 100644
--- a/opentech/public/funds/templates/public_funds/includes/project_listing.html
+++ b/opentech/public/funds/templates/public_funds/includes/project_listing.html
@@ -1,10 +1,8 @@
{% load wagtailcore_tags wagtailimages_tags %}
<a class="media-box" href="{% pageurl project %}">
- <div class="media-box__images">
- {% image project.icon max-210x235 as project_icon %}
- <img class="media-box__image media-box__image--large" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
- <img class="media-box__image media-box__image--small" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
- </div>
+ {% image project.icon max-210x235 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 %}
diff --git a/opentech/public/funds/templates/public_funds/lab_page.html b/opentech/public/funds/templates/public_funds/lab_page.html
index 8fe3a6e6108f431225ff1688b23ea5607f4f0843..5effaa6c292fbae14cdfda0923d5ecb22557563f 100644
--- a/opentech/public/funds/templates/public_funds/lab_page.html
+++ b/opentech/public/funds/templates/public_funds/lab_page.html
@@ -2,24 +2,14 @@
{% block header_modifier %}header--grey-pixels{% endblock %}
{# Dont include fixed apply button on this page #}
{% block apply_button %}{% endblock %}
-{% load wagtailcore_tags wagtailimages_tags navigation_tags static %}
+{% load wagtailcore_tags navigation_tags static %}
{% block content %}
{% include "public_funds/includes/lab_apply_cta.html" %}
<div class="wrapper">
<section class="section section--main section--top-bottom-space">
<div class="media-box media-box--reverse media-box--bottom-space">
- {% if page.icon %}
- <div class="media-box__images">
- {% image page.icon max-210x235 as page_icon %}
- <img class="media-box__image media-box__image--large" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
- <img class="media-box__image media-box__image--small" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
- </div>
- {% else %}
- <div class="media-box__default-image">
- <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
- </div>
- {% endif %}
+ {% include "utils/includes/media_box_icon.html" with page_icon=page.icon %}
<div class="media-box__content">
<h4>{{ page.title }}</h4>
diff --git a/opentech/public/projects/templates/projects/project_page.html b/opentech/public/projects/templates/projects/project_page.html
index 825e761735af7bc79ed55bbff55ca38e0efc0b1d..0b261566cf0a6ab04b4d965e0e24aab148cb81ba 100644
--- a/opentech/public/projects/templates/projects/project_page.html
+++ b/opentech/public/projects/templates/projects/project_page.html
@@ -1,21 +1,10 @@
{% extends "base.html" %}
-{% load wagtailcore_tags wagtailimages_tags %}
+{% load wagtailcore_tags %}
{% block content %}
<div class="wrapper wrapper--small wrapper--top-inner-space">
<div class="media-box media-box--reverse">
- {% if page.icon %}
- <div class="media-box__images">
- {% image page.icon max-210x235 as page_icon %}
- <img class="media-box__image media-box__image--large" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
- <img class="media-box__image media-box__image--small" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
- </div>
- {% else %}
- <div class="media-box__default-image">
- <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
- </div>
- {% endif %}
-
+ {% include "utils/includes/media_box_icon.html" with page_icon=page.icon %}
<div class="media-box__content">
{% if page.introduction %}
<h5 class="media-box__teaser">{{ page.introduction }}</h5>
diff --git a/opentech/public/utils/templates/utils/includes/media_box_icon.html b/opentech/public/utils/templates/utils/includes/media_box_icon.html
new file mode 100644
index 0000000000000000000000000000000000000000..535b850ceb031f619bb1d5a2cc875136215e34c6
--- /dev/null
+++ b/opentech/public/utils/templates/utils/includes/media_box_icon.html
@@ -0,0 +1,18 @@
+{% load wagtailimages_tags %}
+{% image page.icon max-210x235 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>
+{% 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 %}">
+ <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
+ </div>
+ {% if listing %}
+ </div>
+ {% endif %}
+{% endif %}
diff --git a/opentech/static_src/src/sass/components/_media-box.scss b/opentech/static_src/src/sass/components/_media-box.scss
index 96fcf2c576213dc2f829ebc03665a2fed1b9206b..564fa80933533e881d315aa89b1e686afa0d9960 100644
--- a/opentech/static_src/src/sass/components/_media-box.scss
+++ b/opentech/static_src/src/sass/components/_media-box.scss
@@ -24,8 +24,20 @@
}
}
- &__images {
+ &__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;
@@ -53,12 +65,9 @@
}
&--small {
- position: absolute;
- top: 50%;
- left: 50%;
+ z-index: 10;
max-width: 105px;
border: 0 solid;
- transform: translate(-50%, -50%);
box-sizing: content-box;
transition: border $transition;
@@ -151,5 +160,25 @@
height: 70px;
fill: $color--white;
}
+
+ &--small {
+ width: 105px;
+ height: 105px;
+ background-color: $color--white;
+ border: 0 solid;
+ box-sizing: content-box;
+ transition: border $transition;
+
+ #{$root}:hover & {
+ border: 10px solid $color--light-blue;
+ transition: border $transition;
+ }
+
+ > svg {
+ width: 50px;
+ height: 50px;
+ fill: $color--light-blue;
+ }
+ }
}
}