Bug 1023863 - Adjust divider margins and grid item heights. r=kgrandon

mozilla-b2g · Jul 1, 2014 · ac391fa · ac391fa
1 parent d8aa2da
commit ac391fa
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/shared/elements/gaia_grid/js/grid_layout.js b/shared/elements/gaia_grid/js/grid_layout.js
@@ -14,9 +14,9 @@
   // 320 / 3.8 = 84px | 480 / 3.8 = 126px | 540 / 3.8 = 142px | ...
   const iconScaleFactorMinIconsPerRow = 3.8;
 
-  const distanceBetweenIconsWithMinIconsPerRow = 40;
+  const distanceBetweenIconsWithMinIconsPerRow = 36;
 
-  const distanceBetweenIconsWithMaxIconsPerRow = 44;
+  const distanceBetweenIconsWithMaxIconsPerRow = 36;
 
   var windowWidth = window.innerWidth;
 

diff --git a/shared/elements/gaia_grid/js/items/divider.js b/shared/elements/gaia_grid/js/items/divider.js
@@ -23,7 +23,9 @@
     /**
      * Height in pixels of each divider.
      */
-    pixelHeight: 70,
+    get pixelHeight() {
+      return (this.grid.layout.cols > 3) ? 50 : 60;
+    },
 
     /**
      * Width in grid units for each divider.

diff --git a/shared/elements/gaia_grid/js/items/grid_item.js b/shared/elements/gaia_grid/js/items/grid_item.js
@@ -359,7 +359,7 @@
         var nameContainerEl = document.createElement('p');
         nameContainerEl.style.marginTop = ((this.grid.layout.gridIconSize *
           (1 / this.scale)) +
-          GridIconRenderer.prototype.unscaledCanvasPadding) + 'px';
+          (GridIconRenderer.prototype.unscaledCanvasPadding / 2)) + 'px';
         tile.appendChild(nameContainerEl);
 
         var nameEl = document.createElement('span');

diff --git a/shared/elements/gaia_grid/style.css b/shared/elements/gaia_grid/style.css
@@ -70,8 +70,7 @@
 
 .icon .title {
   display: inline-block;
-  /* Space between icon and title .1rem + .2rem = .3rem as spec says */
-  margin-top: .1rem;
+  margin-top: -0.2rem;
   /* We need this rule in order not to hide the drop shadow */
   padding: 0.2rem 0.2rem 1rem;
   text-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3),
@@ -88,20 +87,25 @@
 [cols="4"] .icon .title {
   /* Font size is the same independent on grid configuration */
   font-size: calc(1.2rem * 1.333);
+  margin-top: 0.2rem;
 }
 
 .divider {
   position: absolute;
   width: 50%;
-  margin: 2.3rem 25%;
+  margin: 2.3rem 25% 3.5rem 25%;
+}
+
+[cols="4"] .divider {
+  margin: 1.6rem 25% 3.2rem 25%;
 }
 
 .divider span {
   display: block;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5));
   width: 100%;
   z-index: 2;
-  height: 0.2rem
+  height: 0.2rem;
 }
 
 .dragging .icon.active {