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

* Improve style for mobile

* Update changelog

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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
+            for a secure future and financial independence. In today’s digital
-            age, having a reliable personal finance software can greatly
+            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,
+            Ghostfolio is the ideal choice for those embracing diversification,
-            pursuing a buy & hold strategy, seeking portfolio insights, and
+            pursuing a buy & hold strategy, and seeking portfolio insights while
-            diversifying financial resources while valuing privacy.
+            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>

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;
   }