mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00:14 -05:00
Added static UI to email debug screen
refs. https://github.com/TryGhost/Team/issues/2327 - static UI was needed on the email debug screen for testing and backend wiring
This commit is contained in:
Peter Zimon
parent
6849a4ef66
commit
dee00e36a0
2 changed files with 204 additions and 71 deletions
|
|
@ -3180,3 +3180,104 @@ p.theme-validation-details {
|
||||||
margin: 4px 0 8px;
|
margin: 4px 0 8px;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Debug screen
|
||||||
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
.gh-email-debug .gh-post-analytics-header .gh-canvas-header-content {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-error {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 12px 16px 12px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-error svg {
|
||||||
|
height: 20px !important;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-errortext {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-error h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-error button {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-settingstab-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-settingstab-icon svg path,
|
||||||
|
.gh-email-debug-settingstab-icon svg circle {
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug .gh-list {
|
||||||
|
display: block;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug .gh-list tr:first-of-type .gh-list-data {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-permanent-failures .gh-list-data {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-col-member {
|
||||||
|
padding-left: 0;
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-member {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-failure {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-failure svg {
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-failure-details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-failure-codes {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-failure-code {
|
||||||
|
color: var(--midgrey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-email-debug-failure-code span {
|
||||||
|
color: var(--darkgrey);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,16 @@
|
||||||
<section class="gh-canvas {{if (feature "audienceFeedback") "feature-audienceFeedback"}}" {{did-insert this.loadData}}>
|
<section class="gh-canvas gh-email-debug {{if (feature "audienceFeedback") "feature-audienceFeedback"}}">
|
||||||
<GhCanvasHeader class="gh-canvas-header gh-post-analytics-header">
|
<GhCanvasHeader class="gh-canvas-header gh-post-analytics-header">
|
||||||
<div class="flex flex-column flex-grow-1">
|
<div class="flex flex-column flex-grow-1">
|
||||||
<div class="gh-canvas-breadcrumb">
|
<div class="gh-canvas-breadcrumb">
|
||||||
<LinkTo @route="posts">
|
<LinkTo @route="posts">
|
||||||
Posts
|
Posts
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
{{svg-jar "arrow-right-small"}}Analytics
|
{{svg-jar "arrow-right-small"}}
|
||||||
|
<LinkTo @route="posts.analytics" @model={{@model.id}}>
|
||||||
|
Analytics
|
||||||
|
</LinkTo>
|
||||||
|
{{svg-jar "arrow-right-small"}}
|
||||||
|
Debug
|
||||||
</div>
|
</div>
|
||||||
<h2 class="gh-canvas-title gh-post-title">
|
<h2 class="gh-canvas-title gh-post-title">
|
||||||
Post title
|
Post title
|
||||||
|
|
@ -35,9 +40,9 @@
|
||||||
{{/let}}
|
{{/let}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gh-box gh-box-error gh-box-tip flex justify-between">
|
<div class="gh-box gh-box-error gh-box-tip gh-email-debug-error">
|
||||||
{{svg-jar "warning"}}
|
{{svg-jar "warning"}}
|
||||||
<div>
|
<div class="gh-email-debug-errortext">
|
||||||
<h4>Major error</h4>
|
<h4>Major error</h4>
|
||||||
<p class="mb0">This is the explanation of what happened.</p>
|
<p class="mb0">This is the explanation of what happened.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,84 +52,111 @@
|
||||||
</GhCanvasHeader>
|
</GhCanvasHeader>
|
||||||
|
|
||||||
<Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|>
|
<Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|>
|
||||||
<tabs.tab>
|
<tabs.tab>
|
||||||
<h3>{{svg-jar "analytics-tab-sent-large"}}23</h3>
|
<h3>{{svg-jar "analytics-tab-sent-large"}}23</h3>
|
||||||
<p><span class="analytics-tab-label">Permanent failures</span></p>
|
<p><span class="analytics-tab-label">Permanent failures</span></p>
|
||||||
</tabs.tab>
|
</tabs.tab>
|
||||||
|
|
||||||
<tabs.tabPanel>
|
<tabs.tabPanel>
|
||||||
<div class="gh-post-activity-feed">
|
<table class="gh-list gh-email-debug-permanent-failures">
|
||||||
<div class="gh-dashboard-list-body">
|
<tbody>
|
||||||
<div class="gh-dashboard-list-body gh-dashboard-list-cols-3">
|
<tr>
|
||||||
<div class="gh-dashboard-list-item" style="grid-template-columns:30% 70%;">
|
<div class="gh-list-data gh-email-debug-col-member">
|
||||||
<div class="gh-dashboard-list-item-sub">
|
<div class="gh-email-debug-member">
|
||||||
<figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-red">
|
<figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-red">
|
||||||
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
|
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
|
||||||
<span class="gh-member-avatar-label gh-member-list-avatar">NN</span>
|
<span class="gh-member-avatar-label gh-member-list-avatar">PD</span>
|
||||||
</div>
|
|
||||||
{{#if this.avatarImage}}
|
|
||||||
<img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
|
|
||||||
{{/if}}
|
|
||||||
</figure>
|
|
||||||
<div class="">
|
|
||||||
<h3 class="ma0 pa0 gh-members-list-name">Name Lastname</h3>
|
|
||||||
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dzvlais@gmail.com</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="gh-dashboard-list-item-sub">
|
|
||||||
{{svg-jar "warning-stroke"}}
|
|
||||||
<span class="gh-dashboard-list-subtext">
|
|
||||||
<span class="gh-members-activity-description">
|
|
||||||
<span class="gh-members-activity-event-text">402</span>
|
|
||||||
<p>4.2.2 The email account that you tried to reach is over quota. Please direct\n4.2.2 the recipient to\n4.2.2 https://support.google.com/mail/?p=OverQuotaTemp bb1-20020a05622a1b0100b0039ce87e3d49si1009300qtb.292 - gsmtp</p>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
{{#if this.avatarImage}}
|
||||||
|
<img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
|
||||||
|
{{/if}}
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h3 class="ma0 pa0 gh-members-list-name">Permanent Dude</h3>
|
||||||
|
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dude@whofails.com</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="gh-list-data gh-email-debug-col-failure">
|
||||||
|
<div class="gh-email-debug-failure">
|
||||||
|
{{!-- <div> --}}
|
||||||
|
{{!-- {{svg-jar "warning-stroke"}} --}}
|
||||||
|
{{!-- </div> --}}
|
||||||
|
<div class="gh-email-debug-failure-details">
|
||||||
|
<div class="gh-email-debug-failure-codes">
|
||||||
|
<span class="gh-email-debug-failure-code">Failure code: <span>402</span></span>
|
||||||
|
<span class="gh-email-debug-failure-code">Enhanced code: <span>4.2.2</span></span>
|
||||||
|
</div>
|
||||||
|
<span class="gh-email-debug-failure-description"><code>The email account that you tried to reach is over quota. Please direct the recipient to https://support.google.com/mail/?p=OverQuotaTemp bb1-20020a05622a1b0100b0039ce87e3d49si1009300qtb.292 - gsmtp</code></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</tabs.tabPanel>
|
||||||
|
|
||||||
</tabs.tabPanel>
|
<tabs.tab>
|
||||||
|
<h3>{{svg-jar "analytics-tab-opened-large"}}36</h3>
|
||||||
|
<p><span class="analytics-tab-label">Temporary failures</span></p>
|
||||||
|
</tabs.tab>
|
||||||
|
|
||||||
<tabs.tab>
|
<tabs.tabPanel>
|
||||||
<h3>{{svg-jar "analytics-tab-opened-large"}}36</h3>
|
<table class="gh-list gh-email-debug-permanent-failures">
|
||||||
<p><span class="analytics-tab-label">Temporary failures</span></p>
|
<tbody>
|
||||||
</tabs.tab>
|
<tr>
|
||||||
|
<div class="gh-list-data gh-email-debug-col-member">
|
||||||
|
<div class="gh-email-debug-member">
|
||||||
|
<figure class="gh-member-gravatar w9 h9 mr3 flex-shrink-0 bg-purple">
|
||||||
|
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
|
||||||
|
<span class="gh-member-avatar-label gh-member-list-avatar">TD</span>
|
||||||
|
</div>
|
||||||
|
{{#if this.avatarImage}}
|
||||||
|
<img class="gh-member-avatar-image" src="{{this.avatarImage}}" alt="{{or @member.name @member.email}}" />
|
||||||
|
{{/if}}
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h3 class="ma0 pa0 gh-members-list-name">Temporary Dude</h3>
|
||||||
|
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">dude@whofails.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-list-data gh-email-debug-col-failure">
|
||||||
|
<div class="gh-email-debug-failure">
|
||||||
|
{{!-- <div> --}}
|
||||||
|
{{!-- {{svg-jar "warning-stroke"}} --}}
|
||||||
|
{{!-- </div> --}}
|
||||||
|
<div class="gh-email-debug-failure-details">
|
||||||
|
<div class="gh-email-debug-failure-codes">
|
||||||
|
<span class="gh-email-debug-failure-code">Failure code: <span>402</span></span>
|
||||||
|
<span class="gh-email-debug-failure-code">Enhanced code: <span>4.2.2</span></span>
|
||||||
|
</div>
|
||||||
|
<span class="gh-email-debug-failure-description"><code>The email account that you tried to reach is over quota. Please direct the recipient to https://support.google.com/mail/?p=OverQuotaTemp bb1-20020a05622a1b0100b0039ce87e3d49si1009300qtb.292 - gsmtp</code></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</tabs.tabPanel>
|
||||||
|
|
||||||
<tabs.tabPanel>
|
<tabs.tab>
|
||||||
<Posts::PostActivityFeed
|
<h3>{{svg-jar "analytics-tab-clicked-large"}}3</h3>
|
||||||
@postId={{this.post.id}}
|
<p><span class="analytics-tab-label">Batches errored</span></p>
|
||||||
@eventType="opened"
|
</tabs.tab>
|
||||||
@linkQuery={{hash filterParam=(concat "opened_emails.post_id:" this.post.id) }}
|
|
||||||
/>
|
|
||||||
</tabs.tabPanel>
|
|
||||||
|
|
||||||
<tabs.tab>
|
<tabs.tabPanel>
|
||||||
<h3>{{svg-jar "analytics-tab-clicked-large"}}3</h3>
|
TBD
|
||||||
<p><span class="analytics-tab-label">Batches errored</span></p>
|
</tabs.tabPanel>
|
||||||
</tabs.tab>
|
|
||||||
|
|
||||||
<tabs.tabPanel>
|
<tabs.tab>
|
||||||
<Posts::PostActivityFeed
|
<div class="gh-email-debug-settingstab-icon">{{svg-jar "settings"}}</div>
|
||||||
@postId={{this.post.id}}
|
<p><span class="analytics-tab-label">Settings</span></p>
|
||||||
@eventType="clicked"
|
</tabs.tab>
|
||||||
@linkQuery={{hash filterParam=(concat "clicked_links.post_id:" this.post.id) }}
|
|
||||||
/>
|
|
||||||
</tabs.tabPanel>
|
|
||||||
|
|
||||||
<tabs.tab>
|
<tabs.tabPanel>
|
||||||
<h3>{{svg-jar "settings"}}{{format-number this.totalFeedback}}</h3>
|
TBD
|
||||||
<p><span class="analytics-tab-label">Settings</span></p>
|
</tabs.tabPanel>
|
||||||
</tabs.tab>
|
|
||||||
|
|
||||||
<tabs.tabPanel>
|
|
||||||
<Posts::PostActivityFeed
|
|
||||||
@postId={{this.post.id}}
|
|
||||||
@eventType="feedback"
|
|
||||||
@data={{this.feedbackChartData}}
|
|
||||||
/>
|
|
||||||
</tabs.tabPanel>
|
|
||||||
|
|
||||||
</Tabs::Tabs>
|
</Tabs::Tabs>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue