>From 6edb6b40b4ccbeda3ae7c8c8d80996f9f76cbeb4 Mon Sep 17 00:00:00 2001
From: Brian McLaughlin <bmclaugh@redhat.com>
Date: Thu, 24 May 2012 17:00:39 -0400
Subject: [PATCH conductor 02/11] Unified UI (converge-ui) changes to header,
 footer using the converge-ui git submodule.

---
 src/app/stylesheets/_converge-ui.scss       |   18 +-
 src/app/stylesheets/_header.scss            |  468 ++-------------------------
 src/app/stylesheets/layout.scss             |   22 +-
 src/app/views/layouts/application.html.haml |  118 ++++----
 4 files changed, 109 insertions(+), 517 deletions(-)

diff --git a/src/app/stylesheets/_converge-ui.scss b/src/app/stylesheets/_converge-ui.scss
index 6f21022..ef3a28a 100644
--- a/src/app/stylesheets/_converge-ui.scss
+++ b/src/app/stylesheets/_converge-ui.scss
@@ -1,8 +1,16 @@
-@import "../../vendor/converge-ui/stylesheets/fonts.scss";
-//@import "../../vendor/converge-ui/stylesheets/footer.scss";
+//@import "../../vendor/converge-ui/stylesheets/fonts.scss";
+@import "../../vendor/converge-ui/stylesheets/footer.scss";
 //@import "../../vendor/converge-ui/stylesheets/forms.scss";
-//@import "../../vendor/converge-ui/stylesheets/header.scss";
+@import "../../vendor/converge-ui/stylesheets/colors.scss";
+@import "../../vendor/converge-ui/stylesheets/mixins.scss";
+@import "../../vendor/converge-ui/stylesheets/header.scss";
 //@import "../../vendor/converge-ui/stylesheets/helpers.scss";
 //@import "../../vendor/converge-ui/stylesheets/media.scss";
-//@import "../../vendor/converge-ui/stylesheets/mixins.scss";
-//@import "../../vendor/converge-ui/stylesheets/shell.scss";
+@import "../../vendor/converge-ui/stylesheets/shell.scss";
+//@import "../../vendor/converge-ui/stylesheets/text.scss";
+//@import "../../vendor/converge-ui/stylesheets/utils.scss";
+
+#wrapper {
+  min-height: 100%;
+  padding-bottom: 0px;
+}
\ No newline at end of file
diff --git a/src/app/stylesheets/_header.scss b/src/app/stylesheets/_header.scss
index 0e4c1f1..75c12ca 100644
--- a/src/app/stylesheets/_header.scss
+++ b/src/app/stylesheets/_header.scss
@@ -1,445 +1,37 @@
 /* Adapted normalization */
 
 .hidden {
-  display: none; }
+  display: none; 
+}
 
-.shell-design {
-  section {
-    display: none;
-    &.active {
-      display: block; } }
-  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
-    display: block; }
-  a {
-    color: #36c;
-    &:visited {
-      color: #36c; }
-    &:hover {
-      color: #000; }
-    &:focus {
-      outline: none;
-      box-shadow: 0 0  3px 3px #fa0; }
-    &:hover, &:active {
-      outline: none; } }
-  b, strong {
-    font-weight: bold; }
-  img {
-    border: 0;
-    -ms-interpolation-mode: bicubic;
-    vertical-align: middle; }
-  svg:not(:root) {
-    overflow: hidden; } }
+header#header {
+  height:60px;
 
-/* Some header-specific styling */
-
-header.shell-design {
-  height: 5.5em;
-  background-color: #1a1f22;
-  position: relative;
-  color: #fff;
-  border-bottom: .4em solid #060807;
-  border-top: .4em solid #060807;
-  box-shadow: inset 0em -0.1em #181c1e, inset 0px -2em 5em #101214;
   h1 {
-    font-size: 1em;
-    text-transform: uppercase;
-    position: absolute;
-    top: .9em;
-    left: 0;
-    line-height: 1.5em;
-    text-indent: 2em;
-    color: #fff;
-    em {
-      border-left: .1em solid #fff;
-      padding-left: .25em;
-      margin-left: .25em;
-      font-style: normal; } }
-  > article {
-    margin: 0 auto;
-    max-width: 80em;
-    line-height: 2em;
-    position: relative;
-    padding: 0em;
-    padding-left: 20em; } }
-
-/* Navigation */
-
-nav#appnav {
-  display: table;
-  font-weight: normal;
-  border: .2em solid #181c1e;
-  border-bottom: none transparent 0px;
-  margin-top: 2.25em;
-  border-radius: .25em .25em 0em 0em;
-  white-space: nowrap;
-  > ul {
-    > li {
-      > ul > li a {
-        color: #777; }
-      display: block;
-      vertical-align: top;
-      float: left;
-      a {
-        display: block;
-        width: 100%;
-        text-decoration: none;
-        clear: both;
-        padding: 0em;
-        text-indent: 1.5em;
-        text-transform: capitalize;
-        position: relative;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        &.selected{ background-color: #444; }
-      }
-      > a {
-        color: #bbb;
-        padding: .75em 1em;
-        text-align: center;
-        text-indent: 0em;
-        border-style: none solid;
-        border-width: 0px .1em;
-        border-color: transparent #181c1e;
-        background-color: #1f2123;
-        box-shadow: inset 0px -3.5em 2em -2em #15191b;
-        &:active {
-          color: #fff;
-          background-color: #4a4e50; }
-        &:hover {
-          /*box-shadow*/
-          -webkit-box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
-          -moz-box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
-          box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.32);
-          cursor: pointer; }
-        &:focus, &:active {
-          box-shadow: inset 0px -4em 3em -2em rgba(0, 0, 0, 0.4); } }
-      position: relative;
-      &:hover {
-        > a {
-          box-shadow: inset 0px -4em 3em -2em rgba(0, 0, 0, 0.4); }
-        li:hover > a, > a {
-          background-color: #4a4e50;
-          color: #fff; } }
-      a {
-        &:hover, &:focus {
-          background-color: #4a4e50;
-          color: #fff; } }
-      &:first-child > a {
-        /*border-radius*/
-        -webkit-border-radius: .225em 0em 0em 0em;
-        -moz-border-radius: .225em 0em 0em 0em;
-        border-radius: .225em 0em 0em 0em;
-        border-left: 0px transparent none; }
-      &:last-child > a {
-        /*border-radius*/
-        -webkit-border-radius: 0em .225em   0em 0em;
-        -moz-border-radius: 0em .225em  0em 0em;
-        border-radius: 0em .225em  0em 0em;
-        border-right: 0px transparent none; }
-      > ul > li:last-child > a {
-        /*border-radius*/
-        -webkit-border-radius: 0em 0em .25em .25em;
-        -moz-border-radius: 0em 0em .25em .25em;
-        border-radius: 0em 0em .25em .25em; } }
-    display: table-row; }
-  ul a:after {
-    z-index: 3;
-    content: "";
-    width: 100%;
-    height: 50%;
-    top: 0;
-    left: 0;
-    right: 0;
-    display: block;
-    position: absolute; }
-  > ul > li {
-    a:focus ~ ul, &:hover ul {
-      background-color: white;
-      /*box-shadow*/
-      -webkit-box-shadow: 0em 0.025em 0.5em rgba(0, 0, 0, 0.5);
-      -moz-box-shadow: 0em 0.025em 0.51em rgba(0, 0, 0, 0.5);
-      box-shadow: 0em 0.025em 0.51em rgba(0, 0, 0, 0.5);
-      /*border-radius*/
-      -webkit-border-radius: 0em 0em .25em .25em;
-      -moz-border-radius: 0em 0em .25em .25em;
-      border-radius: 0em 0em .25em .25em;
-      display: block;
-      width: 100%;
-      top: 0em;
-      left: 0; } } }
-
-/* I'm doubtful that this actually matches anythign */
-
-.no-boxshadow header nav#appnav > ul > li:hover ul {
-  border: 1px solid #ccc;
-  margin: -0.1px; }
-
-header.shell-design {
-  nav#appnav > ul > li {
-    &:hover > ul {
-      z-index: 9999 !important;
-      /*painfully silly hack*/
-      margin-top: -0.25em;
-      padding-top: 0em !important;
-    }
-    > ul > li:hover {
-      position: relative; }
-    &:hover > ul > li > ul {
-      position: absolute;
-      box-shadow: none;
-      background-color: transparent;
-      top: 0em;
-      left: 100%;
-      padding-top: 0em;
-      > li {
-        display: none; } }
-    a:focus ~ ul, &:hover > ul {
-      z-index: 1;
-      padding-top: 1em;
-      display: block;
-      position: absolute;
-      top: 3.5em;
-      opacity: 1; }
-    a:focus ~ li ul li, &:hover > ul > li:hover > ul > li {
-      display: block; }
-    a:focus ~ li ul, &:hover > ul > li:hover ul {
-      /*box-shadow*/
-      -webkit-box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
-      -moz-box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
-      box-shadow: 0.025em 0.025em 0.51em rgba(0, 0, 0, 0.5);
-      /*border-radius*/
-      -webkit-border-radius: 0em .25em .25em 0em;
-      -moz-border-radius: 0em .25em .25em 0em;
-      border-radius: 0em .25em .25em 0em;
-      background-color: white;
-      z-index: 1;
-      opacity: 1; }
-    > {
-      ul {
-        > li {
-          > ul li {
-            &:first-child a {
-              /*border-radius*/
-              -webkit-border-radius: .0em .25em 0em 0em;
-              -moz-border-radius: .0em .25em 0em 0em;
-              border-radius: .0em .25em 0em 0em; }
-            &:last-child a {
-              /*border-radius*/
-              -webkit-border-radius: 0em 0em .25em .0em;
-              -moz-border-radius: 0em 0em .25em .0em;
-              border-radius: 0em 0em .25em .0em; }
-            &:first-child:hover a:after {
-              z-index: 9;
-              display: block;
-              position: absolute;
-              top: .5em;
-              left: 0em;
-              content: "";
-              height: 0;
-              width: 0;
-              border-width: .5em 0em  .5em .5em;
-              border-style: solid none solid solid;
-              border-color: transparent  transparent transparent #fff; } }
-          ul {
-            &:before {
-              z-index: 2;
-              display: block;
-              position: absolute;
-              top: 0em;
-              left: -0.14em;
-              content: "";
-              height: 0;
-              width: 0;
-              border-width: 1em 0em  1em 1em;
-              border-style: solid none solid solid;
-              border-color: transparent  transparent transparent transparent; }
-            &:after {
-              z-index: 1;
-              display: block;
-              position: absolute;
-              top: .5em;
-              left: -1em;
-              content: "";
-              height: 0;
-              width: 0;
-              opacity: 1;
-              z-index: 2;
-              border-width: .5em 0em  .5em .5em;
-              border-style: solid none solid solid;
-              border-color: transparent  transparent transparent #ccc; } }
-          a:hover ~ ul:before, &:hover ul:before {
-            top: 0em;
-            border: solid 1em #4a4e50;
-            left: -1.98em; }
-          a:hover ~ ul:after, &:hover ul:after {
-            top: 0em;
-            border-color: transparent  transparent transparent #4a4e50;
-            left: 0em;
-            content: "";
-            height: 0;
-            width: 0;
-            border-width: 1em 0em  1em 1em;
-            border-style: solid  none solid solid; } }
-        position: absolute;
-        left: 0;
-        display: none;
-        line-height: 2em !important;
-        min-width: 16em;
-        max-width: 22em; }
-      a.active {
-        position: relative;
-        &:after {
-          z-index: 9;
-          position: absolute;
-          top: 3.1em;
-          left: 50%;
-          margin-left: -0.55em;
-          display: block;
-          content: "";
-          width: 0;
-          height: 0;
-          border-width: 0em .55em .55em  .55em;
-          border-style: none solid solid  solid;
-          border-color: transparent transparent #fff transparent; } } }
-    position: relative; }
-  &.shell-design > article section:last-child {
-    text-align: right;
-    position: absolute;
-    top: -1.75em;
-    right: 0em;
-    margin: 0 auto;
-    display: block;
-    a {
-      border: 0.1em solid rgba(255, 255, 255, 0.12);
-      color: #ccc !important;
-      border-radius: 0em 0em .5em .5em;
-      color: #fff;
-      text-decoration: none;
-      background-color: #181c1e;
-      box-shadow: inset 0px 1.5em 1em -1em rgba(222, 222, 255, 0.1);
-      display: inline-block;
-      padding: .1em 1em;
-      position: relative;
-      margin: 1.25em .1em;
-      &:last-child {
-        padding-right: 2em;
-        &:after {
-          content: "";
-          display: block;
-          height: 0px;
-          width: 0px;
-          position: absolute;
-          top: .75em;
-          right: .5em;
-          border-style: solid solid none solid;
-          border-width: .5em .5em 0em .5em;
-          border-color: #666 transparent transparent; } }
-      &:first-child {
-        padding-left: 3em;
-        &:after {
-          /*content: "!";*/
-          color: #2e4e66;
-          text-align: center;
-          background-color: #ccc !important;
-          width: 1em;
-          height: 1em;
-          border-radius: 50%;
-          position: absolute;
-          top: .25em;
-          left: .5em;
-          line-height: 1em;
-          font-size: 1.5em;
-          display: block;
-          background-color: transparent;
-          z-index: 2; } } } } }
-
-/*
- header nav#appnav > ul > li > ul > li
-*/
-
-/* The below is good */
-
-/* Some new stuff */
-
-/* Is this legit? */
-
-.shell-design {
-  * {
-    /*
-      this is life saving but locks us into > ie8 will consider this polyfil for lt-ie8
-      https://github.com/Schepp/box-sizing-polyfill
-    */
-    -moz-box-sizing: border-box !important;
-    -webkit-box-sizing: border-box !important;
-    box-sizing: border-box !important;
-    background-repeat: no-repeat;
-    vertical-align: middle;
-    font-family: overpass; }
-  a {
-    &:hover, &:focus, &:active {
-      color: #fa0; }
-    &:focus {
-      outline: none !important; }
-    &:link {
-      color: #36c; } }
-  article {
-    &:before {
-      content: "";
-      display: table; }
-    &:after {
-      content: "";
-      display: table;
-      clear: both; } } }
-
-/* Wait, do we actually want this? */
-
-/* User dropdown menu definition  */
-
-section#usermenu {
-  position: absolute;
-  left: 80%;
-  width: 20%;
-  padding: 5px 2px 5px 2px;
-  cursor: pointer;
-  z-index: 9999;
-  > a {
-    width: 100%; }
-  > ul {
-    list-style-type: none;
-    display: none;
-    border: none;
-    padding: 0em;
-    margin: 0em;
-    top: 4em;
-    float: left;
-    position: absolute;
-    z-index: 9999;
-    width: 100%;
-    &:before {
-      display: none;
-      content: none; } }
-  &:hover > ul {
-    display: block;
+    bottom:auto;
+    top:15px;
+  }
+  #appnav {left:388px;}
+
+  #widget-container {
+    top:27px;
+  
+  	#usermenu {
+  	list-style:none;
+  	  li {
+  		  background-color: rgba(25, 25, 30, 0.4);
+  		  border:.2em solid rgba(205, 206, 208, 0.4);
+        -webkit-border-radius: .5em;
+        -moz-border-radius: .5em;
+        border-radius: .5em;
+        color:#fff;
+  		  display:inline;
+  		  list-style:none;
+  		  margin-right:.8em;
+  		  padding:0 .8em;
+    	  &:last-child {margin-right:auto;}
+    	  a {color:#fff;}
+  	  }
+  	}
   }
-  > ul {
-    > li {
-      padding: 0em;
-      margin: 0em;
-      border-color: transparent !important;
-      background-image: none !important;
-      box-shadow: none !important; }
-    li {
-      a {
-        margin: 0em;
-        padding: .5em 2em;
-        border-radius: 0;
-        border-color: transparent !important;
-        box-shadow: none !important;
-        &:hover {
-          color: #FFF !important;
-          text-decoration: underline; } }
-      &:last-child a {
-        border-radius: 0em 0em .51em .51em; }
-      a:after {
-        content: none; } } } }
+}
\ No newline at end of file
diff --git a/src/app/stylesheets/layout.scss b/src/app/stylesheets/layout.scss
index 1c440c6..51454a4 100644
--- a/src/app/stylesheets/layout.scss
+++ b/src/app/stylesheets/layout.scss
@@ -36,21 +36,21 @@ div#content{
   @include clearfix;
   width: $width;
   margin: 0 auto;
-  margin-bottom: 58px;
+//  margin-bottom: 58px;
   min-height: 200px;
-  border: 1px solid #eee;
-  border-top: transparent none 0px;
+//  border: 1px solid #eee;
+//  border-top: transparent none 0px;
   /*border-radius*/
-  -webkit-border-radius: 0em 0em .5em .5em;
-  -moz-border-radius: 0em 0em .5em .5em;
-  border-radius: 0em 0em .5em .5em;
+//  -webkit-border-radius: 0em 0em .5em .5em;
+//  -moz-border-radius: 0em 0em .5em .5em;
+//  border-radius: 0em 0em .5em .5em;
   background-color: #FAFAFA;
   position: relative;
   z-index: 100;
   /*box-shadow*/
-  -webkit-box-shadow: inset 0px .25em .25em #aaa, 0px .5em 2em #000 !important;
-  -moz-box-shadow: inset 0px .25em .25em #aaa, 0px .5em 2em #000 !important;
-  box-shadow: inset 0px .25em .25em #aaa, 0px .5em 2em #000 !important;
+//  -webkit-box-shadow: inset 0px .25em .25em #aaa, 0px .5em 2em #000 !important;
+//  -moz-box-shadow: inset 0px .25em .25em #aaa, 0px .5em 2em #000 !important;
+//  box-shadow: inset 0px .25em .25em #aaa, 0px .5em 2em #000 !important;
 }
 
 
@@ -270,10 +270,6 @@ div#content .page-header{
   background: #ddd;
   @include clearfix;
 
-  /*box-shadow*/
-  -webkit-box-shadow: inset 0em 0em 0em 1px rgba(0, 0, 0, 0.05), inset 0em 2px 0em rgba(255, 255, 255, 0.5), inset 0em -1em 2em rgba(0, 0, 0, 0.05), 0px 0.6em 0.5em -0.5em rgba(0, 0, 0, 0.3);
-  -moz-box-shadow: inset 0em 0em 0em 1px rgba(0, 0, 0, 0.05), inset 0em 2px 0em rgba(255, 255, 255, 0.5), inset 0em -1em 2em rgba(0, 0, 0, 0.05), 0px 0.6em 0.5em -0.5em rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0em 0em 0em 1px rgba(0, 0, 0, 0.05), inset 0em 2px 0em rgba(255, 255, 255, 0.5), inset 0em -1em 2em rgba(0, 0, 0, 0.05), 0px 0.6em 0.5em -0.5em rgba(0, 0, 0, 0.3);
   /*border-radius*/
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
diff --git a/src/app/views/layouts/application.html.haml b/src/app/views/layouts/application.html.haml
index 959629e..7e419ce 100644
--- a/src/app/views/layouts/application.html.haml
+++ b/src/app/views/layouts/application.html.haml
@@ -1,61 +1,57 @@
-!!! 5
-%html{"xml:lang" => "en", :lang => "en"}
-  %head
-    %meta{:charset => 'utf-8'}/
-    %title
-      = t("layout.appname")
-      = "| #{@title}" unless @title.blank?
-    %link{:rel =>  'shortcut icon', :href => '/favicon.ico'}
-    = stylesheet_link_tag '/stylesheets/compiled/layout.css'
-    = stylesheet_link_tag 'jquery.ui-1.8.1/jquery-ui-1.8.1.custom.css'
-    = stylesheet_link_tag '/stylesheets/compiled/header.css'
-    /[if lt IE 9]
-      = javascript_include_tag 'http://html5shiv.googlecode.com/svn/trunk/html5.js'
-    /[if lt IE 8]
-      = stylesheet_link_tag '/stylesheets/layout_ie7.css'
-
-    :javascript
-      window.Conductor = {}
-      window.Conductor.PATH_PREFIX = "#{root_path}"
-      // This hack prevents Backbone from switching to the #/pools/1 type URLs
-      // when the browser doesn't support the HTML5 History API.
-      window.history || (window.history = {});
-      window.history.pushState || (window.history.pushState = function(){});
-      window.history.replaceState || (window.history.replaceState = function(){});
-
-    = javascript_include_tag "jquery-1.6.1.min.js"
-    = javascript_include_tag "jquery.ui-1.8.1/jquery-ui-1.8.1.custom.min.js"
-    = javascript_include_tag "mustache.min.js"
-    = javascript_include_tag "underscore-min.js"
-    = javascript_include_tag "backbone-min.js"
-
-    = javascript_include_tag "application.js"
-
-    = javascript_include_tag "backbone/models.js"
-    = javascript_include_tag "backbone/views.js"
-    = javascript_include_tag "backbone/routers.js"
-    = javascript_include_tag "rails.js"
-    = javascript_include_tag "lib/modernizr-custom.js"
-    = csrf_meta_tag
-    = yield :scripts
-  %body
-    %header.shell-design
-      %article
-        %h1
-          = t("layout.appname")
-        %nav#appnav
-          = render_navigation :level => 1
-        / Notifications and user dropdown -- disable notifications for now
-        %section#usermenu
-          %a{:href => '#'}= current_user.name
-          %ul
-            %li= link_to t('masthead.my_account'), account_path
-            %li= link_to t('masthead.logout'), logout_path
-
-    #content
-      = render :partial => '/layouts/new_notification' if flash.present? or content_for?(:error_messages)
-      = yield
-      .clear
-    %footer.standard
-      .container
-        %span.copyright!= t('layout.copyright')
+= content_for :title do
+  = t("layout.appname")
+  = "| #{@title}" unless @title.blank?
+
+= content_for :stylesheets do
+  = stylesheet_link_tag '/stylesheets/compiled/layout.css'
+  = stylesheet_link_tag 'jquery.ui-1.8.1/jquery-ui-1.8.1.custom.css'
+  /[if lt IE 9]
+    = javascript_include_tag 'http://html5shiv.googlecode.com/svn/trunk/html5.js'
+  /[if lt IE 8]
+    = stylesheet_link_tag '/stylesheets/layout_ie7.css'
+
+  :javascript
+    window.Conductor = {}
+    window.Conductor.PATH_PREFIX = "#{root_path}"
+    // This hack prevents Backbone from switching to the #/pools/1 type URLs
+    // when the browser doesn't support the HTML5 History API.
+    window.history || (window.history = {});
+    window.history.pushState || (window.history.pushState = function(){});
+    window.history.replaceState || (window.history.replaceState = function(){});
+
+  = javascript_include_tag "jquery-1.6.1.min.js"
+  = javascript_include_tag "jquery.ui-1.8.1/jquery-ui-1.8.1.custom.min.js"
+  = javascript_include_tag "mustache.min.js"
+  = javascript_include_tag "underscore-min.js"
+  = javascript_include_tag "backbone-min.js"
+
+  = javascript_include_tag "application.js"
+
+  = javascript_include_tag "backbone/models.js"
+  = javascript_include_tag "backbone/views.js"
+  = javascript_include_tag "backbone/routers.js"
+  = javascript_include_tag "rails.js"
+  = javascript_include_tag "lib/modernizr-custom.js"
+
+= content_for :logo do
+  = link_to(image_tag('upstream-logo.png'), root_path)
+
+= content_for :tabs do
+  = render_navigation :level => 1
+
+= content_for :widgets do
+  %ul#usermenu
+    %li= current_user.name
+    %li= link_to t('masthead.my_account'), account_path
+    %li= link_to t('masthead.logout'), logout_path
+
+= content_for :content do
+  #content
+    = render :partial => '/layouts/new_notification' if flash.present? or content_for?(:error_messages)
+    = yield
+
+= content_for :footer do
+  %section.maincontent
+    %p.copyright!= t('layout.copyright')
+
+= render :file => "/app/views/layouts/converge-ui/shell_layout"
-- 
1.7.7.6

