Firefox Accounts migration banner (bug 1052864)

Introducing Custom Elements! Close #657
mozilla · Sep 16, 2014 · 9ea27d4 · cvan · Sep 16, 2014 · 9ea27d4
1 parent 538d7d5
commit 9ea27d4
Show file tree

Hide file tree

Showing 15 changed files with 781 additions and 132 deletions.
diff --git a/src/app.html b/src/app.html
@@ -19,7 +19,6 @@
     </div>
 
     <header id="site-header" class="header site-header"></header>
-    <aside id="incompatibility-banner"></aside>
 
     <div class="cloak"></div>
     <main>

diff --git a/src/index.html b/src/index.html
@@ -9,6 +9,7 @@
     <meta name="theme-color" content="#fff">
 
     <title>Firefox Marketplace</title>
+
     <link rel="icon" href="/media/img/logos/128.png" sizes="128x128">
     <link rel="icon" href="/media/img/logos/64.png" sizes="64x64">
     <link rel="icon" href="/media/img/logos/32.png" sizes="32x32">
@@ -36,7 +37,6 @@
     <link rel="stylesheet" href="/media/css/feedback.styl.css">
     <link rel="stylesheet" href="/media/css/forms.styl.css">
     <link rel="stylesheet" href="/media/css/form-modal.styl.css">
-    <link rel="stylesheet" href="/media/css/incompatible.styl.css">
     <link rel="stylesheet" href="/media/css/lightbox.styl.css">
     <link rel="stylesheet" href="/media/css/menu.styl.css">
     <link rel="stylesheet" href="/media/css/modal.styl.css">
@@ -46,6 +46,7 @@
     <link rel="stylesheet" href="/media/css/purchase.styl.css">
     <link rel="stylesheet" href="/media/css/ratings.styl.css">
     <link rel="stylesheet" href="/media/css/search.styl.css">
+    <link rel="stylesheet" href="/media/css/site-banner.styl.css">
   </head>
   <body class="overlayed" data-media="">
 
@@ -55,7 +56,6 @@
     </div>
 
     <header id="site-header" class="header site-header"></header>
-    <aside id="incompatibility-banner"></aside>
 
     <div class="cloak"></div>
     <main>

diff --git a/src/media/css/header.styl b/src/media/css/header.styl
@@ -1,6 +1,12 @@
 // styles for the global site header only.
 @import 'lib';
 
+// Add the header's height back as padding. This is overriden when the header
+// is not `position: fixed`.
+body {
+    padding-top: $header-height;
+}
+
 // ***************** Wide Mobile (600+ px)
 
 // usable on any header
@@ -9,8 +15,8 @@
     border-top: 1px solid $salt-flat-white;
     border-bottom: 1px solid $seavan-salt-white;
     display-flex();
-    height: 48px;
-    max-height: 48px;
+    height: $header-height;
+    max-height: $header-height;
     position: relative;
     width: 100%;
 
@@ -25,7 +31,7 @@
         color: $castle-skull-gray;
         font-size: 18px;
         font-weight: 400;
-        line-height: 48px;
+        line-height: $header-height;
         z-index: 10;
     }
 }
