From ebd2768350a3e2b3a32b2b7c4436336ebc267e08 Mon Sep 17 00:00:00 2001
From: Rob Cresswell <robert.cresswell@outlook.com>
Date: Fri, 13 Nov 2015 14:38:09 +0000
Subject: [PATCH] Move Detail page styling into theme

This patch creates a breadcrumb header component and moves the detail
styling into the theme. This should make it easier for themes to
override.

- Alter the breadcrumb header padding, so that everything is aligned correctly
  after the bootstrap tabs patch: https://review.openstack.org/#/c/246004/
- Add a small margin under tabs, to account for both details and
  workflows; remove the previous workflows-only padding.

Change-Id: I11034d30de900eda50bbc92c275194b6ec731c0d
Closes-Bug: 1516021
---
 .../templates/projects/_detail_overview.html  |  2 +-
 .../templates/users/_detail_overview.html     |  2 +-
 .../dashboard/scss/components/_workflow.scss  |  6 ------
 .../static/dashboard/scss/horizon.scss        | 21 -------------------
 .../default/bootstrap/components/_navs.scss   |  7 ++++++-
 .../themes/default/horizon/_styles.scss       | 13 +++++++++++-
 .../components/_breadcrumb_header.scss        | 10 +++++++++
 7 files changed, 30 insertions(+), 31 deletions(-)
 create mode 100644 openstack_dashboard/themes/default/horizon/components/_breadcrumb_header.scss

diff --git a/openstack_dashboard/dashboards/identity/projects/templates/projects/_detail_overview.html b/openstack_dashboard/dashboards/identity/projects/templates/projects/_detail_overview.html
index 2bdcc22266..b2aeae617d 100644
--- a/openstack_dashboard/dashboards/identity/projects/templates/projects/_detail_overview.html
+++ b/openstack_dashboard/dashboards/identity/projects/templates/projects/_detail_overview.html
@@ -1,6 +1,6 @@
 {% load i18n  %}
 
-<div class="detail tab-content">
+<div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Project Name" %}</dt>
     <dd>{{ project.name }}</dd>
diff --git a/openstack_dashboard/dashboards/identity/users/templates/users/_detail_overview.html b/openstack_dashboard/dashboards/identity/users/templates/users/_detail_overview.html
index 06033695d1..dff44d4f18 100644
--- a/openstack_dashboard/dashboards/identity/users/templates/users/_detail_overview.html
+++ b/openstack_dashboard/dashboards/identity/users/templates/users/_detail_overview.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="detail tab-content">
+<div class="detail">
   <dl class="dl-horizontal">
     {% if domain_id %}
       <dt>{% trans "Domain ID" %}</dt>
diff --git a/openstack_dashboard/static/dashboard/scss/components/_workflow.scss b/openstack_dashboard/static/dashboard/scss/components/_workflow.scss
index 8284159161..154331a163 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_workflow.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_workflow.scss
@@ -1,10 +1,4 @@
 .workflow {
-  .tab-content {
-    border-left: 0 none;
-    border-right: 0 none;
-    border-bottom: 0 none;
-    padding-top: 10px;
-  }
 
   fieldset > table {
     margin-bottom: 0;
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index d69149ebb5..4e4ffa2e31 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -1384,27 +1384,6 @@ a:hover.link-popover { text-decoration: none; }
   top: 0;
 }
 
-/**** Details Override ****/
-.page-header > .breadcrumb {
-  font-size: $font-size-h3;
-  margin-bottom: 0;
-
-  .actions_column {
-    padding: 0;
-  }
-}
-
-.detail {
-  ul {
-    padding-left: 0;
-  }
-
-  dt, dd {
-    text-align: left;
-    line-height: $line-height-small;
-  }
-}
-
 input::-ms-clear, input::-ms-reveal {
   display: none;
 }
diff --git a/openstack_dashboard/themes/default/bootstrap/components/_navs.scss b/openstack_dashboard/themes/default/bootstrap/components/_navs.scss
index 8b99aee9e6..0b10c2498c 100644
--- a/openstack_dashboard/themes/default/bootstrap/components/_navs.scss
+++ b/openstack_dashboard/themes/default/bootstrap/components/_navs.scss
@@ -23,4 +23,9 @@
   & > li > .in {
     border-bottom: 1px solid $gray-light;
   }
-}
\ No newline at end of file
+}
+
+.nav-tabs {
+  // Spacing for content in details pages
+  margin-bottom: 10px;
+}
diff --git a/openstack_dashboard/themes/default/horizon/_styles.scss b/openstack_dashboard/themes/default/horizon/_styles.scss
index a165ae8728..88bbf9c3fb 100644
--- a/openstack_dashboard/themes/default/horizon/_styles.scss
+++ b/openstack_dashboard/themes/default/horizon/_styles.scss
@@ -5,9 +5,9 @@
 @import 'components/tables';
 @import 'components/table_actions';
 @import 'components/pie_charts';
+@import 'components/breadcrumb_header';
 
 .navbar-brand {
-
   // The 114 is a legacy value to push the context-menu over
   padding-right: 114px;
 }
@@ -21,3 +21,14 @@ form label {
   display: inline-block;
 }
 
+/* Details page overrides */
+.detail {
+  ul {
+    padding-left: 0;
+  }
+
+  dt, dd {
+    text-align: left;
+    line-height: $line-height-small;
+  }
+}
diff --git a/openstack_dashboard/themes/default/horizon/components/_breadcrumb_header.scss b/openstack_dashboard/themes/default/horizon/components/_breadcrumb_header.scss
new file mode 100644
index 0000000000..58798e4914
--- /dev/null
+++ b/openstack_dashboard/themes/default/horizon/components/_breadcrumb_header.scss
@@ -0,0 +1,10 @@
+/* Breadcrumb used as a header in the details pages */
+.page-header > .breadcrumb {
+  font-size: $font-size-h3;
+  margin-bottom: 0;
+  padding: 8px 0px;
+
+  .actions_column {
+    padding: 0;
+  }
+}