From df7dd78115c86187ff91c4253374c1107d8ca9de Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Fri, 9 Feb 2018 10:52:41 +0000
Subject: [PATCH] refactoring media boxes so the large image is used as a
background image, rather than an image tag, therefore eliminating the image
wobble on hover and the need for an extra img tag
---
.../includes/project_listing.html | 16 ++++++--
.../templates/public_funds/lab_page.html | 5 +--
.../templates/projects/project_page.html | 5 +--
.../src/sass/components/_media-box.scss | 39 ++++++++++++++++---
4 files changed, 50 insertions(+), 15 deletions(-)
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 6dd0cff54..7e09cbcd8 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,18 @@
{% load wagtailcore_tags wagtailimages_tags %}
<a class="media-box" href="{% pageurl project %}">
- <div class="media-box__images">
+ {% if project.icon %}
{% 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>
+ <div class="media-box__image-container" style="background-image:url('{{ project_icon.url }}')">
+ <img class="media-box__image media-box__image--small" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
+ </div>
+ {% else %}
+ <div class="media-box__image-container">
+ <div class="media-box__image media-box__image--small media-box__default-image media-box__default-image--small">
+ <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
+ </div>
+ </div>
+ {% endif %}
+
<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 8fe3a6e61..04c51ec2c 100644
--- a/opentech/public/funds/templates/public_funds/lab_page.html
+++ b/opentech/public/funds/templates/public_funds/lab_page.html
@@ -10,9 +10,8 @@
<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 }}">
+ {% image page.icon max-210x235 as 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 %}
diff --git a/opentech/public/projects/templates/projects/project_page.html b/opentech/public/projects/templates/projects/project_page.html
index 825e76173..f38950fe3 100644
--- a/opentech/public/projects/templates/projects/project_page.html
+++ b/opentech/public/projects/templates/projects/project_page.html
@@ -5,9 +5,8 @@
<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 }}">
+ {% image page.icon max-210x235 as 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 %}
diff --git a/opentech/static_src/src/sass/components/_media-box.scss b/opentech/static_src/src/sass/components/_media-box.scss
index 96fcf2c57..564fa8093 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;
+ }
+ }
}
}
--
GitLab