Added CTA button display when not in edit mode

refs https://github.com/TryGhost/Team/issues/927

- button should be visible when not editing if both text and url are set
- added container for the content section so other links aren't clickable
- added tooltip to button so button url can be checked without having to go into edit mode
This commit is contained in:
Kevin Ansfield 2021-07-26 21:17:10 +01:00
parent 01538d5916
commit 35ac6abd6a
2 changed files with 11 additions and 4 deletions

View File

@ -48,11 +48,13 @@
border-left: 0.25rem solid var(--adjusted-accent-color);
}
.email-cta-button-text-input {
.email-cta-button-text-input,
.gh-btn-accent {
color: var(--text-color-for-adjusted-accent-background);
background-color: var(--adjusted-accent-color)
}
.email-cta-button-text-input:hover {
.email-cta-button-text-input:hover,
.gh-btn-accent:hover {
color: {{hex-adjust this.ui.textColorForAdjustedAccentBackground l=-15}};
background-color: {{hex-adjust this.settings.accentColor l=-15}}
}

View File

@ -79,7 +79,12 @@
</p>
</div>
{{else}}
<p>{{{this.formattedHtml}}}</p>
<div class="koenig-card-click-overlay"></div>
<div class="relative">
<p>{{{this.formattedHtml}}}</p>
<div class="koenig-card-click-overlay"></div>
</div>
{{#if (and @payload.buttonText @payload.buttonUrl)}}
<div class="mt4"><a class="gh-btn gh-btn-accent" href="javascript:void(0)" data-tooltip={{@payload.buttonUrl}}><span>{{@payload.buttonText}}</span></a></div>
{{/if}}
{{/if}}
</KoenigCard>