Bug 896500 - Merge old userbar into header bar in prep for new UI

mozilla · Jul 23, 2013 · 843470a · 843470a
1 parent a67300d
commit 843470a
Show file tree

Hide file tree

Showing 7 changed files with 404 additions and 98 deletions.
diff --git a/public/css/globals.less b/public/css/globals.less
@@ -1,7 +1,5 @@
 // SPACING
-@WEBMAKERNAV_SPACING: 43px;
-@PRIMARYHEADER_SPACING: 62px;
-@HEADER_SPACING: @WEBMAKERNAV_SPACING + @PRIMARYHEADER_SPACING;
+@HEADER_SPACING: 62px;
 @TRAY_HEIGHT: 220px;
 @TRAY_SPACING: @TRAY_HEIGHT - 10;
 @TRAY_SPACING_MINIMIZED: 35px;

diff --git a/public/css/header.less b/public/css/header.less
@@ -1,7 +1,7 @@
 /*********************************************************
 * HEADER
 */
-@_logoWidth: 245px;
+@_logoWidth: 220px;
 
 // Used to position absolute elements in the middle of our header bar area
 @HEADER_ALIGN_MIDDLE: 2.7;
@@ -51,22 +51,23 @@
 .butter-logo {
   position: absolute;
   top: 0;
-  left: 30px;
+  left: 15px;
   height: 62px;
   width: @_logoWidth;
-  background: url( "../resources/logo.png" ) no-repeat;
+  background: url( "../resources/popcorn-logo.svg" ) center no-repeat;
+  background-size: contain;
 }
 
 .butter-nav {
   position: absolute;
   top: 0;
   margin: 0;
   padding: 0;
-  margin-left: @_logoWidth + 50;
+  margin-left: @_logoWidth + 30;
   list-style: none;
   width: 60%;
-  height: @PRIMARYHEADER_SPACING;
-  line-height: @PRIMARYHEADER_SPACING;
+  height: @HEADER_SPACING;
+  line-height: @HEADER_SPACING;
   > li {
     float: left;
     padding: 0 20px;
@@ -120,27 +121,16 @@
     position: absolute;
     visibility: hidden;
     right: -5px;
-    top: @PRIMARYHEADER_SPACING / @HEADER_ALIGN_MIDDLE;
+    top: @HEADER_SPACING / @HEADER_ALIGN_MIDDLE;
   }
   &:hover .icon {
     visibility: visible;
   }
 }
 
-#tabzilla {
-  display: block;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: @HEADER_Z_INDEX + 100;
-}
-
-#tabzilla-panel {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: @MODAL_Z_INDEX;
+.webmaker-nav-container {
+  background: #FFFFFF;
+  margin-top: 10px;
 }
 
 /*********************************************************

diff --git a/public/css/ui-states.less b/public/css/ui-states.less
@@ -116,23 +116,3 @@
 .butter-dropdown-off {
   visibility: hidden;
 }
-
-
-/*********************************************************
-* Tabzilla
-*/
-
-.tabzilla-open {
-  &.butter-header-spacing {
-    padding-top: @TABZILLA_HEIGHT + @HEADER_SPACING;
-  }
-  .butter-header {
-    top: @TABZILLA_HEIGHT;
-    z-index: @MODAL_Z_INDEX;
-    box-shadow: 0 -1px 0 0 #CCC;
-  }
-  #tabzilla {
-    top: -1px;
-  }
-}
-
diff --git a/public/resources/popcorn-logo.svg b/public/resources/popcorn-logo.svg
diff --git a/public/src/layouts/header.html b/public/src/layouts/header.html
@@ -1,26 +1,4 @@
 <div class="butter-header" data-butter-exclude>
-  <!-- webmaker user bar -->
-  <div id="webmaker-nav">
-    <nav class="webmaker-nav-container">
-      <a id="logo" href="https://webmaker.org"><img src="{{user_bar}}/img/webmaker-logo.png" alt="Mozilla Webmaker" /></a>
-      <ul class="webmaker-nav user-info">
-        <li class="user">
-            Hi <span id="identity" class="user-name-container"></span>
-        </li>
-        <li class="tutorial-btn hidden"><button>Tutorials</button></li>
-        <li class="makes"><button>My makes</button></li>
-        <li>
-          <iframe src="{{audience}}/sso/include.html" class="include-frame"></iframe>
-        </li>
-      </ul>
-    </nav>
-    <div class="my-projects-container">
-      <iframe class="my-projects-iframe"></iframe>
-    </div>
-    <div class="tutorial-list">
-      <div class="tutorial-arrow"></div>
-    </div>
-  </div>
   <script src="{{user_bar}}/js/sso-ux.js"></script>
   <header class="butter-header-primary">
     <div class="butter-logo"></div>
@@ -44,5 +22,26 @@
         </div>
       </li>
     </ul>
+    <!-- webmaker user bar -->
+    <div id="webmaker-nav">
+      <nav class="webmaker-nav-container">
+        <ul class="webmaker-nav user-info">
+          <li class="user">
+              Hi <span id="identity" class="user-name-container"></span>
+          </li>
+          <li class="tutorial-btn hidden"><button>Tutorials</button></li>
+          <li class="makes"><button>My makes</button></li>
+          <li>
+            <iframe src="{{audience}}/sso/include.html" class="include-frame"></iframe>
+          </li>
+        </ul>
+      </nav>
+      <div class="my-projects-container">
+        <iframe class="my-projects-iframe"></iframe>
+      </div>
+      <div class="tutorial-list">
+        <div class="tutorial-arrow"></div>
+      </div>
+    </div>
   </header>
 </div>
diff --git a/public/src/webmakernav.js b/public/src/webmakernav.js
diff --git a/public/templates/basic/style.less b/public/templates/basic/style.less
@@ -41,7 +41,7 @@
 .butter-header-spacing .body-wrapper {
   position: absolute;
   left: 0;
-  top: 80px; /* compensate for header */
+  top: 62px; /* compensate for header */
   right: 350px;
   bottom: 0;
   -webkit-transition: right 0.25s;