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

Improve colors in dark mode, improve user table (#49)

Browse Source
This commit is contained in:
Thomas 2021-04-26 21:54:19 +02:00 committed by GitHub
parent 0439a7beaa
commit 11700f75d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -5,6 +5,13 @@ 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/), 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). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Changed
- Improved the user table styling of the admin control panel
- Improved the background colors in the dark mode
## 0.92.0 - 25.04.2021 ## 0.92.0 - 25.04.2021
### Added ### Added

8
apps/client/src/app/pages/admin/admin-page.html
View File

@ -74,19 +74,19 @@
<table> <table>
<thead> <thead>
<tr class="mat-header-row"> <tr class="mat-header-row">
<th class="mat-header-cell pl-2 py-2" i18n>User</th> <th class="mat-header-cell pl-3 py-2" i18n>User</th>
<th class="mat-header-cell pr-2 py-2" i18n> <th class="mat-header-cell pr-2 py-2" i18n>
Registration Date Registration Date
</th> </th>
<th class="mat-header-cell pr-2 py-2" i18n>Accounts</th> <th class="mat-header-cell pr-2 py-2" i18n>Accounts</th>
<th class="mat-header-cell pr-2 py-2" i18n>Transactions</th> <th class="mat-header-cell pr-2 py-2" i18n>Transactions</th>
<th class="mat-header-cell pr-2 py-2" i18n>Engagement</th> <th class="mat-header-cell pr-2 py-2" i18n>Engagement</th>
<th class="mat-header-cell pr-2 py-2" i18n>Last Activitiy</th> <th class="mat-header-cell pr-3 py-2" i18n>Last Activitiy</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let userItem of users" class="mat-row"> <tr *ngFor="let userItem of users" class="mat-row">
<td class="mat-cell pl-2 py-2"> <td class="mat-cell pl-3 py-2">
{{ userItem.alias || userItem.id }} {{ userItem.alias || userItem.id }}
</td> </td>
<td class="mat-cell pr-2 py-2"> <td class="mat-cell pr-2 py-2">
@ -99,7 +99,7 @@
<td class="mat-cell pr-2 py-2"> <td class="mat-cell pr-2 py-2">
{{ userItem.Analytics?.activityCount }} {{ userItem.Analytics?.activityCount }}
</td> </td>
<td class="mat-cell pr-2 py-2"> <td class="mat-cell pr-3 py-2">
{{ formatDistanceToNow(userItem.Analytics?.updatedAt) }} {{ formatDistanceToNow(userItem.Analytics?.updatedAt) }}
</td> </td>
</tr> </tr>

2
apps/client/src/app/pages/admin/admin-page.scss
View File

@ -7,6 +7,8 @@
overflow-x: auto; overflow-x: auto;
table { table {
min-width: 100%;
tr { tr {
&:nth-child(even) { &:nth-child(even) {
background-color: rgba( background-color: rgba(

19
apps/client/src/styles.scss
View File

@ -57,11 +57,20 @@ body {
} }
} }
.mat-card:not([class*='mat-elevation-z']) { .mat-card {
border-color: rgba( background: var(--dark-background);
var(--light-primary-text),
var(--palette-foreground-divider-alpha) &:not([class*='mat-elevation-z']) {
); border-color: rgba(
var(--light-primary-text),
var(--palette-foreground-divider-alpha)
);
box-shadow: none;
}
}
.mat-dialog-container {
background: var(--dark-background);
} }
.mat-fab, .mat-fab,