Merge 65ef6ed into cfb036d

src/components/Base/Base.js

@@ -1,6 +1,7 @@
 const React = require("react");
 const {connect} = require("react-redux");
 const {injectIntl} = require("react-intl");
+const {MAX_TILES} = require("lib/constants");
 
 const Platform = require("lib/platform");
 const TileUtils = require("lib/TileUtils");
@@ -34,11 +35,15 @@ const Base = React.createClass({
     const {history, directory} = this.props.Sites;
     let tiles = history;
     if (prefs.showSuggested) tiles = TileUtils.getMergedLinks([history, directory]);
-
+    const blankTiles = [];
+    for (let i = 0; i < (MAX_TILES - tiles.length); i++) {
+      blankTiles.push(<div className="tile tile-placeholder" />);
+    }
     return (<div>
       <Search foo={10} />
       <div className="grid" hidden={!prefs.enabled}>
         {tiles.map((tile, index) => <Tile key={index} {...tile} />)}
+        {blankTiles}
       </div>
       <Settings {...prefs} setPrefs={p => Platform.prefs.set(p)} />
     </div>);

src/components/Tile/Tile.scss

@@ -10,9 +10,16 @@
   color: $tile-text-color;
   font-size: $tile-font-size;
 
-  .tile-img-container {
+  &.tile-placeholder {
+    border: 2px dashed #c1c1c1;
     width: $tile-width;
     height: $tile-height;
+    box-shadow: none;
+  }
+
+  .tile-img-container {
+    width: $tile-img-width;
+    height: $tile-img-height;
     position: relative;
     overflow: hidden;
   }
@@ -55,10 +62,11 @@
 
   // the +2px is for a border
   @function totalWidth($n) {
-    @return ($tile-width + 2px) * $n + $tile-gutter-h * ($n - 1)
+    $grid-container-padding: $tile-gutter-h;
+    @return $tile-width * $n + ($tile-gutter-h * $n) + $grid-container-padding;
   }
   @function totalHeight($n) {
-    @return $search-height-offset + ($tile-height + $tile-title-height + 2px) * $n + $tile-gutter-v * $n;
+    @return $search-height-offset + $tile-height * $n + $tile-gutter-v * $n;
   }
 
   @mixin displayN($n) {
@@ -79,6 +87,7 @@
 
   @media (min-width: totalWidth(2)) {
     @include displayN(2);
+    @include heightQuery(1, 2)
     @include heightQuery(2, 4);
     @include heightQuery(3, 6);
   }
@@ -92,6 +101,9 @@
     @include heightQuery(2, 8);
     @include heightQuery(3, 12);
   }
+  @media (min-width: totalWidth(5)) {
+    @include displayN(5);
+    @include heightQuery(2, 10);
+    @include heightQuery(3, 15);
+  }
 }
-
-

src/lib/constants.js

@@ -1,4 +1,6 @@
-const constants = {};
+const constants = {
+  MAX_TILES: 15
+};
 
 // Add action names
 [

src/main.scss

@@ -2,9 +2,11 @@ $bg-color: #F9F9F9;
 $font: "Lucida Grande", sans-serif;
 $focus-blue: #00ACFB;
 
-$tile-height: 180px;
-$tile-width: 290px;
+$tile-img-width: 290px;
+$tile-img-height: 180px;
 $tile-title-height: 36px;
+$tile-width: $tile-img-width + 2px;
+$tile-height: $tile-img-height + $tile-title-height + 2px;
 
 $tile-font-size: 13px;
 $tile-border-radius: 8px;
@@ -17,11 +19,12 @@ $tile-title-bg-color: #F2F2F2;
 $tile-title-hover-color: #333;
 $tile-title-hover-text-color: white;
 
-//1248
-$grid-max-width: ($tile-width + 2px) * 4 + $tile-gutter-h * 5;
+// 5 tiles
+$grid-max-width: $tile-width * 5 + $tile-gutter-h * 6;
 
 $search-height: 36px;
 $search-left-padding: 36px;
+$search-height-offset: $search-height + $tile-gutter-v * 2;
 
 @mixin bgimage($file) {
   $url: "./img/#{$file}";
@@ -36,11 +39,21 @@ $search-left-padding: 36px;
 
 @import "./styles/normalize";
 
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
 body {
   font-family: $font;
   background-color: $bg-color;
   font-size: 13px;
-  overflow: hidden;
+  @media (min-height: $search-height-offset + $tile-height + $tile-gutter-v * 2) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .grid {