mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 18:32:19 +01:00
Code Issues Projects Releases Wiki Activity

Sponsor page revamped

Browse Source
This commit is contained in:
softsimon 2022-04-05 21:00:36 +04:00
parent 6386f4c68a
commit 1a35c8ce42
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 45 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/app-routing.module.ts
View File

@ -156,10 +156,6 @@ let routes: Routes = [
children: [], children: [],
component: AddressComponent component: AddressComponent
}, },
{
path: 'sponsor',
component: SponsorComponent,
},
], ],
}, },
{ {
@ -442,6 +438,10 @@ let routes: Routes = [
path: 'status', path: 'status',
component: StatusViewComponent component: StatusViewComponent
}, },
{
path: 'sponsor',
component: SponsorComponent,
},
{ {
path: '**', path: '**',
redirectTo: '' redirectTo: ''
@ -584,10 +584,6 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
path: 'trademark-policy', path: 'trademark-policy',
component: TrademarkPolicyComponent component: TrademarkPolicyComponent
}, },
{
path: 'sponsor',
component: SponsorComponent,
},
], ],
}, },
{ {
@ -712,10 +708,6 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
path: 'trademark-policy', path: 'trademark-policy',
component: TrademarkPolicyComponent component: TrademarkPolicyComponent
}, },
{
path: 'sponsor',
component: SponsorComponent,
},
], ],
}, },
{ {

12
frontend/src/app/components/sponsor/sponsor.component.html
View File

@ -1,5 +1,9 @@
<div class="container-xl sponsor-page"> <div class="container-xl">
<img [src]="'./resources/mempool-space-logo.png'" height="35" width="140" class="logo">
<div class="sponsor-page">
<h1 i18n="sponsor.title">Sponsor</h1> <h1 i18n="sponsor.title">Sponsor</h1>
<p *ngIf="!sponsorsEnabled; else sponsorForm"> <p *ngIf="!sponsorsEnabled; else sponsorForm">
@ -21,7 +25,7 @@
</div> </div>
</div> </div>
<div class="card" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01"> <div class="card middle-card" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
<div class="card-header">Community Sponsor</div> <div class="card-header">Community Sponsor</div>
<div class="card-body"> <div class="card-body">
<h5 class="card-title">1M <span class="symbol">sats</span></h5> <h5 class="card-title">1M <span class="symbol">sats</span></h5>
@ -149,5 +153,5 @@
Order ID <span>{{ donationObj.id }}</span> Order ID <span>{{ donationObj.id }}</span>
</div> </div>
</div> </div>
</div>
</div> </div>

38
frontend/src/app/components/sponsor/sponsor.component.scss
View File

@ -15,8 +15,8 @@
} }
.card { .card {
width: 220px; width: 240px;
height: 200px; height: 220px;
background-color: #1d1f31; background-color: #1d1f31;
border: 2px solid #1d1f31; border: 2px solid #1d1f31;
cursor: pointer; cursor: pointer;
@ -46,7 +46,9 @@
&:hover { &:hover {
background-color: #5058926b; background-color: #5058926b;
border: 2px solid #505892; border: 2px solid #505892;
transform: scale(1.11) translateY(-10px); transform: scale(1.1) translateY(-10px);
margin-top: 70px;
.card-header { .card-header {
background-color: #505892; background-color: #505892;
} }
@ -54,7 +56,7 @@
} }
.donation-form { .donation-form {
max-width: 240px; max-width: 280px;
margin: auto; margin: auto;
button { button {
width: 100%; width: 100%;
@ -72,14 +74,28 @@
justify-content: center; justify-content: center;
} }
.middle-card {
width: 280px;
height: 260px;
margin-top: 40px;
&:hover {
margin-top: 50px;
}
}
.shiny-border { .shiny-border {
background-color: #5058926b; background-color: #5058926b;
border: 2px solid #505892; border: 2px solid #505892;
transform: scale(1.11) translateY(-10px); transform: scale(1.1) translateY(-10px);
margin-top: 70px;
box-shadow: 0px 0px 100px #9858ff52; box-shadow: 0px 0px 100px #9858ff52;
.card-header { .card-header {
background-color: #505892; background-color: #505892;
} }
&.middle-card {
margin-top: 50px;
}
} }
.input-group { .input-group {
@ -106,4 +122,16 @@
margin-left: 10px; margin-left: 10px;
} }
} }
}
.logo {
margin: 30px;
}
.card-body {
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
} }