Add screen width image panel component
This commit is contained in:
parent
094c959f01
commit
40f7f3394b
5 changed files with 32 additions and 0 deletions
|
@ -9,7 +9,9 @@ import React from 'react';
|
|||
|
||||
import NavBar from './components/navbar/navbar';
|
||||
import Breadcrumbs from './components/breadcrumbs';
|
||||
import renderImagePanels from './components/image-panel';
|
||||
|
||||
renderImagePanels();
|
||||
|
||||
if ($('navbar').length > 0) {
|
||||
React.render(<NavBar />, $('navbar')[0]);
|
||||
|
|
21
static/src/js/components/image-panel.js
Normal file
21
static/src/js/components/image-panel.js
Normal 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`);
|
||||
});
|
||||
}
|
7
static/src/less/components.less
Normal file
7
static/src/less/components.less
Normal file
|
@ -0,0 +1,7 @@
|
|||
.image-panel {
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
}
|
|
@ -8,6 +8,7 @@
|
|||
@import 'variables';
|
||||
@import 'navbar';
|
||||
@import 'assets';
|
||||
@import 'components';
|
||||
|
||||
/* @group Global */
|
||||
.btn {
|
||||
|
|
|
@ -45,4 +45,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-panel" data-image="https://farm9.staticflickr.com/8779/16687725664_13993f35d1_o_d.jpg"></div>
|
||||
{% endblock %}
|
||||
|
|
Reference in a new issue