machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make footer refinements responsive

Browse Source
This commit is contained in:
hunicus 2023-08-09 16:42:16 +09:00
parent 2855fff702
commit d4f9600ff1
No known key found for this signature in database
GPG Key ID: 24837C51B6D81FD9
2 changed files with 130 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/shared/components/global-footer/global-footer.component.html
View File

@ -6,6 +6,7 @@
<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>
<div class="site-options">
<div class="selector">
<app-language-selector></app-language-selector>
</div>
@ -15,6 +16,7 @@
<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]">
<span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
@ -24,7 +26,6 @@
</div>
</div>
<div class="row col-md-12 link-tree">
<!--<div class="links outer">-->
<div class="links">
<p class="category">Explore</p>
<p><a [routerLink]="['/mining' | relativeUrl]">Mining Dashboard</a></p>
@ -67,7 +68,6 @@
<p><a [routerLink]="['/trademark-policy']">Trademark Policy</a></p>
</div>
<!-- </div>-->
</div>
<div class="row social-links">
<div class="col-sm-12">

86
frontend/src/app/shared/components/global-footer/global-footer.component.scss
View File

@ -17,10 +17,6 @@ footer .row.main {
margin: 0 auto;
}
footer .row.main .branding {
}
footer .row.main .branding > p {
margin-bottom: 25px;
}
@ -43,6 +39,10 @@ footer .link-tree .links:nth-child(1), footer .link-tree .links:nth-child(4) {
padding-right: 0;
}
footer .link-tree .links p {
padding-right: 5px;
}
footer .row.main .links > div:first-child {
margin-bottom: 20px;
}
@ -56,9 +56,14 @@ footer .row.main .links .category:not(:first-child) {
margin-top: 1rem;
}
footer .site-options {
float: right;
margin-top: -8px;
}
footer .selector {
margin: 20px 5px;
float: right;
display: inline-block;
}
footer .row.link-tree {
@ -66,6 +71,7 @@ footer .row.link-tree {
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
footer .row.social-links {
@ -103,6 +109,74 @@ footer .row.version p a {
display: inline-block;
}
@media (max-width: 1100px) {
@media (max-width: 1200px) {
.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 .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;
}
}