mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Further layout tweaks for new Dashboard (#2345)
* Subtle tweaks to the recent posts refs: https://github.com/TryGhost/Team/issues/1531 * Combining Recent Posts and Members Activity together and other layout tweaks refs: https://github.com/TryGhost/Team/issues/1531 - attempting to combine recent posts and members activity together - various layout tweaks to make this work better - tons of tiny style tweaks
This commit is contained in:
James Morris
GitHub
parent
1b2bcbb0fa
commit
58daafdef4
@ -13,13 +13,13 @@
|
||||
<Dashboard::V5::Charts::Engagement />
|
||||
{{/if}}
|
||||
|
||||
<Dashboard::V5::Charts::RecentPosts />
|
||||
<Dashboard::V5::Charts::RecentActivity />
|
||||
<Dashboard::V5::Resources::Help />
|
||||
<Dashboard::V5::Charts::Recents />
|
||||
<Dashboard::V5::Resources::Resources />
|
||||
<Dashboard::V5::Resources::Community />
|
||||
|
||||
{{!-- <Dashboard::V5::Resources::WhatsNew /> --}}
|
||||
{{!-- <Dashboard::V5::Resources::LatestNewsletters /> --}}
|
||||
{{!-- <Dashboard::V5::Resources::StaffPicks /> --}}
|
||||
{{!-- <Dashboard::V5::Resources::Newsletter /> --}}
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
|
||||
@ -67,7 +67,7 @@ export default class PaidMix extends Component {
|
||||
data: [this.dashboardStats.paidMembersByCadence.monthly, this.dashboardStats.paidMembersByCadence.annual],
|
||||
fill: false,
|
||||
backgroundColor: ['#8E42FF', '#FB76B4', '#E9B0CC', '#F1D5E3'],
|
||||
barThickness: 7
|
||||
barThickness: 6
|
||||
}]
|
||||
};
|
||||
}
|
||||
@ -81,7 +81,7 @@ export default class PaidMix extends Component {
|
||||
data,
|
||||
fill: false,
|
||||
backgroundColor: ['#8E42FF', '#FB76B4', '#E9B0CC', '#F1D5E3'],
|
||||
barThickness: 7
|
||||
barThickness: 6
|
||||
}]
|
||||
};
|
||||
}
|
||||
@ -129,7 +129,10 @@ export default class PaidMix extends Component {
|
||||
zeroLineWidth: 1
|
||||
},
|
||||
ticks: {
|
||||
display: true
|
||||
display: true,
|
||||
fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif',
|
||||
fontSize: 13,
|
||||
fontColor: '#626d79'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-recent-activity">
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-recent-activity">
|
||||
<article class="gh-dashboard5-box">
|
||||
<div class="gh-dashboard5-list" data-test-dashboard-member-activity>
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<div class="gh-dashboard5-list-title">Recent activity</div>
|
||||
<Dashboard::v5::Parts::Metric @label="Recent activity" />
|
||||
</div>
|
||||
|
||||
<div class="gh-dashboard5-list-body">
|
||||
{{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) pageSize=5) as |eventsFetcher|}}
|
||||
{{#if eventsFetcher.isError}}
|
||||
@ -33,7 +32,7 @@
|
||||
{{parsedEvent.info}}
|
||||
</span>
|
||||
</LinkTo>
|
||||
<span class="gh-dashboard-activity-time">{{moment-from-now parsedEvent.timestamp}}</span>
|
||||
<span class="gh-dashboard5-list-date">{{moment-from-now parsedEvent.timestamp}}</span>
|
||||
</div>
|
||||
{{/let}}
|
||||
{{/each}}
|
||||
@ -46,7 +45,7 @@
|
||||
{{/let}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity →</LinkTo>
|
||||
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-recent-posts">
|
||||
<section class="gh-dashboard5-section gh-dashboard5-recent-posts" {{did-insert this.loadPosts}}>
|
||||
<article class="gh-dashboard5-box">
|
||||
<div class="gh-dashboard5-list" {{did-insert this.loadPosts}}>
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<div class="gh-dashboard5-list-title">Recent posts</div>
|
||||
<Dashboard::v5::Parts::Metric @label="Recent posts" />
|
||||
<div class="gh-dashboard5-list">
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<div class="gh-dashboard5-list-title">Title</div>
|
||||
<div class="gh-dashboard5-list-title">Sends</div>
|
||||
<div class="gh-dashboard5-list-title">Open rate</div>
|
||||
</div>
|
||||
@ -10,12 +11,12 @@
|
||||
{{#each this.posts as |post|}}
|
||||
<div class="gh-dashboard5-list-item">
|
||||
<LinkTo class="gh-dashboard5-list-post permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
|
||||
{{post.title}}
|
||||
{{post.title}}
|
||||
</LinkTo>
|
||||
<span>{{format-number post.email.emailCount}}</span>
|
||||
<span class="with-percentage-bar">
|
||||
<span class="prototype-bar"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
|
||||
<span>{{post.email.openRate}}%</span>
|
||||
<span class="prototype-bar"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
|
||||
</span>
|
||||
</div>
|
||||
{{else}}
|
||||
@ -25,7 +26,7 @@
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<LinkTo @route="posts" @query={{reset-query-params "posts"}}>See all posts →</LinkTo>
|
||||
<LinkTo @route="posts" @query={{reset-query-params "posts"}}>See all posts →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
113
ghost/admin/app/components/dashboard/v5/charts/recents.hbs
Normal file
113
ghost/admin/app/components/dashboard/v5/charts/recents.hbs
Normal file
@ -0,0 +1,113 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-recents" {{did-insert this.loadPosts}}>
|
||||
<article class="gh-dashboard5-box">
|
||||
<div class="gh-dashboard5-tabs">
|
||||
<button type="button" class="gh-dashboard5-tab {{if this.postsTabSelected 'is-selected'}}" {{on "click" this.changeTabToPosts}}>
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Recent posts" />
|
||||
</button>
|
||||
<button type="button" class="gh-dashboard5-tab {{if this.activityTabSelected 'is-selected'}}" {{on "click" this.changeTabToActivity}}>
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Member activity" />
|
||||
</button>
|
||||
</div>
|
||||
{{#if this.postsTabSelected}}
|
||||
<div class="gh-dashboard5-recents-posts gh-dashboard5-list">
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<div class="gh-dashboard5-list-title">Title</div>
|
||||
<div class="gh-dashboard5-list-title">Sends</div>
|
||||
<div class="gh-dashboard5-list-title">Open rate</div>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-body">
|
||||
{{#each this.posts as |post|}}
|
||||
<div class="gh-dashboard5-list-item">
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
<LinkTo class="gh-dashboard5-list-post permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
|
||||
{{post.title}}
|
||||
</LinkTo>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
{{!-- DEMO <span class="gh-dashboard5-metric-minivalue">{{format-number 3294}}</span> --}}
|
||||
<span class="gh-dashboard5-metric-minivalue">{{format-number post.email.emailCount}}</span>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
<span class="gh-dashboard5-rate-bar">
|
||||
{{!-- DEMO <span class="gh-dashboard5-metric-minivalue">75%</span> --}}
|
||||
{{!-- DEMO <span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " 75 "%;")}}/></span> --}}
|
||||
<span class="gh-dashboard5-metric-minivalue">{{post.email.openRate}}%</span>
|
||||
<span class="gh-dashboard5-rate-amount"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-dashboard5-list-empty">
|
||||
<p>No published posts yet.</p>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<LinkTo @route="posts" @query={{reset-query-params "posts"}}>See all posts →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-dashboard5-recents-activity gh-dashboard5-list" data-test-dashboard-member-activity>
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<div class="gh-dashboard5-list-title">Member</div>
|
||||
<div class="gh-dashboard5-list-title">Event</div>
|
||||
<div class="gh-dashboard5-list-title">Time</div>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-body">
|
||||
{{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) pageSize=5) as |eventsFetcher|}}
|
||||
{{#if eventsFetcher.isError}}
|
||||
<div class="gh-dashboard5-list-error">
|
||||
<p>There was an error loading events</p>
|
||||
{{#if eventsFetcher.errorMessage}}
|
||||
<code>{{eventsFetcher.errorMessage}}</code>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if eventsFetcher.isLoading}}
|
||||
<div class="gh-dashboard5-list-loading">
|
||||
<div class="gh-loading-spinner"></div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if eventsFetcher.data}}
|
||||
{{#each eventsFetcher.data as |event|}}
|
||||
{{#let (parse-member-event event) as |parsedEvent|}}
|
||||
<div class="gh-dashboard5-list-item" data-test-dashboard-member-activity-item>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
<LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
|
||||
<GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
|
||||
{{parsedEvent.subject}}
|
||||
</LinkTo>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
{{!-- ICON {{svg-jar parsedEvent.icon}} --}}
|
||||
<span>
|
||||
{{parsedEvent.action}}
|
||||
{{parsedEvent.object}}
|
||||
{{parsedEvent.info}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-item-sub">
|
||||
{{!-- FROM TIME <span class="gh-dashboard5-list-date">{{moment-from-now parsedEvent.timestamp}}</span> --}}
|
||||
{{moment-format event.timestamp "D MMM YYYY HH:mm"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/let}}
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="gh-dashboard5-list-empty" data-test-no-member-activities>
|
||||
<p>No activity yet.</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</article>
|
||||
</section>
|
||||
53
ghost/admin/app/components/dashboard/v5/charts/recents.js
Normal file
53
ghost/admin/app/components/dashboard/v5/charts/recents.js
Normal file
@ -0,0 +1,53 @@
|
||||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class Recents extends Component {
|
||||
@service store;
|
||||
@service feature;
|
||||
@service session;
|
||||
@service settings;
|
||||
|
||||
@tracked selected = 'posts';
|
||||
|
||||
@tracked posts = [];
|
||||
|
||||
@action
|
||||
async loadPosts() {
|
||||
this.posts = await this.store.query('post', {limit: 5, filter: 'status:published', order: 'published_at desc'});
|
||||
}
|
||||
|
||||
@action
|
||||
changeTabToPosts() {
|
||||
this.selected = 'posts';
|
||||
}
|
||||
|
||||
@action
|
||||
changeTabToActivity() {
|
||||
this.selected = 'activity';
|
||||
}
|
||||
|
||||
get postsTabSelected() {
|
||||
return (this.selected === 'posts');
|
||||
}
|
||||
|
||||
get activityTabSelected() {
|
||||
return (this.selected === 'activity');
|
||||
}
|
||||
|
||||
get shouldDisplay() {
|
||||
if (this.feature.improvedOnboarding) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const isOwner = this.session.user?.isOwnerOnly;
|
||||
const hasCompletedLaunchWizard = this.settings.get('editorIsLaunchComplete');
|
||||
|
||||
if (isOwner && !hasCompletedLaunchWizard) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-community" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-box is-image">
|
||||
<div class="gh-dashboard5-list">
|
||||
<div class="gh-dashboard5-subtitle">
|
||||
<h4>Ghost community</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-body">
|
||||
<p>Talk strategy.<br />Get advice.<br />Or, just hang out.</p>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<a href="https://ghost.org/resources/community/" target="_blank" rel="noopener noreferrer">Share the journey →</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
@ -0,0 +1,12 @@
|
||||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class Community extends Component {
|
||||
@tracked loading = null;
|
||||
|
||||
@action
|
||||
load() {
|
||||
this.loading = true;
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
<div class="gh-main-section gh-members-help gh-dashboard5-help">
|
||||
<div class="gh-main-section-block">
|
||||
<div class="gh-main-section-content grey">
|
||||
<a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
|
||||
<div class="gh-members-help-content">
|
||||
<div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
|
||||
<div class="text">
|
||||
<h3>Building your audience with subscriber signups</h3>
|
||||
<p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
|
||||
<div class="gh-btn gh-btn-link">Start building →</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://ghost.org/resources/first-100-email-subscribers/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
|
||||
<div class="gh-members-help-content">
|
||||
<div class="thumbnail right" style="background-image: url(assets/img/marketing/members-2.jpg);"></div>
|
||||
<div class="text">
|
||||
<h3>Get your first 100 email subscribers</h3>
|
||||
<p>Starting from zero? Use this guide to find your founding audience members.</p>
|
||||
<div class="gh-btn gh-btn-link">Become an expert →</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,25 +0,0 @@
|
||||
<div
|
||||
class="dashboard-prototype-newsletters gh-dashboard5-latest-newsletters"
|
||||
{{did-insert this.load}}
|
||||
>
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
{{#each this.newsletters as |entry|}}
|
||||
<a class="gh-dashboard-container reverse" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard-box blogpost">
|
||||
{{#if entry.feature_image}}
|
||||
<div class="thumbnail" style={{background-image-style entry.feature_image}}></div>
|
||||
{{/if}}
|
||||
<div class="content">
|
||||
<h2>{{entry.title}}</h2>
|
||||
{{#if entry.custom_excerpt}}
|
||||
<p>{{entry.custom_excerpt}}</p>
|
||||
{{else if entry.excerpt}}
|
||||
<p>{{entry.excerpt}}</p>
|
||||
{{/if}}
|
||||
<div class="read-time">{{entry.reading_time}} MIN READ</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -0,0 +1,38 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-newsletter" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-box is-secondary">
|
||||
|
||||
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
<div class="gh-dashboard5-articles">
|
||||
{{#each this.newsletters as |entry|}}
|
||||
<div class="gh-dashboard5-article">
|
||||
<h5>{{entry.title}}</h5>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{!-- <div class="dashboard-prototype-newsletters">
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
{{#each this.newsletters as |entry|}}
|
||||
<a class="gh-dashboard-container reverse" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard-box blogpost">
|
||||
{{#if entry.feature_image}}
|
||||
<div class="thumbnail" style={{background-image-style entry.feature_image}}></div>
|
||||
{{/if}}
|
||||
<div class="content">
|
||||
<h2>{{entry.title}}</h2>
|
||||
{{#if entry.custom_excerpt}}
|
||||
<p>{{entry.custom_excerpt}}</p>
|
||||
{{else if entry.excerpt}}
|
||||
<p>{{entry.excerpt}}</p>
|
||||
{{/if}}
|
||||
<div class="read-time">{{entry.reading_time}} MIN READ</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div> --}}
|
||||
</article>
|
||||
</section>
|
||||
@ -6,9 +6,9 @@ import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const API_URL = 'https://resources.ghost.io/resources';
|
||||
const API_KEY = 'b30afc1721f5d8d021ec3450ef';
|
||||
const NEWSLETTER_COUNT = 10;
|
||||
const NEWSLETTER_COUNT = 3;
|
||||
|
||||
export default class LatestNewsletters extends Component {
|
||||
export default class Newsletter extends Component {
|
||||
@tracked loading = null;
|
||||
@tracked error = null;
|
||||
@tracked newsletters = null;
|
||||
@ -0,0 +1,20 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-resources">
|
||||
<article class="gh-dashboard5-box is-secondary">
|
||||
<div class="gh-dashboard5-subtitle">
|
||||
<h4>Resources</h4>
|
||||
</div>
|
||||
<a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
|
||||
<div class="gh-members-help-content">
|
||||
<div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
|
||||
<div class="text">
|
||||
<h3>Building your audience with subscriber signups</h3>
|
||||
<p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
|
||||
<div class="gh-btn gh-btn-link">Start building →</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="gh-dashboard5-articles-footer">
|
||||
<a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">See all resources →</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
@ -2,7 +2,7 @@ import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class Help extends Component {
|
||||
export default class Resources extends Component {
|
||||
@tracked loading = null;
|
||||
|
||||
@action
|
||||
@ -1,25 +1,30 @@
|
||||
<div class="gh-dashboard5-list gh-dashboard5-staff-picks" {{did-insert this.load}}>
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
<div class="gh-dashboard5-title">
|
||||
<h4>Staff picks</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-body">
|
||||
{{#each this.staffPicks as |entry|}}
|
||||
<div class="gh-dashboard5-list-item">
|
||||
<a class="gh-dashboard5-list-post permalink" href={{set-query-params entry.link utm_source='ghost'}} target="_blank" rel="noopener noreferrer">
|
||||
<span>{{entry.title}}</span><br>
|
||||
<span class="dashboard-prototype-staff-picks-author">{{entry.creator}}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-dashboard5-list-empty">
|
||||
{{svg-jar "no-data-list"}}
|
||||
<p>No staff picks yet.</p>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow →</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-staff-picks" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-box is-secondary">
|
||||
<div class="gh-dashboard5-list">
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Staff picks" />
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-body">
|
||||
{{#each this.staffPicks as |entry|}}
|
||||
<div class="gh-dashboard5-list-item">
|
||||
<a class="gh-dashboard5-list-post permalink" href={{set-query-params entry.link utm_source='ghost'}} target="_blank" rel="noopener noreferrer">
|
||||
<span class="gh-dashboard5-list-link">{{entry.title}}</span>
|
||||
<div class="gh-dashboard5-list-author">{{entry.creator}}</div>
|
||||
</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-dashboard5-list-empty">
|
||||
{{svg-jar "no-data-list"}}
|
||||
<p>No staff picks yet.</p>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow →</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@ -5,7 +5,7 @@ import {task} from 'ember-concurrency';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const RSS_FEED_URL = 'https://zapier.com/engine/rss/678920/ghoststaffpicks';
|
||||
const LIMIT = 5;
|
||||
const LIMIT = 3;
|
||||
|
||||
export default class StaffPicks extends Component {
|
||||
@tracked loading = null;
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
<div class="gh-dashboard5-whats-new" {{did-insert this.load}}>
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
<div class="gh-dashboard-box whats-new {{if this.whatsNew.hasNew "has-new"}}">
|
||||
<div class="gh-dashboard-header-container">
|
||||
<h4 class="gh-dashboard-header">What's new?</h4>
|
||||
{{svg-jar "gift"}}
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-aside gh-dashboard5-whats-new" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-box">
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
<div class="gh-dashboard5-list {{if this.whatsNew.hasNew "has-new"}}">
|
||||
<div class="gh-dashboard5-list-header">
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="What's new" />
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-body">
|
||||
{{#each this.entries as |entry|}}
|
||||
<div class="gh-dashboard5-list-item">
|
||||
<LinkTo @route="whatsnew" @query={{hash entry=entry.slug}}>
|
||||
<span class="gh-dashboard5-list-link">{{entry.title}}</span>
|
||||
<div class="gh-dashboard5-list-date">{{moment-format entry.published_at "D MMM YYYY"}}</div>
|
||||
{{#if entry.custom_excerpt}}
|
||||
<p>{{entry.custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-list-footer">
|
||||
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more updates →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
{{#each this.entries as |entry|}}
|
||||
<LinkTo @route="whatsnew" @query={{hash entry=entry.slug}}>
|
||||
<h2>{{entry.title}}</h2>
|
||||
<span class="wn-date">{{moment-format entry.published_at "D MMM YYYY"}}</span>
|
||||
{{#if entry.custom_excerpt}}
|
||||
<p>{{entry.custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
</LinkTo>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="footer">
|
||||
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@ -69,15 +69,16 @@ Dashboard v5 Layout */
|
||||
.gh-dashboard5-layout {
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: auto auto auto auto auto;
|
||||
grid-template-areas:
|
||||
"overview overview overview overview"
|
||||
"anchor anchor anchor anchor"
|
||||
"engagement engagement engagement engagement"
|
||||
"recent-posts recent-posts recent-posts recent-posts"
|
||||
"recent-activity recent-activity recent-activity recent-activity"
|
||||
"help help help help";
|
||||
"overview overview overview overview overview overview"
|
||||
"anchor anchor anchor anchor anchor anchor"
|
||||
"engagement engagement engagement engagement engagement engagement"
|
||||
"recents recents recents recents recents recents"
|
||||
"resources resources resources resources community community";
|
||||
/* "resources resources resources resources staff-picks staff-picks" */
|
||||
/* "newsletter newsletter newsletter newsletter community community"; */
|
||||
}
|
||||
|
||||
.gh-dashboard5-rows {
|
||||
@ -102,6 +103,14 @@ Dashboard v5 Layout */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gh-dashboard5-section-main {
|
||||
margin-right: 16px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-section-aside {
|
||||
margin-left: -16px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -116,10 +125,25 @@ Dashboard v5 Layout */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-subtitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-subtitle h4 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-box {
|
||||
flex: 1;
|
||||
border: 1px solid var(--whitegrey);
|
||||
padding: 24px;
|
||||
padding: 28px 24px 24px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -131,6 +155,18 @@ Dashboard v5 Layout */
|
||||
background: #fcfcfc;
|
||||
}
|
||||
|
||||
.gh-dashboard5-box.is-image {
|
||||
background: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
/* background-image: url(img/get-started.jpg); */
|
||||
background-image: url(img/abstract-2.jpg);
|
||||
|
||||
color: var(--white);
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-columns {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
@ -157,6 +193,22 @@ Dashboard v5 Layout */
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gh-dashboard5-tab {
|
||||
opacity: 0.33;
|
||||
margin: 0 24px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-tab.is-selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-dashboard5-hero {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@ -298,7 +350,7 @@ Dashboard v5 Metric */
|
||||
.gh-dashboard5-metric-label {
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
line-height: 1em;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
@ -335,7 +387,7 @@ Dashboard v5 Metric */
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
|
||||
font-size: 3.2rem;
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -351,6 +403,11 @@ Dashboard v5 Metric */
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric-minivalue {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-dashboard5-metric-extra {
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
@ -375,14 +432,14 @@ Dashboard v5 List */
|
||||
.gh-dashboard5-list-header {
|
||||
display: grid;
|
||||
grid-template-columns: 55% 15% 30%;
|
||||
padding: 0 0 24px;
|
||||
padding: 0 0 8px;
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-title {
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
/* text-transform: uppercase; */
|
||||
font-weight: 500;
|
||||
letter-spacing: .3px;
|
||||
line-height: 1em;
|
||||
@ -390,6 +447,29 @@ Dashboard v5 List */
|
||||
color: #7c8b9a;
|
||||
white-space: nowrap;
|
||||
padding: 0 24px 0 0;
|
||||
/*
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1em;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
color: #15171a;
|
||||
white-space: nowrap;
|
||||
letter-spacing: .2px;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
color: #626d79; */
|
||||
|
||||
/* border-bottom: 1px solid rgb(230, 233, 235); */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1px;
|
||||
color: var(--black);
|
||||
/* padding: 10px 20px; */
|
||||
padding: 0 20px 8px 0;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-body {
|
||||
@ -405,21 +485,12 @@ Dashboard v5 List */
|
||||
display: grid;
|
||||
grid-template-columns: 55% 15% 30%;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-activity .gh-dashboard5-list-item {
|
||||
grid-template-columns: 80% 20%;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item:nth-child(3) {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item > span {
|
||||
padding: 0 24px 4px 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
@ -433,24 +504,18 @@ Dashboard v5 List */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item > span {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin: 0 0.75rem 0 0;
|
||||
margin: 0 0.5rem 0 -4px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-item > a > span {
|
||||
color: var(--midgrey);
|
||||
padding: 0 0 0 0.5rem;
|
||||
white-space: nowrap;
|
||||
.gh-dashboard5-list-item-sub {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-footer {
|
||||
@ -458,6 +523,22 @@ Dashboard v5 List */
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-date {
|
||||
font-size: 1.3rem;
|
||||
color: var(--midlightgrey);
|
||||
text-align: right;
|
||||
padding: 3px 0 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-dashboard5-list-author {
|
||||
font-size: 1.3rem;
|
||||
color: var(--midlightgrey);
|
||||
text-align: right;
|
||||
padding: 3px 0 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Overview */
|
||||
@ -471,6 +552,11 @@ Dashboard v5 Section Overview */
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-overview .gh-dashboard5-box {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-overview .gh-dashboard5-area > div {
|
||||
flex: 1;
|
||||
border-right: 1px solid var(--whitegrey);
|
||||
@ -493,7 +579,7 @@ Dashboard v5 Section Anchor */
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-box {
|
||||
padding: 28px 24px 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-stats {
|
||||
@ -575,6 +661,20 @@ Dashboard v5 Section Anchor */
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-select {
|
||||
top: -8px;
|
||||
right: -18px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-chart {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-mrr .gh-dashboard5-chart {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Engagement */
|
||||
|
||||
@ -583,47 +683,11 @@ Dashboard v5 Section Engagement */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-dashboard5-engagement .gh-dashboard5-box {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-engagement .gh-dashboard5-columns {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Email */
|
||||
|
||||
.gh-dashboard5-email {
|
||||
grid-area: email;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email .gh-dashboard5-box {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Email Open Rate */
|
||||
|
||||
.gh-dashboard5-email-open-rate {
|
||||
grid-area: email-open-rate;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-box {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart {
|
||||
margin: 28px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-email-open-rate .gh-dashboard5-chart-ticks {
|
||||
padding: 0 16px 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Recent Posts */
|
||||
|
||||
@ -632,7 +696,6 @@ Dashboard v5 Section Recent Posts */
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-posts .gh-dashboard5-box {
|
||||
padding: 28px 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@ -671,6 +734,19 @@ Dashboard v5 Section Recent Posts */
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-posts .gh-dashboard5-list-item > span {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0 24px 4px 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-posts .gh-dashboard5-list-header {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Recent Activity */
|
||||
@ -680,7 +756,6 @@ Dashboard v5 Section Recent Activity */
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-activity .gh-dashboard5-box {
|
||||
padding: 28px 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@ -714,20 +789,267 @@ Dashboard v5 Section Recent Activity */
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-activity .gh-dashboard5-list-item > span.gh-dashboard-activity-time {
|
||||
font-size: 1.2rem;
|
||||
color: var(--midlightgrey);
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
padding-top: 6px;
|
||||
.gh-dashboard5-recent-activity .gh-dashboard5-list-header,
|
||||
.gh-dashboard5-recent-activity .gh-dashboard5-list-item {
|
||||
grid-template-columns: 80% 20%;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recent-activity .gh-dashboard5-list-item > a > span {
|
||||
color: var(--midgrey);
|
||||
padding: 0 0 0 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Help */
|
||||
Dashboard v5 Section Recents */
|
||||
|
||||
.gh-dashboard5-help {
|
||||
grid-area: help;
|
||||
.gh-dashboard5-recents {
|
||||
grid-area: recents;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-title {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item a > span {
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
color: var(--darkgrey);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item a > span {
|
||||
display: inline-block;
|
||||
height: 57px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-title:last-child,
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:last-child {
|
||||
margin-left: -6px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-content-entry-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px !important;
|
||||
color: rgb(21, 23, 26);
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .footer {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item > span {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0 24px 4px 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-header {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-loading {
|
||||
min-height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-title:last-child,
|
||||
.gh-dashboard5-recents .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:last-child {
|
||||
margin-left: -6px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents-activity .gh-dashboard5-list-header,
|
||||
.gh-dashboard5-recents-activity .gh-dashboard5-list-item {
|
||||
grid-template-columns: 35% 35% 30%;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents-activity .gh-dashboard5-list-title:nth-child(2),
|
||||
.gh-dashboard5-recents-activity .gh-dashboard5-list-item .gh-dashboard5-list-item-sub:nth-child(2) {
|
||||
margin-left: -4px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents-activity .gh-dashboard5-list-item-sub:nth-child(2) > span {
|
||||
text-transform: lowercase;
|
||||
color: #626d79;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-dashboard5-recents-activity .gh-dashboard5-list-item-sub:nth-child(2) > span:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section What's New */
|
||||
|
||||
.gh-dashboard5-whats-new {
|
||||
grid-area: whats-new;
|
||||
}
|
||||
|
||||
.gh-dashboard5-whats-new .gh-dashboard5-list-header,
|
||||
.gh-dashboard5-whats-new .gh-dashboard5-list-item {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.gh-dashboard5-whats-new .gh-dashboard5-list-item a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 1.65rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 8px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.gh-dashboard5-whats-new .gh-dashboard5-list-date {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-whats-new .gh-dashboard5-list-item:first-child .gh-dashboard5-list-link::after {
|
||||
display: inline-block;
|
||||
content: "New";
|
||||
font-size: 1.2rem;
|
||||
white-space: nowrap;
|
||||
background: #30cf43;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
margin-left: 8px;
|
||||
margin-top: 1px;
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Resources */
|
||||
|
||||
.gh-dashboard5-resources {
|
||||
grid-area: resources;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-dashboard5-articles {
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-dashboard5-articles-footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-members-help-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-dashboard5-subtitle h4 {
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-dashboard5-box {
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Staff Picks */
|
||||
|
||||
.gh-dashboard5-staff-picks {
|
||||
grid-area: staff-picks;
|
||||
}
|
||||
|
||||
.gh-dashboard5-staff-picks .gh-dashboard5-list-header,
|
||||
.gh-dashboard5-staff-picks .gh-dashboard5-list-item {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.gh-dashboard5-staff-picks .gh-dashboard5-list-item a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 1.65rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 8px;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Latest Newsletters */
|
||||
|
||||
.gh-dashboard5-newsletter {
|
||||
grid-area: newsletter;
|
||||
}
|
||||
|
||||
.gh-dashboard5-newsletter .gh-dashboard5-articles {
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gh-dashboard5-newsletter .gh-dashboard5-article {
|
||||
background: var(--purple);
|
||||
border-radius: 6px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-newsletter .gh-dashboard5-article h5 {
|
||||
color: var(--white);
|
||||
font-size: 1.2rem;
|
||||
padding: 0 32px 0 0;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Section Community */
|
||||
|
||||
.gh-dashboard5-community {
|
||||
grid-area: community;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-body {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-body p {
|
||||
font-size: 3.4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3em;
|
||||
padding: 0 64px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-footer {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-footer a {
|
||||
color: var(--white);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
|
||||
@ -742,39 +1064,41 @@ Dashboard v5 Misc */
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-select {
|
||||
top: -11px;
|
||||
right: -18px;
|
||||
.gh-dashboard5-list-footer a,
|
||||
.gh-dashboard5-articles-footer a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-chart {
|
||||
margin-top: 40px;
|
||||
.gh-dashboard5-rate-bar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gh-dashboard5-anchor .gh-dashboard5-mrr .gh-dashboard5-chart {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* remove me */
|
||||
.prototype-bar {
|
||||
height: 5px;
|
||||
.gh-dashboard5-rate-amount {
|
||||
height: 6px;
|
||||
border-radius: 2.5px;
|
||||
background: var(--whitegrey);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.prototype-bar + span {
|
||||
.gh-dashboard5-rate-amount + span {
|
||||
flex-shrink: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.prototype-bar > span {
|
||||
background: var(--purple);
|
||||
.gh-dashboard5-rate-amount > span {
|
||||
/* background: var(--purple); */
|
||||
|
||||
background: rgb(213,184,255);
|
||||
background: linear-gradient(90deg, rgba(213,184,255,1) 0%, rgba(142,66,255,1) 100%);
|
||||
|
||||
border-top-right-radius: 2.5px;
|
||||
border-bottom-right-radius: 2.5px;
|
||||
position: absolute;
|
||||
|
||||
BIN
ghost/admin/public/assets/img/abstract-2.jpg
Normal file
BIN
ghost/admin/public/assets/img/abstract-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
BIN
ghost/admin/public/assets/img/abstract.jpg
Normal file
BIN
ghost/admin/public/assets/img/abstract.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 KiB |
BIN
ghost/admin/public/assets/img/community.jpg
Normal file
BIN
ghost/admin/public/assets/img/community.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 KiB |
Loading…
Reference in New Issue
Block a user