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

Add a basic tour to the landing page

Browse source
This commit is contained in:
Joseph Schorr 2013-10-04 22:18:42 -04:00
parent 6ee9abc002
commit 5b99586ffc
2 changed files with 82 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
static/css/quay.css
View file

@ -1,3 +1,4 @@
.plans .callout {
font-size: 2em;
text-align: center;
@ -144,6 +145,38 @@
background-color: #DDFFEE;
}
.product-tour .tour-header {
height: 200px;
text-align: center;
margin-bottom: 40px;
border-bottom: 4px solid black;
}
.product-tour .tour-header .tour-shoutout-header {
margin: 20px;
font-size: 4em;
}
.product-tour .tour-header .tour-shoutout {
font-size: 2em;
color: #444;
}
.product-tour .tour-section {
margin-bottom: 20px;
}
.product-tour .tour-section .tour-section-title {
font-size: 1.8em;
margin-top: 10px;
margin-bottom: 10px;
}
.product-tour .tour-section .tour-section-description {
font-size: 1.2em;
margin-bottom: 20px;
}
.landing .popover-content {
color: black;
}
@ -168,6 +201,14 @@
.landing-footer {
background-color: white;
background-image: none;
padding: 10px;
padding-bottom: 40px;
margin-top: 10px;
border-top: 1px solid #eee;
}
.landing-footer .row {
max-width: 100%;
}
.landing-footer .copyright-container {
@ -182,7 +223,6 @@
display: block;
}
.landing-footer .dt-logo {
vertical-align: center;
max-width: 150px;

41
static/partials/landing.html
View file

@ -84,6 +84,47 @@
</div> <!-- container -->
</div> <!-- jumbotron -->
<div class="product-tour container" ng-show="user.anonymous">
<div class="tour-header row">
<div class="tour-shoutout-header"><i class="icon-chevron-sign-down"></i></div>
<div class="tour-shoutout">Why use Quay</div>
</div>
<div class="tour-section row">
<div class="col-lg-7"><img src="http://1.bp.blogspot.com/-HieEyF9wvVQ/Uk3epFZc6QI/AAAAAAAAADU/-Ov_3v2JkHQ/s640/Screenshot+from+2013-10-03+17%253A12%253A21.png"></div>
<div class="col-lg-5">
<div class="tour-section-title">Customized for you</div>
<div class="tour-section-description">
Your personal home screen shows those repositories most important to you, ordered by recent activity.
</div>
<div class="tour-section-description">Keep up to date on the status of those repositories you deem important.</div>
</div>
</div>
<div class="tour-section row">
<div class="col-lg-7"><img src="http://4.bp.blogspot.com/-0uJZWmoTuaU/Uk3eo8BHAjI/AAAAAAAAADM/PhY-ZNNj0tw/s640/Screenshot+from+2013-10-03+17%253A12%253A41.png"></div>
<div class="col-lg-5">
<div class="tour-section-title">Useful views of respositories</div>
<div class="tour-section-description">
Each repository is presented with the maximum amount of useful information, including its image history, <b>markdown</b>-based description, and tags.
</div>
</div>
</div>
<div class="tour-section row">
<div class="col-lg-7"><img src="http://4.bp.blogspot.com/-aF-RMMxhKmw/Uk3eoys3wsI/AAAAAAAAADc/1uxE8BJ-QHY/s640/Screenshot+from+2013-10-03+17%253A13%253A07.png"></div>
<div class="col-lg-5">
<div class="tour-section-title">Share at your control</div>
<div class="tour-section-description">
Share any repository with as many (or as few) users as you choose.
</div>
<div class="tour-section-description">Want to share with the world? Make your repository public.</div>
<div class="tour-section-description">Need a repository only for your team? Share with your team members.</div>
<div class="tour-section-description">Need finer grain control? Mark a user as read-only or read/write.</div>
</div>
</div>
</div>
<nav class="landing-footer">
<div class="row">
<div class="col-md-2 col-md-offset-1">