vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

QE login dialog and flow

Browse source 
Fixes #560
This commit is contained in:
Joseph Schorr 2015-10-30 15:11:45 -04:00
parent fea2d3c98c
commit dcb4935706
4 changed files with 159 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
static/css/pages/plans.css
View file

@ -367,4 +367,66 @@
margin-bottom: 20px;
text-align: center;
display: block;
}
}
#tectonicManagerDialog .modal-body {
text-align: center;
padding: 40px;
}
#tectonicManagerDialog .qe-logo {
max-height: 50px;
margin-bottom: 30px;
max-width: 100%;
}
#tectonicManagerDialog b {
display: block;
margin-bottom: 15px;
}
#tectonicManagerDialog .buttons {
margin-top: 10px;
margin-bottom: 30px;
}
#tectonicManagerDialog .buttons .btn {
margin-left: 30px;
font-size: 14px;
padding-left: 20px;
padding-right: 20px
}
@media (max-width: 767px) {
#tectonicManagerDialog .buttons .btn {
margin: 0px;
margin-top: 20px;
}
}
#tectonicManagerDialog .buttons .btn:first-child {
margin-left: 0px;
}
#tectonicManagerDialog .shoutout {
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
max-width: 300px;
display: inline-block;
color: #1d304f;
font-size: 13px;
margin-top: 30px;
margin-bottom: 10px;
}
#tectonicManagerDialog .shoutout img {
max-width: 260px;
max-height: 20px;
margin-top: 20px;
}
#tectonicManagerDialog .modal-dialog {
max-width: 650px;
}

