Update screenshots and tour content

screenshots/screenshots.js

@@ -96,7 +96,6 @@ casper.then(function() {
   this.capture(outputDir + 'repo-tree.png');
 });
 
-
 casper.then(function() {
   this.log('Generating repository settings screenshot.');
 });
@@ -109,6 +108,19 @@ casper.then(function() {
   this.capture(outputDir + 'repo-settings.png');
 });
 
+casper.then(function() {
+  this.log('Generating repository image diff screenshot.');
+});
+
+casper.thenClick('.image-link a', function() {
+  this.waitForText('Image Layers');
+  this.wait(1000);
+});
+
+casper.then(function() {
+  this.capture(outputDir + 'repo-changes.png');
+});
+
 casper.then(function() {
   this.log('Generating organization view screenshot.');
 });
@@ -133,6 +145,18 @@ casper.then(function() {
   this.capture(outputDir + 'org-teams.png');
 });
 
+casper.then(function() {
+  this.log('Generating organization settings screenshot.');
+});
+
+casper.thenOpen(rootUrl + 'organization/' + org + '?tab=usage', function() {
+  this.wait(1000)
+});
+
+casper.then(function() {
+  this.capture(outputDir + 'org-settings.png');
+});
+
 casper.then(function() {
   this.log('Generating organization logs screenshot.');
 });

static/directives/tour-content.html

@@ -47,7 +47,7 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-md-7 col-md-push-5"><img src="/static/img/repo-admin.png" title="Repository Admin" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
+    <div class="col-md-7 col-md-push-5"><img src="/static/img/repo-settings.png" title="Repository Settings" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
     <div class="col-md-5 col-md-pull-7">
       <div class="tour-section-title">Share at your control</div>
       <div class="tour-section-description">
@@ -65,7 +65,7 @@
     <div class="col-md-5">
       <div class="tour-section-title">Docker diff whenever you need it</div>
       <div class="tour-section-description">
-        We wanted to know what was changing in each image of our repositories just as much as you do. So we added diffs. Now you can see exactly which files were <b>added</b>, <b>changed</b>, or <b>removed</b> for each image. We've also provided two awesome ways to view your changes, either in a filterable list, or in a drill down tree view.
+        We wanted to know what was changing in each image of our repositories just as much as you do. So we added diffs. Now you can see exactly which files were <b>added</b>, <b>changed</b>, or <b>removed</b> for each image. We've also provided two awesome ways to view your changes, either in a Dockerfile-like view, or in a drill down tree view.
       </div>
     </div>
   </div>
@@ -107,7 +107,7 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-md-7"><img src="/static/img/org-repo-list.png" data-title="Repositories" data-screenshot-url="https://quay.io/repository/" class="img-responsive"></div>
+    <div class="col-md-7"><img src="/static/img/org-view.png" data-title="Repositories" data-screenshot-url="https://quay.io/repository/" class="img-responsive"></div>
     <div class="col-md-5">
       <div class="tour-section-title">A central collection of repositories</div>
       <div class="tour-section-description">
@@ -121,7 +121,7 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-md-7 col-md-push-5"><img src="/static/img/org-admin.png" data-title="buynlarge Admin" data-screenshot-url="https://quay.io/organization/buynlarge/admin" class="img-responsive"></div>
+    <div class="col-md-7 col-md-push-5"><img src="/static/img/org-settings.png" data-title="buynlarge Admin" data-screenshot-url="https://quay.io/organization/buynlarge" class="img-responsive"></div>
     <div class="col-md-5 col-md-pull-7">
       <div class="tour-section-title">Organization settings at a glance</div>
       <div class="tour-section-description">
@@ -137,7 +137,7 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-md-7"><img src="/static/img/org-logs.png" data-title="buynlarge Admin" data-screenshot-url="https://quay.io/organization/buynlarge" class="img-responsive"></div>
+    <div class="col-md-7"><img src="/static/img/org-logs.png" data-title="buynlarge Logs" data-screenshot-url="https://quay.io/organization/buynlarge" class="img-responsive"></div>
     <div class="col-md-5">
       <div class="tour-section-title">Logging for comprehensive analysis</div>
       <div class="tour-section-description">
@@ -178,24 +178,6 @@
     </div>
   </div>
 
-  <div class="tour-section row">
-    <div class="col-md-7"><img src="/static/img/org-repo-admin.png" data-title="buynlarge/orgrepo" data-screenshot-url="https://quay.io/repository/buynlarge/orgrepo" class="img-responsive"></div>
-    <div class="col-md-5">
-      <div class="tour-section-title">Fine-grained control of sharing</div>
-      <div class="tour-section-description">
-        Repositories that you create within your organization can be assigned
-        fine-grained permissions just like any other repository. You can also
-        add teams that exist in your organization, or individual users from
-        inside our outside your organization.
-      </div>
-      <div class="tour-section-description">
-        In order to protect your intellectual property, we warn you before
-        you share your repositories with anyone who is not currently a member
-        of a team in your organization.
-      </div>
-    </div>
-  </div>
-
   <div class="row testimonial" quay-require="['BILLING']">
     <div class="message">
       Docker is at the core of Aptible's deployment platform, and Quay provides the secure repository hosting we need to safely store our customer's application images, and our own. With its thorough team access control model, we can be sure that only authorized users are able to access a Docker image repository. No other Docker repository index makes this as easy as Quay.

static/partials/landing-normal.html

@@ -126,11 +126,21 @@
             <i class="fa fa-hdd-o"></i>
             <span class="sf-title">Beautiful repository view</span>
             <div class="sf-text">
-              Repository is presented with the maximum amount of useful information, including a visual tree of its image history, markdown-based description, and tags.
+              Repository is presented with the maximum amount of useful information, including a full tags list,
+              markdown based description and repository push and pull counts.
             </div>
           </div>
 
-          <div class="screenshot-feature" ng-class="currentScreenshot == 'repo-admin' ? 'active' : ''" ng-click="changeScreenshot('repo-admin')">
+          <div class="screenshot-feature" ng-class="currentScreenshot == 'repo-tags' ? 'active' : ''" ng-click="changeScreenshot('repo-tags')">
+            <i class="fa fa-tags"></i>
+            <span class="sf-title">Repository Operations</span>
+            <div class="sf-text">
+              Operations on a repository can be performed directly from the user interface, including adding,
+              removing, and reverting tags.
+            </div>
+          </div>
+
+          <div class="screenshot-feature" ng-class="currentScreenshot == 'repo-settings' ? 'active' : ''" ng-click="changeScreenshot('repo-settings')">
             <i class="fa fa-group"></i>
             <span class="sf-title">Share at your control</span>
             <div class="sf-text">
@@ -142,15 +152,7 @@
             <i class="fa fa-tasks"></i>
             <span class="sf-title">Dockerfile Build</span>
             <div class="sf-text">
-              Repositories can be linked to Github repositories, with automatic building of the Dockerfile(s) found on push.
+              Repositories can be linked to GitHub, BitBucket, GitLab or custom git repositories, with automatic building of the Dockerfile(s) found on push.
-            </div>
-          </div>
-
-          <div class="screenshot-feature" ng-class="currentScreenshot == 'repo-changes' ? 'active' : ''" ng-click="changeScreenshot('repo-changes')">
-            <i class="fa fa-code-fork"></i>
-            <span class="sf-title">Repository Diff</span>
-            <div class="sf-text">
-              See exactly which files were added, changed, or removed for each image in a repository.
             </div>
           </div>
         </div>