mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
* Restructure about page: introduce pages for blog and changelog * Update changelogpull/609/head
Thomas Kaul
3 years ago
committed by
GitHub
GitHub
16 changed files with 276 additions and 75 deletions
@ -0,0 +1,15 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { RouterModule, Routes } from '@angular/router'; |
|||
import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; |
|||
|
|||
import { ChangelogPageComponent } from './changelog-page.component'; |
|||
|
|||
const routes: Routes = [ |
|||
{ path: '', component: ChangelogPageComponent, canActivate: [AuthGuard] } |
|||
]; |
|||
|
|||
@NgModule({ |
|||
imports: [RouterModule.forChild(routes)], |
|||
exports: [RouterModule] |
|||
}) |
|||
export class ChangelogPageRoutingModule {} |
|||
@ -0,0 +1,22 @@ |
|||
import { Component, OnDestroy } from '@angular/core'; |
|||
import { Subject } from 'rxjs'; |
|||
|
|||
@Component({ |
|||
host: { class: 'mb-5' }, |
|||
selector: 'gf-changelog-page', |
|||
styleUrls: ['./changelog-page.scss'], |
|||
templateUrl: './changelog-page.html' |
|||
}) |
|||
export class ChangelogPageComponent implements OnDestroy { |
|||
private unsubscribeSubject = new Subject<void>(); |
|||
|
|||
/** |
|||
* @constructor |
|||
*/ |
|||
public constructor() {} |
|||
|
|||
public ngOnDestroy() { |
|||
this.unsubscribeSubject.next(); |
|||
this.unsubscribeSubject.complete(); |
|||
} |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
<div class="container"> |
|||
<div class="mb-5 row"> |
|||
<div class="col"> |
|||
<h3 class="mb-3 text-center" i18n>Changelog</h3> |
|||
<mat-card class="changelog"> |
|||
<mat-card-content> |
|||
<markdown [src]="'assets/CHANGELOG.md'"></markdown> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col"> |
|||
<h3 class="mb-3 text-center" i18n>License</h3> |
|||
<mat-card> |
|||
<mat-card-content> |
|||
<markdown [src]="'assets/LICENSE'"></markdown> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,19 @@ |
|||
import { CommonModule } from '@angular/common'; |
|||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; |
|||
import { MatCardModule } from '@angular/material/card'; |
|||
import { MarkdownModule } from 'ngx-markdown'; |
|||
|
|||
import { ChangelogPageRoutingModule } from './changelog-page-routing.module'; |
|||
import { ChangelogPageComponent } from './changelog-page.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [ChangelogPageComponent], |
|||
imports: [ |
|||
ChangelogPageRoutingModule, |
|||
CommonModule, |
|||
MarkdownModule.forChild(), |
|||
MatCardModule |
|||
], |
|||
schemas: [CUSTOM_ELEMENTS_SCHEMA] |
|||
}) |
|||
export class ChangelogPageModule {} |
|||
@ -0,0 +1,44 @@ |
|||
:host { |
|||
color: rgb(var(--dark-primary-text)); |
|||
display: block; |
|||
|
|||
.mat-card { |
|||
&.changelog { |
|||
a { |
|||
color: rgba(var(--palette-primary-500), 1); |
|||
font-weight: 500; |
|||
|
|||
&:hover { |
|||
color: rgba(var(--palette-primary-300), 1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.changelog { |
|||
::ng-deep { |
|||
markdown { |
|||
h1, |
|||
p { |
|||
display: none; |
|||
} |
|||
|
|||
h2 { |
|||
font-size: 18px; |
|||
|
|||
&:not(:first-of-type) { |
|||
margin-top: 2rem; |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 15px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
:host-context(.is-dark-theme) { |
|||
color: rgb(var(--light-primary-text)); |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { RouterModule, Routes } from '@angular/router'; |
|||
import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; |
|||
|
|||
import { BlogPageComponent } from './blog-page.component'; |
|||
|
|||
const routes: Routes = [ |
|||
{ path: '', component: BlogPageComponent, canActivate: [AuthGuard] } |
|||
]; |
|||
|
|||
@NgModule({ |
|||
imports: [RouterModule.forChild(routes)], |
|||
exports: [RouterModule] |
|||
}) |
|||
export class BlogPageRoutingModule {} |
|||
@ -0,0 +1,22 @@ |
|||
import { Component, OnDestroy } from '@angular/core'; |
|||
import { Subject } from 'rxjs'; |
|||
|
|||
@Component({ |
|||
host: { class: 'mb-5' }, |
|||
selector: 'gf-blog-page', |
|||
styleUrls: ['./blog-page.scss'], |
|||
templateUrl: './blog-page.html' |
|||
}) |
|||
export class BlogPageComponent implements OnDestroy { |
|||
private unsubscribeSubject = new Subject<void>(); |
|||
|
|||
/** |
|||
* @constructor |
|||
*/ |
|||
public constructor() {} |
|||
|
|||
public ngOnDestroy() { |
|||
this.unsubscribeSubject.next(); |
|||
this.unsubscribeSubject.complete(); |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
<div class="container"> |
|||
<div class="mb-5 row"> |
|||
<div class="col"> |
|||
<h3 class="mb-3 text-center" i18n>Blog</h3> |
|||
<mat-card class="blog-container"> |
|||
<mat-card-content> |
|||
<div class="container p-0"> |
|||
<div class="flex-nowrap mb-3 no-gutters row"> |
|||
<a |
|||
class="d-flex w-100" |
|||
[routerLink]="['/en', 'blog', '2021', '07', 'hello-ghostfolio']" |
|||
> |
|||
<div class="flex-grow-1"> |
|||
<div class="h6 m-0 text-truncate">Hello Ghostfolio</div> |
|||
<div class="d-flex text-muted">31.07.2021</div> |
|||
</div> |
|||
<div class="align-items-center d-flex"> |
|||
<ion-icon |
|||
class="chevron text-muted" |
|||
name="chevron-forward-outline" |
|||
size="small" |
|||
></ion-icon> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="flex-nowrap no-gutters row"> |
|||
<a |
|||
class="d-flex w-100" |
|||
[routerLink]="['/de', 'blog', '2021', '07', 'hallo-ghostfolio']" |
|||
> |
|||
<div class="flex-grow-1"> |
|||
<div class="h6 m-0 text-truncate">Hallo Ghostfolio</div> |
|||
<div class="d-flex text-muted">31.07.2021</div> |
|||
</div> |
|||
<div class="align-items-center d-flex"> |
|||
<ion-icon |
|||
class="chevron text-muted" |
|||
name="chevron-forward-outline" |
|||
size="small" |
|||
></ion-icon> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,13 @@ |
|||
import { CommonModule } from '@angular/common'; |
|||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; |
|||
import { MatCardModule } from '@angular/material/card'; |
|||
|
|||
import { BlogPageRoutingModule } from './blog-page-routing.module'; |
|||
import { BlogPageComponent } from './blog-page.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [BlogPageComponent], |
|||
imports: [BlogPageRoutingModule, CommonModule, MatCardModule], |
|||
schemas: [CUSTOM_ELEMENTS_SCHEMA] |
|||
}) |
|||
export class BlogPageModule {} |
|||
@ -0,0 +1,8 @@ |
|||
:host { |
|||
color: rgb(var(--dark-primary-text)); |
|||
display: block; |
|||
} |
|||
|
|||
:host-context(.is-dark-theme) { |
|||
color: rgb(var(--light-primary-text)); |
|||
} |
|||
Loading…
Reference in new issue