Add screen width image panel component

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 />, $('navbar')[0]);

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`);
+  });
+}

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%;
+}

static/src/less/style.less

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

templates/robotics/index.html

@@ -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 %}