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

View File

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