topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Task/improve layout of user account settings on mobile (#8229) 

* Improve layout on mobile

* Update changelog
pull/8257/head
Thomas Kaul 3 days ago
committed by GitHub
parent
cea7c303c6
commit
e96166ad03
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 67
      apps/client/src/app/components/user-account-settings/user-account-settings.html

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 layout of the user account settings on mobile
- Improved the usability of the activities page by eliminating the reload on canceling the import activities dialog - Improved the usability of the activities page by eliminating the reload on canceling the import activities dialog
- Improved the loading state of the file drop area component - Improved the loading state of the file drop area component
- Improved the accessibility of the _Buy me a coffee_ button on the about page - Improved the accessibility of the _Buy me a coffee_ button on the about page

67
apps/client/src/app/components/user-account-settings/user-account-settings.html
View File

@ -5,14 +5,15 @@
<div class="d-flex py-1"> <div class="d-flex py-1">
<div class="w-100"> <div class="w-100">
<div <div
class="d-flex" class="align-items-sm-baseline g-0 row"
[class.mb-2]="!hasImpersonationId" [class.mb-3]="!hasImpersonationId"
[class.mb-4]="hasImpersonationId" [class.mb-4]="hasImpersonationId"
[class.mb-sm-2]="!hasImpersonationId"
> >
<div class="align-items-center d-flex pe-1 pt-1 w-50"> <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
<ng-container i18n>Base Currency</ng-container> <ng-container i18n>Base Currency</ng-container>
</div> </div>
<div class="ps-1 w-50" [formGroup]="baseCurrencyForm"> <div class="col-sm-6 ps-sm-1" [formGroup]="baseCurrencyForm">
<mat-form-field <mat-form-field
appearance="outline" appearance="outline"
class="w-100" class="w-100"
@ -31,11 +32,11 @@
</div> </div>
</div> </div>
@if (user?.settings?.isExperimentalFeatures) { @if (user?.settings?.isExperimentalFeatures) {
<div class="d-flex mb-2"> <div class="align-items-sm-baseline g-0 mb-3 mb-sm-2 row">
<div class="align-items-center d-flex pe-1 pt-1 w-50"> <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
<ng-container i18n>Performance Calculation</ng-container> <ng-container i18n>Performance Calculation</ng-container>
</div> </div>
<div class="ps-1 w-50"> <div class="col-sm-6 ps-sm-1">
<mat-form-field appearance="outline" class="w-100 without-hint"> <mat-form-field appearance="outline" class="w-100 without-hint">
<mat-select <mat-select
name="performanceCalculationType" name="performanceCalculationType"
@ -61,8 +62,8 @@
</div> </div>
</div> </div>
} }
<div class="align-items-center d-flex mb-2"> <div class="align-items-sm-baseline g-0 mb-3 mb-sm-2 row">
<div class="pe-1 w-50"> <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
<div i18n>Language</div> <div i18n>Language</div>
@if (isCommunityLanguage()) { @if (isCommunityLanguage()) {
<div class="hint-text text-body-secondary" i18n> <div class="hint-text text-body-secondary" i18n>
@ -77,7 +78,7 @@
</div> </div>
} }
</div> </div>
<div class="ps-1 w-50"> <div class="col-sm-6 ps-sm-1">
<mat-form-field appearance="outline" class="w-100 without-hint"> <mat-form-field appearance="outline" class="w-100 without-hint">
<mat-select <mat-select
name="language" name="language"
@ -156,14 +157,14 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div class="align-items-center d-flex mb-4"> <div class="align-items-sm-baseline g-0 mb-3 mb-sm-4 row">
<div class="pe-1 w-50"> <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
<div i18n>Locale</div> <div i18n>Locale</div>
<div class="hint-text text-body-secondary"> <div class="d-none d-sm-block hint-text text-body-secondary">
<ng-container i18n>Date and number format</ng-container> <ng-container i18n>Date and number format</ng-container>
</div> </div>
</div> </div>
<div class="ps-1 w-50"> <div class="col-sm-6 ps-sm-1">
<mat-form-field <mat-form-field
appearance="outline" appearance="outline"
class="w-100 with-value-hint" class="w-100 with-value-hint"
@ -181,7 +182,7 @@
<mat-option [value]="locale">{{ locale }}</mat-option> <mat-option [value]="locale">{{ locale }}</mat-option>
} }
</mat-select> </mat-select>
<mat-hint class="d-flex mt-2 text-body-secondary text-truncate"> <mat-hint class="d-flex mt-2 text-body-secondary">
<gf-value <gf-value
[deviceType]="deviceType()" [deviceType]="deviceType()"
[isDate]="true" [isDate]="true"
@ -201,11 +202,11 @@
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div class="d-flex"> <div class="align-items-sm-baseline g-0 row">
<div class="align-items-center d-flex pe-1 pt-1 w-50"> <div class="col-sm-6 mb-1 mb-sm-0 pe-sm-1">
<ng-container i18n>Appearance</ng-container> <ng-container i18n>Appearance</ng-container>
</div> </div>
<div class="ps-1 w-50"> <div class="col-sm-6 ps-sm-1">
<mat-form-field appearance="outline" class="w-100 without-hint"> <mat-form-field appearance="outline" class="w-100 without-hint">
<mat-select <mat-select
class="with-placeholder-as-option" class="with-placeholder-as-option"
@ -226,15 +227,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="align-items-center d-flex mt-4 py-1"> <div class="align-items-baseline g-0 mt-4 py-1 row">
<div class="pe-1 w-50"> <div class="col col-sm-6 pe-1">
<div i18n>Presenter View</div> <div i18n>Presenter View</div>
<div class="hint-text text-body-secondary" i18n> <div class="hint-text text-body-secondary" i18n>
Protection for sensitive information like absolute performances and Protection for sensitive information like absolute performances and
quantity values quantity values
</div> </div>
</div> </div>
<div class="ps-1 w-50"> <div class="col-auto col-sm-6 ps-1">
<mat-slide-toggle <mat-slide-toggle
color="primary" color="primary"
hideIcon="true" hideIcon="true"
@ -244,14 +245,14 @@
/> />
</div> </div>
</div> </div>
<div class="d-flex mt-4 py-1"> <div class="align-items-baseline g-0 mt-4 py-1 row">
<div class="pe-1 w-50"> <div class="col col-sm-6 pe-1">
<div i18n>Zen Mode</div> <div i18n>Zen Mode</div>
<div class="hint-text text-body-secondary" i18n> <div class="hint-text text-body-secondary" i18n>
Distraction-free experience for turbulent times Distraction-free experience for turbulent times
</div> </div>
</div> </div>
<div class="ps-1 w-50"> <div class="col-auto col-sm-6 ps-1">
<mat-slide-toggle <mat-slide-toggle
color="primary" color="primary"
hideIcon="true" hideIcon="true"
@ -261,14 +262,14 @@
/> />
</div> </div>
</div> </div>
<div class="align-items-center d-flex mt-4 py-1"> <div class="align-items-baseline g-0 mt-4 py-1 row">
<div class="pe-1 w-50"> <div class="col col-sm-6 pe-1">
<div i18n>Biometric Authentication</div> <div i18n>Biometric Authentication</div>
<div class="hint-text text-body-secondary" i18n> <div class="hint-text text-body-secondary" i18n>
Sign in with fingerprint Sign in with fingerprint
</div> </div>
</div> </div>
<div class="ps-1 w-50"> <div class="col-auto col-sm-6 ps-1">
<mat-slide-toggle <mat-slide-toggle
color="primary" color="primary"
hideIcon="true" hideIcon="true"
@ -280,14 +281,14 @@
/> />
</div> </div>
</div> </div>
<div class="align-items-center d-flex mt-4 py-1"> <div class="align-items-baseline g-0 mt-4 py-1 row">
<div class="pe-1 w-50"> <div class="col col-sm-6 pe-1">
<div i18n>Experimental Features</div> <div i18n>Experimental Features</div>
<div class="hint-text text-body-secondary" i18n> <div class="hint-text text-body-secondary" i18n>
Sneak peek at upcoming functionality Sneak peek at upcoming functionality
</div> </div>
</div> </div>
<div class="ps-1 w-50"> <div class="col-auto col-sm-6 ps-1">
<mat-slide-toggle <mat-slide-toggle
color="primary" color="primary"
hideIcon="true" hideIcon="true"
@ -298,14 +299,14 @@
</div> </div>
</div> </div>
@if (deviceType() !== 'mobile' && hasPermissionToEnableGhostfolioAi) { @if (deviceType() !== 'mobile' && hasPermissionToEnableGhostfolioAi) {
<div class="align-items-center d-flex mt-4 py-1"> <div class="align-items-baseline g-0 mt-4 py-1 row">
<div class="pe-1 w-50"> <div class="col col-sm-6 pe-1">
<div>Ghostfolio AI</div> <div>Ghostfolio AI</div>
<div class="hint-text text-body-secondary" i18n> <div class="hint-text text-body-secondary" i18n>
Powered by third-party AI providers Powered by third-party AI providers
</div> </div>
</div> </div>
<div class="ps-1 w-50"> <div class="col-auto col-sm-6 ps-1">
<mat-slide-toggle <mat-slide-toggle
color="primary" color="primary"
hideIcon="true" hideIcon="true"

Write Preview
Loading…
Cancel
Save