Tweak drawing.js to have a better default margin that never truncates image ids on the left in small widths. Tweak the screenshot generator to use the smallest possible width. Remove tabs from several files. Add the browser-chrome plugin to wrap phantomjs screenshots with browser chrome. Add some repository descriptions to the dataset generator. Switch to using our own screenshots vs those hosted on blogger.

.gitignore

@@ -2,4 +2,4 @@
 venv
 .elasticbeanstalk/
 static/snapshots/
-screenshots/*.png
+screenshots/screenshots/

initdb.py

@@ -52,12 +52,16 @@ def create_subtree(repo, structure, parent):
     create_subtree(repo, subtree, new_image)
 
 
-def __generate_repository(user, name, is_public, permissions, structure):
+def __generate_repository(user, name, description, is_public, permissions, structure):
   repo = model.create_repository(user.username, name, user)
 
   if is_public:
     model.set_repository_visibility(repo, 'public')
 
+  if description:
+    repo.description = description
+    repo.save()
+
   for delegate, role in permissions:
     model.set_user_repo_permission(delegate.username, user.username, name,
                                    role)
@@ -81,16 +85,18 @@ if __name__ == '__main__':
     new_user_2.verified = True
     new_user_2.save()
 
-    __generate_repository(new_user_1, 'simple', False, [], (4, [],
+    __generate_repository(new_user_1, 'simple', 'Simple repository.', False,
-                          ['latest', 'prod']))
+                          [], (4, [], ['latest', 'prod']))
 
-    __generate_repository(new_user_1, 'complex', False, [],
+    __generate_repository(new_user_1, 'complex',
+                          'Complex repository with many branches and tags.',
+                          False, [(new_user_2, 'read')],
                           (2, [(3, [], 'v2.0'),
                                (1, [(1, [(1, [], ['latest', 'prod'])],
                                      'staging'),
                                     (1, [], None)], None)], None))
 
-    __generate_repository(new_user_1, 'horrific', False, [],
+    __generate_repository(new_user_1, 'horrific', None, False, [],
                           (2, [(3, [], 'v2.0'),
                                (1, [(1, [(1, [], ['latest', 'prod'])],
                                      'staging'),
@@ -100,8 +106,10 @@ if __name__ == '__main__':
                                (1, [(1, [], 'v5.0'), (1, [], 'v6.0')], None)],
                            None))
 
-    __generate_repository(new_user_2, 'publicrepo', True, [],
+    __generate_repository(new_user_2, 'publicrepo',
-                          (10, [], 'latest'))
+                          'Public repository pullable by the world.', True,
+                          [], (10, [], 'latest'))
 
-    __generate_repository(new_user_1, 'shared', False,
+    __generate_repository(new_user_1, 'shared',
+                          'Shared repository, another user can write.', False,
                           [(new_user_2, 'write')], (5, [], 'latest'))

screenshots/screenshots.js

@@ -1,6 +1,6 @@
 var casper = require('casper').create({
   viewportSize: {
-    width: 1280,
+    width: 1070,
     height: 768
   },
   verbose: true,
@@ -11,7 +11,9 @@ var options = casper.cli.options;
 var isDebug = !!options['d'];
 
 var rootUrl = isDebug ? 'http://localhost:5001/' : 'https://quay.io/';
-var repo = isDebug ? 'simple' : 'r0';
+var repo = isDebug ? 'complex' : 'r0';
+
+var outputDir = "screenshots/";
 
 casper.start(rootUrl);
 
@@ -24,7 +26,7 @@ casper.on("page.error", function(msg, trace) {
 });
 
 casper.then(function() {
-  this.capture('landing.png');
+  this.capture(outputDir + 'landing.png');
 });
 
 casper.thenOpen(rootUrl + 'signin', function () {
@@ -39,7 +41,7 @@ casper.then(function() {
 });
 
 casper.then(function() {
-  this.capture('user-home.png');
+  this.capture(outputDir + 'user-home.png');
 });
 
 casper.thenOpen(rootUrl + 'repository/devtable/' + repo, function() {
@@ -51,7 +53,7 @@ casper.thenOpen(rootUrl + 'repository/devtable/' + repo, function() {
 });
 
 casper.then(function() {
-  this.capture('repo-view.png');
+  this.capture(outputDir + 'repo-view.png');
 });
 
 casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '/admin', function() {
@@ -59,7 +61,7 @@ casper.thenOpen(rootUrl + 'repository/devtable/' + repo + '/admin', function() {
 });
 
 casper.then(function() {
-  this.capture('repo-admin.png');
+  this.capture(outputDir + 'repo-admin.png');
 });
 
 casper.run();

static/css/quay.css

@@ -1,3 +1,6 @@
+* {
+  font-family: 'Droid Sans', sans-serif;
+}
 
 .plans .callout {
   font-size: 2em;
@@ -719,6 +722,7 @@ p.editable:hover i {
 
 #image-history-container {
   overflow: hidden;
+  min-height: 400px;
 }
 
 #image-history-container .node circle {

static/js/controllers.js

@@ -199,6 +199,8 @@ function LandingCtrl($scope, $timeout, Restangular, UserService, KeyService) {
   };
 
   $scope.status = 'ready';
+
+  browserchrome.update();
 }
 
 function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {

static/js/graphing.js

@@ -65,12 +65,7 @@ ImageHistoryTree.prototype.draw = function(container) {
     var boundingBox = document.getElementById(container).getBoundingClientRect();
     document.getElementById(container).style.maxHeight = (viewportHeight - boundingBox.top) + 'px';
 
-    var leftMargin = 20;
+    var margin = { top: 40, right: 20, bottom: 20, left: 40 };
-    if (width > document.getElementById(container).clientWidth) {
-	leftMargin = 120;
-    }
-
-    var margin = { top: 40, right: 20, bottom: 20, left: leftMargin };
     var m = [margin.top, margin.right, margin.bottom, margin.left];
     var w = width - m[1] - m[3];
     var h = height - m[0] - m[2];

static/lib/browser-chrome.css

@@ -0,0 +1,183 @@
+.browser-chrome-container * {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.browser-chrome-container {
+  border: 2px solid #363532; 
+  display: inline-block;
+  border-radius: 2px;
+
+  max-width: 100%;
+  height: auto;
+}
+
+.browser-chrome-header {
+  height: 40px;
+  padding: 2px;
+  overflow: hidden;
+
+  background-color: rgb(54,53,50);
+
+  background-image: linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
+  background-image: -o-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
+  background-image: -moz-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
+  background-image: -webkit-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
+  background-image: -ms-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(86,85,81) 100%);
+
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0, rgb(54,53,50)),
+    color-stop(1, rgb(86,85,81))
+  );
+}
+
+.browser-chrome-header .user-icon-container {
+  float: right;
+  margin-right: 5px;
+  margin-top: 10px;
+}
+
+.browser-chrome-header .user-icon-container i {
+  color: #78bcf3;
+}
+
+.browser-chrome-header i {
+  color: white;
+}
+
+.browser-chrome-tab {
+  display: inline-block;
+  position: relative;
+  width: 200px;
+  height: 25px;
+  bottom: -13px;
+  left: 10px;
+  background-color: #f2f1f0;
+  vertical-align: middle;
+
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.browser-chrome-tab-wrapper:before,
+.browser-chrome-tab-wrapper:after {
+  content: "";
+  position: absolute;
+  background-color: #f2f1f0;
+  width: 10px;
+  height: 10px;
+  bottom: 0px;
+}
+
+.browser-chrome-tab-wrapper:before {
+  left: -10px;
+
+}
+
+.browser-chrome-tab-wrapper:after {
+  right: -10px;
+}
+
+.browser-chrome-tab:before,
+.browser-chrome-tab:after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  bottom: 0px;
+
+  background-color: rgb(54,53,50);
+
+  background-image: linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
+  background-image: -o-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
+  background-image: -moz-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
+  background-image: -webkit-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
+  background-image: -ms-linear-gradient(bottom, rgb(54,53,50) 0%, rgb(70,69,65) 100%);
+
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0, rgb(54,53,50)),
+    color-stop(1, rgb(70,69,65))
+  );
+
+  z-index: 1;
+}
+
+.browser-chrome-tab:before {
+  left: -20px;
+}
+
+.browser-chrome-tab:after {
+  right: -20px;
+}
+
+.browser-chrome-tab-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  padding: 4px;  
+  white-space: nowrap;
+}
+
+.browser-chrome-tab-content i {
+  color: #363532;
+}
+
+.browser-chrome-url-bar {
+  height: 35px;
+  background-color: #f2f1f0;
+  padding: 5px;
+}
+
+.browser-chrome-url-bar i {
+  color: #363532;
+  margin-right: 5px;
+}
+
+.browser-chrome-url-bar .left-controls {
+  width: 78px;
+  float: left;
+  padding-top: 2px;
+}
+
+.browser-chrome-url-bar .right-controls {
+  width: 26px;
+  float: right;
+  padding-top: 2px;
+}
+
+.browser-chrome-url-bar .right-controls i {
+  margin-left: 5px;
+  margin-right: 0;
+}
+
+.browser-chrome-url {
+  color: black;
+  background-color: white;
+  border-radius: 2px;
+  border: 1px solid #ada9a5;
+  padding: 2px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.browser-chrome-url .protocol-https {
+  color: #079500;
+}
+
+.browser-chrome-url .protocol-https i {
+  color: #079500;
+}
+
+.browser-chrome-url i {
+  margin-right: 5px;
+  margin-left: 5px;
+}

static/lib/browser-chrome.js

@@ -0,0 +1,39 @@
+(function(browserchrome, $) {
+  var htmlTemplate = '<div class="browser-chrome-container"><div class="browser-chrome-header"><i class="icon-remove-sign"></i> <i class="icon-minus-sign"></i> <i class="icon-plus-sign"></i><div class="browser-chrome-tab"><div class="browser-chrome-tab-wrapper"><div class="browser-chrome-tab-content"><i class="icon-file-alt icon-large"></i> <span class="tab-title">Tab Title</span></div></div></div><div class="user-icon-container"><i class="icon-user icon-2x"></i></div></div><div class="browser-chrome-url-bar"><div class="left-controls"><i class="icon-arrow-left icon-large"></i> <i class="icon-arrow-right icon-large"></i> <i class="icon-rotate-right icon-large"></i> </div><div class="right-controls"> <i class="icon-reorder icon-large"></i></div><div class="browser-chrome-url"><span class="protocol-https" style="display: none"><i class="icon-lock"></i>https</span><span class="protocol-http"><i class="icon-file-alt"></i>http</span><span class="url-text">://google.com/</span></div></div></div>'
+
+  browserchrome.update = function() {
+    $('[data-screenshot-url]').each(function(index, element) {
+      var elem = $(element);
+      if (!elem.data('has-chrome')) {
+        // Create chrome
+        var createdHtml = $(htmlTemplate);
+
+        // Add the new chrome to the page where the image was
+        elem.replaceWith(createdHtml);
+
+        // Add the image to the new browser chrome html
+        createdHtml.append(elem);
+
+        // Set the tab title
+        var tabTitle = elem.attr('title') || elem.data('tab-title');
+        createdHtml.find('.tab-title').text(tabTitle);
+
+        // Pick the protocol and set the url
+        var url = elem.data('screenshot-url');
+        if (url.substring(0, 6) === 'https:') {
+          createdHtml.find('.protocol-http').hide();
+          createdHtml.find('.protocol-https').show();
+          url = url.substring(5);
+        } else {
+          createdHtml.find('.protocol-http').hide();
+          createdHtml.find('.protocol-https').show();
+          url = url.substring(4);
+        }
+        console.log('setting url to: ' + url);
+        createdHtml.find('.url-text').text(url);
+
+        elem.data('has-chrome', 'true');
+      }
+    });
+  };
+}(window.browserchrome = window.browserchrome || {}, window.jQuery));

static/partials/landing.html

@@ -102,7 +102,7 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-md-7"><img src="//1.bp.blogspot.com/-HieEyF9wvVQ/Uk3epFZc6QI/AAAAAAAAADU/-Ov_3v2JkHQ/s640/Screenshot+from+2013-10-03+17%253A12%253A21.png" class="img-responsive"></div>
+    <div class="col-md-7"><img src="/static/img/user-home.png" title="User Home - Quay" data-screenshot-url="https://quay.io/" class="img-responsive"></div>
     <div class="col-md-5">
       <div class="tour-section-title">Customized for you</div>
       <div class="tour-section-description">
@@ -113,7 +113,7 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-md-7 col-md-push-5"><img src="//4.bp.blogspot.com/-0uJZWmoTuaU/Uk3eo8BHAjI/AAAAAAAAADM/PhY-ZNNj0tw/s640/Screenshot+from+2013-10-03+17%253A12%253A41.png" class="img-responsive"></div>
+    <div class="col-md-7 col-md-push-5"><img src="/static/img/repo-view.png" title="Repository View - Quay" data-screenshot-url="https://quay.io/repository/devtable/complex" class="img-responsive"></div>
     <div class="col-md-5 col-md-pull-7">
       <div class="tour-section-title">Useful views of respositories</div>
       <div class="tour-section-description">
@@ -123,7 +123,7 @@
   </div>
   
   <div class="tour-section row">
-    <div class="col-md-7"><img src="//4.bp.blogspot.com/-aF-RMMxhKmw/Uk3eoys3wsI/AAAAAAAAADc/1uxE8BJ-QHY/s640/Screenshot+from+2013-10-03+17%253A13%253A07.png" class="img-responsive"></div>
+    <div class="col-md-7"><img src="/static/img/repo-admin.png" title="Repository Admin - Quay" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
     <div class="col-md-5">
       <div class="tour-section-title">Share at your control</div>
       <div class="tour-section-description">

static/partials/view-repo.html

@@ -63,7 +63,7 @@
 
       <div class="row">
         <!-- Tree View container -->
-	<div  class="col-md-8">
+        <div  class="col-md-7">
 
           <div class="panel panel-default">
             <div class="panel-heading">
@@ -87,7 +87,7 @@
         </div>
 
         <!-- Side Panel -->
-	<div class="col-md-4">
+        <div class="col-md-5">
          <div class="panel panel-default">
            <div class="panel-heading">
              <!-- Image dropdown -->

templates/index.html

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
+    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="/static/lib/browser-chrome.css">
 
     <link rel="stylesheet" href="/static/css/quay.css">
 
@@ -39,6 +41,7 @@
     <script src="static/lib/typeahead.min.js"></script>
 
     <script src="static/lib/d3-tip.js" charset="utf-8"></script>
+    <script src="static/lib/browser-chrome.js"></script>
 
     <script src="static/js/app.js"></script>
     <script src="static/js/controllers.js"></script>