Add footer to landing page and main layout
This commit also plugs statuspage.io status check to the footer's status section.
This commit is contained in:
parent
c716752945
commit
9d46fc6712
22
app/components/travis-status.coffee
Normal file
22
app/components/travis-status.coffee
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
`import Ember from 'ember'`
|
||||||
|
`import Ajax from 'travis/utils/ajax'`
|
||||||
|
`import config from 'travis/config/environment'`
|
||||||
|
|
||||||
|
TravisStatusComponent = Ember.Component.extend
|
||||||
|
status: null
|
||||||
|
|
||||||
|
statusPageStatusUrl: (->
|
||||||
|
config.statusPageStatusUrl
|
||||||
|
).property()
|
||||||
|
|
||||||
|
didInsertElement: ->
|
||||||
|
if url = @get('statusPageStatusUrl')
|
||||||
|
self = this
|
||||||
|
@getStatus(url).then (response) ->
|
||||||
|
if response.status and response.status.indicator
|
||||||
|
self.set('status', response.status.indicator)
|
||||||
|
|
||||||
|
getStatus: (url) ->
|
||||||
|
$.ajax(url)
|
||||||
|
|
||||||
|
`export default TravisStatusComponent`
|
|
@ -13,7 +13,7 @@
|
||||||
background-color: #eff0ec
|
background-color: #eff0ec
|
||||||
|
|
||||||
#landing
|
#landing
|
||||||
margin: 0 auto
|
margin: 0 auto 170px auto
|
||||||
max-width: 1200px
|
max-width: 1200px
|
||||||
font-weight: 300
|
font-weight: 300
|
||||||
|
|
||||||
|
|
|
@ -52,6 +52,9 @@
|
||||||
margin-bottom: -99999px
|
margin-bottom: -99999px
|
||||||
padding-bottom: 100034px
|
padding-bottom: 100034px
|
||||||
|
|
||||||
|
#left
|
||||||
|
z-index: -1
|
||||||
|
|
||||||
@media #{$large-up}
|
@media #{$large-up}
|
||||||
|
|
||||||
#left, #right, .wrapper-main
|
#left, #right, .wrapper-main
|
||||||
|
|
|
@ -62,7 +62,6 @@ footer a:active
|
||||||
text-decoration : underline
|
text-decoration : underline
|
||||||
|
|
||||||
.status-circle
|
.status-circle
|
||||||
background : $pass-color
|
|
||||||
display : inline-block
|
display : inline-block
|
||||||
height : 11px
|
height : 11px
|
||||||
width : 11px
|
width : 11px
|
||||||
|
@ -72,3 +71,15 @@ footer a:active
|
||||||
-webkit-border-radius : 100px
|
-webkit-border-radius : 100px
|
||||||
-moz-border-radius : 100px
|
-moz-border-radius : 100px
|
||||||
vertical-align: middle
|
vertical-align: middle
|
||||||
|
|
||||||
|
.status-circle.none
|
||||||
|
background: #2fcc66
|
||||||
|
|
||||||
|
.status-circle.degraded
|
||||||
|
background: #f1c40f
|
||||||
|
|
||||||
|
.status-circle.minor
|
||||||
|
background: #e67e22
|
||||||
|
|
||||||
|
.status-circle.major
|
||||||
|
background: #e74c3c
|
||||||
|
|
8
app/templates/components/travis-status.hbs
Normal file
8
app/templates/components/travis-status.hbs
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
{{#if statusPageStatusUrl}}
|
||||||
|
<h3>Travis CI Status</h3>
|
||||||
|
<ul>
|
||||||
|
<li><div {{bind-attr class=":status-circle status"}}>Status:</div>
|
||||||
|
<a href="http://www.traviscistatus.com/">Travis CI Status</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{{/if}}
|
|
@ -31,11 +31,6 @@
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="small-6 medium-2 large-2 columns">
|
<div class="small-6 medium-2 large-2 columns">
|
||||||
<h3>Travis CI Status</h3>
|
{{travis-status}}
|
||||||
<ul>
|
|
||||||
<li><div class="status-circle">Status:</div>
|
|
||||||
<a href="http://www.traviscistatus.com/">Travis CI Status</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,5 +15,8 @@
|
||||||
<aside id="left" {{bind-attr class="auth.signedIn::hidden"}}>
|
<aside id="left" {{bind-attr class="auth.signedIn::hidden"}}>
|
||||||
{{outlet "left"}}
|
{{outlet "left"}}
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
{{render "footer"}}
|
||||||
|
</footer>
|
||||||
|
|
|
@ -5,3 +5,7 @@
|
||||||
{{render "flash"}}
|
{{render "flash"}}
|
||||||
|
|
||||||
{{yield}}
|
{{yield}}
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
{{render "footer"}}
|
||||||
|
</footer>
|
||||||
|
|
|
@ -29,7 +29,8 @@ module.exports = function(environment) {
|
||||||
pro: false,
|
pro: false,
|
||||||
enterprise: false,
|
enterprise: false,
|
||||||
endpoints: {},
|
endpoints: {},
|
||||||
intervals: { updateTimes: 1000 }
|
intervals: { updateTimes: 1000 },
|
||||||
|
statusPageStatusUrl: 'https://pnpcptp8xh9k.statuspage.io/api/v2/status.json'
|
||||||
};
|
};
|
||||||
|
|
||||||
if (typeof process !== 'undefined') {
|
if (typeof process !== 'undefined') {
|
||||||
|
|
19
tests/unit/components/travis-status-test.coffee
Normal file
19
tests/unit/components/travis-status-test.coffee
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
`import { test, moduleForComponent } from 'ember-qunit'`
|
||||||
|
|
||||||
|
server = null
|
||||||
|
moduleForComponent 'travis-status', 'TravisStatusComponent', {}
|
||||||
|
|
||||||
|
test 'adds incident class to .status-circle', ->
|
||||||
|
expect 3
|
||||||
|
# creates the component instance
|
||||||
|
component = @subject()
|
||||||
|
component.getStatus = ->
|
||||||
|
new Ember.RSVP.Promise (resolve, reject) ->
|
||||||
|
resolve({ status: { indicator: 'major' } })
|
||||||
|
|
||||||
|
ok !component.get('status'), 'status is initially not set'
|
||||||
|
|
||||||
|
@append()
|
||||||
|
|
||||||
|
equal component.get('status'), 'major', 'status is updated from the API'
|
||||||
|
ok component.$('.status-circle').hasClass('major'), 'status class is set on .status-circle'
|
Loading…
Reference in New Issue
Block a user