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 several responsiveness issues in members list

Browse source 
No issue

- Member email is cut off when overflowing on mobile
- Not displaying date moment-from-now and chevron on mobile
- Fixed left alignment issue for geolocation when there's no open rate
This commit is contained in:
Sanne de Vries 2021-01-08 14:01:48 +01:00
parent 57c376e202
commit 44ff46277c
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin/app/components/gh-members-list-item.hbs
View file

@ -12,7 +12,7 @@
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-basic"> <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-basic">
<div class="flex items-center"> <div class="flex items-center">
<GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" /> <GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<div> <div class="w-80">
<h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3> <h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
{{#if @member.name}} {{#if @member.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p> <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
@ -22,7 +22,7 @@
</LinkTo> </LinkTo>
{{#if (feature "emailAnalytics")}} {{#if (feature "emailAnalytics")}}
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-open-rate middarkgrey f8"> <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-open-rate middarkgrey f8 {{if (not @member.name) "gh-members-list-open-rate-noname"}}">
{{#if (not (is-empty @member.emailOpenRate))}} {{#if (not (is-empty @member.emailOpenRate))}}
<span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span> <span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span>
{{/if}} {{/if}}
@ -48,7 +48,7 @@
<LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}"> <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
{{#if @member.createdAtUTC}} {{#if @member.createdAtUTC}}
{{moment-format @member.createdAtUTC "D MMM YYYY"}} {{moment-format @member.createdAtUTC "D MMM YYYY"}}
<span class="midlightgrey">({{moment-from-now @member.createdAtUTC}})</span> <span class="midlightgrey gh-members-list-subscribed-moment">({{moment-from-now @member.createdAtUTC}})</span>
{{/if}} {{/if}}
</LinkTo> </LinkTo>

23
ghost/admin/app/styles/layouts/members.css
View file

@ -321,7 +321,10 @@ p.gh-members-list-email {
} }
.gh-list h3.gh-members-name-noname { .gh-list h3.gh-members-name-noname {
overflow: hidden;
margin-top: -14px; margin-top: -14px;
text-overflow: ellipsis;
white-space: nowrap;
} }
.gh-members-subscribed-noname { .gh-members-subscribed-noname {
@ -337,15 +340,21 @@ p.gh-members-list-email {
padding: 0 0 0 64px; padding: 0 0 0 64px;
} }
.gh-members-list-open-rate-noname {
margin-top: -32px;
padding-bottom: 16px;
}
.gh-members-list-open-rate-mobile::after { .gh-members-list-open-rate-mobile::after {
content: " open rate •"; content: " open rate • ";
white-space: pre;
} }
.gh-members-list-geolocation { .gh-members-list-geolocation {
display: inline-block; display: inline-block;
width: auto; width: auto;
margin-top: -16px; margin-top: -16px;
padding: 0 0 0 4px; padding: 0;
} }
.gh-members-list-geolocation::after { .gh-members-list-geolocation::after {
@ -358,6 +367,16 @@ p.gh-members-list-email {
} }
} }
@media (max-width: 600px) {
.gh-members-list-subscribed-moment {
display: none;
}
.gh-members-list-chevron {
display: none;
}
}
@media (max-width: 450px) { @media (max-width: 450px) {
.members-header { .members-header {
justify-content: flex-end; justify-content: flex-end;