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

Moving the new dashboard layout forward with more ideas

Browse Source 
refs: https://github.com/TryGhost/Team/issues/1462
This commit is contained in:
James Morris 2022-04-08 17:49:11 +01:00
parent f84d3b30f2
commit 7e499573e5
15 changed files with 450 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,7 +27,7 @@
</div>
</section>
{{#if this.hasPaidTiers}}
{{!-- {{#if this.hasPaidTiers}}
<div class="gh-dashboard5-paid">
<section class="gh-dashboard5-section">
<div class="gh-dashboard5-growth">
@ -41,7 +41,7 @@
</div>
</section>
</div>
{{/if}}
{{/if}} --}}
{{#if this.areNewslettersEnabled}}
<section class="gh-dashboard5-split is-third">
@ -72,28 +72,24 @@
{{/if}}
<section class="gh-dashboard5-split">
<section class="gh-dashboard5-section gh-dashboard5-posts">
<article class="gh-dashboard5-box">
<Dashboard::V5::RecentPosts />
</article>
</section>
<section class="gh-dashboard5-section gh-dashboard5-activity">
<article class="gh-dashboard5-box">
<Dashboard::V5::RecentActivity />
</article>
</section>
</section>
<section class="gh-dashboard5-section">
<Dashboard::V5::ResourceGeneral />
<section class="gh-dashboard5-section gh-dashboard5-resource">
<Dashboard::V5::Resources::Help />
</section>
{{!-- <section class="gh-dashboard-section gh-dashboard5-resource">
<Dashboard::V5::ResourceGeneral />
</section> --}}
</section>
<Dashboard::V5::Resources::WhatsNew />
{{!-- <Dashboard::V5::Resources::WhatsNew />
<Dashboard::V5::Resources::LatestNewsletters />
<article class="gh-dashboard5-box">
<Dashboard::V5::Resources::StaffPicks />
</article>
<Dashboard::V5::Resources::StaffPicks /> --}}
{{/if}}
<Dashboard::V5::PrototypeControlPanel />
</section>

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

@ -3,16 +3,16 @@ import {action} from '@ember/object';
import {inject as service} from '@ember/service';
const DAYS_OPTIONS = [{
name: '7 days',
name: '7 Days',
value: 7
}, {
name: '30 days',
name: '30 Days',
value: 30
}, {
name: '90 days',
name: '90 Days',
value: 90
}, {
name: 'All time',
name: 'All Time',
value: 'all'
}];

63
ghost/admin/app/components/dashboard/v5/chart-anchor.hbs
View File

@ -1,3 +1,29 @@
<div class="gh-dashboard5-title">
<h4>{{this.chartTitle}}</h4>
</div>
<div class="gh-dashboard5-chart">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<div class="gh-dashboard5-chart-container">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />
</div>
<div class="gh-dashboard5-chart-ticks">
<span>Mar 1</span>
<span>Mar 6</span>
<span>Mar 12</span>
<span>Mar 18</span>
<span>Mar 24</span>
<span>Mar 30</span>
</div>
{{/if}}
</div>
<div class="gh-dashboard5-stats" {{did-insert this.loadCharts}}>
<button class="gh-dashboard5-stats-button {{if this.chartShowingTotal 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "total")}}>
<Dashboard::v5::parts::ChartMetric
@ -5,8 +31,9 @@
@value={{format-number this.totalMembers}}
@trends={{this.hasTrends}}
@percentage={{this.totalMembersTrend}}
@large={{true}} />
<div class="gh-dashboard5-stats-highlight"></div>
@large={{true}}
@center={{true}}
@reverse={{true}} />
</button>
{{#if this.hasPaidTiers}}
<button class="gh-dashboard5-stats-button {{if this.chartShowingPaid 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "paid")}}>
@ -15,37 +42,19 @@
@value={{format-number this.paidMembers}}
@trends={{this.hasTrends}}
@percentage={{this.paidMembersTrend}}
@large={{true}} />
<div class="gh-dashboard5-stats-highlight"></div>
@large={{true}}
@center={{true}}
@reverse={{true}} />
</button>
<button class="gh-dashboard5-stats-button {{if this.chartShowingMonthly 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "monthly")}}>
<Dashboard::v5::parts::ChartMetric
@label="Monthly revenue (MRR)"
@label="MRR"
@value="${{gh-price-amount this.currentMRR}}"
@trends={{this.hasTrends}}
@percentage={{this.mrrTrend}}
@large={{true}} />
<div class="gh-dashboard5-stats-highlight"></div>
@large={{true}}
@center={{true}}
@reverse={{true}} />
</button>
{{/if}}
</div>
<div class="gh-dashboard5-chart">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
{{else}}
<div class="gh-dashboard5-chart-ticks">
<span>1,000</span>
<span>750</span>
<span>500</span>
<span>250</span>
</div>
<div class="gh-dashboard5-chart-container">
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{this.chartHeight}} />
</div>
{{/if}}
</div>

43
ghost/admin/app/components/dashboard/v5/chart-anchor.js
View File

@ -86,8 +86,24 @@ export default class ChartAnchor extends Component {
return this.dashboardStats.siteStatus?.hasPaidTiers;
}
get chartTitle() {
if (this.chartDisplay === 'total') {
return 'Total members';
} else if (this.chartDisplay === 'paid') {
return 'Paid members';
} else if (this.chartDisplay === 'monthly') {
return 'MRR';
}
}
get chartType() {
return 'line';
if (this.chartDisplay === 'total') {
return 'line';
} else if (this.chartDisplay === 'paid') {
return 'bar';
} else if (this.chartDisplay === 'monthly') {
return 'line';
}
}
get chartData() {
@ -120,16 +136,16 @@ export default class ChartAnchor extends Component {
tension: 0,
cubicInterpolationMode: 'monotone',
fill: true,
fillColor: '#F3F7FF',
backgroundColor: '#F3F7FF',
fillColor: 'rgba(20, 184, 255, 0.07)',
backgroundColor: 'rgba(20, 184, 255, 0.07)',
pointRadius: 0,
pointHitRadius: 10,
pointBorderColor: '#5597F9',
pointBackgroundColor: '#5597F9',
pointHoverBackgroundColor: '#5597F9',
pointHoverBorderColor: '#5597F9',
pointBorderColor: '#14B8FF',
pointBackgroundColor: '#14B8FF',
pointHoverBackgroundColor: '#14B8FF',
pointHoverBorderColor: '#14B8FF',
pointHoverRadius: 0,
borderColor: '#5597F9',
borderColor: '#14B8FF',
borderJoinStyle: 'miter'
}]
};
@ -208,9 +224,14 @@ export default class ChartAnchor extends Component {
}],
xAxes: [{
gridLines: {
color: '#DDE1E5',
borderDash: [4,4],
display: true,
drawBorder: true,
drawTicks: false,
display: false,
drawBorder: false
zeroLineWidth: 1,
zeroLineColor: '#DDE1E5',
zeroLineBorderDash: [4,4]
},
ticks: {
display: false,
@ -239,7 +260,7 @@ export default class ChartAnchor extends Component {
}
get chartHeight() {
return 160;
return 275;
}
calculatePercentage(from, to) {

19
ghost/admin/app/components/dashboard/v5/chart-email.hbs
View File

@ -1,23 +1,25 @@
<div class="gh-dashboard5-title">
<h4>Email</h4>
</div>
<div {{did-insert this.loadCharts}} class="gh-dashboard5-insert">
<div class="gh-dashboard5-insert-item">
<Dashboard::v5::parts::ChartMetric
@label="Newsletter subscribers"
@value={{format-number this.dataSubscribers.total}}
@extra="{{format-number this.dataSubscribers.paid}} paid members" />
@reverse={true}
/>
</div>
<div class="gh-dashboard5-insert-item">
<Dashboard::v5::parts::ChartMetric
@label="Emails sent over last 30 days"
@value={{format-number this.dataEmailsSent}}
@extra="All members" />
@reverse={true}
/>
</div>
<div class="gh-dashboard5-insert-item">
<Dashboard::v5::parts::ChartMetric
@label="Open rate"
@value="{{this.currentOpenRate}}%" />
<div class="gh-dashboard5-chart">
{{#if this.loading}}
<div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
@ -37,5 +39,10 @@
</div>
{{/if}}
</div>
<Dashboard::v5::parts::ChartMetric
@label="Open rate"
@value="{{this.currentOpenRate}}%"
@reverse={true}
/>
</div>
</div>

13
ghost/admin/app/components/dashboard/v5/chart-email.js
View File

@ -55,9 +55,9 @@ export default class ChartEmailOpenRate extends Component {
datasets: [{
data,
fill: false,
backgroundColor: '#7BA4F3',
backgroundColor: '#14B8FF',
cubicInterpolationMode: 'monotone',
barThickness: 10
barThickness: 18
}]
};
}
@ -110,9 +110,14 @@ export default class ChartEmailOpenRate extends Component {
}],
xAxes: [{
gridLines: {
color: '#DDE1E5',
borderDash: [4,4],
display: true,
drawBorder: true,
drawTicks: false,
display: false,
drawBorder: false
zeroLineWidth: 1,
zeroLineColor: '#DDE1E5',
zeroLineBorderDash: [4,4]
},
ticks: {
display: false,

10
ghost/admin/app/components/dashboard/v5/chart-engagement.hbs
View File

@ -1,17 +1,23 @@
<article {{did-insert this.loadCharts}} class="gh-dashboard5-box">
<div class="gh-dashboard5-title">
<h4>Engagement</h4>
</div>
<div class="gh-dashboard5-insert">
<div class="gh-dashboard5-insert-item">
<Dashboard::v5::parts::ChartMetric
@label="Engaged over 30 days"
@value={{this.data30Days}}
@extra="99 members" />
@reverse={true}
/>
</div>
<div class="gh-dashboard5-insert-item">
<Dashboard::v5::parts::ChartMetric
@label="Engaged over 7 days"
@value={{this.data7Days}}
@extra="99 members" />
@reverse={true}
/>
</div>
</div>
</article>

30
ghost/admin/app/components/dashboard/v5/parts/chart-metric.hbs
View File

@ -1,15 +1,29 @@
<div class="gh-dashboard5-metric {{if @extra "is-stretch"}}">
<div class="gh-dashboard5-metric {{if @center "is-center"}} {{if @reverse "is-reverse"}}">
<div class="gh-dashboard5-metric-data">
<h5 class="gh-dashboard5-metric-label">
{{@label}}
</h5>
{{#if @value}}
<div class="gh-dashboard5-metric-value {{if @large "is-large"}}">
{{@value}}
{{#if @reverse}}
{{#if @value}}
<div class="gh-dashboard5-metric-value {{if @large "is-large"}}">
{{@value}}
</div>
{{!-- {{#if @trends}}
<Dashboard::v5::parts::ChartPercentage @percentage={{@percentage}}/>
{{/if}} --}}
{{/if}}
<h5 class="gh-dashboard5-metric-label">
{{@label}}
</h5>
{{else}}
<h5 class="gh-dashboard5-metric-label">
{{@label}}
</h5>
{{#if @value}}
<div class="gh-dashboard5-metric-value {{if @large "is-large"}}">
{{@value}}
</div>
{{#if @trends}}
<Dashboard::v5::parts::ChartPercentage @percentage={{@percentage}}/>
{{/if}}
</div>
{{/if}}
{{/if}}
</div>
{{#if @extra}}

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

@ -1,7 +1,8 @@
<div class="gh-dashboard5-list" data-test-dashboard-member-activity>
<div class="gh-dashboard5-list-header">
<Dashboard::v5::parts::ChartMetric @label="Recent activity" />
<div class="gh-dashboard5-title">
<h4>Recent activity</h4><h4>Recent posts</h4>
</div>
<div class="gh-dashboard5-list-body">
{{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) pageSize=5) as |eventsFetcher|}}
{{#if eventsFetcher.isError}}
@ -22,10 +23,14 @@
{{#let (parse-member-event event) as |parsedEvent|}}
<div class="gh-dashboard5-list-item" data-test-dashboard-member-activity-item>
<LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
{{parsedEvent.subject}}
{{parsedEvent.action}}
{{parsedEvent.object}}
{{parsedEvent.info}}
{{!-- {{svg-jar parsedEvent.icon}} --}}
{{!-- {{parsedEvent.subject}} --}}
John
<span>
{{parsedEvent.action}}
{{parsedEvent.object}}
{{parsedEvent.info}}
</span>
</LinkTo>
{{!-- <span class="gh-dashboard-activity-time">{{moment-from-now parsedEvent.timestamp}}</span> --}}
</div>

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

@ -1,7 +1,8 @@
<div class="gh-dashboard5-list" {{did-insert this.loadPosts}}>
<div class="gh-dashboard5-list-header">
<Dashboard::v5::parts::ChartMetric @label="Recent posts" />
<div class="gh-dashboard5-title">
<h4>Recent posts</h4>
</div>
<div class="gh-dashboard5-list-body">
{{#each this.posts as |post|}}
<div class="gh-dashboard5-list-item">

51
ghost/admin/app/components/dashboard/v5/resource-general.hbs
View File

@ -1,41 +1,12 @@
<div class="gh-main-section gh-offers-help">
<div class="gh-main-section-block">
<div class="gh-main-section-content grey">
<a href="https://ghost.org/help" target="_blank" class="gh-offers-help-card" rel="noopener noreferrer">
<div class="gh-offers-help-content">
<div class="thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
<div class="text">
<h3>Do something cool in Ghost</h3>
<p>There is a lot of cool things you can do in Ghost and this is just one of them.</p>
</div>
</div>
<div class="gh-btn"><span>Read more</span></div>
</a>
<a href="https://ghost.org/help" target="_blank" class="gh-offers-help-card" rel="noopener noreferrer">
<div class="gh-offers-help-content">
<div class="thumbnail" style="background-image: url(assets/img/marketing/offers-3.jpg);"></div>
<div class="text">
<h3>Do something cool in Ghost</h3>
<p>There is a lot of cool things you can do in Ghost and this is just one of them.</p>
</div>
</div>
<div class="gh-btn"><span>Read more</span></div>
</a>
<a href="https://ghost.org/help" target="_blank" class="gh-offers-help-card" rel="noopener noreferrer">
<div class="gh-offers-help-content">
<div class="thumbnail" style="background-image: url(assets/img/marketing/offers-2.jpg)"></div>
<div class="text">
<h3>Do something cool in Ghost</h3>
<p>There is a lot of cool things you can do in Ghost and this is just one of them.</p>
</div>
</div>
<div class="gh-btn"><span>Read more</span></div>
</a>
<article class="gh-dashboard5-area">
<a href="https://ghost.org/help" target="_blank" class="gh-offers-help-card" rel="noopener noreferrer">
<div class="gh-offers-help-content">
<div class="thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
<div class="text">
<h3>Do something cool in Ghost</h3>
<p>There is a lot of cool things you can do in Ghost and this is just one of them.</p>
</div>
</div>
</div>
</div>
<
<div class="gh-btn"><span>Read more</span></div>
</a>
</article>

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

@ -0,0 +1,24 @@
<div class="gh-dashboard5-area" {{did-insert this.load}}>
{{#if (not (or this.loading this.error))}}
{{#each this.newsletters as |entry|}}
<div class="gh-dashboard5-area-resource">
<div class="gh-dashboard5-area-resource-content">
<h4>{{entry.title}}</h4>
{{#if entry.custom_excerpt}}
<p>{{entry.custom_excerpt}}</p>
{{else if entry.excerpt}}
<p>{{entry.excerpt}}</p>
{{/if}}
<button class="gh-btn" type="button">
<span>Read more</span>
</button>
</div>
</div>
{{/each}}
{{/if}}
<div class="gh-dashboard5-area-more">
<div class="gh-dashboard5-area-dot is-selected"></div>
<div class="gh-dashboard5-area-dot"></div>
<div class="gh-dashboard5-area-dot"></div>
</div>
</div>

43
ghost/admin/app/components/dashboard/v5/resources/help.js Normal file
View File

@ -0,0 +1,43 @@
import Component from '@glimmer/component';
import fetch from 'fetch';
import {action} from '@ember/object';
import {task} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
const API_URL = 'https://resources.ghost.io/resources';
const API_KEY = 'b30afc1721f5d8d021ec3450ef';
const NEWSLETTER_COUNT = 10;
export default class LatestNewsletters extends Component {
@tracked loading = null;
@tracked error = null;
@tracked newsletters = null;
@action
load() {
this.loading = true;
this.fetch.perform().then(() => {
this.loading = false;
}, (error) => {
this.error = error;
this.loading = false;
});
}
@task
*fetch() {
const order = encodeURIComponent('published_at DESC');
const key = encodeURIComponent(API_KEY);
const limit = encodeURIComponent(NEWSLETTER_COUNT);
let response = yield fetch(`${API_URL}/ghost/api/content/posts/?limit=${limit}&order=${order}&key=${key}&include=none`);
if (!response.ok) {
// eslint-disable-next-line
console.error('Failed to fetch newsletters', {response});
this.error = 'Failed to fetch';
return;
}
let result = yield response.json();
this.newsletters = result.posts || [];
}
}

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

@ -1,7 +1,10 @@
<div class="gh-dashboard5-list" {{did-insert this.load}}>
{{#if (not (or this.loading this.error))}}
<div class="gh-dashboard5-list-header">
{{!-- <div class="gh-dashboard5-list-header">
<Dashboard::v5::parts::ChartMetric @label="Staff picks" />
</div> --}}
<div class="gh-dashboard5-title">
<h4>Staff picks</h4>
</div>
<div class="gh-dashboard5-list-body">
{{#each this.staffPicks as |entry|}}

255
ghost/admin/app/styles/layouts/dashboard.css
View File

@ -1170,13 +1170,14 @@ a.gh-dashboard-container {
}
.gh-dashboard5-section .ember-power-select-selected-item {
text-align: right;
font-size: 1.2rem;
text-transform: none;
font-weight: 500;
letter-spacing: .2px;
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .2px;
color: var(--midgrey);
white-space: nowrap;
line-height: 1em;
}
.gh-dashboard5 .gh-list-header {
@ -1317,6 +1318,10 @@ Dashboard v5 Layout */
grid-template-columns: 1fr 1fr;
}
.gh-dashboard5-split.is-solo {
grid-template-columns: 1fr;
}
.gh-dashboard5-split.is-third {
grid-template-columns: 1fr 3fr;
}
@ -1335,10 +1340,26 @@ Dashboard v5 Layout */
gap: 0;
}
.gh-dashboard5-title {
display: flex;
flex-direction: row;
margin: 0 0 16px;
}
.gh-dashboard5-title h4 {
margin: 0 16px 0 0;
font-weight: 700;
color: var(--darkgrey);
}
.gh-dashboard5-title h4:nth-child(2) {
opacity: 0.25;
}
.gh-dashboard5-box {
flex: 1;
border: 1px solid var(--whitegrey);
padding: 16px;
padding: 24px;
border-radius: 3px;
display: flex;
flex-direction: column;
@ -1346,6 +1367,17 @@ Dashboard v5 Layout */
align-items: stretch;
}
.gh-dashboard5-area {
background: rgb(252,252,252);
background: linear-gradient(180deg, rgba(252,252,252,1) 0%, rgba(249,250,254,1) 100%);
/* background: rgb(255,249,226);
background: linear-gradient(180deg, rgba(255,249,226,1) 0%, rgba(220,242,255,1) 100%); */
background: #fafbfc;
border: 1px solid rgb(235, 238, 240);
padding: 24px;
border-radius: 3px;
}
.gh-dashboard5-container .gh-dashboard5-box {
border-radius: 0;
border-width: 1px 0 1px 1px;
@ -1380,7 +1412,7 @@ Dashboard v5 Chart */
.gh-dashboard5-chart-ticks {
flex: none;
padding: 8px 24px 16px 16px;
padding: 8px 24px 16px 0;
font-size: 1.2rem;
text-transform: none;
font-weight: 500;
@ -1397,7 +1429,7 @@ Dashboard v5 Chart */
.gh-dashboard5-chart-container {
flex: 1;
position: relative;
width: 0%; /* hack for ChartJS responsive resizing */
width: 100%; /* hack for ChartJS responsive resizing */
height: 100%;
}
@ -1437,6 +1469,10 @@ Dashboard v5 Metric */
flex-direction: column;
}
.gh-dashboard5-metric.is-center {
align-items: center;
}
.gh-dashboard5-metric.is-stretch {
flex: 1;
justify-content: space-between;
@ -1449,37 +1485,46 @@ Dashboard v5 Metric */
.gh-dashboard5-metric-label {
align-items: center;
font-size: 1.1rem;
font-size: 1.2rem;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .2px;
font-weight: 500;
letter-spacing: .3px;
line-height: 1em;
margin: 4px 0 8px;
margin: 2px 0 0;
padding: 0;
color: var(--middarkgrey);
color: var(--midgrey);
white-space: nowrap;
}
.gh-dashboard5-metric.is-center .gh-dashboard5-metric-label {
text-align: center;
margin-top: 4px;
}
.gh-dashboard5-metric-value {
display: flex;
align-items: flex-end;
font-size: 2.2rem;
font-size: 2.4rem;
line-height: 4rem;
font-weight: 700;
color: var(--black);
letter-spacing: -.1px;
line-height: 1em;
white-space: nowrap;
margin: 4px 0 2px;
margin: 0 0 8px;
gap: 10px;
}
.gh-dashboard5-metric-value.is-large {
font-size: 2.8rem;
font-size: 3.2rem;
margin-bottom: 6px;
}
.gh-dashboard5-metric.is-center .gh-dashboard5-metric-value {
justify-content: center;
}
.gh-dashboard5-metric-extra {
font-size: 1.2rem;
text-transform: none;
font-weight: 500;
letter-spacing: .2px;
@ -1512,17 +1557,38 @@ Dashboard v5 List */
}
.gh-dashboard5-list-item {
padding: 8px 0;
padding: 14px 0;
border-bottom: 1px solid #efefef;
}
.gh-dashboard5-list-item:last-child {
border-bottom: 0;
}
.gh-dashboard5-list-item a {
font-weight: 500;
font-weight: 600;
font-size: 1.5rem;
color: var(--black);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.gh-dashboard5-list-item svg {
width: 26px;
height: 26px;
margin: 0 0.75rem 0 0;
}
.gh-dashboard5-list-item a span {
color: var(--midgrey);
padding: 0 0 0 0.5rem
}
.gh-dashboard5-list-footer {
border-top: 1px solid var(--whitegrey);
padding: 12px 0 0;
padding: 20px 0 0;
}
@ -1534,25 +1600,50 @@ Dashboard v5 Section Anchor */
}
.gh-dashboard5-anchor .gh-dashboard5-box {
padding: 0;
align-items: stretch;
}
.gh-dashboard5-anchor.is-top .gh-dashboard5-box {
padding-top: 0;
}
.gh-dashboard5-anchor .gh-dashboard5-stats {
display: flex;
flex-direction: row;
width: 55%;
padding: 16px;
margin: 0 0 8px;
width: calc(100% + 48px);
padding: 4px;
margin: 16px -24px -24px;
border-radius: 3px;
border: 1px solid var(--whitegrey);
border-width: 1px 0 0;
background: #fafbfc;
}
.gh-dashboard5-anchor .gh-dashboard5-title {
margin-bottom: 24px;
}
.gh-dashboard5-anchor.is-top .gh-dashboard5-stats {
margin-top: 0;
margin-bottom: 20px;
border-width: 0 0 1px;
}
.gh-dashboard5-anchor .gh-dashboard5-stats-button {
cursor: pointer;
position: relative;
flex: 1;
padding: 0 32px 0 0;
margin: 0;
padding: 16px 16px 20px;
margin: 2px;
text-align: left;
background: transparent;
border-radius: 2px;
}
.gh-dashboard5-anchor .gh-dashboard5-stats-button.is-selected {
color: #15171a;
background: #fff!important;
box-shadow: 0 2px 4px rgb(0 0 0 / 8%);
}
.gh-dashboard5-anchor .gh-dashboard5-stats-highlight {
@ -1571,8 +1662,28 @@ Dashboard v5 Section Anchor */
opacity: 1;
}
.gh-dashboard5-anchor canvas {
border-left: 1px solid var(--whitegrey);
.gh-dashboard5-anchor .gh-dashboard5-chart {
flex-direction: column;
}
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks {
flex-direction: row;
padding: 12px 0 4px;
font-size: 1.2rem;
}
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span {
opacity: 0.5;
}
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:first-child,
.gh-dashboard5-anchor .gh-dashboard5-chart-ticks span:last-child {
opacity: 1;
}
.gh-dashboard5-anchor .prototype-selection {
top: 18px;
right: 6px;
}
@ -1646,7 +1757,7 @@ Dashboard v5 Section Email */
.gh-dashboard5-email .gh-dashboard5-insert-item {
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: flex-end;
}
.gh-dashboard5-email .gh-dashboard5-insert-item:nth-child(1) {
@ -1672,11 +1783,15 @@ Dashboard v5 Section Email */
grid-row: 1 / span 2;
justify-content: space-between;
align-items: stretch;
padding: 4px 0 0 16px;
padding: 4px 0 0 24px;
}
.gh-dashboard5-email .gh-dashboard5-chart {
margin: 0 0 24px;
}
.gh-dashboard5-email .gh-dashboard5-chart-ticks {
padding: 28px 16px 0 0;
padding: 0 16px 0 0;
}
@ -1688,7 +1803,7 @@ Dashboard v5 Section Engagement */
}
.gh-dashboard5-engagement .prototype-selection {
top: 12px;
top: 18px;
}
.gh-dashboard5-engagement .gh-dashboard5-insert {
@ -1724,6 +1839,9 @@ Dashboard v5 Section Engagement */
border-radius: 0;
border-width: 0 0 1px;
padding: 8px 16px 16px 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.gh-dashboard5-split .gh-dashboard5-engagement .gh-dashboard5-insert-item:nth-child(1) {
@ -1735,9 +1853,6 @@ Dashboard v5 Section Engagement */
.gh-dashboard5-split .gh-dashboard5-engagement .gh-dashboard5-insert-item:nth-child(2) {
/* --- Engaged Over 7 Days */
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 16px 16px 0 0;
}
@ -1746,7 +1861,7 @@ Dashboard v5 Section Engagement */
Dashboard v5 Section Posts */
.gh-dashboard5-posts .gh-dashboard5-box {
padding: 16px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
@ -1758,9 +1873,77 @@ Dashboard v5 Section Posts */
Dashboard v5 Section Activity */
.gh-dashboard5-activity .gh-dashboard5-box {
padding: 16px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
/* ---------------------------------
Dashboard v5 Section Resource */
.gh-dashboard5-resource {
flex: 1;
}
.gh-dashboard5-resource .gh-dashboard5-area {
flex: 1;
padding: 72px 0 32px;
text-align: center;
display: flex;
flex-direction: column;
background: rgb(252,253,255);
background: linear-gradient(180deg, rgba(252,253,255,1) 0%, rgba(249,251,252,1) 100%);
}
.gh-dashboard5-area h4 {
font-size: 2.4rem;
font-weight: 700;
margin: 0 0 10px;
}
.gh-dashboard5-area p {
padding: 0 24px;
}
.gh-dashboard5-area-resource {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 0 48px;
display: none;
}
.gh-dashboard5-area-resource:first-child {
display: flex;
}
.gh-dashboard5-area-resource-content {
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
}
.gh-dashboard5-area-more {
flex: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.gh-dashboard5-area-dot {
width: 8px;
height: 8px;
border-radius: 100%;
background: var(--lightgrey);
margin: 0 4px;
}
.gh-dashboard5-area-dot.is-selected {
background: var(--midgrey);
}