[TOFIRE] new signed-out experience (bug 839247)

mozilla · Feb 20, 2013 · aa05e92 · aa05e92
1 parent d16d95a
commit aa05e92
Show file tree

Hide file tree

Showing 24 changed files with 183 additions and 349 deletions.
diff --git a/media/css/mkt/account.less b/media/css/mkt/account.less
@@ -2,77 +2,11 @@
 
 #page .account {
     padding: 15px;
-    margin-bottom: 16px;
-    color: @text;
-    &.full {
-        padding-left: 0;
-        padding-right: 0;
-        > .toggles:first-child {
-            padding: 0 15px;
-        }
-    }
     > .toggles:first-child {
-        margin-bottom: 13px;
-    }
-    h3.intro {
-        font-size: 16px;
-        padding-bottom: 12px;
-        border-bottom: 1px solid #abb4ba;
-        .box-shadow(0 1px 0 #edeff0);
-        font-weight: 600;
-    }
-    p {
-        font-size: 14px;
-    }
-    .form-footer .delete {
-        margin-top: 12px;
-    }
-}
-
-.settings #site-header {
-    .search {
-        display: none;
-    }
-}
-
-.account {
-    select {
-        width: 100%;
+        margin-bottom: 20px;
     }
 }
 
-#account-settings {
-    .form-footer {
-        text-align: center;
-        .delete {
-            color: @red;
-            font-size: 12px;
-            &:hover {
-                color: darken(@red, 10%);
-            }
-        }
-    }
-}
-
-#feedback-form {
-    border-bottom: 1px solid rgba(3,16,26,.13);
-    margin-bottom: 0;
-    padding-bottom: 25px;
-}
-
 #feedback-overlay section {
     width: 450px;
 }
-
-.feedback-links {
-    border-top: 1px solid rgba(255, 255, 255, .5);
-    float: left;
-    padding-top: 10px;
-    width: 100%;
-    .fatbutton {
-        margin-top: 10px;
-        &:first-child {
-            width: 100%;
-        }
-    }
-}
diff --git a/media/css/mkt/desktop-carriers-sen.less b/media/css/mkt/desktop-carriers-sen.less
@@ -7,16 +7,14 @@
 }
 
 .sony {
-    &.force-mobile {
-        #site-header section.main,
-        #page section.main,
-        #footer .pad,
-        .grid {
-            max-width: 640px;
-        }
-        .grid .mkt-tile {
-            width: 159px;
-        }
+    #site-header section.main,
+    #page section.main,
+    #footer .pad,
+    .grid {
+        max-width: 640px;
+    }
+    .grid .mkt-tile {
+        width: 159px;
     }
     #site-header, .classic-header {
         background: url(../../img/mkt/carriers-sen/header-bg.png);

diff --git a/media/css/mkt/desktop-header.less b/media/css/mkt/desktop-header.less
@@ -50,7 +50,7 @@ body[data-page-type='search'] #search {
     display: none !important;
 }
 
-.force-mobile #site-header section.main,
+#site-header section.main,
 #site-header nav,
 #search {
     height: 100%;

diff --git a/media/css/mkt/desktop.less b/media/css/mkt/desktop.less
@@ -183,16 +183,14 @@ body {
     }
 }
 
-.force-mobile {
-    #site-header section.main {
-        max-width: @desktop-hdr;
-    }
-    #page section.main {
-        max-width: @desktop-content;
-    }
-    #site-footer {
-        max-width: @desktop-ftr;
-    }
+#site-header section.main {
+    max-width: @desktop-hdr;
+}
+#page section.main {
+    max-width: @desktop-content;
+}
+#site-footer {
+    max-width: @desktop-ftr;
 }
 
 .container,