69
static/img/tectonic-bycoreos-color-sidebyside.svg Normal file
View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="288px" height="34.202px" viewBox="0 126.976 288 34.202" enable-background="new 0 126.976 288 34.202"
xml:space="preserve">
<g>
<g>
<path fill="#003764" d="M42.105,136.14h-6.512v-4.491h18.414v4.491h-6.512v19.2h-5.389V136.14z"/>
<path fill="#003764" d="M55.242,131.537h14.933v4.491h-9.544v4.828h8.084v4.491h-8.084v5.502h9.881v4.491h-15.27V131.537z"/>
<path fill="#003764" d="M81.628,131.2c2.919,0,5.389,1.46,7.074,3.144l-2.919,3.368c-1.235-1.123-2.358-1.796-4.042-1.796
c-3.368,0-5.951,2.919-5.951,7.635c0,4.94,2.246,7.747,5.726,7.747c2.021,0,3.368-0.786,4.491-2.133l2.919,3.256
c-2.021,2.246-4.604,3.481-7.523,3.481c-6.175,0-11.228-4.154-11.228-12.126C70.288,135.691,75.453,131.2,81.628,131.2z"/>
<path fill="#003764" d="M95.663,136.14h-6.512v-4.491h18.414v4.491h-6.512v19.2h-5.389V136.14z"/>
<path fill="#003764" d="M106.218,143.326c0-7.747,4.379-12.239,10.779-12.239c6.4,0,10.779,4.491,10.779,12.239
c0,7.747-4.379,12.463-10.779,12.463C110.709,155.789,106.218,151.074,106.218,143.326z M122.386,143.326
c0-4.716-2.021-7.635-5.277-7.635c-3.256,0-5.277,2.807-5.277,7.635c0,4.828,2.133,7.747,5.277,7.747
C120.253,151.186,122.386,148.154,122.386,143.326z"/>
<path fill="#003764" d="M149.67,131.537h5.389v23.804h-5.389V131.537z"/>
<path fill="#003764" d="M167.635,131.2c2.919,0,5.389,1.46,7.074,3.144l-2.919,3.368c-1.235-1.123-2.358-1.796-4.042-1.796
c-3.368,0-5.951,2.919-5.951,7.635c0,4.94,2.246,7.747,5.726,7.747c2.021,0,3.368-0.786,4.491-2.133l2.919,3.256
c-2.021,2.246-4.604,3.481-7.523,3.481c-6.175,0-11.228-4.154-11.228-12.126C156.407,135.691,161.572,131.2,167.635,131.2z"/>
<polygon fill="#003764" points="142.821,131.537 142.821,146.807 134.737,131.537 134.4,131.537 129.235,131.537 129.235,155.34
134.4,155.34 134.4,140.182 142.372,155.34 147.874,155.34 147.874,131.537 "/>
</g>
</g>
<path fill="#003764" d="M184.365,137.375h1.123v5.277v2.358c1.235-1.011,2.695-1.909,4.154-1.909c3.256,0,4.828,2.47,4.828,6.175
c0,4.154-2.47,6.512-5.389,6.512c-1.123,0-2.47-0.561-3.593-1.46l0,0l-0.112,1.123h-0.898v-18.077H184.365z M189.081,154.891
c2.47,0,4.267-2.246,4.267-5.614c0-3.032-1.011-5.165-3.818-5.165c-1.235,0-2.582,0.674-3.93,2.021v7.186
C186.835,154.442,188.182,154.891,189.081,154.891z"/>
<path fill="#003764" d="M197.726,160.056c1.46,0,2.47-1.347,3.144-3.256l0.337-1.011l-4.94-12.351h1.235l2.919,7.635
c0.337,1.011,0.898,2.358,1.347,3.368h0.112c0.337-1.011,0.786-2.358,1.123-3.368l2.582-7.635h1.123l-4.828,13.698
c-0.674,2.021-1.909,4.042-4.042,4.042c-0.449,0-0.898-0.112-1.235-0.225l0.225-1.011
C196.94,159.944,197.389,160.056,197.726,160.056z"/>
<path fill="#003764" d="M220.407,138.611c1.909,0,3.481,1.011,4.379,2.021l-0.674,0.786c-0.898-1.011-2.133-1.684-3.593-1.684
c-3.593,0-5.951,2.919-5.951,7.523c0,4.604,2.246,7.635,5.839,7.635c1.684,0,3.032-0.674,4.267-2.021l0.674,0.786
c-1.235,1.46-2.807,2.358-4.94,2.358c-4.154,0-6.961-3.368-6.961-8.646C213.221,141.867,216.14,138.611,220.407,138.611z"/>
<path fill="#003764" d="M232.758,143.102c2.919,0,5.502,2.358,5.502,6.4s-2.582,6.4-5.502,6.4c-2.919,0-5.389-2.358-5.389-6.4
S229.951,143.102,232.758,143.102z M232.758,154.891c2.47,0,4.267-2.133,4.267-5.389c0-3.256-1.796-5.389-4.267-5.389
s-4.267,2.246-4.267,5.389S230.4,154.891,232.758,154.891z"/>
<path fill="#003764" d="M241.965,143.439h1.011l0.112,2.246h0.112c0.786-1.46,2.021-2.582,3.481-2.582c0.449,0,0.786,0,1.235,0.225
l-0.225,1.011c-0.449-0.112-0.674-0.225-1.123-0.225c-1.123,0-2.358,0.786-3.368,3.144v8.309h-1.123v-12.126H241.965z"/>
<path fill="#003764" d="M253.979,143.102c2.919,0,4.716,2.021,4.716,5.614c0,0.337,0,0.561,0,0.898h-8.758
c0,3.032,1.797,5.277,4.604,5.277c1.347,0,2.358-0.449,3.256-1.123l0.449,0.898c-1.011,0.561-2.021,1.235-3.818,1.235
c-3.144,0-5.614-2.358-5.614-6.4C248.702,145.572,251.284,143.102,253.979,143.102z M257.572,148.716
c0-3.144-1.347-4.716-3.593-4.716c-2.021,0-3.93,1.796-4.154,4.716H257.572z"/>
<path fill="#003764" d="M260.94,147.144c0-5.277,2.807-8.533,6.849-8.533c4.042,0,6.849,3.368,6.849,8.533
c0,5.277-2.807,8.758-6.849,8.758C263.747,155.902,260.94,152.421,260.94,147.144z M273.404,147.144
c0-4.604-2.246-7.523-5.614-7.523c-3.368,0-5.726,2.919-5.726,7.523s2.246,7.635,5.726,7.635
C271.158,154.779,273.404,151.747,273.404,147.144z"/>
<path fill="#003764" d="M277.782,152.533c1.235,1.347,2.919,2.246,4.94,2.246c2.582,0,4.154-1.347,4.154-3.368
c0-2.021-1.347-2.807-3.032-3.481l-2.582-1.123c-1.46-0.674-3.368-1.684-3.368-4.154c0-2.358,2.021-4.154,4.828-4.154
c2.021,0,3.593,0.898,4.604,2.021l-0.674,0.786c-1.011-1.011-2.358-1.684-3.93-1.684c-2.246,0-3.705,1.123-3.705,3.032
s1.684,2.695,2.919,3.256l2.582,1.123c1.797,0.786,3.481,1.909,3.481,4.379c0,2.582-2.133,4.491-5.389,4.491
c-2.47,0-4.267-1.011-5.614-2.47L277.782,152.533z"/>
<g>
<polygon fill="#FFFFFF" points="21.735,139.117 15.43,136.309 9.126,139.115 15.43,142.757 15.43,150.038 21.015,145.98 "/>
<g>
<polygon fill="#68C28D" points="4.545,136.47 9.126,139.115 15.43,136.309 21.735,139.117 21.015,145.98 15.43,150.038
15.43,155.327 25.073,148.322 26.318,136.47 15.43,131.623 "/>
</g>
<g>
<g>
<path fill="#003764" d="M15.43,126.976L0,133.847l1.766,16.8l13.664,9.928l13.666-9.928l1.766-16.799L15.43,126.976z
M25.072,148.323l-9.642,7.005v-12.57L4.545,136.47l10.885-4.847l10.888,4.847L25.072,148.323z"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

4
static/js/pages/plans.js
View file

@ -25,8 +25,8 @@
};
$scope.qeStartTrial = function(plan) {
// TODO(jschorr): Implement.
alert('Not yet implemented!')
$scope.currentQEPlan = plan;
$('#tectonicManagerDialog').modal('show');
};
$scope.buyNow = function(plan) {

26
static/partials/plans.html
View file

@ -601,7 +601,7 @@
</div>
<!-- Modal message dialog -->
<div class="modal fade" id="signinModal">
<div class="co-dialog modal fade" id="signinModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
@ -613,3 +613,27 @@
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal message dialog -->
<div class="co-dialog modal fade" id="tectonicManagerDialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img class="qe-logo" src="/static/img/QuayEnterprise_horizontal_color.svg">
<b>To start your trial, please choose an option:</b>
<div class="buttons">
<a class="btn btn-primary" href="https://account.tectonic.com/signup/summary/quay-enterprise">Create a new Tectonic account</a>
<a class="btn btn-default" href="https://account.tectonic.com/signup/summary/quay-enterprise">Log in to your Tectonic account</a>
</div>
<div class="shoutout">
<div>
Quay Enterprise is powered by Tectonic,
a collection of enterprise container products.
</div>
<img src="/static/img/tectonic-bycoreos-color-sidebyside.svg">
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->