Implement enterprise cta in docs [mobile]

This commit is contained in:
hunicus 2023-08-13 06:30:42 +09:00
parent a23881e62c
commit d02838fb59
No known key found for this signature in database
GPG key ID: 24837C51B6D81FD9
5 changed files with 53 additions and 2 deletions

View file

@ -1,5 +1,5 @@
<div id="enterprise-cta-desktop">
<p>Get higher API limits with Mempool Enterprise</p>
<p>Get higher API limits with Mempool Enterprise®</p>
<a class="btn btn-small btn-purple" href="/enterprise">More Info <fa-icon [icon]="['fas', 'angle-right']" [styles]="{'font-size': '12px'}"></fa-icon></a>
</div>
<div *ngFor="let item of tabData">

View file

@ -21,9 +21,12 @@ a {
}
#enterprise-cta-desktop p {
margin: 0 auto 20px auto;
margin: 0 auto 16px auto;
color: #fff;
font-weight: 400;
}
#enterprise-cta-desktop a {
display: inline-block;
}

View file

@ -39,6 +39,14 @@
<div class="doc-content">
<div id="enterprise-cta-mobile" *ngIf="showMobileEnterpriseUpsell">
<p>Get higher API limits with <span class="no-line-break">Mempool Enterprise®</span></p>
<div class="button-group">
<a class="btn btn-small btn-secondary" (click)="showMobileEnterpriseUpsell = false">No Thanks</a>
<a class="btn btn-small btn-purple" href="https://mempool.space/enterprise">More Info <fa-icon [icon]="['fas', 'angle-right']" [styles]="{'font-size': '12px'}"></fa-icon></a>
</div>
</div>
<p class="doc-welcome-note">Below is a reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">REST API service</ng-container>.</p>
<p class="doc-welcome-note api-note" *ngIf="officialMempoolInstance">Note that we enforce rate limits. If you exceed these limits, you will get an HTTP 429 error. If you repeatedly exceed the limits, you may be banned from accessing the service altogether. Consider an <a href="/enterprise">enterprise sponsorship</a> if you need higher API limits.</p>

View file

@ -282,6 +282,41 @@ h3 {
margin-bottom: 0;
}
#enterprise-cta-mobile {
padding: 20px;
background-color: #1d1f31;
border-radius: 0.25rem;
text-align: center;
position: fixed;
z-index: 100;
left: 30px;
width: calc(100% - 60px);
bottom: 70px;
display: none;
border: 3px solid #533180;
}
#enterprise-cta-mobile p {
font-size: 16px;
display: inline-block;
margin: 0 auto;
}
#enterprise-cta-mobile a {
padding: 4px 8px;
font-size: 16px;
margin: 15px 5px 5px 5px;
}
#enterprise-cta-mobile .btn-secondary:hover {
background-color: #2d3348;
border-color: #2d3348;
}
#enterprise-cta-mobile .no-line-break {
white-space: nowrap;
}
@media (max-width: 992px) {
h3 {
@ -340,6 +375,10 @@ h3 {
#disclaimer table {
display: none;
}
#enterprise-cta-mobile {
display: initial;
}
}
@media (min-width: 992px) {

View file

@ -30,6 +30,7 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
officialMempoolInstance: boolean;
auditEnabled: boolean;
mobileViewport: boolean = false;
showMobileEnterpriseUpsell: boolean = true;
@ViewChildren(FaqTemplateDirective) faqTemplates: QueryList<FaqTemplateDirective>;
dict = {};