diff --git a/static/src/js/app.js b/static/src/js/app.js index 825a567..e2bad06 100644 --- a/static/src/js/app.js +++ b/static/src/js/app.js @@ -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')[0]); diff --git a/static/src/js/components/image-panel.js b/static/src/js/components/image-panel.js new file mode 100644 index 0000000..0efb895 --- /dev/null +++ b/static/src/js/components/image-panel.js @@ -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`); + }); +} diff --git a/static/src/less/components.less b/static/src/less/components.less new file mode 100644 index 0000000..f53b0ec --- /dev/null +++ b/static/src/less/components.less @@ -0,0 +1,7 @@ +.image-panel { + background-attachment: fixed; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + width: 100%; +} diff --git a/static/src/less/style.less b/static/src/less/style.less index 5f63433..59b90a3 100644 --- a/static/src/less/style.less +++ b/static/src/less/style.less @@ -8,6 +8,7 @@ @import 'variables'; @import 'navbar'; @import 'assets'; +@import 'components'; /* @group Global */ .btn { diff --git a/templates/robotics/index.html b/templates/robotics/index.html index 0ba3294..6c69b20 100644 --- a/templates/robotics/index.html +++ b/templates/robotics/index.html @@ -45,4 +45,5 @@ +
{% endblock %}