Feature/improve breadcrumb navigation style in blog posts for mobile (#1996)

* Improve style for mobile * Update changelog
2 years ago · faef3606fd
parent d0ccd4d238
commit faef3606fd
15 changed files with 72 additions and 21 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## Unreleased
+
+### Changed
+
+- Improved the breadcrumb navigation style in the blog post pages for mobile
+
 ## 1.271.0 - 2023-05-20

 ### Added
--- a/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html
@ -202,7 +202,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Hallo Ghostfolio
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html
@ -182,7 +182,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Hello Ghostfolio
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html
+++ b/apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html
@ -179,7 +179,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Ghostfolio: First months in Open Source
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html
+++ b/apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html
@ -182,7 +182,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Ghostfolio meets Internet Identity
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html
+++ b/apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html
@ -208,7 +208,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              How do I get my finances in order?
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html
+++ b/apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html
@ -191,7 +191,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              500 Stars on GitHub
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html
+++ b/apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html
@ -177,7 +177,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Hacktoberfest 2022
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html
+++ b/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html
@ -137,7 +137,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Black Friday 2022
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html
+++ b/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html
@ -167,7 +167,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              The importance of tracking your personal finances
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html
+++ b/apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html
@ -177,7 +177,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Ghostfolio auf Sackgeld.com vorgestellt
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html
+++ b/apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html
@ -199,7 +199,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Ghostfolio meets Umbrel
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html
+++ b/apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html
@ -244,7 +244,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Ghostfolio reaches 1’000 Stars on GitHub
            </li>
          </ol>
--- a/apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html
+++ b/apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html
@ -15,8 +15,8 @@
        <section class="mb-4">
          <p>
            Managing personal finances effectively is crucial for those striving
-            for financial independence and a secure future. In today’s digital
-            age, having a reliable personal finance software can greatly
+            for a secure future and financial independence. In today’s digital
+            age, having a reliable wealth management software can greatly
            simplify the process. Ghostfolio is a powerful
            <a
              href="https://github.com/ghostfolio/ghostfolio"
@ -25,15 +25,15 @@
            >
            for individuals trading stocks, ETFs, or cryptocurrencies on
            multiple platforms. This article explores the key reasons why
-            Ghostfolio is the ideal choice for those embracing minimalism,
-            pursuing a buy & hold strategy, seeking portfolio insights, and
-            diversifying financial resources while valuing privacy.
+            Ghostfolio is the ideal choice for those embracing diversification,
+            pursuing a buy & hold strategy, and seeking portfolio insights while
+            valuing privacy.
          </p>
        </section>
        <section class="mb-4">
          <h2 class="h4">Effortless Management for Multi-Platform Investors</h2>
          <p>
-            Ghostfolio offers a consolidated solution to efficiently monitor and
+            Ghostfolio offers a holistic solution to efficiently monitor and
            manage investment portfolios across multiple platforms. By
            consolidating data from various accounts, Ghostfolio eliminates the
            need to switch between platforms, saving users valuable time and
@ -61,7 +61,7 @@
            asset allocation, sector exposure, geographical diversification, and
            individual asset performance. These detailed analytics empower users
            to assess portfolio strengths and weaknesses, making necessary
-            adjustments to optimize their diversification.
+            adjustments to optimize their allocation.
          </p>
        </section>
        <section class="mb-4">
@ -79,7 +79,7 @@
        <section class="mb-4">
          <h2 class="h4">Streamlined Minimalism for Financial Efficiency</h2>
          <p>
-            Ghostfolio embraces a minimalist approach to personal finance
+            Ghostfolio embraces a lightweight approach to personal finance
            management, focusing on essential features without overwhelming
            users. Its streamlined user interface and clean design provide a
            seamless and clutter-free experience. This minimalist approach
@ -172,6 +172,9 @@
            <li class="list-inline-item">
              <span class="badge badge-light">Fintech</span>
            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">FIRE</span>
+            </li>
            <li class="list-inline-item">
              <span class="badge badge-light">Ghostfolio</span>
            </li>
@ -227,7 +230,10 @@
            <li class="breadcrumb-item">
              <a i18n [routerLink]="['/blog']">Blog</a>
            </li>
-            <li aria-current="page" class="breadcrumb-item active">
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
              Unlock your Financial Potential with Ghostfolio
            </li>
          </ol>
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@ -327,10 +327,13 @@ ngx-skeleton-loader {

 .breadcrumb {
  background-color: unset;
+  flex-wrap: nowrap;
  padding: unset;
 }

 .breadcrumb-item {
+  flex-wrap: nowrap;
+
  &.active {
    color: unset;
  }