@@ -231,8 +229,7 @@ body[data-page-type="alpha"] {
 
 // detail
 // At desktop width, let's float the content ratings.
-// TODO: Remove non-force-mobile selector when desktop lands.
-body:not(.force-mobile) .content-rating {
+.desktop .content-rating {
     float: left;
     padding: 0 5px 0 0;
     width: 50%;

diff --git a/media/css/mkt/forms.less b/media/css/mkt/forms.less
@@ -103,6 +103,7 @@ textarea {
 
 select {
     padding: 0;
+    width: 100%;
 }
 
 option {
@@ -190,6 +191,10 @@ form {
     }
 }
 
+#page form {
+    margin-top: 0;
+}
+
 .form-footer {
     clear: both;
     color: @medium-gray;
@@ -201,11 +206,14 @@ form {
 
 .form-grid {
     .simple-field {
-        padding: 5px 0;
+        padding: 0 0 5px;
         width: 100%;
         label, .label {
             margin: 0;
         }
+        + .simple-field {
+            padding: 5px 0;
+        }
     }
     .form-label,
     .form-col {
@@ -240,7 +248,7 @@ form {
         line-height: 28px;
     }
     .form-footer {
-        padding-top: 15px;
+        padding-top: 5px;
     }
     input[type=text],
     textarea {
@@ -290,11 +298,6 @@ form {
             width: auto;
         }
     }
-    .extras {
-        margin: 20px 0;
-        padding: 20px;
-        border-top: 1px solid @light-gray;
-    }
     a {
         display: inline-block;
         margin-left: 5px;
@@ -348,6 +351,10 @@ form {
 }
 
 @media (max-width: @4col) {
+    .button.full {
+        display: block;
+        width: 100%;
+    }
     p.form-footer {
         margin: 10px 0 15px;
     }

diff --git a/media/css/mkt/login.less b/media/css/mkt/login.less
@@ -1,29 +1,23 @@
 @import 'lib';
 
-#login section {
-    text-align: center;
-    footer {
-        text-align: center;
-    }
-}
-
-.notification-box.error {
-    background-color: @white;
-}
-
-// This less file is out of date and requires inversion. We have to stop
-// doing things for .force-mobile like the block below.
-.login #site-footer {
-    display: none;
+// Centre logo on login page. Haxxx.
+body.login[data-page-type=notice] #site-header h1 {
+    left: 70px;
 }
 
 @media (max-width: @4col) {
-    .login {
-        #page {
-            margin: 0;
+    .login section {
+        text-align: center;
+        footer {
+            text-align: center;
         }
-        #site-footer > div {
-            width: 100%;
+        .proceed {
+            margin-top: 20px;
         }
     }
 }
+
+.notice {
+    color: @medium-gray;
+    margin: 30px 0 20px;
+}
diff --git a/media/css/mkt/purchase.less b/media/css/mkt/purchase.less
@@ -17,7 +17,7 @@
     }
 }
 
-.force-mobile #page section.main#installed {
+#page section.main#installed {
     margin: 15px auto;
 }
 

diff --git a/media/css/mkt/site.less b/media/css/mkt/site.less
@@ -162,32 +162,12 @@ body .loading-fragment {
     clear: both;
 }
 
-.col {
-    float: left;
-    margin-left: @gutter * @px;
-    &:first-child {
-        margin-left: 0;
-    }
-}
-
-.html-rtl .col {
-    float: right;
-    margin-right: @gutter * @px;
-    margin-left: auto;
-    &:first-child {
-        margin-right: 0;
-    }
+#site-header section.main,
+#page section.main {
+    margin: 0 auto;
 }
-
-.force-mobile {
-    #site-header section.main,
-    #page section.main,
-    #site-footer {
-        margin: 0 auto;
-    }
-    #page > .overlay {
-        max-width: 100%;
-    }
+#page > .overlay {
+    max-width: 100%;
 }
 
 // 'Notice' pages have a padded body and a home icon in the header.
@@ -209,66 +189,17 @@ body[data-page-type=notice], body[data-page-type=alpha] {
     height: 1px;
 }
 
-#site-footer {
-    display: none;
-    padding: 15px 0 30px;
-
-    margin-top: 15px;
-    border-top: 1px solid rgba(3, 16, 26, 0.13);
-    .box-shadow(inset 0 1px fade(#fff, 50%));
-
-    .account {
-        color: @dark-gray;
-        font-weight: 400;
-        margin-bottom: 5px;
-        a {
-            font-weight: 600;
-        }
-        .logout {
-            font-weight: 200;
-        }
-    }
-    // Reviewers should always see a footer.
-    &.reviewer {
-        display: block;
-    }
-}
-
-// Mobile footer needs only the "log in" button.
-@media (max-width: @not-desktop) {
-    #site-footer.anonymous {
-        display: block;
-        text-align: center;
-        nav {
-            display: none;
-        }
-    }
-}
-
-.force-mobile {
-    .account, .footer-links a {
-        padding: 4px;
-    }
-    .footer-links {
-        p {
-            margin: 0;
-        }
-        a {
-            display: block;
-            &:hover {
-                background-color: rgba(255,255,255,.35);
-                color: @link-dark;
-                text-decoration: underline;
-            }
-        }
-        p + p,
-        a + a {
-            border-top: 1px solid @light-gray;
-        }
+.several-buttons {
+    box-shadow: 0 1px 0 rgba(3,16,26,.13) inset, 0 2px 0 rgba(255,255,255,.5) inset;
+    float: left;
+    margin-top: 10px;
+    padding-top: 10px;
+    width: 100%;
+    .fatbutton {
+        margin-top: 10px;
     }
 }
 
-
 @-webkit-keyframes spin {
     from { -webkit-transform: rotate(0turn); }
     to { -webkit-transform: rotate(1turn); }

diff --git a/media/css/mkt/tile.less b/media/css/mkt/tile.less
@@ -449,6 +449,6 @@
 #featured-home {
     background: #252a2e;
 }
-.force-mobile #page > #featured-home {
+#page > #featured-home {
     max-width: 100%;
 }
diff --git a/media/js/mkt/utils.js b/media/js/mkt/utils.js
@@ -149,9 +149,3 @@ $(document).ajaxSuccess(function(event, xhr, ajaxSettings) {
         $(this).attr('target', '_blank');
     }
 });
-
-
-// If any field changes, submit the form.
-$('form.go').change(function() {
-    this.submit();
-});