@@ -45,7 +51,7 @@
         display: block;
     }
     > nav {
-        height: 48px;
+        height: $header-height;
         display-flex();
         position: relative;
         text-align: left;
@@ -56,7 +62,7 @@
         }
     }
     .site {
-        height: 48px;
+        height: $header-height;
         margin: 0 5px;
         width: 200px;
 
@@ -197,10 +203,10 @@
 .header-button {
     color: $castle-skull-gray;
     display: block;
-    height: 48px;
-    line-height: 48px;
+    height: $header-height;
+    line-height: $header-height;
     text-align: center;
-    width: 48px;
+    width: $header-height;  // $header-height so it's square.
 
     // header buttons with icons
     &.icon {
@@ -425,23 +431,15 @@
         flex(1);
     }
 }
-
-[data-page-type~=root] {
-    main {
-        padding-top: 48px;
-    }
-}
 main {
-    padding-top: 38px;
-
     &:before {
         // This makes a sweet gradient below the header
         // (which will appear when scrolling past the category drop-down menu).
         content: '';
         display: block;
         gradientLinear(unquote('to top, rgba(15,15,15,0) 0%, rgba(15,15,15,.3) 100%'));
         height: 2px;
-        top: 48px;
+        top: $header-height;
         position: fixed;
         width: 100%;
         z-index: 18;
@@ -465,7 +463,7 @@ main {
         }
     }
     [data-page-type] main {
-        padding: 0 0 48px;
+        padding: 0 0 $header-height;
 
         &:before {
             display: none;
@@ -477,6 +475,10 @@ main {
 
 // This probably shouldn't be media query based.
 @media $wider-desktop {
+    body {
+      padding-top: 0;
+    }
+
     .header-button.settings {
         right: 0;
         top: 0;
@@ -514,7 +516,7 @@ main {
         > nav {
             height: 60px;
             margin: 0 auto;
-            max-width: 1024px;
+            max-width: $max-site-width;
         }
         .site {
             margin: 0;
@@ -594,13 +596,12 @@ main {
 }
 
 // ***************** Wide Mobile (> 671px)
-
 @media $at-least-desktop {
     .secondary-header {
         background: none;
         border: 0;
-        height: 48px;
-        max-height: 48px;
+        height: $header-height;
+        max-height: $header-height;
         position: relative;
 
         &:before {

diff --git a/src/media/css/incompatible.styl b/src/media/css/incompatible.styl
diff --git a/src/media/css/lib.styl b/src/media/css/lib.styl
@@ -1,6 +1,8 @@
 // Widths
 $desktop-content = 690px;
 $desktop-ftr = 732px;
+$header-height = 48px;
+$max-site-width = 1024px;
 
 // Use these as @media $at-least-desktop {}
 $at-least-desktop = unquote('(min-width: 710px)');

diff --git a/src/media/css/navbar.styl b/src/media/css/navbar.styl
@@ -28,9 +28,9 @@
     body[data-page-type~=leaf],
     body[data-page-type~=search] {
         .site-nav {
-            // Slide up and down.
+            // Slide out of view.
             bottom: 50px;
-            margin-bottom: -40px;
+            margin-bottom: -50px;
         }
     }
     .site-nav {
@@ -182,7 +182,6 @@
     }
     .site-nav {
         background-color: #E0E0E0;
-        bottom: 38px;
         height: 50px;
         margin: 0 auto;
         z-index: 25;

diff --git a/src/media/css/site-banner.styl b/src/media/css/site-banner.styl
@@ -0,0 +1,52 @@
+@import 'lib';
+
+.mkt-banner {
+    background: $grey-gardens-gray;
+    color: $cement-gray;
+    display: block;
+    overflow: hidden;
+    position: relative;
+    line-height: 1.3;
+
+    .mkt-banner-content {
+        align-items: center;
+        background: url("../img/logos/firefox-64.png") no-repeat;
+        background-position: 0 50%;
+        background-size: 64px 60px;
+        display-flex();
+        flex-line();
+        margin: 0 auto;
+        max-width: $max-site-width;
+        min-height: 60px;
+        padding: 10px 40px 10px 70px;
+        position: relative;
+        text-align: left;
+    }
+
+    .close {
+        margin-top: -17px;
+        top: 50%;
+    }
+}
+
+.mkt-banner.mkt-banner-success {
+    background: #64be3c;
+    color: #fff;
+
+    .mkt-banner-content {
+        font-size: 15px;
+        font-weight: 300;
+    }
+
+    small {
+        display: block;
+        font-size: 12px;
+        padding-top: 5px;
+    }
+
+    a {
+        color: #fff;
+        font-weight: 500;
+        text-decoration: underline;
+    }
+}
diff --git a/src/media/css/site.styl b/src/media/css/site.styl
@@ -98,13 +98,6 @@ body {
     position: relative;
 }
 
-@media $small-desktop {
-    nav.site-nav {
-        // Account for header height change.
-        margin-bottom: -38px;
-    }
-}
-
 .row {
     clear: both;
 }

diff --git a/src/media/img/logos/firefox-64.png b/src/media/img/logos/firefox-64.png