Feature/simplify about page (#892)

* Simplify about page * Update changelog
3 years ago · 5be95b7b63
parent b3e07c8446
commit 5be95b7b63
4 changed files with 102 additions and 106 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the allocations page with no filtering
 - Harmonized the _No data available_ label in the portfolio proportion chart component
 - Improved the _FIRE_ calculator for the _Live Demo_
+- Simplified the about page
 - Upgraded `angular` from version `13.2.2` to `13.3.6`
 - Upgraded `Nx` from version `13.8.5` to `14.1.4`
 - Upgraded `storybook` from version `6.4.18` to `6.4.22`
--- a/apps/client/src/app/pages/about/about-page.component.ts
+++ b/apps/client/src/app/pages/about/about-page.component.ts
@ -22,7 +22,6 @@ export class AboutPageComponent implements OnDestroy, OnInit {
  public hasPermissionForStatistics: boolean;
  public hasPermissionForSubscription: boolean;
  public isLoggedIn: boolean;
-  public lastPublish = environment.lastPublish;
  public statistics: Statistics;
  public user: User;
  public version = environment.version;
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@ -2,103 +2,101 @@
  <div class="mb-5 row">
    <div class="col">
      <h3 class="d-flex justify-content-center mb-3" i18n>About Ghostfolio</h3>
-      <mat-card class="about-container">
-        <mat-card-content>
-          <p>
-            <strong>Ghostfolio</strong> is a lightweight wealth management
-            application for individuals to keep track of their wealth like
-            stocks, ETFs or cryptocurrencies and make solid, data-driven
-            investment decisions. The source code is fully available as open
-            source software (OSS). The project has been initiated by
-            <a href="https://dotsilver.ch" title="Website of Thomas Kaul"
-              >Thomas Kaul</a
-            >
-            and is driven by the efforts of its
-            <a
-              href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
-              title="Contributors to Ghostfolio"
-              >contributors</a
-            >.
-            <ng-container *ngIf="lastPublish">
-              This instance is running Ghostfolio {{ version }} and has been
-              last published on {{ lastPublish }}.
-            </ng-container>
-            <ng-container *ngIf="hasPermissionForStatistics" i18n
-              >Check the system status at
-              <a href="https://status.ghostfol.io" title="Ghostfolio status"
-                >status.ghostfol.io</a
-              >.</ng-container
-            >
-          </p>
-          <p>
-            If you encounter a bug or would like to suggest an improvement or a
-            new <a [routerLink]="['/features']">feature</a>, please join the
-            Ghostfolio
-            <a
-              href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
-              title="Join the Ghostfolio Slack community"
-              >Slack community</a
-            >, tweet to
-            <a
-              href="https://twitter.com/ghostfolio_"
-              title="Tweet to Ghostfolio on Twitter"
-              >@ghostfolio_</a
-            >, send an e-mail to
-            <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
-              >hi@ghostfol.io</a
-            >
-            or open an issue at
-            <a
-              href="https://github.com/ghostfolio/ghostfolio"
-              title="Find Ghostfolio on GitHub"
-              >GitHub</a
-            >.
-          </p>
-          <p class="text-center">
-            <a
-              class="mx-2"
-              href="https://twitter.com/ghostfolio_"
-              mat-icon-button
-              title="Follow Ghostfolio on Twitter"
-            >
-              <ion-icon name="logo-twitter" size="large"></ion-icon>
-            </a>
-            <a
-              class="mx-2"
-              href="mailto:hi@ghostfol.io"
-              mat-icon-button
-              title="Send an e-mail"
-            >
-              <ion-icon name="mail" size="large"></ion-icon>
-            </a>
-            <a
-              class="mx-2"
-              href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
-              mat-icon-button
-              title="Join the Ghostfolio Slack channel"
-            >
-              <ion-icon name="logo-slack" size="large"></ion-icon>
-            </a>
-            <a
-              class="mx-2"
-              href="https://github.com/ghostfolio/ghostfolio"
-              mat-icon-button
-              title="Find Ghostfolio on GitHub"
-            >
-              <ion-icon name="logo-github" size="large"></ion-icon>
-            </a>
-          </p>
-          <div
-            *ngIf="hasPermissionForSubscription"
-            class="d-flex justify-content-center"
+      <div class="about-container">
+        <p>
+          <strong>Ghostfolio</strong> is a lightweight wealth management
+          application for individuals to keep track of stocks, ETFs or
+          cryptocurrencies and make solid, data-driven investment decisions. The
+          source code is fully available as open source software (OSS). The
+          project has been initiated by
+          <a href="https://dotsilver.ch" title="Website of Thomas Kaul"
+            >Thomas Kaul</a
          >
-            <div
-              class="independent-and-bootstrapped-logo mb-2"
-              title="Ghostfolio is an independent & bootstrapped business"
-            ></div>
-          </div>
-        </mat-card-content>
-      </mat-card>
+          and is driven by the efforts of its
+          <a
+            href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
+            title="Contributors to Ghostfolio"
+            >contributors</a
+          >.
+          <ng-container *ngIf="version">
+            This instance is running Ghostfolio {{ version }}.
+          </ng-container>
+          <ng-container *ngIf="hasPermissionForStatistics" i18n
+            >Check the system status at
+            <a href="https://status.ghostfol.io" title="Ghostfolio status"
+              >status.ghostfol.io</a
+            >.</ng-container
+          >
+        </p>
+        <p>
+          If you encounter a bug or would like to suggest an improvement or a
+          new
+          <a [routerLink]="['/features']">feature</a>, please join the
+          Ghostfolio
+          <a
+            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+            title="Join the Ghostfolio Slack community"
+            >Slack community</a
+          >, tweet to
+          <a
+            href="https://twitter.com/ghostfolio_"
+            title="Tweet to Ghostfolio on Twitter"
+            >@ghostfolio_</a
+          >, send an e-mail to
+          <a href="mailto:hi@ghostfol.io" title="Send an e-mail"
+            >hi@ghostfol.io</a
+          >
+          or open an issue at
+          <a
+            href="https://github.com/ghostfolio/ghostfolio"
+            title="Find Ghostfolio on GitHub"
+            >GitHub</a
+          >.
+        </p>
+        <p class="text-center">
+          <a
+            class="mx-2"
+            href="https://twitter.com/ghostfolio_"
+            mat-icon-button
+            title="Follow Ghostfolio on Twitter"
+          >
+            <ion-icon name="logo-twitter" size="large"></ion-icon>
+          </a>
+          <a
+            class="mx-2"
+            href="mailto:hi@ghostfol.io"
+            mat-icon-button
+            title="Send an e-mail"
+          >
+            <ion-icon name="mail" size="large"></ion-icon>
+          </a>
+          <a
+            class="mx-2"
+            href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+            mat-icon-button
+            title="Join the Ghostfolio Slack channel"
+          >
+            <ion-icon name="logo-slack" size="large"></ion-icon>
+          </a>
+          <a
+            class="mx-2"
+            href="https://github.com/ghostfolio/ghostfolio"
+            mat-icon-button
+            title="Find Ghostfolio on GitHub"
+          >
+            <ion-icon name="logo-github" size="large"></ion-icon>
+          </a>
+        </p>
+        <div
+          *ngIf="hasPermissionForSubscription"
+          class="d-flex justify-content-center"
+        >
+          <div
+            class="independent-and-bootstrapped-logo mb-2"
+            title="Ghostfolio is an independent & bootstrapped business"
+          ></div>
+        </div>
+      </div>
    </div>
  </div>

--- a/apps/client/src/app/pages/about/about-page.scss
+++ b/apps/client/src/app/pages/about/about-page.scss
@ -2,15 +2,13 @@
  color: rgb(var(--dark-primary-text));
  display: block;

-  .mat-card {
-    &.about-container {
-      a {
-        color: rgba(var(--palette-primary-500), 1);
-        font-weight: 500;
+  .about-container {
+    a {
+      color: rgba(var(--palette-primary-500), 1);
+      font-weight: 500;

-        &:hover {
-          color: rgba(var(--palette-primary-300), 1);
-        }
+      &:hover {
+        color: rgba(var(--palette-primary-300), 1);
      }
    }

@ -29,7 +27,7 @@
 :host-context(.is-dark-theme) {
  color: rgb(var(--light-primary-text));

-  .mat-card {
+  .about-container {
    .independent-and-bootstrapped-logo {
      background-image: url('/assets/bootstrapped-light.svg');
      opacity: 1;