mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Tweaked visual things for polish with Activity
refs: https://github.com/TryGhost/Team/issues/1373 - Simplify the member details link on single member activity - Adjust all the activity scrolling to work better at all sizes - Make the header work properly with truncating at narrower viewports - Remove unnecessary CSS and classes - Remove the top line from the member detail box - Move the member detail box so it stays when scrolling - Make the empty state work with new member detail box position - Better scrolling full width whilst not having full width like members - Fix the subscriptions event icon which was a white box in dark mode - Adjustments to global gh-list-scrolling styles at narrower viewports - Test fully on narrower viewports and major browsers
This commit is contained in:
James Morris
parent
12729bb469
commit
4ec15f7323
@ -28,7 +28,7 @@
|
||||
{{/if}}
|
||||
</p>
|
||||
<p>
|
||||
<LinkTo class="gh-member-details-activity-link" @route="member" @model={{@member}}>{{svg-jar "members"}} See member details</LinkTo>
|
||||
<LinkTo class="gh-member-details-activity-link" @route="member" @model={{@member}}>See all details →</LinkTo>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -407,10 +407,10 @@ ul.nostyle li {
|
||||
.gh-list-scrolling {
|
||||
max-width: calc(100% + 8vw);
|
||||
height: calc(100vh - 193px);
|
||||
margin-left: -4vw;
|
||||
margin-left: 0;
|
||||
margin-right: -4vw;
|
||||
padding-left: 48px;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,26 +1,30 @@
|
||||
.gh-members-activity {
|
||||
.gh-members-activity.gh-canvas {
|
||||
padding-left: 48px;
|
||||
padding-right: 48px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-list,
|
||||
.gh-members-activity .gh-canvas-header-content,
|
||||
.gh-members-activity .gh-member-details-activity {
|
||||
max-width: calc(1320px - 48px - 48px);
|
||||
margin: 0 auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-canvas-header {
|
||||
padding-left: 48px;
|
||||
padding-right: 48px;
|
||||
margin: 0 auto;
|
||||
max-width: 1320px;
|
||||
.gh-members-activity .gh-list-scrolling {
|
||||
height: calc(100vh - 96px);
|
||||
}
|
||||
|
||||
.gh-member-details-activity {
|
||||
margin: 0 auto;
|
||||
max-width: 1320px;
|
||||
.gh-members-activity-single .gh-list-scrolling {
|
||||
height: calc(100vh - 96px - 116px);
|
||||
}
|
||||
|
||||
.gh-member-details-activity .gh-main-section-block {
|
||||
padding: 15px 0 20px;
|
||||
margin: 0 48px;
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
padding: 16px 0 20px;
|
||||
}
|
||||
|
||||
.gh-member-details-activity .gh-main-section-content {
|
||||
@ -28,7 +32,7 @@
|
||||
}
|
||||
|
||||
.gh-member-details-activity h3 {
|
||||
margin: 0 0 3px;
|
||||
margin: 0 0 2px;
|
||||
padding: 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
@ -78,24 +82,12 @@
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-list-scrolling {
|
||||
height: calc(100vh - 96px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-list-scrolling {
|
||||
height: calc(100vh - 96px);
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-list-scrolling .gh-list {
|
||||
padding: 0 48px 48px;
|
||||
margin: 0 auto;
|
||||
max-width: 1320px;
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-list-scrolling thead th:last-child {
|
||||
width: 25%;
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-list-scrolling tbody .gh-list-data:last-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-members-activity:not(.gh-members-activity-single) .gh-list-data {
|
||||
@ -161,17 +153,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: var(--middarkgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 1450px) {
|
||||
.gh-members-activity .gh-canvas-header.break.tablet .gh-canvas-header-content {
|
||||
height: 95px;
|
||||
border-bottom: 0;
|
||||
align-items: center;
|
||||
}
|
||||
.gh-members-activity .gh-canvas-header.break.tablet .gh-canvas-title {
|
||||
margin-top: -3px;
|
||||
}
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-member-activity-actions-menu {
|
||||
@ -185,10 +167,6 @@
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.gh-member-activity-actions-menu h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.gh-member-activity-actions-menu {
|
||||
cursor: default;
|
||||
}
|
||||
@ -283,3 +261,37 @@
|
||||
font-weight: 400;
|
||||
color: var(--middarkgrey);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.gh-members-activity.gh-canvas {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-canvas-header-content,
|
||||
.gh-members-activity .gh-member-details-activity {
|
||||
max-width: calc(100% - 4vw - 4vw);
|
||||
}
|
||||
|
||||
.gh-members-activity-single .gh-list-scrolling {
|
||||
height: calc(100vh - 96px - 116px -64px);
|
||||
}
|
||||
|
||||
.gh-members-activity .gh-list-scrolling {
|
||||
margin-left: 4vw;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1450px) {
|
||||
.gh-members-activity .gh-canvas-header.break.tablet .gh-canvas-header-content {
|
||||
height: 95px;
|
||||
border-bottom: 0;
|
||||
align-items: center;
|
||||
}
|
||||
.gh-members-activity .gh-canvas-header.break.tablet .gh-canvas-title {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<section class="gh-canvas gh-members-activity {{if this.memberRecord "gh-members-activity-single"}}">
|
||||
<GhCanvasHeader class="gh-canvas-header break tablet members-header">
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}} data-test-link="members-activity-back">Activity</LinkTo>
|
||||
{{#if this.memberRecord}}
|
||||
@ -9,42 +9,39 @@
|
||||
</h2>
|
||||
|
||||
<div class="view-actions">
|
||||
<div class="view-actions-top-row">
|
||||
<MembersActivity::EventTypeFilter
|
||||
@excludedEvents={{this.excludedEvents}}
|
||||
@hiddenEvents={{this.hiddenEvents}}
|
||||
@onChange={{this.changeExcludedEvents}} />
|
||||
<MembersActivity::EventTypeFilter
|
||||
@excludedEvents={{this.excludedEvents}}
|
||||
@hiddenEvents={{this.hiddenEvents}}
|
||||
@onChange={{this.changeExcludedEvents}} />
|
||||
|
||||
<MembersActivity::MemberFilter
|
||||
@selected={{this.memberRecord}}
|
||||
@onChange={{this.changeMember}} />
|
||||
</div>
|
||||
<MembersActivity::MemberFilter
|
||||
@selected={{this.memberRecord}}
|
||||
@onChange={{this.changeMember}} />
|
||||
</div>
|
||||
</GhCanvasHeader>
|
||||
|
||||
<div class="view-container">
|
||||
<div class="gh-list-scrolling">
|
||||
{{#let (members-event-fetcher filter=(members-event-filter excludedEvents=this.fullExcludedEvents member=this.member) pageSize=50) as |eventsFetcher|}}
|
||||
{{#if eventsFetcher.data}}
|
||||
{{#if this.memberRecord}}
|
||||
<GhMemberDetailsActivity @member={{this.memberRecord}} />
|
||||
{{/if}}
|
||||
{{#let (members-event-fetcher filter=(members-event-filter excludedEvents=this.fullExcludedEvents member=this.member) pageSize=50) as |eventsFetcher|}}
|
||||
{{#if eventsFetcher.data}}
|
||||
{{#if this.memberRecord}}
|
||||
<GhMemberDetailsActivity @member={{this.memberRecord}} />
|
||||
{{/if}}
|
||||
<div class="gh-list-scrolling">
|
||||
<MembersActivity::Table @hideMemberColumn={{if this.member true}} @events={{eventsFetcher.data}} />
|
||||
|
||||
{{#if (not (or eventsFetcher.isLoading eventsFetcher.hasReachedEnd))}}
|
||||
<GhScrollTrigger @enter={{eventsFetcher.loadNextPage}} @triggerOffset={{250}} />
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#unless eventsFetcher.isLoading}}
|
||||
<MembersActivity::NoEvents @filter={{this.filter}} />
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{#unless eventsFetcher.isLoading}}
|
||||
<MembersActivity::NoEvents @filter={{this.filter}} />
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
|
||||
{{#if eventsFetcher.isLoading}}
|
||||
<div class="relative h-100"><GhLoadingSpinner /></div>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
{{#if eventsFetcher.isLoading}}
|
||||
<div class="no-posts-box"><GhLoadingSpinner /></div>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
<path d="M12 7.12888V4.12891" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 15.1288C9 16.6288 10.34 17.1288 12 17.1288C13.66 17.1288 14.9999 17.1288 14.9999 15.1288C14.9999 12.1289 9 12.1289 9 9.12889C9 7.12891 10.34 7.12891 12 7.12891C13.66 7.12891 14.9999 7.8889 14.9999 9.12889" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 17.1289V20.1289" stroke="#95A1AD" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 692 B After Width: | Height: | Size: 648 B |
Loading…
Reference in New Issue
Block a user