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;
|
||||
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">
|
||||
<div class="flex flex-column flex-grow-1">
|
||||
<div class="gh-canvas-breadcrumb">
|
||||
<LinkTo @route="posts">
|
||||
Posts
|
||||
</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>
|
||||
<h2 class="gh-canvas-title gh-post-title">
|
||||
Post title
|
||||
|
|
@ -35,9 +40,9 @@
|
|||
{{/let}}
|
||||
</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"}}
|
||||
<div>
|
||||
<div class="gh-email-debug-errortext">
|
||||
<h4>Major error</h4>
|
||||
<p class="mb0">This is the explanation of what happened.</p>
|
||||
</div>
|
||||
|
|
@ -47,84 +52,111 @@
|
|||
</GhCanvasHeader>
|
||||
|
||||
<Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|>
|
||||
<tabs.tab>
|
||||
<h3>{{svg-jar "analytics-tab-sent-large"}}23</h3>
|
||||
<p><span class="analytics-tab-label">Permanent failures</span></p>
|
||||
</tabs.tab>
|
||||
<tabs.tab>
|
||||
<h3>{{svg-jar "analytics-tab-sent-large"}}23</h3>
|
||||
<p><span class="analytics-tab-label">Permanent failures</span></p>
|
||||
</tabs.tab>
|
||||
|
||||
<tabs.tabPanel>
|
||||
<div class="gh-post-activity-feed">
|
||||
<div class="gh-dashboard-list-body">
|
||||
<div class="gh-dashboard-list-body gh-dashboard-list-cols-3">
|
||||
<div class="gh-dashboard-list-item" style="grid-template-columns:30% 70%;">
|
||||
<div class="gh-dashboard-list-item-sub">
|
||||
<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">
|
||||
<span class="gh-member-avatar-label gh-member-list-avatar">NN</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>
|
||||
<tabs.tabPanel>
|
||||
<table class="gh-list gh-email-debug-permanent-failures">
|
||||
<tbody>
|
||||
<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-red">
|
||||
<div class="gh-member-initials flex w9 h9 items-center justify-center br-100">
|
||||
<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>
|
||||
<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 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>
|
||||
<h3>{{svg-jar "analytics-tab-opened-large"}}36</h3>
|
||||
<p><span class="analytics-tab-label">Temporary failures</span></p>
|
||||
</tabs.tab>
|
||||
<tabs.tabPanel>
|
||||
<table class="gh-list gh-email-debug-permanent-failures">
|
||||
<tbody>
|
||||
<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>
|
||||
<Posts::PostActivityFeed
|
||||
@postId={{this.post.id}}
|
||||
@eventType="opened"
|
||||
@linkQuery={{hash filterParam=(concat "opened_emails.post_id:" this.post.id) }}
|
||||
/>
|
||||
</tabs.tabPanel>
|
||||
<tabs.tab>
|
||||
<h3>{{svg-jar "analytics-tab-clicked-large"}}3</h3>
|
||||
<p><span class="analytics-tab-label">Batches errored</span></p>
|
||||
</tabs.tab>
|
||||
|
||||
<tabs.tab>
|
||||
<h3>{{svg-jar "analytics-tab-clicked-large"}}3</h3>
|
||||
<p><span class="analytics-tab-label">Batches errored</span></p>
|
||||
</tabs.tab>
|
||||
<tabs.tabPanel>
|
||||
TBD
|
||||
</tabs.tabPanel>
|
||||
|
||||
<tabs.tabPanel>
|
||||
<Posts::PostActivityFeed
|
||||
@postId={{this.post.id}}
|
||||
@eventType="clicked"
|
||||
@linkQuery={{hash filterParam=(concat "clicked_links.post_id:" this.post.id) }}
|
||||
/>
|
||||
</tabs.tabPanel>
|
||||
<tabs.tab>
|
||||
<div class="gh-email-debug-settingstab-icon">{{svg-jar "settings"}}</div>
|
||||
<p><span class="analytics-tab-label">Settings</span></p>
|
||||
</tabs.tab>
|
||||
|
||||
<tabs.tab>
|
||||
<h3>{{svg-jar "settings"}}{{format-number this.totalFeedback}}</h3>
|
||||
<p><span class="analytics-tab-label">Settings</span></p>
|
||||
</tabs.tab>
|
||||
|
||||
<tabs.tabPanel>
|
||||
<Posts::PostActivityFeed
|
||||
@postId={{this.post.id}}
|
||||
@eventType="feedback"
|
||||
@data={{this.feedbackChartData}}
|
||||
/>
|
||||
</tabs.tabPanel>
|
||||
<tabs.tabPanel>
|
||||
TBD
|
||||
</tabs.tabPanel>
|
||||
|
||||
</Tabs::Tabs>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue