TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Further layout tweaks for new Dashboard (#2345)

Browse Source 
* 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 2022-04-22 11:42:51 +01:00 committed by GitHub
parent 1b2bcbb0fa
commit 58daafdef4
21 changed files with 757 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ghost/admin/app/components/dashboard/dashboard-v5.hbs
View File

@ -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>

9
ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
View File

@ -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: [{

9
ghost/admin/app/components/dashboard/v5/charts/recent-activity.hbs
View File

@ -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 &rarr;</LinkTo>
</div>
</div>
</article>

11
ghost/admin/app/components/dashboard/v5/charts/recent-posts.hbs
View File

@ -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}}>
<Dashboard::v5::Parts::Metric @label="Recent posts" />
<div class="gh-dashboard5-list">
<div class="gh-dashboard5-list-header">
<div class="gh-dashboard5-list-title">Recent posts</div>
<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>
@ -14,8 +15,8 @@
</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 &rarr;</LinkTo>
</div>
</div>
</article>

113
ghost/admin/app/components/dashboard/v5/charts/recents.hbs Normal file
View 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 &rarr;</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 &rarr;</LinkTo>
</div>
</div>
{{/if}}
</article>
</section>

53
ghost/admin/app/components/dashboard/v5/charts/recents.js Normal file
View 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;
}
}

15
ghost/admin/app/components/dashboard/v5/resources/community.hbs Normal file
View File

@ -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>

12
ghost/admin/app/components/dashboard/v5/resources/community.js Normal file
View File

@ -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;
}
}

28
ghost/admin/app/components/dashboard/v5/resources/help.hbs
View File

@ -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 &rarr;</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 &rarr;</div>
</div>
</div>
</a>
</div>
</div>
</div>

25
ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.hbs
View File

@ -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>

38
ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs Normal file
View File

@ -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>

4
ghost/admin/app/components/dashboard/v5/resources/latest-newsletters.js → ghost/admin/app/components/dashboard/v5/resources/newsletter.js
View File

@ -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;

20
ghost/admin/app/components/dashboard/v5/resources/resources.hbs Normal file
View File

@ -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 &rarr;</div>
</div>
</div>
</a>
<div class="gh-dashboard5-articles-footer">
<a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">See all resources &rarr;</a>
</div>
</article>
</section>

2
ghost/admin/app/components/dashboard/v5/resources/help.js → ghost/admin/app/components/dashboard/v5/resources/resources.js
View File

@ -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

17
ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs
View File

@ -1,14 +1,17 @@
<div class="gh-dashboard5-list gh-dashboard5-staff-picks" {{did-insert this.load}}>
<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-title">
<h4>Staff picks</h4>
<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>{{entry.title}}</span><br>
<span class="dashboard-prototype-staff-picks-author">{{entry.creator}}</span>
<span class="gh-dashboard5-list-link">{{entry.title}}</span>
<div class="gh-dashboard5-list-author">{{entry.creator}}</div>
</a>
</div>
{{else}}
@ -22,4 +25,6 @@
<a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow →</a>
</div>
{{/if}}
</div>
</div>
</article>
</section>

2
ghost/admin/app/components/dashboard/v5/resources/staff-picks.js
View File

@ -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;

26
ghost/admin/app/components/dashboard/v5/resources/whats-new.hbs
View File

@ -1,24 +1,28 @@
<div class="gh-dashboard5-whats-new" {{did-insert this.load}}>
<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-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"}}
<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="content">
<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}}>
<h2>{{entry.title}}</h2>
<span class="wn-date">{{moment-format entry.published_at "D MMM YYYY"}}</span>
<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="footer">
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more &rarr;</LinkTo>
<div class="gh-dashboard5-list-footer">
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more updates &rarr;</LinkTo>
</div>
</div>
{{/if}}
</div>
</article>
</section>

522
ghost/admin/app/styles/layouts/dashboard-v5.css
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

BIN
ghost/admin/public/assets/img/abstract.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 KiB

BIN
ghost/admin/public/assets/img/community.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 757 KiB