Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(709)

Unified Diff: chrome/browser/resources/local_ntp/local_ntp.css

Issue 412073002: Local NTP: prevent tiles from reloading on resize by moving them into single <div>. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Fixing comments; improving renderTiles(). Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: chrome/browser/resources/local_ntp/local_ntp.css
diff --git a/chrome/browser/resources/local_ntp/local_ntp.css b/chrome/browser/resources/local_ntp/local_ntp.css
index cdc6ae41bca186d53f51a953726eb06216a8a2ba..3a46fadf8e9fa73cf4c7ed7c95cbbcd9f4421a1c 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.css
+++ b/chrome/browser/resources/local_ntp/local_ntp.css
@@ -137,48 +137,13 @@ body.fakebox-focused #cursor {
}
#mv-tiles {
- /* Use GPU compositing if available. */
- -webkit-transform: translate3d(0, 0, 0);
- height: 260px;
- overflow: hidden;
- padding: 0 1em;
- white-space: nowrap;
- width: 304px;
-}
-
-@media only screen and (min-width:660px) {
- #fakebox {
- width: 458px;
- }
- #mv-tiles {
- width: 460px;
- }
-}
-
-@media only screen and (min-width:820px) {
- #fakebox {
- width: 618px;
- }
- #mv-tiles {
- width: 620px;
- }
-}
-
-.mv-row {
- margin-bottom: 50px;
-}
-
-.mv-row:last-child {
- margin-bottom: 0;
-}
-
-.mv-tile:first-child {
- -webkit-margin-start: -1px;
+ height: calc(2 * 138px);
+ line-height: 138px;
+ margin: 0;
+ position: relative;
}
.mv-tile {
- -webkit-margin-start: 20px;
- -webkit-transform: translate3d(0, 0, 0);
-webkit-transition-duration: 200ms;
-webkit-transition-property: -webkit-transform, margin, opacity, width;
background: -webkit-linear-gradient(#f2f2f2, #e8e8e8);
@@ -187,6 +152,10 @@ body.fakebox-focused #cursor {
box-shadow: inset 0 2px 3px rgba(0, 0, 0, .09);
display: inline-block;
height: 83px;
+ margin-left: 10px;
+ margin-right: 10px; /* Total horizontal margins add to TILE_MARGIN. */
+ position: relative;
+ vertical-align: top;
width: 138px;
}

Powered by Google App Engine
This is Rietveld 408576698