Merge pull request #4121 from mempool/hunicus/footer-refinement-exp
Refine footer design/layout
This commit is contained in:
wiz
GitHub
commit
a9e92d0593
@ -1,5 +1,5 @@
|
||||
<div [formGroup]="fiatForm" class="text-small text-center">
|
||||
<select formControlName="fiat" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 200px;" (change)="changeFiat()">
|
||||
<select formControlName="fiat" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 150px;" (change)="changeFiat()">
|
||||
<option *ngFor="let currency of currencies" [value]="currency[1].code">{{ currency[1].name + " (" + currency[1].code + ")" }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div [formGroup]="languageForm" class="text-small text-center">
|
||||
<select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 200px;" (change)="changeLanguage()">
|
||||
<select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 100px;" (change)="changeLanguage()">
|
||||
<option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div [formGroup]="rateUnitForm" class="text-small text-center">
|
||||
<select formControlName="rateUnits" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 200px;" (change)="changeUnits()">
|
||||
<select formControlName="rateUnits" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 100px;" (change)="changeUnits()">
|
||||
<option *ngFor="let unit of units" [value]="unit.name">{{ unit.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
<footer>
|
||||
<div class="container-fluid">
|
||||
<div class="row main">
|
||||
<div class="offset-lg-1 col-lg-4 col align-self-center branding mt-2">
|
||||
<div class="col-md-12 branding mt-2">
|
||||
<div class="main-logo">
|
||||
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
|
||||
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images>
|
||||
</div>
|
||||
<p><ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container><ng-template [ngIf]="locale.substr(0, 2) === 'en'"> ™</ng-template></p>
|
||||
<div class="selector">
|
||||
<app-language-selector></app-language-selector>
|
||||
</div>
|
||||
<div class="selector">
|
||||
<app-fiat-selector></app-fiat-selector>
|
||||
</div>
|
||||
<div class="selector">
|
||||
<app-rate-unit-selector></app-rate-unit-selector>
|
||||
<div class="site-options">
|
||||
<div class="selector">
|
||||
<app-language-selector></app-language-selector>
|
||||
</div>
|
||||
<div class="selector">
|
||||
<app-fiat-selector></app-fiat-selector>
|
||||
</div>
|
||||
<div class="selector">
|
||||
<app-rate-unit-selector></app-rate-unit-selector>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="officialMempoolSpace && stateService.env.ACCELERATOR" class="cta">
|
||||
<a class="btn btn-purple sponsor" [routerLink]="['/login' | relativeUrl]">
|
||||
@ -23,52 +24,50 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-10 offset-md-1 links outer">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<p class="category">Explore</p>
|
||||
<p><a [routerLink]="['/mining' | relativeUrl]">Mining Dashboard</a></p>
|
||||
<p><a *ngIf="env.LIGHTNING" [routerLink]="['/lightning' | relativeUrl]">Lightning Dashboard</a></p>
|
||||
<p><a [routerLink]="['/blocks' | relativeUrl]">Recent Blocks</a></p>
|
||||
<p><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
|
||||
<p *ngIf="officialMempoolSpace"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]" i18n="footer.connect-to-our-nodes">Connect to our Nodes</a></p>
|
||||
<p><a [routerLink]="['/docs/api' | relativeUrl]">API Documentation</a></p>
|
||||
</div>
|
||||
<div class="col-lg-6 links">
|
||||
<p class="category">Learn</p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool">What is a mempool?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-block-explorer">What is a block explorer?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool-explorer">What is a mempool explorer?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="why-is-transaction-stuck-in-mempool">Why isn't my transaction confirming?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq' | relativeUrl]">More FAQs ›</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-md-12 link-tree">
|
||||
<div class="links">
|
||||
<p class="category">Explore</p>
|
||||
<p><a [routerLink]="['/mining' | relativeUrl]">Mining Dashboard</a></p>
|
||||
<p><a *ngIf="env.LIGHTNING" [routerLink]="['/lightning' | relativeUrl]">Lightning Dashboard</a></p>
|
||||
<p><a [routerLink]="['/blocks' | relativeUrl]">Recent Blocks</a></p>
|
||||
<p><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
|
||||
<p *ngIf="officialMempoolSpace"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]" i18n="footer.connect-to-our-nodes">Connect to our Nodes</a></p>
|
||||
<p><a [routerLink]="['/docs/api' | relativeUrl]">API Documentation</a></p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 links" *ngIf="officialMempoolSpace || env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED else toolBox" >
|
||||
<p class="category">Networks</p>
|
||||
<p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== '') && (currentNetwork !== 'mainnet')"><a [href]="networkLink('mainnet')">Mainnet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'testnet') && env.TESTNET_ENABLED"><a [href]="networkLink('testnet')">Testnet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'signet') && env.SIGNET_ENABLED"><a [href]="networkLink('signet')">Signet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquidtestnet')"><a [href]="networkLink('liquidtestnet')">Liquid Testnet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquid')"><a [href]="networkLink('liquid')">Liquid Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace && (currentNetwork !== 'bisq'))"><a [href]="networkLink('bisq')">Bisq Explorer</a></p>
|
||||
</div>
|
||||
<ng-template #toolBox>
|
||||
<div class="col-lg-6 links">
|
||||
<p class="category">Tools</p>
|
||||
<p><a [routerLink]="['/clock/mempool/0']">Clock (Mempool)</a></p>
|
||||
<p><a [routerLink]="['/clock/mined/0']">Clock (Mined)</a></p>
|
||||
<p><a [routerLink]="['/tools/calculator']">BTC/Fiat Converter</a></p>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div class="col-lg-6 links">
|
||||
<p class="category">Legal</p>
|
||||
<p><a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a></p>
|
||||
<p><a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a></p>
|
||||
<p><a [routerLink]="['/trademark-policy']">Trademark Policy</a></p>
|
||||
</div>
|
||||
<div class="links">
|
||||
<p class="category">Learn</p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool">What is a mempool?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-block-explorer">What is a block explorer?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool-explorer">What is a mempool explorer?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq']" fragment="why-is-transaction-stuck-in-mempool">Why isn't my transaction confirming?</a></p>
|
||||
<p><a [routerLink]="['/docs/faq' | relativeUrl]">More FAQs ›</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="links" *ngIf="officialMempoolSpace || env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED else toolBox" >
|
||||
<p class="category">Networks</p>
|
||||
<p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== '') && (currentNetwork !== 'mainnet')"><a [href]="networkLink('mainnet')">Mainnet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'testnet') && env.TESTNET_ENABLED"><a [href]="networkLink('testnet')">Testnet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || (env.BASE_MODULE === 'mempool')) && (currentNetwork !== 'signet') && env.SIGNET_ENABLED"><a [href]="networkLink('signet')">Signet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquidtestnet')"><a [href]="networkLink('liquidtestnet')">Liquid Testnet Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace || env.LIQUID_ENABLED) && (currentNetwork !== 'liquid')"><a [href]="networkLink('liquid')">Liquid Explorer</a></p>
|
||||
<p *ngIf="(officialMempoolSpace && (currentNetwork !== 'bisq'))"><a [href]="networkLink('bisq')">Bisq Explorer</a></p>
|
||||
</div>
|
||||
<ng-template #toolBox>
|
||||
<div class="links">
|
||||
<p class="category">Tools</p>
|
||||
<p><a [routerLink]="['/clock/mempool/0']">Clock (Mempool)</a></p>
|
||||
<p><a [routerLink]="['/clock/mined/0']">Clock (Mined)</a></p>
|
||||
<p><a [routerLink]="['/tools/calculator']">BTC/Fiat Converter</a></p>
|
||||
</div>
|
||||
</ng-template>
|
||||
<div class="links">
|
||||
<p class="category">Legal</p>
|
||||
<p><a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a></p>
|
||||
<p><a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a></p>
|
||||
<p><a [routerLink]="['/trademark-policy']">Trademark Policy</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row social-links">
|
||||
<div class="col-sm-12">
|
||||
|
||||
@ -12,15 +12,11 @@ footer p {
|
||||
}
|
||||
|
||||
footer .row.main {
|
||||
padding: 40px 0;
|
||||
max-width: 1200px;
|
||||
padding: 40px 0 24px 0;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer .row.main .branding {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .row.main .branding > p {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
@ -38,16 +34,20 @@ footer .row.main .branding .cta {
|
||||
margin: 25px auto 25px auto;
|
||||
}
|
||||
|
||||
footer .row.main .links.outer {
|
||||
padding-left: 24px;
|
||||
padding-top: 10px;
|
||||
footer .link-tree .links:nth-child(1), footer .link-tree .links:nth-child(4) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
footer .link-tree .links p {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
footer .row.main .links > div:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
footer .row.main .links .category {
|
||||
footer .links .category {
|
||||
color: #4a68b9;
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -56,13 +56,27 @@ footer .row.main .links .category:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
footer .site-options {
|
||||
float: right;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
footer .selector {
|
||||
margin: 20px 0;
|
||||
margin: 20px 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
footer .row.link-tree {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
footer .row.social-links {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
footer .row.social-links a {
|
||||
@ -90,22 +104,79 @@ footer .row.version p a {
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
max-width: 220px;
|
||||
margin: 0 auto 20px auto;
|
||||
width: 220px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
footer .row.main .links.outer {
|
||||
.main-logo {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
footer .row.main {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
footer .row.link-tree {
|
||||
max-width: 90%;
|
||||
font-size: 13px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
footer .row.social-links svg {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.main-logo {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
footer .row.link-tree {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
footer .row.social-links svg {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
footer .row.link-tree {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer .row.main .links.outer > .row {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
footer .row.main .links.outer > .row > div:first-child {
|
||||
footer .link-tree .links {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
footer .row.main .branding {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer .site-options {
|
||||
float: none;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
footer .row.social-links {
|
||||
margin: 48px 0 24px 0;
|
||||
}
|
||||
|
||||
footer .selector {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
footer .selector:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user