From 06806c97ddc73185401717583bb42a2ea657c1b9 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Mon, 23 Dec 2013 15:04:52 -0500
Subject: [PATCH] New plans page

---
 static/css/quay.css        | 155 +++++++++++++++++++++++++++++++++----
 static/partials/plans.html | 109 +++++++++++++++++++++-----
 2 files changed, 229 insertions(+), 35 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index b0e981909..93af07091 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -662,42 +662,163 @@ i.toggle-icon:hover {
 
 .plans-list .plan {
   vertical-align: top;
-
-  padding: 10px;
-  border: 1px solid #eee;
-  border-top: 4px solid #94C9F7;
   font-size: 1.4em;
-  margin-top: 5px;
-}
-
-.plans-list .plan.business-plan {
-  border: 1px solid #eee;
-  border-top: 4px solid #94F794;
 }
 
 .plans-list .plan.bus-small {
-  border: 1px solid #ddd;
-  border-top: 4px solid #47A447;
-  margin-top: 0px;
-  font-size: 1.6em;
+  border-top: 6px solid #46ac39;
+  margin-top: -10px;
+}
+
+.plans-list .plan.bus-small .plan-box {
+  background: black !important;
 }
 
 .plans-list .plan:last-child {
   margin-right:  0px;
 }
 
+.plans-list .plan .plan-box {
+  background: #444;
+  padding: 10px;
+  color: white;
+}
+
 .plans-list .plan .plan-title {
+  text-transform: uppercase;
+  padding-top: 25px;
+  padding-bottom: 20px;
   margin-bottom: 10px;
-  display: block;
   font-weight: bold;
+  border-bottom: 1px solid #eee;
+}
+
+.visible-sm-inline {
+  display: none;
+}
+
+.hidden-sm-inline {
+  display: inline;
+}     
+
+@media (max-width: 991px) and (min-width: 768px) {
+  .visible-sm-inline {
+    display: inline;
+  }
+
+  .hidden-sm-inline {
+    display: none;
+  }
+}
+
+.plans-list .plan-box .description {
+  color: white;
+  margin-top: 6px;
+  font-size: 12px !important;
+}
+
+.plans-list .plan button {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+.plans-list .plan.bus-small button {
+  font-size: 1em;
+}
+
+.plans-list .features-bar {
+  padding-top: 248px;
+}
+
+.plans-list .features-bar .feature .count {
+  padding: 10px;
+}
+
+.plans-list .features-bar .feature {
+  height: 43px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.plans-list .features-bar .feature .feature-tooltip {
+  border-bottom: 1px dotted black;
+  cursor: default;
+}
+
+.plans-list .features-bar .feature i {
+  margin-left: 16px;
+  float: right;
+  width: 16px;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 2px;
+}
+
+.plans-list .plan .features {
+  padding: 6px;
+  background: #eee;
+  padding-bottom: 0px;
+}
+
+.plans-list .plan .feature {
+  text-align: center;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  font-size: 14px;
+}
+
+.plans-list .plan .feature:after {
+  content: "";
+  border-radius: 50%;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
+.plans-list .plan .visible-xs .feature {
+  text-align: left;
+}
+
+.plans-list .plan .visible-xs .feature:after {
+  float: left;
+  margin-right: 10px;
+}
+
+.plans-list .plan .feature.notpresent {
+  color: #ccc;
+}
+
+.plans-list .plan .feature.present:after {
+  background: #428bca;
+}
+
+.plans-list .plan.business-plan .feature.present:after {
+  background: #46ac39;
+}
+
+.plans-list .plan .count, .plans-list .features-bar .count {
+  background: white;
+  border-bottom: 0px;
+  text-align: center !important;
+}
+
+.plans-list .plan .count b, .plans-list .features-bar .count b {
+  font-size: 1.5em;
+  display: block;
+}
+
+.plans-list .plan .feature:last-child {
+  border-bottom: 0px;
+}
+
+.plans-list .plan-price {
+  margin-bottom: 10px;
 }
 
 .plan-price {
-  margin-bottom: 10px;
   display: block;
   font-weight: bold;
   font-size: 1.8em;
-
   position: relative;
 }
 
diff --git a/static/partials/plans.html b/static/partials/plans.html
index ab90bd927..400c646c7 100644
--- a/static/partials/plans.html
+++ b/static/partials/plans.html
@@ -1,25 +1,98 @@
 <div class="container plans content-container">
-  <div class="callout">
-    Plans &amp; Pricing
-  </div>
-
-  <div class="all-plans">
-    All plans include <span class="feature">unlimited public repositories</span> and <span class="feature">unlimited sharing</span>.
-    <br>
-    All business plans include: <span class="business-feature">organizations</span> and <span class="business-feature">teams</span> with <span class="business-feature">delegated access</span> to the organization.
-  </div>
-
   <div class="row plans-list">
-    <div class="col-xs-0 col-lg-1"></div>
-    <div class="col-lg-2 col-xs-4 plan-container" ng-repeat="plan in plans" ng-show="plan.price > 0 && !plan.deprecated">
+    <div class="col-sm-2">
+      <div class="features-bar hidden-xs">
+          <div class="visible-lg" style="height: 44px"></div>
+          <div class="visible-md" style="height: 62px"></div>
+          <div class="visible-sm" style="height: 86px"></div>
+
+          <div class="feature">
+            <span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
+                  title="All plans have unlimited public repositories">
+              <span class="hidden-sm-inline">Public Repositories</span>
+              <span class="visible-sm-inline">Public Repos</span>
+            </span>
+            <i class="fa fa-hdd visible-lg"></i> 
+          </div>
+          <div class="feature">
+             <span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
+                  title="SSL encryption is enabled end-to-end for all operations">
+               SSL Encryption
+            </span>
+            <i class="fa fa-lock visible-lg"></i>
+          </div>
+          <div class="feature">
+            <span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
+                  title="Allows users or organizations to grant permissions in multiple repositories to the same non-login-capable account">
+              Robot accounts
+            </span>
+            <i class="fa fa-wrench visible-lg"></i>
+          </div>
+          <div class="feature">
+            <span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
+                  title="Repository images can be built directly from Dockerfiles">
+              Dockerfile Build
+            </span>
+            <i class="fa fa-upload visible-lg"></i>
+          </div>
+          <div class="feature">
+            <span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
+                  title="Grant subsets of users in an organization their own permissions, either on a global basis or a per-repository basis">
+              Teams
+            </span>
+            <i class="fa fa-group visible-lg"></i>
+          </div>
+          <div class="feature">
+            <span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
+                  title="Every action take within an organization is logged in detail, with the ability to visualize logs and download them">
+              Logging
+            </span>
+            <i class="fa fa-bar-chart-o visible-lg"></i>
+          </div>
+          <div class="feature">
+            <span class="feature-tooltip" bs-tooltip="tooltip.title" data-container="body" data-placement="right"
+                  title="Administrators can view and download the full invoice history for their organization">
+              Invoice History
+            </span>
+            <i class="fa fa-calendar visible-lg"></i>
+          </div>
+        </div>
+
+    </div>
+    <div class="col-sm-2 plan-container" ng-repeat="plan in plans" ng-show="plan.price > 0 && !plan.deprecated">
       <div class="plan" ng-class="plan.stripeId + ' ' + (plan.bus_features ? 'business-plan' : '')">
-        <div class="plan-title">{{ plan.title }}</div>
-        <div class="plan-price">${{ plan.price/100 }}</div>
-        <div class="count"><b>{{ plan.privateRepos }}</b> private repositories</div>
-        <div class="description">{{ plan.audience }}</div>
-        <div class="smaller">SSL secured connections</div>
+        <div class="plan-box">
+          <div class="plan-title">{{ plan.title }}</div>
+          <div class="plan-price">${{ plan.price/100 }}</div>
+
+          <div class="description">{{ plan.audience }}</div>
+        </div>
+
+        <div class="features hidden-xs">
+          <div class="feature count"><b>{{ plan.privateRepos }}</b> private repositories</div>
+          <div class="feature present"></div>
+          <div class="feature present"></div>
+          <div class="feature present"></div>
+          <div class="feature present"></div>
+          <div class="feature" ng-class="plan.bus_features ? 'present' : ''"></div>
+          <div class="feature" ng-class="plan.bus_features ? 'present' : ''"></div>
+          <div class="feature" ng-class="plan.bus_features ? 'present' : ''"></div>
+        </div>
+
+        <div class="features visible-xs">
+          <div class="feature count"><b>{{ plan.privateRepos }}</b> private repositories</div>
+          <div class="feature present">Unlimited Public Repositories</div>
+          <div class="feature present">SSL Encryption</div>
+          <div class="feature present">Robot accounts</div>
+          <div class="feature present">Dockerfile Build</div>
+          <div class="feature" ng-class="plan.bus_features ? 'present' : 'notpresent'">Teams</div>
+          <div class="feature" ng-class="plan.bus_features ? 'present' : 'notpresent'">Logging</div>
+          <div class="feature" ng-class="plan.bus_features ? 'present' : 'notpresent'">Invoice History</div>
+        </div>
+
         <button class="btn btn-block" ng-class="plan.bus_features ? 'btn-success' : 'btn-primary'"
-                ng-click="buyNow(plan.stripeId)">Sign Up Now</button>
+                ng-click="buyNow(plan.stripeId)">Start <span class="hidden-sm-inline">Free</span> Trial</button>
+
       </div>
     </div>
   </div>