add first_sync styles

This commit is contained in:
Lisa Passing 2015-05-07 14:45:26 +02:00
parent b04cf65485
commit 9c4bee76f5
3 changed files with 32 additions and 5 deletions

View File

@ -72,3 +72,4 @@
@import "app/layouts/requests"; @import "app/layouts/requests";
@import "app/layouts/caches"; @import "app/layouts/caches";
@import "app/layouts/getting-started"; @import "app/layouts/getting-started";
@import "app/layouts/first-sync";

View File

@ -0,0 +1,24 @@
.mascot
display: block
margin: 0 0 50px 0
height: 150px
background: inline-image('travis-mascot-150.png') 50% 0 no-repeat
background-size: 150px 150px
.first-sync
.not-syncing
margin-top: 5rem
text-align: center
.great-news
font-size: 36px
font-weight: 400
color: $grey3
p
font-size: $font-size-ml
line-height: 1.5

View File

@ -1,4 +1,4 @@
<div id="first_sync"> <div id="first_sync" class="first-sync">
{{#if isSyncing}} {{#if isSyncing}}
<img src="/images/getting-started/mustache-spinner.gif" class="spinner" width="300"> <img src="/images/getting-started/mustache-spinner.gif" class="spinner" width="300">
<p class="first-sync-head">One more thing</p> <p class="first-sync-head">One more thing</p>
@ -19,12 +19,14 @@
{{/if}} {{/if}}
{{#unless isSyncing}} {{#unless isSyncing}}
<div class="sync-row"> <div class="row not-syncing">
<img src="/images/getting-started/mustache-no-spin.png" class="spinner" width="100"> <div class="column medium-4 medium-centered">
<p class="great-news">Great news!</p> <span class="mascot"></span>
<h1 class="great-news">Great news!</h1>
<p> <p>
We've successfully synchronized your details from GitHub. We will redirect you to your profile in a few seconds. We've successfully synchronized your details from GitHub.<br>We will redirect you to your profile in a few seconds.
</p> </p>
</div>
</div> </div>
{{/unless}} {{/unless}}
</div> </div>