Add “Template 3” coming soon and center showcase. (ampproject#232)

* Add “Template 3” coming soon and center showcase. * Rename 1x thumbnail image for template 3.
israelcefrin · Mar 7, 2017 · 0b23656 · 0b23656
1 parent c945582
commit 0b23656
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 3 deletions.
diff --git a/components/lightbox/template-preview.snip.html b/components/lightbox/template-preview.snip.html
@@ -19,6 +19,7 @@
 <!-- This component is specific to www and might not be re-usable without css edits -->
 
 {{#template-preview}}
+{{#lightbox-id}}
 <amp-lightbox id="{{lightbox-id}}" layout="nodisplay" class="ampstart-device-preview relative">
   <div class="ampstart-device-preview-mask absolute top-0 right-0 left-0 bottom-0 {{classes}}" role="button" on="tap:{{lightbox-id}}.close" tabindex="0"></div>
   <amp-selector>
@@ -77,4 +78,5 @@ <h3>Preview</h3>
     </div>
   </amp-selector>
 </amp-lightbox>
+{{/lightbox-id}}
 {{/template-preview}}
diff --git a/css/www/index/page.css b/css/www/index/page.css
@@ -47,11 +47,18 @@
   }
 }
 
+.www-index-showcase amp-carousel {
+  max-width: 709px;
+}
+
 .www-index-showcase amp-img {
-  cursor: pointer;
   margin-top: 1px;
 }
 
+.www-index-showcase amp-img[on] {
+  cursor: pointer;
+}
+
 .ampstart-footer small {
   font-size: var(--h6);
 }
diff --git a/img/www/index/theme3_coming_soon.png b/img/www/index/theme3_coming_soon.png
diff --git a/img/www/index/theme3_coming_soon_2x.png b/img/www/index/theme3_coming_soon_2x.png
diff --git a/www/index.html b/www/index.html
@@ -77,11 +77,11 @@ <h3 class="caps pt4 pb2">{{title}}</h3>
 
     <section class="www-index-showcase px4">
       <h2 class="center mb4">Built with AMP Start</h2>
-      <amp-carousel type="carousel" layout="fixed-height" height="414" controls class="mb4">
+      <amp-carousel type="carousel" layout="fixed-height" height="414" controls class="mb4 mx-auto">
         {{#showcase-template-previews}}
         {{#template-preview}}
           {{#img}}
-          <amp-img src="{{{url}}}" {{#2x_url}}srcset="{{{url}}} 1x,{{{.}}} 2x"{{/2x_url}} width="{{width}}" height="{{height}}" class="ampstart-card" title="View {{title}}" on="tap:{{lightbox-id}}"></amp-img>
+          <amp-img src="{{{url}}}" {{#2x_url}}srcset="{{{url}}} 1x,{{{.}}} 2x"{{/2x_url}} width="{{width}}" height="{{height}}" class="ampstart-card" title="View {{title}}"{{#lightbox-id}} on="tap:{{lightbox-id}}"{{/lightbox-id}}></amp-img>
           {{/img}}
         {{/template-preview}}
         {{/showcase-template-previews}}

diff --git a/www/index.json b/www/index.json
@@ -140,6 +140,17 @@
           "src": "templates/themes/2/home.amp.html",
           "download": "archive/home.zip"
         }
+      },
+      {
+        "template-preview": {
+          "title": "Opinionated Template 3: Coming Soon",
+          "img": {
+            "width": "231",
+            "height": "410",
+            "url": "../img/www/index/theme3_coming_soon.png",
+            "2x_url": "../img/www/index/theme3_coming_soon_2x.png"
+          }
+        }
       }
     ],
     "notification": {