1
Fork 0

Add screen width image panel component

This commit is contained in:
Jake Howard 2016-04-21 18:49:57 +01:00
parent 094c959f01
commit 40f7f3394b
5 changed files with 32 additions and 0 deletions

View file

@ -9,7 +9,9 @@ import React from 'react';
import NavBar from './components/navbar/navbar'; import NavBar from './components/navbar/navbar';
import Breadcrumbs from './components/breadcrumbs'; import Breadcrumbs from './components/breadcrumbs';
import renderImagePanels from './components/image-panel';
renderImagePanels();
if ($('navbar').length > 0) { if ($('navbar').length > 0) {
React.render(<NavBar />, $('navbar')[0]); React.render(<NavBar />, $('navbar')[0]);

View file

@ -0,0 +1,21 @@
export default function renderImagePanels() {
$('.image-panel').each(function () {
const element = $(this);
element.css('background-image', 'url("' + element.data('image') + '")');
let height;
switch (element.data('size').toLowerCase()) {
case 'small':
height = '30';
break;
default:
case 'medium':
height = '60';
break;
case 'large':
height = '100';
}
element.css('background-image', `${height}vh`);
});
}

View file

@ -0,0 +1,7 @@
.image-panel {
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
}

View file

@ -8,6 +8,7 @@
@import 'variables'; @import 'variables';
@import 'navbar'; @import 'navbar';
@import 'assets'; @import 'assets';
@import 'components';
/* @group Global */ /* @group Global */
.btn { .btn {

View file

@ -45,4 +45,5 @@
</div> </div>
</div> </div>
</div> </div>
<div class="image-panel" data-image="https://farm9.staticflickr.com/8779/16687725664_13993f35d1_o_d.jpg"></div>
{% endblock %} {% endblock %}