Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Fixed members loading spinner alignment

Browse source 
refs https://github.com/TryGhost/Ghost/issues/11755

Loading spinner on members screen was not vertically centered, this updates the spinner position.
This commit is contained in:
Rish 2020-04-21 13:42:17 +05:30
parent 4d23d0f0ca
commit cd832a15bb
2 changed files with 27 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/controllers/members.js
View file

@ -28,6 +28,10 @@ export default Controller.extend({
this._availableLabels = this.store.peekAll('label'); this._availableLabels = this.store.peekAll('label');
}, },
showLoader: computed('filteredMembers.length', 'fetchMembers.isRunning', function () {
return (!this.get('filteredMembers.length') && this.get('fetchMembers.isRunning'));
}),
listHeader: computed('selectedLabel', 'searchText', function () { listHeader: computed('selectedLabel', 'searchText', function () {
let {searchText, selectedLabel, filteredMembers} = this; let {searchText, selectedLabel, filteredMembers} = this;
if (searchText) { if (searchText) {

50
ghost/admin/app/templates/members.hbs
View file

@ -43,35 +43,31 @@
<LinkTo @route="member.new" class="gh-btn gh-btn-green" data-test-new-member-button="true"><span>New member</span></LinkTo> <LinkTo @route="member.new" class="gh-btn gh-btn-green" data-test-new-member-button="true"><span>New member</span></LinkTo>
</section> </section>
</GhCanvasHeader> </GhCanvasHeader>
{{#if this.showLoader}}
<section class="view-container"> <div class="gh-content">
{{#if filteredMembers}} <GhLoadingSpinner />
{{#if this.showingAll}} </div>
<section> {{else}}
<GhMembersChart @members={{members}} /> <section class="view-container">
</section> {{#if this.filteredMembers}}
{{#if this.showingAll}}
<section>
<GhMembersChart @members={{members}} />
</section>
{{/if}}
{{/if}} {{/if}}
{{/if}} <section class="content-list">
<section class="content-list"> <ol class="members-list gh-list {{unless this.filteredMembers "no-posts"}}">
<ol class="members-list gh-list {{unless this.filteredMembers "no-posts"}}">
{{#if this.filteredMembers}}
<li class="gh-list-row header">
<div class="gh-list-header">{{listHeader}}</div>
<div class="gh-list-header gh-list-cellwidth-20 nowrap">Location</div>
<div class="gh-list-header gh-list-cellwidth-20 nowrap">Created</div>
<div class="gh-list-header gh-list-cellwidth-chevron"></div>
</li>
{{#if this.filteredMembers}} {{#if this.filteredMembers}}
<li class="gh-list-row header">
<div class="gh-list-header">{{listHeader}}</div>
<div class="gh-list-header gh-list-cellwidth-20 nowrap">Location</div>
<div class="gh-list-header gh-list-cellwidth-20 nowrap">Created</div>
<div class="gh-list-header gh-list-cellwidth-chevron"></div>
</li>
<VerticalCollection @items={{this.filteredMembers}} @key="id" @containerSelector=".gh-main" @estimateHeight=60 @bufferSize=20 as |member|> <VerticalCollection @items={{this.filteredMembers}} @key="id" @containerSelector=".gh-main" @estimateHeight=60 @bufferSize=20 as |member|>
<GhMembersListItem @member={{member}} @data-test-member-id={{member.id}} /> <GhMembersListItem @member={{member}} @data-test-member-id={{member.id}} />
</VerticalCollection> </VerticalCollection>
{{/if}}
{{else}}
{{#if this.fetchMembers.isRunning}}
<div class="gh-content">
<GhLoadingSpinner />
</div>
{{else}} {{else}}
<li class="no-posts-box"> <li class="no-posts-box">
<div class="no-posts"> <div class="no-posts">
@ -85,10 +81,10 @@
</div> </div>
</li> </li>
{{/if}} {{/if}}
{{/if}} </ol>
</ol> </section>
</section> </section>
</section> {{/if}}
</section> </section>
{{outlet}} {{outlet}}