Feature/improve styling in admin control panel (#1665)

* Improve styling

* Update changelog
pull/1669/head
Thomas Kaul 2 years ago committed by GitHub
parent 7fcfca952e
commit 45cfd61dbb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -5,6 +5,12 @@ 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/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Changed
- Improved the styling in the admin control panel
## 1.232.0 - 2023-02-05
### Changed

@ -151,8 +151,13 @@
>
<div class="w-50" i18n>Coupons</div>
<div class="w-50">
<div *ngFor="let coupon of coupons">
<span>{{ coupon.code }} ({{ coupon.duration }})</span>
<table>
<tr *ngFor="let coupon of coupons">
<td class="text-monospace">{{ coupon.code }}</td>
<td class="d-flex justify-content-end pl-2">
{{ coupon.duration }}
</td>
<td>
<button
class="mini-icon mx-1 no-min-width px-2"
mat-button
@ -160,7 +165,9 @@
>
<ion-icon name="trash-outline"></ion-icon>
</button>
</div>
</td>
</tr>
</table>
<div class="mt-2">
<form #couponForm="ngForm" class="align-items-center d-flex">
<mat-form-field

@ -1,6 +1,7 @@
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { DataService } from '@ghostfolio/client/services/data.service';
import { UserService } from '@ghostfolio/client/services/user/user.service';
import { getEmojiFlag } from '@ghostfolio/common/helper';
import { AdminData, InfoItem, User } from '@ghostfolio/common/interfaces';
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
import {
@ -17,6 +18,7 @@ import { takeUntil } from 'rxjs/operators';
templateUrl: './admin-users.html'
})
export class AdminUsersComponent implements OnDestroy, OnInit {
public getEmojiFlag = getEmojiFlag;
public hasPermissionForSubscription: boolean;
public info: InfoItem;
public user: User;

@ -9,7 +9,7 @@
<th class="mat-header-cell px-1 py-2" i18n>User</th>
<th
*ngIf="hasPermissionForSubscription"
class="mat-header-cell px-1 py-2 text-right"
class="mat-header-cell px-1 py-2"
>
<ng-container i18n>Country</ng-container>
</th>
@ -37,10 +37,10 @@
<td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
<td class="mat-cell px-1 py-2">
<div class="d-flex align-items-center">
<span class="d-none d-sm-inline-block"
<span class="d-none d-sm-inline-block text-monospace"
>{{ userItem.id }}</span
>
<span class="d-inline-block d-sm-none"
<span class="d-inline-block d-sm-none text-monospace"
>{{ (userItem.id | slice:0:5) + '...' }}</span
>
<gf-premium-indicator
@ -52,9 +52,11 @@
</td>
<td
*ngIf="hasPermissionForSubscription"
class="mat-cell px-1 py-2 text-right"
class="mat-cell px-1 py-2"
>
<span class="h5" [title]="userItem.country"
>{{ getEmojiFlag(userItem.country) }}</span
>
{{ userItem.country }}
</td>
<td class="mat-cell px-1 py-2">
{{ formatDistanceToNow(userItem.createdAt) }}

@ -118,6 +118,18 @@ export function getDateWithTimeFormatString(aLocale?: string) {
return `${getDateFormatString(aLocale)}, HH:mm:ss`;
}
export function getEmojiFlag(aCountryCode: string) {
if (!aCountryCode) {
return aCountryCode;
}
return aCountryCode
.toUpperCase()
.replace(/./g, (character) =>
String.fromCodePoint(127397 + character.charCodeAt(0))
);
}
export function getLocale() {
return navigator.languages?.length
? navigator.languages[0]

Loading…
Cancel
Save