From ad6037381344fc8328f1606cccb55ad62552c108 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 11 Jun 2024 20:00:41 +0200
Subject: [PATCH] Feature/improve style of blog post list (#3481)

* Improve style

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 apps/client/src/app/pages/blog/blog-page.html | 76 +++++++++----------
 apps/client/src/app/pages/blog/blog-page.scss |  6 ++
 3 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e15175b9..c49d9e2ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the style of the blog post list
 - Migrated the `@ghostfolio/client` components to control flow
 - Improved the language localization for German (`de`)
 - Upgraded `angular` from version `17.3.10` to `18.0.2`
diff --git a/apps/client/src/app/pages/blog/blog-page.html b/apps/client/src/app/pages/blog/blog-page.html
index cd05d065c..aa139f68e 100644
--- a/apps/client/src/app/pages/blog/blog-page.html
+++ b/apps/client/src/app/pages/blog/blog-page.html
@@ -10,11 +10,11 @@
       </h1>
       @if (hasPermissionForSubscription) {
         <mat-card appearance="outlined" class="mb-3">
-          <mat-card-content>
+          <mat-card-content class="p-0">
             <div class="container p-0">
               <div class="flex-nowrap no-gutters row">
                 <a
-                  class="d-flex overflow-hidden w-100"
+                  class="d-flex overflow-hidden p-3 w-100"
                   href="../en/blog/2023/11/black-week-2023"
                 >
                   <div class="flex-grow-1 overflow-hidden">
@@ -35,11 +35,11 @@
         </mat-card>
       }
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/11/hacktoberfest-2023-debriefing"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -61,11 +61,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/09/hacktoberfest-2023"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -85,11 +85,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/09/ghostfolio-2"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -111,11 +111,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/08/ghostfolio-joins-oss-friends"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -137,11 +137,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/07/exploring-the-path-to-fire"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -164,11 +164,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/05/unlock-your-financial-potential-with-ghostfolio"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -190,11 +190,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/03/ghostfolio-reaches-1000-stars-on-github"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -216,11 +216,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/02/ghostfolio-meets-umbrel"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -242,11 +242,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../de/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -268,11 +268,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/12/the-importance-of-tracking-your-personal-finances"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -295,11 +295,11 @@
       </mat-card>
       @if (hasPermissionForSubscription) {
         <mat-card appearance="outlined" class="mb-3">
-          <mat-card-content>
+          <mat-card-content class="p-0">
             <div class="container p-0">
               <div class="flex-nowrap no-gutters row">
                 <a
-                  class="d-flex overflow-hidden w-100"
+                  class="d-flex overflow-hidden p-3 w-100"
                   href="../en/blog/2022/11/black-friday-2022"
                 >
                   <div class="flex-grow-1 overflow-hidden">
@@ -320,11 +320,11 @@
         </mat-card>
       }
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/10/hacktoberfest-2022"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -344,11 +344,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/08/500-stars-on-github"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -368,11 +368,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/07/ghostfolio-meets-internet-identity"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -394,11 +394,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -420,11 +420,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/01/ghostfolio-first-months-in-open-source"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -446,11 +446,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2021/07/hello-ghostfolio"
               >
                 <div class="flex-grow-1 overflow-hidden">
@@ -470,11 +470,11 @@
         </mat-card-content>
       </mat-card>
       <mat-card appearance="outlined" class="mb-3">
-        <mat-card-content>
+        <mat-card-content class="p-0">
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
               <a
-                class="d-flex overflow-hidden w-100"
+                class="d-flex overflow-hidden p-3 w-100"
                 href="../de/blog/2021/07/hallo-ghostfolio"
               >
                 <div class="flex-grow-1 overflow-hidden">
diff --git a/apps/client/src/app/pages/blog/blog-page.scss b/apps/client/src/app/pages/blog/blog-page.scss
index 39eb6792e..9235ed3c2 100644
--- a/apps/client/src/app/pages/blog/blog-page.scss
+++ b/apps/client/src/app/pages/blog/blog-page.scss
@@ -1,6 +1,12 @@
 :host {
   color: rgb(var(--dark-primary-text));
   display: block;
+
+  .mat-mdc-card {
+    &:hover {
+      border-color: var(--gf-theme-primary-500);
+    }
+  }
 }
 
 :host-context(.is-dark-theme) {