From 40f7f3394bb2ba64f9e78786db44e611c650cb44 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Thu, 21 Apr 2016 18:49:57 +0100
Subject: [PATCH] Add screen width image panel component

---
 static/src/js/app.js                    |  2 ++
 static/src/js/components/image-panel.js | 21 +++++++++++++++++++++
 static/src/less/components.less         |  7 +++++++
 static/src/less/style.less              |  1 +
 templates/robotics/index.html           |  1 +
 5 files changed, 32 insertions(+)
 create mode 100644 static/src/js/components/image-panel.js
 create mode 100644 static/src/less/components.less

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 />, $('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 @@
       </div>
     </div>
   </div>
+  <div class="image-panel" data-image="https://farm9.staticflickr.com/8779/16687725664_13993f35d1_o_d.jpg"></div>
 {% endblock %}