tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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:
James Morris 2022-04-26 11:29:44 +01:00
parent d0a1bba400
commit 3f4db36630
16 changed files with 427 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/dashboard/dashboard-v5.hbs
View File

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

12
app/components/dashboard/v5/charts/recents.hbs
View File

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

24
app/components/dashboard/v5/resources/community.hbs
View File

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

57
app/components/dashboard/v5/resources/newsletter.hbs
View File

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

2
app/components/dashboard/v5/resources/newsletter.js
View File

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

34
app/components/dashboard/v5/resources/resources.hbs
View File

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

59
app/components/dashboard/v5/resources/staff-picks.hbs
View File

@ -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
app/components/dashboard/v5/resources/triple.hbs Normal file
View 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>

51
app/components/dashboard/v5/resources/whats-new.hbs
View File

@ -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 &rarr;</LinkTo>
</div>
</div>
{{/if}}
{{/if}}
</div>
<div class="gh-dashboard5-resource-footer">
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more features &rarr;</LinkTo>
</div>
</article>
</section>

8
app/styles/app-dark.css
View File

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

252
app/styles/layouts/dashboard-v5.css
View File

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

12
app/templates/dashboard.hbs
View File

@ -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
public/assets/img/community-background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 834 KiB

BIN
public/assets/img/newsletter-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

BIN
public/assets/img/newsletter-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 221 KiB

BIN
public/assets/img/resource-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB