From f867ac5bfef7be92cdb213b68dbb1c27677cc578 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Thu, 22 Oct 2015 14:56:36 -0400 Subject: [PATCH 01/20] Change to new logo --- static/css/quay.css | 5 + static/directives/header-bar.html | 3 +- static/img/QuayByCoreOS_horizontal_color.svg | 111 +++++++++++++++++++ static/js/directives/ui/header-bar.js | 3 +- 4 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 static/img/QuayByCoreOS_horizontal_color.svg diff --git a/static/css/quay.css b/static/css/quay.css index bd8e3873a..bdf16f7f3 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -83,6 +83,7 @@ } #quay-logo { + margin-left: 10px; height: 36px; width: 100px; background-repeat: no-repeat; @@ -91,6 +92,10 @@ display: inline-block; } +#quay-logo.hosted-logo { + width: 150px; +} + #padding-container { padding: 20px; padding-top: 20px; diff --git a/static/directives/header-bar.html b/static/directives/header-bar.html index b3b2111ea..ddab29e3f 100644 --- a/static/directives/header-bar.html +++ b/static/directives/header-bar.html @@ -7,7 +7,8 @@ ≡ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/js/directives/ui/header-bar.js b/static/js/directives/ui/header-bar.js index 243055df9..8088cb84f 100644 --- a/static/js/directives/ui/header-bar.js +++ b/static/js/directives/ui/header-bar.js @@ -51,6 +51,7 @@ angular.module('quay').directive('headerBar', function () { } }; + $scope.Config = Config; $scope.notificationService = NotificationService; $scope.searchingAllowed = false; $scope.searchVisible = false; @@ -159,7 +160,7 @@ angular.module('quay').directive('headerBar', function () { $scope.getEnterpriseLogo = function() { if (!Config.ENTERPRISE_LOGO_URL) { - return '/static/img/quay-logo.png'; + return '/static/img/QuayByCoreOS_horizontal_color.svg'; } return Config.ENTERPRISE_LOGO_URL; From 9a398592216847b9478df0fd1652967234eb667b Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Thu, 22 Oct 2015 17:10:25 -0400 Subject: [PATCH 02/20] Start on revamp of the plans page This PR implements the hosted side; QE side will come in the next PR First steps in #559 --- static/css/pages/plans.css | 221 ++++++++++++ .../img/QuayEnterprise_horizontal_color.svg | 108 ++++++ static/img/Quay_horizontal_color.svg | 40 +++ static/js/pages/plans.js | 11 +- static/partials/plans.html | 338 +++++++++++------- 5 files changed, 583 insertions(+), 135 deletions(-) create mode 100644 static/css/pages/plans.css create mode 100644 static/img/QuayEnterprise_horizontal_color.svg create mode 100644 static/img/Quay_horizontal_color.svg diff --git a/static/css/pages/plans.css b/static/css/pages/plans.css new file mode 100644 index 000000000..d715606c3 --- /dev/null +++ b/static/css/pages/plans.css @@ -0,0 +1,221 @@ +.plans-panel { + padding: 0px; + padding-top: 50px; +} + +.plans-panel .plans-header { + font-size: 22px; + color: #888; + margin-bottom: 40px; + text-align: center; +} + +.plans-panel .plan-tabs { + text-align: center; + margin-left: 30px; + margin-right: 30px; + margin-bottom: 40px; +} + +.plans-panel .plan-tabs li { + float: none; + display: inline-block; + width: 49%; +} + +.plans-panel .plans-tab a { + padding-bottom: 25px; +} + +.plans-panel .plan-tabs a .tab-logo { + display: block; + margin-bottom: 25px; + text-align: center; + margin-top: 25px; +} + +.plans-panel .plan-tabs a .tab-logo img { + height: 40px; +} + +.plans-panel .plan-tabs a .tab-title { + display: block; + text-align: center; + font-size: 16px; + color: #888; +} + +@media (max-width: 767px) { + .plans-panel .plan-tabs a .tab-title { + display: none; + } + + .plans-panel .plan-tabs a .tab-logo img { + height: 20px; + max-width: 100%; + } +} + +.plans-panel .tab-pane .plan-col { + padding-left: 12px; + padding-right: 12px; +} + +.plans-panel .plan-col:before { + display: block; + text-align: center; + content: "-"; + text-transform: uppercase; + color: white; +} + +.plans-panel .plan-col.popular:before { + content: "Most Popular"; + color: #2276ad; + background-color: #c1dff3; +} + +.plans-panel .plan-box { + background-color: #1d3447; + color: #ddd; + padding: 20px; +} + +.plans-panel .plan-box .plan-header { + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px dashed #495b6a; +} + +.plans-panel .plan-box .plan-description { + margin-top: 20px; + padding-top: 20px; + border-top: 1px dashed #495b6a; + + text-align: center; + font-size: 16px; + margin-bottom: 20px; +} + +.plans-panel .plan-box .plan-header b { + font-size: 18px; + color: white; +} + +.plans-panel .plan-box .plan-header .plan-box-price { + float: right; + width: 60px; + font-size: 22px; + position: relative; +} + +.plans-panel .plan-box .trial-button { + display: block; + text-align: center; + width: 100%; +} + +.plans-panel .plan-box select { + margin-bottom: 10px; +} + +.plans-panel .plan-box ul { + padding: 0px; + padding-left: 16px; +} + +.plans-panel .plan-box .plan-header .plan-box-price:after { + content: "/ mo"; + position: absolute; + top: 9px; + right: 0px; + font-size: 12px; + color: #aaa; +} + +.plans-panel .plan-features { + margin: 0px; + margin-top: 10px; + list-style: none; + color: #6aab56; + text-align: center; + padding: 0px; +} + +.plans-panel .plan-features i.fa { + margin-right: 10px; +} + +.plans-panel .faq-features { + margin-top: 60px; + border-top: 1px solid #ddd; +} + +.plans-panel .features-col { + background-color: #f9f9f9; + padding: 30px; + border: 1px solid #ddd; + border-top: 0px; +} + +.plans-panel .row-container { + margin-left: 30px; + margin-right: 30px; +} + +.plans-panel .row-container-no-margin { + margin-right: 15px; + margin-left: 15px; +} + +.plans-panel .tab-content { + margin-bottom: 30px; +} + +.plans-panel .features-col .features-title { + text-align: center; + font-size: 18px; + margin-bottom: 20px; + color: #1d3447; + font-weight: bold; +} + +.plans-panel .features-col .features-list { + padding: 0px; + list-style: none; +} + +.plans-panel .features-col .features-list li { + position: relative; + padding-left: 36px; + margin-bottom: 20px; +} + +.plans-panel .features-col .features-list li i { + position: absolute; + font-size: 25px; + color: #2e79b9; + left: 0px; +} + +.plans-panel .features-col .features-list li b { + display: block; + color: #2e79b9; + font-size: 16px; + margin-bottom: 12px; +} + +.plans-panel .faq-col { + padding: 50px; + padding-top: 30px; + padding-left: 30px; +} + +.plans-panel .faq-col h4 { + color: #2e79b9; + margin-top: 50px; +} + +.plans-panel .faq-col h4:first-child { + margin-top: 0px; +} diff --git a/static/img/QuayEnterprise_horizontal_color.svg b/static/img/QuayEnterprise_horizontal_color.svg new file mode 100644 index 000000000..8b6c0cb3a --- /dev/null +++ b/static/img/QuayEnterprise_horizontal_color.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/Quay_horizontal_color.svg b/static/img/Quay_horizontal_color.svg new file mode 100644 index 000000000..d8ccc161f --- /dev/null +++ b/static/img/Quay_horizontal_color.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/static/js/pages/plans.js b/static/js/pages/plans.js index 22b73d1bd..1c05bbadf 100644 --- a/static/js/pages/plans.js +++ b/static/js/pages/plans.js @@ -4,7 +4,8 @@ */ angular.module('quayPages').config(['pages', function(pages) { pages.create('plans', 'plans.html', PlansCtrl, { - 'title': 'Plans and Pricing' + 'title': 'Plans and Pricing', + 'newLayout': true }); }]); @@ -30,6 +31,14 @@ PlanService.getPlans(function(plans) { $scope.plans = plans; + for (var i = 0; i < $scope.plans.length; ++i) { + var plan = plans[i]; + if (plan.privateRepos > 20 && !plan.plans_page_hidden) { + $scope.dropdownPlan = plan.stripeId; + break + } + } + if ($scope && $routeParams['trial-plan']) { $scope.buyNow($routeParams['trial-plan']); } diff --git a/static/partials/plans.html b/static/partials/plans.html index a9ad82c6b..9a861881a 100644 --- a/static/partials/plans.html +++ b/static/partials/plans.html @@ -1,148 +1,218 @@ -
-
-
-