From 080ebfeec04a3a4a4e19e6ba8d081fe43e2c9179 Mon Sep 17 00:00:00 2001
From: Beth Elwell <e.r.elwell@gmail.com>
Date: Wed, 3 Jun 2015 01:24:31 +0100
Subject: [PATCH] minor clean of responsive css - amended padding and margins
 of text content to ensure lined up with logo correctly - floated logo right
 to maintain correct position responsively - swapped position of logo and text
 content to make logo sit on top text at mob - added BEM style classes to
 target new styles and overwrite bootstrap

Change-Id: Ie68c952f21378178ef2c1e716dbdbc12bdae5371
---
 refstack-ui/app/assets/css/style.css      | 24 +++++++++++++++++++++++
 refstack-ui/app/components/home/home.html | 10 +++++-----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/refstack-ui/app/assets/css/style.css b/refstack-ui/app/assets/css/style.css
index 75b59192..80b78ca6 100644
--- a/refstack-ui/app/assets/css/style.css
+++ b/refstack-ui/app/assets/css/style.css
@@ -124,9 +124,33 @@ h1, h2, h3, h4, h5, h6 {
   height: 70%;
 }
 
+.jumbotron .openstack-intro__logo {
+  width: 100%;
+}
+
 .result-filters {
   padding-bottom: 10px;
   border-top: 2px solid #C9C9C9;
   border-bottom: 2px solid #C9C9C9;
   margin-bottom: 15px;
 }
+
+@media (min-width: 450px) {
+  .jumbotron .openstack-intro__logo {
+    width: 30%;
+  }
+  .openstack-intro__logo img {
+    float: right;
+  }
+  .openstack-intro__content > *:first-child {
+    margin-top: 0;
+  }
+  .openstack-intro__content > *:last-child {
+    margin-bottom: 0;
+  }
+}
+@media (min-width: 768px) {
+  .jumbotron.openstack-intro {
+    padding: 40px;
+  }
+}
\ No newline at end of file
diff --git a/refstack-ui/app/components/home/home.html b/refstack-ui/app/components/home/home.html
index 5929645a..bbd48200 100644
--- a/refstack-ui/app/components/home/home.html
+++ b/refstack-ui/app/components/home/home.html
@@ -1,11 +1,11 @@
-<div class="jumbotron">
-    <div class="pull-left left">
+<div class="jumbotron openstack-intro">
+    <div class="pull-right right openstack-intro__logo">
+        <img src="assets/img/openstack-logo.png" alt="OpenStack">
+    </div>
+    <div class="pull-left left openstack-intro__content">
         <h1>OpenStack Interoperability</h1>
         <p>Refstack is a source of tools for OpenStack interoperability testing.</p>
     </div>
-    <div class="pull-right right">
-        <img src="assets/img/openstack-logo.png" alt="OpenStack">
-    </div>
     <div class="clearfix"></div>
 </div>