make Reviewer Tools responsive for mobile (bug 789304)

mozilla · Sep 13, 2012 · b7bab2f · b7bab2f · robhudson · Sep 13, 2012
1 parent 4771473
commit b7bab2f
Show file tree

Hide file tree

Showing 11 changed files with 440 additions and 118 deletions.
diff --git a/media/css/devreg/base.less b/media/css/devreg/base.less
@@ -13,10 +13,9 @@ body, html {
 }
 
 #wrap {
-    background: @bg-gray;
+    background: @bg-gray @grain-src;
     padding: 2em 0;
     position: relative;
-    background-image: url("../../img/mkt/grain.png");
 }
 
 header {

diff --git a/media/css/devreg/header.less b/media/css/devreg/header.less
@@ -84,7 +84,7 @@
                 border-color: transparent;
                 border-width: 1px 1px 0;
             }
-            &:hover, &.open {
+            &:not(.open):hover, &.open {
                 > ul {
                     display: block;
                 }
@@ -107,7 +107,7 @@
                     padding: 6px 8px;
                     word-wrap: break-word;
                     &:hover {
-                        background: darken(@faded-taupe, 15%);
+                        background: lighten(@border-blue, 10%);
                     }
                 }
                 &.two-col {
@@ -184,11 +184,13 @@
             margin-left: 1px;
             z-index: 3;
             > a {
+                .border-radius(0);
+                .ellipsis;
                 display: block;
                 line-height: 32px;
                 height: 32px;
                 padding: 0 1em;
-                .border-radius(0);
+                max-width: 150px;
                 &:after {
                     display: inline-block;
                     vertical-align: middle;

diff --git a/media/css/devreg/lib.less b/media/css/devreg/lib.less
@@ -53,6 +53,14 @@
 @page-min-height: 404px; // height of the current gradient background image on #page
 
 
+@desktop-min: 980px;
+@tablet-min: 768px;
+@tablet-max: 979px;
+@landscape-max: 767px;
+@mobile-max: 480px;
+@mobile-min: 320px;
+
+
 // Mixins
 .border-radius(@radius) {
     -webkit-border-radius: @radius;

diff --git a/media/css/mkt/buttons.less b/media/css/mkt/buttons.less
@@ -44,7 +44,6 @@ a.arrow, .img.arrow {
     &.product, &.theme-install, &.fat {
         height: 48px;
         padding: 0 32px;
-        line-height: 47px;
     }
 
     &.delete, &.manage, &.cancel, &.product.error {