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 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]);
|
||||||
|
|
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 'variables';
|
||||||
@import 'navbar';
|
@import 'navbar';
|
||||||
@import 'assets';
|
@import 'assets';
|
||||||
|
@import 'components';
|
||||||
|
|
||||||
/* @group Global */
|
/* @group Global */
|
||||||
.btn {
|
.btn {
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Reference in a new issue