sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/improve style of blog post list (#3481)

Browse Source 
* Improve style

* Update changelog
This commit is contained in:
Thomas Kaul 2024-06-11 20:00:41 +02:00 committed by GitHub
parent b725e6e2ec
commit ad60373813
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed ### Changed
- Improved the style of the blog post list
- Migrated the `@ghostfolio/client` components to control flow - Migrated the `@ghostfolio/client` components to control flow
- Improved the language localization for German (`de`) - Improved the language localization for German (`de`)
- Upgraded `angular` from version `17.3.10` to `18.0.2` - Upgraded `angular` from version `17.3.10` to `18.0.2`

76
apps/client/src/app/pages/blog/blog-page.html
View File

@ -10,11 +10,11 @@
</h1> </h1>
@if (hasPermissionForSubscription) { @if (hasPermissionForSubscription) {
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2023/11/black-week-2023"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -35,11 +35,11 @@
</mat-card> </mat-card>
} }
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2023/11/hacktoberfest-2023-debriefing"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -61,11 +61,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <a
class="d-flex overflow-hidden w-100" class="d-flex overflow-hidden p-3 w-100"
href="../en/blog/2023/09/hacktoberfest-2023" href="../en/blog/2023/09/hacktoberfest-2023"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -85,11 +85,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <a
class="d-flex overflow-hidden w-100" class="d-flex overflow-hidden p-3 w-100"
href="../en/blog/2023/09/ghostfolio-2" href="../en/blog/2023/09/ghostfolio-2"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -111,11 +111,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2023/08/ghostfolio-joins-oss-friends"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -137,11 +137,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2023/07/exploring-the-path-to-fire"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -164,11 +164,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2023/05/unlock-your-financial-potential-with-ghostfolio"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -190,11 +190,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2023/03/ghostfolio-reaches-1000-stars-on-github"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -216,11 +216,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2023/02/ghostfolio-meets-umbrel"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -242,11 +242,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../de/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -268,11 +268,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2022/12/the-importance-of-tracking-your-personal-finances"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -295,11 +295,11 @@
</mat-card> </mat-card>
@if (hasPermissionForSubscription) { @if (hasPermissionForSubscription) {
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2022/11/black-friday-2022"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -320,11 +320,11 @@
</mat-card> </mat-card>
} }
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <a
class="d-flex overflow-hidden w-100" class="d-flex overflow-hidden p-3 w-100"
href="../en/blog/2022/10/hacktoberfest-2022" href="../en/blog/2022/10/hacktoberfest-2022"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -344,11 +344,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2022/08/500-stars-on-github"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -368,11 +368,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2022/07/ghostfolio-meets-internet-identity"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -394,11 +394,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -420,11 +420,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <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" href="../en/blog/2022/01/ghostfolio-first-months-in-open-source"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -446,11 +446,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <a
class="d-flex overflow-hidden w-100" class="d-flex overflow-hidden p-3 w-100"
href="../en/blog/2021/07/hello-ghostfolio" href="../en/blog/2021/07/hello-ghostfolio"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
@ -470,11 +470,11 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="mb-3"> <mat-card appearance="outlined" class="mb-3">
<mat-card-content> <mat-card-content class="p-0">
<div class="container p-0"> <div class="container p-0">
<div class="flex-nowrap no-gutters row"> <div class="flex-nowrap no-gutters row">
<a <a
class="d-flex overflow-hidden w-100" class="d-flex overflow-hidden p-3 w-100"
href="../de/blog/2021/07/hallo-ghostfolio" href="../de/blog/2021/07/hallo-ghostfolio"
> >
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">

6
apps/client/src/app/pages/blog/blog-page.scss
View File

@ -1,6 +1,12 @@
:host { :host {
color: rgb(var(--dark-primary-text)); color: rgb(var(--dark-primary-text));
display: block; display: block;
.mat-mdc-card {
&:hover {
border-color: var(--gf-theme-primary-500);
}
}
} }
:host-context(.is-dark-theme) { :host-context(.is-dark-theme) {