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

Added in a more responsive new Dashboard

Browse Source 
refs: https://github.com/TryGhost/Team/issues/1531

- any triple column collapses down to one and sits underneath each other
- the mini charts' legends disappear and they also then go full width underneath each other
- the resources module loses it's thumbnail at smaller widths
- the 2/3 resources column goes to 1/2
- everything worth having has truncation that is only seen at very small sizes
This commit is contained in:
James Morris 2022-05-05 15:15:58 +01:00
parent a01ae97801
commit 0fda84d71e
9 changed files with 204 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,52 +0,0 @@
<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">
<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}}
<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">
<p>Loading...</p>
</div>
{{else}}
{{#if eventsFetcher.data}}
{{#each eventsFetcher.data as |event|}}
{{#let (parse-member-event event eventsFetcher.hasMultipleNewsletters) as |parsedEvent|}}
<div class="gh-dashboard5-list-item" data-test-dashboard-member-activity-item>
<LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
<GhMemberAvatar @member={{parsedEvent.member}} @containerClass="w8 h8 mr3 flex-shrink-0" />
{{parsedEvent.subject}}
<span>
{{capitalize-first-letter parsedEvent.action}}
{{parsedEvent.object}}
{{parsedEvent.info}}
</span>
</LinkTo>
<span class="gh-dashboard5-list-date">{{moment-from-now parsedEvent.timestamp}}</span>
</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>
</article>
</section>

23
ghost/admin/app/components/dashboard/v5/charts/recent-activity.js
View File

@ -1,23 +0,0 @@
import Component from '@glimmer/component';
import {inject as service} from '@ember/service';
export default class RecentActivity extends Component {
@service feature;
@service session;
@service settings;
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;
}
}

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

@ -1,33 +0,0 @@
<section class="gh-dashboard5-section gh-dashboard5-recent-posts" {{did-insert this.loadPosts}}>
<article class="gh-dashboard5-box">
<Dashboard::v5::Parts::Metric @label="Recent posts" />
<div class="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">
<LinkTo class="gh-dashboard5-list-post permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
{{post.title}}
</LinkTo>
<span>{{format-number post.email.emailCount}}</span>
<span class="with-percentage-bar">
<span>{{post.email.openRate}}%</span>
<span class="prototype-bar"><span style={{html-safe (concat "width: " post.email.openRate "%;")}}/></span>
</span>
</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>
</article>
</section>

15
ghost/admin/app/components/dashboard/v5/charts/recent-posts.js
View File

@ -1,15 +0,0 @@
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 RecentPosts extends Component {
@service store;
@tracked posts = [];
@action
async loadPosts() {
this.posts = await this.store.query('post', {limit: 3, filter: 'status:published', order: 'published_at desc'});
}
}

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

@ -11,7 +11,6 @@
<div class="gh-dashboard5-resource-text">
<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}}
@ -19,7 +18,7 @@
{{/if}}
</div>
<div class="gh-dashboard5-resource-footer">
<a href="https://ghost.org/resources/newsletter/" target="_blank" class="gh-dashboard5-subscribe-button" rel="noopener noreferrer">Subscribe to the newsletter &rarr;</a>
<a href="https://ghost.org/resources/newsletter/" target="_blank" class="gh-dashboard5-subscribe-button" rel="noopener noreferrer">Subscribe <span>to the newsletter</span> &rarr;</a>
</div>
</article>
</section>

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

@ -1,13 +1,12 @@
<section class="gh-dashboard5-resource gh-dashboard5-resources" {{did-insert this.load}}>
<article class="gh-dashboard5-resource-box">
{{#if (not (or this.loading this.error))}}
<a href="{{this.resource.url}}" target="_blank" class="gh-dashboard5-resource-thumbnail" rel="noopener noreferrer" style={{html-safe (concat "background-image: url(" this.resource.feature_image ")")}} aria-label="Resource link"></a>
<div class="gh-dashboard5-resource-body">
<div>
<div class="gh-dashboard5-resource-title">
<h4>Resources</h4>
</div>
<a href="{{this.resource.url}}" target="_blank" class="gh-dashboard5-resource-thumbnail" rel="noopener noreferrer" style={{html-safe (concat "background-image: url(" this.resource.feature_image ")")}} aria-label="Resource link"></a>
<div class="gh-dashboard5-resource-contents">
<div class="gh-dashboard5-resource-title">
<h4>Resources</h4>
</div>
<div class="gh-dashboard5-resource-body">
<a href="{{this.resource.url}}" target="_blank" class="gh-dashboard5-resource-bigarticle" rel="noopener noreferrer">
<div class="gh-dashboard5-resource-text">
<h3>{{this.resource.title}}</h3>
@ -20,6 +19,5 @@
</div>
</div>
{{/if}}
</article>
</section>

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

@ -1,11 +1,11 @@
<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 large">
<div class="gh-dashboard5-resource-title is-large has-border">
<h4>Staff picks</h4>
<p>Hand picked stories from around the web, published with Ghost.</p>
</div>
<div class="gh-dashboard5-resource-body">
<div class="gh-dashboard5-list" {{did-insert this.load}}>
<div class="gh-dashboard5-list">
{{#if (not (or this.loading this.error))}}
<div class="gh-dashboard5-list-body">
{{#each this.staffPicks as |entry|}}

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

@ -1,24 +1,31 @@
<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 large">
<div class="gh-dashboard5-resource-title is-large has-border">
<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))}}
<div class="gh-dashboard5-list {{if this.whatsNew.hasNew "has-new"}}">
<div class="gh-dashboard5-list {{if this.whatsNew.hasNew "has-new"}}">
{{#if (not (or this.loading this.error))}}
<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>
<LinkTo class="gh-dashboard5-list-post" @route="whatsnew" @query={{hash entry=entry.slug}}>
<span class="gh-dashboard5-list-link">
<span>{{entry.title}}</span>
</span>
<div class="gh-dashboard5-resource-secondary">{{moment-format entry.published_at "D MMM YYYY"}}</div>
</LinkTo>
</div>
{{else}}
<div class="gh-dashboard5-list-empty">
{{svg-jar "no-data-list"}}
<p>No new features yet.</p>
</div>
{{/each}}
</div>
</div>
{{/if}}
{{/if}}
</div>
</div>
<div class="gh-dashboard5-resource-footer">
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more features &rarr;</LinkTo>

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

@ -67,7 +67,6 @@ Dashboard v5 Layout */
.gh-dashboard5-layout {
max-width: 1230px;
min-width: 850px;
margin: 0 auto;
}
@ -108,6 +107,12 @@ Dashboard v5 Layout */
grid-template-columns: 2fr 1fr;
}
@media screen and (max-width: 1320px) {
.gh-dashboard5-split {
grid-template-columns: 1fr 1fr;
}
}
.gh-dashboard5-thirds {
flex: 1;
display: flex;
@ -684,9 +689,7 @@ Dashboard v5 List */
font-weight: 600;
font-size: 1.5rem;
color: var(--darkgrey);
padding: 0 64px 0 0;
display: flex;
align-items: center;
padding: 0 32px 0 0;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
@ -698,9 +701,7 @@ Dashboard v5 List */
font-size: 1.4rem;
color: var(--middarkgrey);
text-decoration: none;
padding: 0 64px 0 0;
display: flex;
align-items: center;
padding: 0 32px 0 0;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
@ -709,6 +710,7 @@ Dashboard v5 List */
.gh-dashboard5-list-item svg {
width: 20px;
min-width: 20px;
height: 20px;
margin: 0 0.5rem 0 -4px;
}
@ -1098,78 +1100,6 @@ Dashboard v5 Recents */
}
/* ---------------------------------
Dashboard v5 What's New */
.gh-dashboard5-whats-new {
position: relative;
}
.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,
.gh-dashboard5-whats-new .gh-dashboard5-list-item {
grid-template-columns: 100%;
}
.gh-dashboard5-whats-new .gh-dashboard5-list-item {
padding: 0;
}
.gh-dashboard5-whats-new .gh-dashboard5-list-item a {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 1.45rem;
font-weight: 600;
line-height: 1.4em;
padding: 12px 32px 12px 0;
color: var(--black);
}
.gh-dashboard5-whats-new .gh-dashboard5-list-date {
padding-top: 3px;
}
.gh-dashboard5-list-link {
display: flex;
width: 100%;
}
.gh-dashboard5-list-link span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.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;
height: 18px;
}
.gh-dashboard5-whats-new .gh-dashboard5-resource-body {
border-top: 1px solid #ebeef0;
padding-top: 12px;
}
/* ---------------------------------
Dashboard v5 Resources */
@ -1183,13 +1113,26 @@ Dashboard v5 Resources */
gap: 28px;
}
@media screen and (max-width: 1320px) {
.gh-dashboard5-resources .gh-dashboard5-resource-box {
grid-template-columns: 1fr;
}
.gh-dashboard5-resources .gh-dashboard5-resource-thumbnail {
display: none;
}
}
.gh-dashboard5-resource-text {
color: var(--black);
}
.gh-dashboard5-resources .gh-dashboard5-resource-body {
.gh-dashboard5-resource-contents {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
align-items: stretch;
}
.gh-dashboard5-resources .gh-dashboard5-articles {
@ -1295,72 +1238,6 @@ Dashboard v5 Multi */
}
/* ---------------------------------
Dashboard v5 Staff Picks */
.gh-dashboard5-staff-picks {
position: relative;
}
.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 {
padding-top: 12px;
}
.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 {
padding: 0;
}
.gh-dashboard5-staff-picks .gh-dashboard5-list-item a {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 1.45rem;
font-weight: 600;
line-height: 1.4em;
color: var(--black);
padding: 12px 32px 12px 0;
min-width: 0;
}
.gh-dashboard5-staff-picks .gh-dashboard5-list-body {
color: var(--midlightgrey);
font-size: 1.4rem;
transition: all .3s ease-in-out;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-body {
border-top: 1px solid var(--whitegrey);
padding-top: 12px;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a {
display: flex;
align-items: center;
color: #1DA1F2;
font-weight: 500;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg {
width: 20px;
height: 20px;
margin-right: 5px;
}
/* ---------------------------------
Dashboard v5 Latest Newsletters */
@ -1391,6 +1268,12 @@ Dashboard v5 Latest Newsletters */
border-radius: 4px;
}
@media screen and (max-width: 1400px) {
.gh-dashboard5-subscribe-button > span {
display: none;
}
}
/* ---------------------------------
Dashboard v5 Community */
@ -1428,7 +1311,7 @@ Dashboard v5 Community */
color: #fff;
}
.gh-dashboard5-community .gh-dashboard5-resource-title:not(.large) h4 {
.gh-dashboard5-community .gh-dashboard5-resource-title:not(.is-large) h4 {
color: #fff;
}
@ -1487,9 +1370,10 @@ Dashboard v5 Misc */
/* ---------------------------------
Dashboard v5 Resources */
Dashboard v5 Resource */
.gh-dashboard5-resource {
position: relative;
display: flex;
}
@ -1516,7 +1400,7 @@ Dashboard v5 Resources */
box-shadow: none;
}
.gh-dashboard5-resource-title:not(.large) h4 {
.gh-dashboard5-resource-title:not(.is-large) h4 {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
@ -1527,7 +1411,7 @@ Dashboard v5 Resources */
transition: color .3s;
}
.gh-dashboard5-resource-title.large h4 {
.gh-dashboard5-resource-title.is-large h4 {
align-items: center;
font-size: 1.55rem;
font-weight: 700;
@ -1539,8 +1423,12 @@ Dashboard v5 Resources */
letter-spacing: -.3px;
}
.gh-dashboard5-resource-title.has-border {
border-bottom: 1px solid var(--whitegrey);
}
.gh-dashboard5-resource-title p {
margin: 16px 0;
margin: 8px 0 16px;
padding: 0;
color: var(--middarkgrey);
font-size: 1.55rem;
@ -1550,6 +1438,7 @@ Dashboard v5 Resources */
flex: 1;
display: flex;
justify-content: flex-start;
padding-top: 12px;
}
.gh-dashboard5-resource-footer {
@ -1569,7 +1458,6 @@ Dashboard v5 Resources */
background-position: center;
background-size: cover;
background-image: url(img/resource-1.jpg);
padding-top: 32px;
}
.gh-dashboard5-resource-bigarticle {
@ -1636,6 +1524,87 @@ Dashboard v5 Resources */
white-space: nowrap;
}
.gh-dashboard5-resource-title h4 {
margin-bottom: 0px;
}
.gh-dashboard5-resource .gh-dashboard5-list-header,
.gh-dashboard5-resource .gh-dashboard5-list-item {
grid-template-columns: 100%;
}
.gh-dashboard5-resource .gh-dashboard5-list-item {
padding: 0;
}
.gh-dashboard5-resource .gh-dashboard5-list-link {
display: flex;
width: 100%;
min-width: 0;
}
.gh-dashboard5-resource .gh-dashboard5-list-link span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.gh-dashboard5-resource .has-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;
height: 18px;
}
.gh-dashboard5-resource .gh-dashboard5-list-header,
.gh-dashboard5-resource .gh-dashboard5-list-item {
grid-template-columns: 100%;
}
.gh-dashboard5-resource .gh-dashboard5-list-item {
padding: 0;
}
.gh-dashboard5-resource .gh-dashboard5-list-post {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 1.45rem;
font-weight: 600;
line-height: 1.4em;
color: var(--black);
padding: 12px 32px 12px 0;
min-width: 0;
}
.gh-dashboard5-resource .gh-dashboard5-list-body {
color: var(--midlightgrey);
font-size: 1.4rem;
transition: all .3s ease-in-out;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a {
display: flex;
align-items: center;
color: #1DA1F2;
font-weight: 500;
}
.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg {
width: 20px;
height: 20px;
margin-right: 5px;
}
/* ---------------------------------
Dashboard v5 Tooltips */
@ -1702,3 +1671,62 @@ Dashboard v5 Tooltips */
.gh-dashboard5-totals .gh-dashboard5-chart-container {
margin-right: -10px; /* fix 99% width ChartJS hack */
}
@media screen and (max-width: 1320px) {
.gh-dashboard5-minicharts .gh-dashboard5-chart {
padding-left: 0;
}
.gh-dashboard5-minicharts .gh-dashboard5-legend {
display: none;
}
}
@media screen and (max-width: 1000px) {
.gh-dashboard5-minicharts {
flex-direction: column;
}
.gh-dashboard5-minichart {
padding: 16px 0;
border-left: 0 none;
border-bottom: 1px solid var(--whitegrey);
}
.gh-dashboard5-minichart:first-child {
padding-top: 4px;
}
.gh-dashboard5-minichart:last-child {
border-bottom: 0 none;
padding-bottom: 0;
}
.gh-dashboard5-minichart .gh-dashboard5-data {
top: 16px;
left: 0;
}
.gh-dashboard5-minichart .gh-dashboard5-select {
top: 0;
}
.gh-dashboard5-columns {
flex-direction: column;
}
.gh-dashboard5-columns > .gh-dashboard5-column {
padding: 16px 0;
border-left: 0 none;
border-bottom: 1px solid var(--whitegrey);
}
.gh-dashboard5-columns > .gh-dashboard5-column:first-child {
padding-top: 4px;
}
.gh-dashboard5-columns > .gh-dashboard5-column:last-child {
border-bottom: 0 none;
padding-bottom: 0;
}
}