center loading indicators

This commit is contained in:
Lisa Passing 2015-03-18 16:49:09 +01:00
parent 5b9dd4819f
commit d20d7e7568
2 changed files with 50 additions and 46 deletions

View File

@ -1,28 +1,30 @@
{{#if isLoaded}} {{#if isLoaded}}
{{#if length}} {{#if length}}
{{#each job in controller}} {{#each job in controller}}
<div {{bind-attr class=":tile :tile--sidebar job.state"}}> <div {{bind-attr class=":tile :tile--sidebar job.state"}}>
{{#if job.repo.slug}} {{#if job.repo.slug}}
<span {{bind-attr class=":icon :icon--job job.state"}}></span> <span {{bind-attr class=":icon :icon--job job.state"}}></span>
{{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}} {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
{{/if}} {{/if}}
</h2> </h2>
<p class="tile-title float-right"> <p class="tile-title float-right">
<span class="icon icon--hash"></span> <span class="icon icon--hash"></span>
{{#link-to "job" job.repo job}}{{job.number}}{{/link-to}} {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
</p> </p>
<p> <p>
<span class="icon icon--clock"></span> Queued <span class="icon icon--clock"></span> Queued
</p> </p>
</div> </div>
{{/each}} {{/each}}
{{else}}
<div class="spinner-container">There are no jobs queued</div>
{{/if}}
{{else}} {{else}}
<div class="spinner-container">There are no jobs queued</div> <div class="spinner-container">
{{/if}} <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{else}} </div>
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{/if}} {{/if}}

View File

@ -1,34 +1,36 @@
{{!-- <h4>Running Jobs ({{controller.length}})</h4> --}} {{!-- <h4>Running Jobs ({{controller.length}})</h4> --}}
{{#if isLoaded}} {{#if isLoaded}}
{{#if controller.length}} {{#if controller.length}}
{{#each job in controller}} {{#each job in controller}}
<div {{bind-attr class=":tile :tile--sidebar job.state"}}> <div {{bind-attr class=":tile :tile--sidebar job.state"}}>
{{#if job.repo.slug}} {{#if job.repo.slug}}
<span {{bind-attr class=":icon :icon--job job.state"}}></span> <span {{bind-attr class=":icon :icon--job job.state"}}></span>
{{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}} {{#link-to "job" job.repo job}}{{job.repo.slug}}{{/link-to}}
{{/if}} {{/if}}
</h2> </h2>
<p class="tile-title float-right"> <p class="tile-title float-right">
<span class="icon icon--hash"></span> <span class="icon icon--hash"></span>
{{#link-to "job" job.repo job}}{{job.number}}{{/link-to}} {{#link-to "job" job.repo job}}{{job.number}}{{/link-to}}
</p> </p>
<p> <p>
<span class="icon icon--clock"></span> <span class="icon icon--clock"></span>
Duration: Duration:
<abbr class="duration" {{bind-attr title="job.startedAt"}}> <abbr class="duration" {{bind-attr title="job.startedAt"}}>
{{format-duration job.startedAt}} {{format-duration job.startedAt}}
</abbr> </abbr>
</p> </p>
</div> </div>
{{/each}} {{/each}}
{{else}}
<div class="spinner-container">There are no jobs running</div>
{{/if}}
{{else}} {{else}}
<div class="spinner-container">There are no jobs running</div> <div class="spinner-container">
{{/if}} <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{else}} </div>
<span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{/if}} {{/if}}