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

Updated resources section

Browse Source
This commit is contained in:
Peter Zimon 2022-04-28 16:48:14 +02:00
parent f28320abae
commit 3b3140a002
7 changed files with 125 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,13 +17,11 @@
<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 />
<Dashboard::V5::Resources::WhatsNew />
<Dashboard::V5::Resources::Community />
</div>
<Dashboard::V5::Resources::Community />
{{/if}}
</section>

12
ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs
View File

@ -1,18 +1,18 @@
<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>
<h4>Latest from the newsletter</h4>
</div>
<div class="gh-dashboard5-resource-body">
{{#if (not (or this.loading this.error))}}
<div class="gh-dashboard5-resource-smallarticles">
<div class="gh-dashboard5-resource-bigarticle">
{{#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">
<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>
<div class="gh-dashboard5-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div>
<h3>{{entry.title}}</h3>
<p>{{entry.excerpt}}</p>
{{!-- <div class="gh-dashboard5-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div> --}}
</div>
</a>
{{/each}}
@ -21,7 +21,7 @@
</div>
<div class="gh-dashboard5-resource-footer">
<a href="https://ghost.org/resources/newsletter/" target="_blank" rel="noopener noreferrer">Sign up to the newsletter &rarr;</a>
<a href="https://ghost.org/resources/newsletter/" target="_blank" class="gh-dashboard5-subscribe-button" rel="noopener noreferrer">Subscribe to the newsletter &rarr;</a>
</div>
</article>
</section>

2
ghost/admin/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 = 2;
const NEWSLETTER_COUNT = 1;
export default class Newsletter extends Component {
@tracked loading = null;

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

@ -1,24 +1,22 @@
<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>
<img class="gh-dashboard5-resource-thumbnail" src="assets/img/resource-1.jpg" alt="Building your audience with subscriber signups" />
<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>
<div>
<div class="gh-dashboard5-resource-title">
<h4>Resources</h4>
</div>
<a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-dashboard5-resource-bigarticle" rel="noopener noreferrer">
<div class="gh-dashboard5-resource-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>
<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>
</a>
</div>
</div>
<div class="gh-dashboard5-resource-footer">
<a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">Get more help &rarr;</a>
<div class="gh-dashboard5-resource-footer">
<a href="https://ghost.org/resources/" target="_blank" rel="noopener noreferrer">Learn more &rarr;</a>
</div>
</div>
</article>
</section>

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

@ -3,7 +3,7 @@
<div class="gh-dashboard5-resource-title">
<h4>Staff Picks</h4>
<p>Hand picked stories from around the web, published with Ghost.</p>
</div>
</div>
<div class="gh-dashboard5-resource-body">
<div class="gh-dashboard5-list" {{did-insert this.load}}>
{{#if (not (or this.loading this.error))}}
@ -28,7 +28,7 @@
</div>
</div>
<div class="gh-dashboard5-resource-footer">
<a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">Follow on Twitter →</a>
<a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">{{svg-jar "twitter"}} <span>Follow on Twitter</span></a>
</div>
</article>
</section>

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

@ -1,7 +1,8 @@
<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>
<h4>What's new</h4>
<p>All the latest changes and improvements.</p>
</div>
<div class="gh-dashboard5-resource-body">
{{#if (not (or this.loading this.error))}}

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

@ -637,7 +637,6 @@ Dashboard v5 List */
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: 8px 0;
}
.gh-dashboard5-list-item {
@ -1056,7 +1055,14 @@ Dashboard v5 What's New */
.gh-dashboard5-whats-new {
position: relative;
margin-left: -12px; /* layout adjustment */
}
.gh-dashboard5-whats-new .gh-dashboard5-resource-title h4 {
margin-bottom: 0px;
}
.gh-dashboard5-whats-new .gh-dashboard5-resource-title p {
margin-top: 8px;
}
.gh-dashboard5-whats-new .gh-dashboard5-list-header,
@ -1105,13 +1111,32 @@ Dashboard v5 What's New */
padding: 3px 4px;
}
.gh-dashboard5-whats-new .gh-dashboard5-resource-body {
border-top: 1px solid #ebeef0;
padding-top: 12px;
}
/* ---------------------------------
Dashboard v5 Resources */
.gh-dashboard5-resources {
position: relative;
margin-right: 12px; /* layout adjustment */
}
.gh-dashboard5-resources .gh-dashboard5-resource-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.gh-dashboard5-resource-text {
color: var(--black);
}
.gh-dashboard5-resources .gh-dashboard5-resource-body {
flex-direction: column;
justify-content: space-between;
}
.gh-dashboard5-resources .gh-dashboard5-articles {
@ -1155,6 +1180,11 @@ Dashboard v5 Resources */
justify-content: center;
}
.gh-dashboard5-resources .gh-dashboard5-resource-footer a {
display: inline-block;
padding: 8px 0;
}
/* ---------------------------------
Dashboard v5 Multi */
@ -1217,7 +1247,14 @@ Dashboard v5 Staff Picks */
.gh-dashboard5-staff-picks {
position: relative;
margin-left: -12px; /* layout adjustment */
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-title h4 {
margin-bottom: 8px;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-title p {
margin-top: 8px;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-body {
@ -1263,7 +1300,7 @@ Dashboard v5 Staff Picks */
justify-content: space-between;
color: #7c8b9a;
font-size: 1.4rem;
padding: 0 32px 16px 0;
padding: 0 32px 0 0;
transition: all .3s ease-in-out;
}
@ -1272,13 +1309,38 @@ Dashboard v5 Staff Picks */
border-color: #dcdfe1;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a {
display: flex;
align-items: center;
color: var(--middarkgrey);
font-weight: 400;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a span {
opacity: 0;
transition: 0.15s all ease-in-out;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a:hover span {
opacity: 1;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg {
width: 20px;
height: 20px;
margin-right: 5px;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg path {
fill: var(--middarkgrey);
}
/* ---------------------------------
Dashboard v5 Latest Newsletters */
.gh-dashboard5-newsletter {
position: relative;
margin-right: 12px; /* layout adjustment */
}
.gh-dashboard5-newsletter .gh-dashboard5-newsletter-items {
@ -1294,12 +1356,23 @@ Dashboard v5 Latest Newsletters */
padding: 0 32px 0 0;
}
.gh-dashboard5-subscribe-button {
display: flex;
padding: 8px 12px;
align-items: center;
justify-content: center;
background: var(--black);
color: var(--white);
border-radius: 4px;
}
/* ---------------------------------
Dashboard v5 Community */
.gh-dashboard5-community {
position: relative;
grid-column: 1 / 3;
}
.gh-dashboard5-community .gh-dashboard5-resource-box {
@ -1313,7 +1386,7 @@ Dashboard v5 Community */
}
.gh-dashboard5-community .gh-dashboard5-list-body p {
font-size: 3.4rem;
font-size: 4.0rem;
font-weight: 700;
line-height: 1.3em;
padding: 0 64px 0 0;
@ -1394,17 +1467,7 @@ 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);
@ -1415,45 +1478,39 @@ Dashboard v5 Resources */
position: relative;
align-items: stretch;
background: var(--white);
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.02);
}
.gh-dashboard5-resource-box.is-secondary {
background: var(--main-color-content-greybg);
background: linear-gradient(45deg, color-mod(var(--main-color-content-greybg) l(+2%)), var(--main-color-content-greybg));
border-color: transparent;
box-shadow: none;
}
.gh-dashboard5-resource-title {
display: flex;
flex-direction: column;
margin: 0 0 20px;
}
.gh-dashboard5-resource-title h4 {
font-size: 1.2rem;
font-weight: 700;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
color: var(--black);
margin: 0;
letter-spacing: 0.3px;
color: var(--darkgrey);
margin: 0 0 16px;
padding: 0;
transition: color .3s;
}
.gh-dashboard5-resource-title p {
margin: 16px 0 0;
padding: 0 64px 0 0;
margin: 16px 0;
padding: 0;
color: var(--middarkgrey);
font-size: 1.55rem;
}
.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;
}
@ -1480,6 +1537,16 @@ Dashboard v5 Resources */
align-items: center;
}
.gh-dashboard5-resource-bigarticle h3 {
font-size: 2.2rem;
font-weight: 700;
}
.gh-dashboard5-resource-bigarticle p {
font-size: 1.5rem;
color: var(--middarkgrey);
}
.gh-dashboard5-resource-smallarticles {
flex: 1;
display: flex;
@ -1504,19 +1571,10 @@ Dashboard v5 Resources */
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;
font-weight: 400;
color: var(--midlightgrey);
padding: 3px 0 0 0;
white-space: nowrap;