Create skeleton layout for desktop docs nav

This includes switching to a 2-column layout
(1 for nav and 1 for content) and moving footer
links to docs component so floats can be cleared
properly.
This commit is contained in:
hunicus 2021-12-15 13:17:37 -05:00
parent a643f50016
commit 40f1949654
No known key found for this signature in database
GPG Key ID: 24837C51B6D81FD9
4 changed files with 867 additions and 835 deletions

View File

@ -3,6 +3,12 @@
<div id="restAPI" *ngIf="restTabActivated">
<div class="doc-nav-desktop">
<p>Placeholder.</p>
</div>
<div class="doc-content">
<p>Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
<div class="api-category" *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">
@ -849,6 +855,8 @@
</ngb-panel>
</ngb-accordion>
</div>
</div>
</div>
@ -868,13 +876,5 @@
</div>
</div>
<br>
<div class="text-center">
<a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
|
<a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
</div>
</div>
</ng-container>

View File

@ -72,6 +72,26 @@ li.nav-item {
padding: 15px;
}
.doc-nav-desktop {
width: 25%;
float: left;
}
.doc-content {
width: 75%;
float: right;
}
@media (max-width: 992px){
.doc-nav-desktop {
display: none;
}
.doc-content {
width: 100%;
}
}
#restAPI .api-category {
margin: 30px 0;
}

View File

@ -27,5 +27,13 @@
<div id="main-tab-content" [ngbNavOutlet]="nav" class="mt-2"></div>
<br>
<div id="footer" class="text-center">
<a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
|
<a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
</div>
</div>
</div>

View File

@ -2,3 +2,7 @@
text-align: left;
padding-top: 10px;
}
#footer {
clear: both;
}