Improve settings selectors layout (#205)

pull/207/head
Thomas 4 years ago committed by GitHub
parent f403807f2d
commit 0774ca91a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -16,14 +16,19 @@
<div class="w-50" i18n>Membership</div>
<div class="w-50">
<div class="align-items-center d-flex mb-1">
{{ user.subscription.type }}
{{ user?.subscription?.type }}
<ion-icon
*ngIf="user?.subscription?.type === 'Premium'"
class="ml-1 text-muted"
name="diamond-outline"
></ion-icon>
</div>
<div *ngIf="user.subscription.expiresAt">
Valid until {{ user.subscription.expiresAt | date:
<div *ngIf="user?.subscription?.expiresAt">
Valid until {{ user?.subscription?.expiresAt | date:
defaultDateFormat }}
</div>
<div
*ngIf="hasPermissionForSubscription && !user.subscription.expiresAt"
*ngIf="hasPermissionForSubscription && !user?.subscription?.expiresAt"
>
<button
color="primary"
@ -46,11 +51,13 @@
</div>
</div>
<div class="d-flex mt-4 py-1">
<div class="pt-4 w-50" i18n>Settings</div>
<form #changeUserSettingsForm="ngForm" class="w-100">
<div class="d-flex mb-2">
<div class="align-items-center d-flex pt-1 w-50" i18n>
Base Currency
</div>
<div class="w-50">
<form #changeUserSettingsForm="ngForm">
<mat-form-field appearance="outline" class="mb-3 w-100">
<mat-label i18n>Base Currency</mat-label>
<mat-form-field appearance="outline" class="w-100">
<mat-select
name="baseCurrency"
[disabled]="!hasPermissionToUpdateUserSettings"
@ -64,9 +71,20 @@
>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="d-flex">
<div class="align-items-center d-flex pt-1 w-50" i18n>
View Mode
<ion-icon
*ngIf="!hasPermissionToUpdateViewMode"
class="mx-1 text-muted"
name="diamond-outline"
></ion-icon>
</div>
<div class="w-50">
<div class="align-items-center d-flex overflow-hidden">
<mat-form-field appearance="outline" class="flex-grow-1">
<mat-label i18n>View Mode</mat-label>
<mat-form-field appearance="outline" class="w-100">
<mat-select
name="viewMode"
[disabled]="!hasPermissionToUpdateViewMode"
@ -77,15 +95,11 @@
<mat-option value="ZEN">Zen</mat-option>
</mat-select>
</mat-form-field>
<ion-icon
*ngIf="!hasPermissionToUpdateViewMode"
class="h5 mb-0 mx-3 text-muted"
name="diamond-outline"
></ion-icon>
</div>
</form>
</div>
</div>
</form>
</div>
<div class="align-items-center d-flex mt-4 py-1">
<div class="w-50" i18n>Sign in with fingerprint</div>
<div class="w-50">

Loading…
Cancel
Save