Feature/extend footer by navigation (#2020)

* Extend footer

* Update changelog
pull/2021/head
Thomas Kaul 2 years ago committed by GitHub
parent 26b1fd6572
commit ab7e050066
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added ### Added
- Extended the footer by a navigation
- Extended the testimonial section on the landing page - Extended the testimonial section on the landing page
- Added localized meta descriptions - Added localized meta descriptions
- Added support for localized routes in Spanish (`es`) - Added support for localized routes in Spanish (`es`)

@ -44,19 +44,106 @@
</main> </main>
<footer <footer
*ngIf="currentRoute === 'start'" *ngIf="
class="footer d-flex justify-content-center w-100" (currentRoute === 'blog' ||
currentRoute === 'features' ||
currentRoute === 'markets' ||
currentRoute === 'pricing' ||
currentRoute === 'resources' ||
currentRoute === 'register' ||
currentRoute === 'start') &&
deviceType !== 'mobile'
"
class="d-flex justify-content-center py-4 w-100"
> >
<div class="container text-center"> <div class="container">
<div> <div class="mb-3 row">
© 2021 - {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a> <div class="col-sm">
{{ version }} <a [routerLink]="['/']"><gf-logo /></a>
</div>
<div class="col-sm">
<div class="h6 mt-2" i18n>Personal Finance</div>
<ul class="list-unstyled">
<li><a i18n [routerLink]="['/markets']">Markets</a></li>
<li><a i18n [routerLink]="['/resources']">Resources</a></li>
</ul>
</div>
<div class="col-sm">
<div class="h6 mt-2">Ghostfolio</div>
<ul class="list-unstyled">
<li><a i18n [routerLink]="['/about']">About</a></li>
<li *ngIf="hasPermissionForBlog">
<a i18n [routerLink]="['/blog']">Blog</a>
</li>
<li>
<a i18n [routerLink]="['/about', 'changelog']"
>Changelog & License</a
>
</li>
<li><a i18n [routerLink]="['/features']">Features</a></li>
<li *ngIf="hasPermissionForSubscription">
<a i18n [routerLink]="['/faq']">Frequently Asked Questions (FAQ)</a>
</li>
<li *ngIf="hasPermissionForSubscription">
<a [routerLink]="['/open']">Open Startup</a>
</li>
<li *ngIf="hasPermissionForSubscription">
<a i18n [routerLink]="['/pricing']">Pricing</a>
</li>
<li *ngIf="hasPermissionForSubscription">
<a i18n [routerLink]="['/about', 'privacy-policy']"
>Privacy Policy</a
>
</li>
<li *ngIf="hasPermissionForSubscription">
<a href="https://status.ghostfol.io" title="Ghostfolio Status"
>Status</a
>
</li>
</ul>
</div>
<div class="col-sm">
<div class="h6 mt-2" i18n>Community</div>
<ul class="list-unstyled">
<li>
<a
href="https://github.com/ghostfolio/ghostfolio"
title="Find Ghostfolio on GitHub"
>GitHub</a
>
</li>
<li>
<a
href="https://ghostfolio.slack.com"
title="Join the Ghostfolio Slack channel"
>Slack</a
>
</li>
<li>
<a
href="https://twitter.com/ghostfolio_"
title="Follow Ghostfolio on Twitter"
>Twitter</a
>
</li>
</ul>
</div>
</div>
<div class="row text-center">
<div class="col">
© 2021 - {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a>
{{ version }}
</div>
</div> </div>
<div class="py-2 text-muted">
<small i18n <div class="row text-center text-muted">
>The risk of loss in trading can be substantial. It is not advisable to <div class="col">
invest money you may need in the short term.</small <small i18n
> >The risk of loss in trading can be substantial. It is not advisable
to invest money you may need in the short term.</small
>
</div>
</div> </div>
</div> </div>
</footer> </footer>

@ -4,6 +4,11 @@
display: block; display: block;
min-height: 100vh; min-height: 100vh;
footer {
background-color: rgba(var(--palette-foreground-text), 0.05);
font-size: 90%;
}
main { main {
min-height: 100vh; min-height: 100vh;
padding-top: 5rem; padding-top: 5rem;
@ -25,14 +30,13 @@
} }
} }
} }
.footer {
height: 5rem;
line-height: 1;
}
} }
:host-context(.is-dark-theme) { :host-context(.is-dark-theme) {
footer {
background-color: rgba(var(--palette-foreground-text-dark), 0.05);
}
main { main {
.info-message-container { .info-message-container {
.info-message { .info-message {

@ -32,6 +32,8 @@ export class AppComponent implements OnDestroy, OnInit {
public currentRoute: string; public currentRoute: string;
public currentYear = new Date().getFullYear(); public currentYear = new Date().getFullYear();
public deviceType: string; public deviceType: string;
public hasPermissionForBlog: boolean;
public hasPermissionForSubscription: boolean;
public info: InfoItem; public info: InfoItem;
public pageTitle: string; public pageTitle: string;
public user: User; public user: User;
@ -55,6 +57,17 @@ export class AppComponent implements OnDestroy, OnInit {
public ngOnInit() { public ngOnInit() {
this.deviceType = this.deviceService.getDeviceInfo().deviceType; this.deviceType = this.deviceService.getDeviceInfo().deviceType;
this.info = this.dataService.fetchInfo();
this.hasPermissionForBlog = hasPermission(
this.info?.globalPermissions,
permissions.enableBlog
);
this.hasPermissionForSubscription = hasPermission(
this.info?.globalPermissions,
permissions.enableSubscription
);
this.router.events this.router.events
.pipe(filter((event) => event instanceof NavigationEnd)) .pipe(filter((event) => event instanceof NavigationEnd))
@ -64,8 +77,6 @@ export class AppComponent implements OnDestroy, OnInit {
const urlSegments = urlSegmentGroup.segments; const urlSegments = urlSegmentGroup.segments;
this.currentRoute = urlSegments[0].path; this.currentRoute = urlSegments[0].path;
this.info = this.dataService.fetchInfo();
if (this.deviceType === 'mobile') { if (this.deviceType === 'mobile') {
setTimeout(() => { setTimeout(() => {
const index = this.title.getTitle().indexOf(''); const index = this.title.getTitle().indexOf('');

@ -14,6 +14,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker'; import { ServiceWorkerModule } from '@angular/service-worker';
import { GfLogoModule } from '@ghostfolio/ui/logo';
import { MarkdownModule } from 'ngx-markdown'; import { MarkdownModule } from 'ngx-markdown';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe'; import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
@ -40,6 +41,7 @@ export function NgxStripeFactory(): string {
BrowserAnimationsModule, BrowserAnimationsModule,
BrowserModule, BrowserModule,
GfHeaderModule, GfHeaderModule,
GfLogoModule,
GfSubscriptionInterstitialDialogModule, GfSubscriptionInterstitialDialogModule,
HttpClientModule, HttpClientModule,
MarkdownModule.forRoot(), MarkdownModule.forRoot(),

@ -40,7 +40,7 @@
</ng-container> </ng-container>
<ng-container *ngIf="hasPermissionForStatistics" <ng-container *ngIf="hasPermissionForStatistics"
>Check the system status at >Check the system status at
<a href="https://status.ghostfol.io" title="Ghostfolio status" <a href="https://status.ghostfol.io" title="Ghostfolio Status"
>status.ghostfol.io</a >status.ghostfol.io</a
>.</ng-container >.</ng-container
> >

Loading…
Cancel
Save