mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Implemented a more fleshed out resources section for new Dashboard
refs: https://github.com/TryGhost/Team/issues/1556 - working implementation of all the parts of the dashboard - now includes the what's new section again - has dynamic, yet basic, newsletters
This commit is contained in:
parent
5281a84ce4
commit
a46d01ca5f
@ -16,14 +16,35 @@
|
||||
<Dashboard::V5::Charts::Recents />
|
||||
|
||||
{{!-- <div class="gh-dashboard5-split"> --}}
|
||||
<Dashboard::V5::Resources::Multi />
|
||||
{{!-- <Dashboard::V5::Resources::Multi /> --}}
|
||||
{{!-- <Dashboard::V5::Resources::Community /> --}}
|
||||
{{!-- </div> --}}
|
||||
|
||||
{{!-- <Dashboard::V5::Resources::Triple /> --}}
|
||||
|
||||
{{!-- <div class="gh-dashboard5-split"> --}}
|
||||
{{!-- <Dashboard::V5::Resources::Community /> --}}
|
||||
{{!-- <Dashboard::V5::Reso÷urces::WhatsNew /> --}}
|
||||
{{!-- </div> --}}
|
||||
|
||||
{{!-- <Dashboard::V5::Resources::WhatsNew /> --}}
|
||||
{{!-- <Dashboard::V5::Resources::StaffPicks /> --}}
|
||||
{{!-- <Dashboard::V5::Resources::Newsletter /> --}}
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
<section class="gh-dashboard5-breakout">
|
||||
<div class="gh-dashboard5-inner">
|
||||
<div class="gh-dashboard5-split">
|
||||
<Dashboard::V5::Resources::Resources />
|
||||
<Dashboard::V5::Resources::WhatsNew />
|
||||
</div>
|
||||
<div class="gh-dashboard5-split">
|
||||
<Dashboard::V5::Resources::Newsletter />
|
||||
<Dashboard::V5::Resources::StaffPicks />
|
||||
</div>
|
||||
<Dashboard::V5::Resources::Community />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Dashboard::V5::Prototype::ControlPanel />
|
@ -28,15 +28,15 @@
|
||||
</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>
|
||||
<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 class="gh-dashboard5-metric-minivalue">75%</span>
|
||||
<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>
|
||||
|
@ -1,15 +1,17 @@
|
||||
<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>
|
||||
<section class="gh-dashboard5-resource gh-dashboard5-community" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-resource-box">
|
||||
<div class="gh-dashboard5-resource-title">
|
||||
<h4>Community</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-body">
|
||||
<div class="gh-dashboard5-list">
|
||||
<div class="gh-dashboard5-list-body">
|
||||
<p>Talk strategy.<br />Get advice.<br />Or, just hang out.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-footer">
|
||||
<a href="https://ghost.org/resources/community/" target="_blank" rel="noopener noreferrer">Share the journey →</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
@ -1,38 +1,37 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-newsletter" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-box is-secondary">
|
||||
<section class="gh-dashboard5-resource gh-dashboard5-newsletter" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-resource-box">
|
||||
<div class="gh-dashboard5-resource-title">
|
||||
<h4>Newsletter</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-body">
|
||||
|
||||
|
||||
{{#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}}
|
||||
<div class="gh-dashboard5-resource-smallarticles">
|
||||
{{#each this.newsletters as |entry|}}
|
||||
<a class="gh-dashboard5-resource-smallarticle" href={{set-query-params entry.url utm_source='admin'}} target="_blank" rel="noopener noreferrer">
|
||||
{{!-- {{#if entry.feature_image}}
|
||||
<div class="gh-dashboard5-newsletter-thumbnail" style={{background-image-style entry.feature_image}}></div>
|
||||
{{/if}} --}}
|
||||
|
||||
<img class="gh-dashboard5-resource-thumbnail" src="assets/img/newsletter-1.jpg" alt="{{entry.title}}" />
|
||||
|
||||
<div class="gh-dashboard5-resource-text">
|
||||
<h5>{{entry.title}}</h5>
|
||||
{{!-- {{#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>
|
||||
{{/if}} --}}
|
||||
<div class="gh-dashboard5-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{/each}}
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div> --}}
|
||||
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-footer">
|
||||
<a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">Sign up to the newsletter →</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
@ -6,7 +6,7 @@ import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const API_URL = 'https://resources.ghost.io/resources';
|
||||
const API_KEY = 'b30afc1721f5d8d021ec3450ef';
|
||||
const NEWSLETTER_COUNT = 3;
|
||||
const NEWSLETTER_COUNT = 2;
|
||||
|
||||
export default class Newsletter extends Component {
|
||||
@tracked loading = null;
|
||||
|
@ -1,20 +1,24 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-section-main gh-dashboard5-resources">
|
||||
<article class="gh-dashboard5-box is-faded">
|
||||
<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>
|
||||
<section class="gh-dashboard5-resource gh-dashboard5-resources">
|
||||
<article class="gh-dashboard5-resource-box">
|
||||
<div class="gh-dashboard5-resource-title">
|
||||
<h4>Help Guides</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-body">
|
||||
|
||||
<div class="gh-dashboard5-resource-bigarticle">
|
||||
<img class="gh-dashboard5-resource-thumbnail" src="assets/img/resource-1.jpg" alt="Building your audience with subscriber signups" />
|
||||
<div class="gh-dashboard5-resource-text">
|
||||
<div>
|
||||
<h3>Building your audience with subscriber signups</h3>
|
||||
<p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
|
||||
<a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-btn gh-btn-link" rel="noopener noreferrer">Start building →</a>
|
||||
</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>
|
||||
<div class="gh-dashboard5-resource-footer">
|
||||
<a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">Get more help →</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
@ -1,30 +1,31 @@
|
||||
{{!-- <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-staff-picks gh-dashboard5-list" {{did-insert this.load}}>
|
||||
{{#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">See all picks →</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
<section class="gh-dashboard5-resource gh-dashboard5-staff-picks" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-resource-box">
|
||||
<div class="gh-dashboard5-resource-title">
|
||||
<h4>Staff Picks</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-body">
|
||||
<div class="gh-dashboard5-list" {{did-insert this.load}}>
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
<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-resource-secondary">{{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>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{!-- </article>
|
||||
</section> --}}
|
||||
<div class="gh-dashboard5-resource-footer">
|
||||
<a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow on Twitter →</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
51
ghost/admin/app/components/dashboard/v5/resources/triple.hbs
Normal file
51
ghost/admin/app/components/dashboard/v5/resources/triple.hbs
Normal file
@ -0,0 +1,51 @@
|
||||
<section class="gh-dashboard5-section gh-dashboard5-triple">
|
||||
|
||||
<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>
|
||||
{{#if this.areMembersEnabled}}
|
||||
<button type="button" class="gh-dashboard5-tab {{if this.activityTabSelected 'is-selected'}}" {{on "click" this.changeTabToActivity}}>
|
||||
<Dashboard::v5::Parts::Metric
|
||||
@label="Member activity" />
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="gh-dashboard5-articles">
|
||||
<a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard5-article-content">
|
||||
<div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
|
||||
<div class="gh-dashboard5-article-text">
|
||||
<h3>How to create offers in Ghost</h3>
|
||||
<p>Find out how to create and promote offers to increase your subscriptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
|
||||
</a>
|
||||
|
||||
<a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard5-article-content">
|
||||
<div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
|
||||
<div class="gh-dashboard5-article-text">
|
||||
<h3>How to create offers in Ghost</h3>
|
||||
<p>Find out how to create and promote offers to increase your subscriptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
|
||||
</a>
|
||||
|
||||
<a class="gh-dashboard5-article" href="https://ghost.org/help/offers" target="_blank" rel="noopener noreferrer">
|
||||
<div class="gh-dashboard5-article-content">
|
||||
<div class="gh-dashboard5-article-thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
|
||||
<div class="gh-dashboard5-article-text">
|
||||
<h3>How to create offers in Ghost</h3>
|
||||
<p>Find out how to create and promote offers to increase your subscriptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-btn gh-dashboard5-article-link"><span>Read more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
@ -1,28 +1,29 @@
|
||||
<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" />
|
||||
<section class="gh-dashboard5-resource gh-dashboard5-whats-new" {{did-insert this.load}}>
|
||||
<article class="gh-dashboard5-resource-box">
|
||||
<div class="gh-dashboard5-resource-title">
|
||||
<h4>What's New</h4>
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-body">
|
||||
{{#if (not (or this.loading this.error))}}
|
||||
<div class="gh-dashboard5-list {{if this.whatsNew.hasNew "has-new"}}">
|
||||
<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-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div>
|
||||
{{!-- {{#if entry.custom_excerpt}}
|
||||
<p>{{entry.custom_excerpt}}</p>
|
||||
{{/if}} --}}
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</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>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-dashboard5-resource-footer">
|
||||
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more features →</LinkTo>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
@ -1130,3 +1130,11 @@ kbd {
|
||||
.gh-dashboard5 .gh-dashboard5-column {
|
||||
border-color: #2b2d31;
|
||||
}
|
||||
|
||||
.gh-dashboard5 .gh-dashboard5-breakout {
|
||||
background: #111213;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-footer {
|
||||
border-color: transparent;
|
||||
}
|
@ -62,6 +62,10 @@ Dashboard v5 Prototype */
|
||||
Dashboard v5 Layout */
|
||||
|
||||
.gh-dashboard5 {
|
||||
|
||||
}
|
||||
|
||||
.gh-dashboard5-layout {
|
||||
max-width: 1230px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -146,7 +150,7 @@ Dashboard v5 Layout */
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--white);
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: color .3s;
|
||||
@ -161,6 +165,7 @@ Dashboard v5 Layout */
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
.gh-dashboard5-box.is-secondary {
|
||||
@ -172,16 +177,6 @@ Dashboard v5 Layout */
|
||||
background: linear-gradient(310deg, rgba(249,249,249,1) 0%, rgba(254,254,254,1) 100%);
|
||||
}
|
||||
|
||||
.gh-dashboard5-box.is-image {
|
||||
background: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-image: url(img/abstract-2.jpg);
|
||||
color: var(--white);
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-columns {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
@ -977,14 +972,30 @@ Dashboard v5 Section Resources */
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-dashboard5-subtitle h4 {
|
||||
color: var(--darkgrey);
|
||||
.gh-dashboard5-resources .gh-dashboare5-article-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
font-size: 1.4rem;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-dashboard5-box {
|
||||
padding-top: 32px;
|
||||
.gh-dashboard5-resources .gh-dashboare5-article-thumbnail {
|
||||
flex: 2;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resources .gh-dashboare5-article-text {
|
||||
flex: 3;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
@ -1056,8 +1067,8 @@ Dashboard v5 Section Staff Picks */
|
||||
}
|
||||
|
||||
.gh-dashboard5-staff-picks .gh-dashboard5-list-item {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-staff-picks .gh-dashboard5-list-item:first-child {
|
||||
@ -1072,12 +1083,11 @@ Dashboard v5 Section Staff Picks */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 1.65rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 8px;
|
||||
color: var(--black);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-staff-picks .gh-dashboard5-list-body {
|
||||
@ -1087,7 +1097,7 @@ Dashboard v5 Section Staff Picks */
|
||||
justify-content: space-between;
|
||||
color: #7c8b9a;
|
||||
font-size: 1.4rem;
|
||||
padding: 16px 64px 16px 0;
|
||||
padding: 8px 24px 16px 0;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
@ -1099,23 +1109,18 @@ Dashboard v5 Section Latest Newsletters */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-dashboard5-newsletter .gh-dashboard5-articles {
|
||||
.gh-dashboard5-newsletter .gh-dashboard5-newsletter-items {
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 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-newsletter-item {}
|
||||
|
||||
.gh-dashboard5-newsletter .gh-dashboard5-article h5 {
|
||||
color: var(--white);
|
||||
font-size: 1.2rem;
|
||||
.gh-dashboard5-newsletter .gh-dashboard5-newsletter-item h5 {
|
||||
font-size: 1.4rem;
|
||||
padding: 0 32px 0 0;
|
||||
}
|
||||
|
||||
@ -1127,8 +1132,14 @@ Dashboard v5 Section Community */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-body {
|
||||
justify-content: flex-start;
|
||||
.gh-dashboard5-community .gh-dashboard5-resource-box {
|
||||
background: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-image: url(img/community-background.jpg);
|
||||
color: var(--white);
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-body p {
|
||||
@ -1137,15 +1148,19 @@ Dashboard v5 Section Community */
|
||||
line-height: 1.3em;
|
||||
padding: 0 64px 0 0;
|
||||
transition: color .3s;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-footer {
|
||||
.gh-dashboard5-community .gh-dashboard5-resource-footer {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-list-footer a {
|
||||
color: var(--white);
|
||||
font-weight: 800;
|
||||
.gh-dashboard5-community .gh-dashboard5-resource-footer a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.gh-dashboard5-community .gh-dashboard5-resource-title h4 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -1202,3 +1217,168 @@ Dashboard v5 Misc */
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.gh-dashboard5-triple {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-dashboard5-articles {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gh-dashboard5-article {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.gh-dashboard5-breakout {
|
||||
width: calc(100% + 48px + 48px);
|
||||
background: #fcfcfc;
|
||||
padding: 24px 0 50vh;
|
||||
margin-left: -48px;
|
||||
margin-right: -48px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-inner {
|
||||
max-width: 1230px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gh-dashboard5-subhead {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard v5 Resources */
|
||||
|
||||
.gh-dashboard5-resource {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-main {
|
||||
margin-right: 8px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-aside {
|
||||
margin-left: -8px; /* grid layout adjustments */
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-box {
|
||||
flex: 1;
|
||||
border: 1px solid var(--whitegrey);
|
||||
padding: 28px 24px 24px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
background: var(--white);
|
||||
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-title h4 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-footer {
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-footer a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-thumbnail {
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-bigarticle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 0 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-bigarticle .gh-dashboard5-resource-thumbnail {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-smallarticles {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-smallarticle {
|
||||
flex: 1;
|
||||
margin: 0 24px 0 0;
|
||||
padding: 0 0 32px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-smallarticle .gh-dashboard5-resource-thumbnail {
|
||||
width: 100%;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-smallarticle:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-bigarticle .gh-dashboard5-resource-text {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.gh-dashboard5-resource-secondary {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.5em;
|
||||
font-weight: 600;
|
||||
color: var(--midlightgrey);
|
||||
padding: 3px 0 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
@ -1,11 +1,13 @@
|
||||
<section class="gh-canvas" {{scroll-top}}>
|
||||
{{#if (feature "dashboardV5")}}
|
||||
<div class="gh-dashboard5">
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
Dashboard
|
||||
</h2>
|
||||
</GhCanvasHeader>
|
||||
<div class="gh-dashboard5-inner">
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
Dashboard
|
||||
</h2>
|
||||
</GhCanvasHeader>
|
||||
</div>
|
||||
<Dashboard::DashboardV5 />
|
||||
</div>
|
||||
{{else}}
|
||||
|
BIN
ghost/admin/public/assets/img/community-background.jpg
Normal file
BIN
ghost/admin/public/assets/img/community-background.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 834 KiB |
BIN
ghost/admin/public/assets/img/newsletter-1.jpg
Normal file
BIN
ghost/admin/public/assets/img/newsletter-1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 185 KiB |
BIN
ghost/admin/public/assets/img/newsletter-2.jpg
Normal file
BIN
ghost/admin/public/assets/img/newsletter-2.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 221 KiB |
BIN
ghost/admin/public/assets/img/resource-1.jpg
Normal file
BIN
ghost/admin/public/assets/img/resource-1.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 107 KiB |
Loading…
Reference in New Issue
Block a user