Ghost/ghost/admin/app/templates/member.hbs
Sanne de Vries 27cc99c907 Fixed issues for member details mobile view (#1807)
* Fixed issues for member details mobile view

No-ref

- Changed order to display feed at the bottom
- Displayed heading and value vertically between 1400px and 1160px
- Displayed "Complementary plan" copy and switch vertically between 1400px and 1160px
- Added margin below "Continue subscription" button
- Prevented date in feed to wrap

* fixed tests

Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
2020-12-16 10:04:33 +01:00

74 lines
2.4 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="members" data-test-link="members-back">Members</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
{{#if this.member.isNew}}
New member
{{else}}
{{or this.member.name this.member.email}}
{{/if}}
</h2>
<section class="view-actions">
{{#if this.session.user.isOwnerOrAdmin}}
{{#unless this.member.isNew}}
<button
class="gh-btn gh-btn-white gh-btn-icon mr2"
{{on "click" this.toggleImpersonateMemberModal}}>
<span>Impersonate</span>
</button>
{{/unless}}
{{/if}}
<GhTaskButton @class="gh-btn gh-btn-blue gh-btn-icon" @type="button" @task={{this.saveTask}} @data-test-button="save" />
</section>
</GhCanvasHeader>
<form class="member-basic-info-form">
<GhMemberSettingsForm
@member={{this.member}}
@scratchMember={{this.scratchMember}}
@setProperty={{this.setProperty}}
@isLoading={{this.isLoading}} />
</form>
{{#unless this.member.isNew}}
<div class="w-60">
<button
type="button"
class="gh-btn gh-btn-red gh-btn-icon mt14"
{{on "click" this.toggleDeleteMemberModal}}
data-test-button="delete-member"
>
<span>Delete member</span>
</button>
</div>
{{/unless}}
</section>
{{#if this.showUnsavedChangesModal}}
<GhFullscreenModal
@modal="leave-settings"
@confirm={{this.leaveScreen}}
@close={{this.toggleUnsavedChangesModal}}
@modifier="action wide" />
{{/if}}
{{#if this.showDeleteMemberModal}}
<GhFullscreenModal
@modal="delete-member"
@model={{this.member}}
@confirm={{this.deleteMember}}
@close={{this.toggleDeleteMemberModal}}
@modifier="action wide" />
{{/if}}
{{#if this.showImpersonateMemberModal}}
<GhFullscreenModal
@modal="impersonate-member"
@model={{this.member}}
@close={{this.toggleImpersonateMemberModal}}
@modifier="action wide" />
{{/if}}