[Search] Modify the First-run experience in Landscape mode

BUG=None Review URL: https://codereview.chromium.org/626513002 Cr-Commit-Position: refs/heads/master@{#297877}

[Search] Modify the First-run experience in Landscape mode
BUG=None Review URL: https://codereview.chromium.org/626513002 Cr-Commit-Position: refs/heads/master@{#297877}
b600c161 · mathp · Commit bot · c82291e2 · b600c161 · b600c161
Commit b600c161 authored Oct 02, 2014 by mathp Committed by Commit bot Oct 02, 2014
2 changed files
--- a/chrome/browser/resources/contextual_search/promo.css
+++ b/chrome/browser/resources/contextual_search/promo.css
@@ -24,7 +24,7 @@ a.colored-link {
 }

 #button-container {
-  text-align: right;
+  text-align: end;
  width: 100%;
 }

@@ -41,18 +41,43 @@ a.colored-link {
  margin: 24px 16px 4px 16px;
 }

+/* Some properties below can be overridden in landscape orientation. */
 #heading {
  font-size: 24px;
  letter-spacing: 1px;
  margin-top: 0;
  text-align: center;
 }
-
 #header-image {
-  display: block;
  height: 100px;
  margin: 0 auto 24px auto;
 }
+.portrait {
+  display: block;
+}
+.landscape {
+  display: none;
+}
+
+/* Landscape */
+@media screen and (orientation:landscape) {
+  #heading {
+    padding-top: 16px;
+  }
+  #header-image {
+    margin: 0 24px;
+  }
+  .portrait {
+    display: none;
+  }
+  .landscape {
+    display: block;
+    float: left;
+  }
+  html[dir='rtl'] .landscape {
+    float: right;
+  }
+}

 .label {
  display: inline-block;

--- a/chrome/browser/resources/contextual_search/promo.html
+++ b/chrome/browser/resources/contextual_search/promo.html
@@ -13,13 +13,16 @@
 </head>
 <body>
  <div id="container">
-    <img id="header-image" src="header.svg">
+    <img id="header-image" class="portrait" src="header.svg">
    <p i18n-content="heading" id="heading"></p>
-    <p id="description">
-      <span i18n-content="description-1"></span>
-      <a class="colored-link" href="#learn-more" i18n-content="feature-name"></a>
-      <span i18n-content="description-2"></span>
-    </p>
+    <div>
+      <img id="header-image" class="landscape" src="header.svg">
+      <p id="description">
+        <span i18n-content="description-1"></span>
+        <a class="colored-link" href="#learn-more" i18n-content="feature-name"></a>
+        <span i18n-content="description-2"></span>
+      </p>
+    </div>
    <div id="button-container">
      <span id="optout-label" class="label"><a href="#optout" i18n-content="optOut"></a></span>
      <span id="optin-label" class="label"><a href="#optin" i18n-content="optIn"></a></span>