myxelium/Toju
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 2 Releases 28 Wiki Activity

fix: Mobile style fixes and other small ui fixes

Browse Source
This commit is contained in:
SocksOnHead
2026-05-18 23:14:16 +02:00
parent afb64520ed
commit 94428ed170
32 changed files with 808 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
toju-app/src/app/shared/components/user-avatar/user-avatar.component.ts
View File

@@ -16,29 +16,42 @@ import { UserStatus } from '../../../shared-kernel';
export class UserAvatarComponent {
name = input.required<string>();
avatarUrl = input<string | undefined | null>();
size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('sm');
size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>('sm');
ringClass = input<string>('');
status = input<UserStatus | undefined>();
showStatusBadge = input(false);
statusBadgeColor = computed(() => {
switch (this.status()) {
case 'online': return 'bg-green-500';
case 'away': return 'bg-yellow-500';
case 'busy': return 'bg-red-500';
case 'offline': return 'bg-gray-500';
case 'disconnected': return 'bg-gray-500';
default: return 'bg-gray-500';
case 'online':
return 'bg-green-500';
case 'away':
return 'bg-yellow-500';
case 'busy':
return 'bg-red-500';
case 'offline':
return 'bg-gray-500';
case 'disconnected':
return 'bg-gray-500';
default:
return 'bg-gray-500';
}
});
statusBadgeSizeClass = computed(() => {
switch (this.size()) {
case 'xs': return 'w-2 h-2';
case 'sm': return 'w-3 h-3';
case 'md': return 'w-3.5 h-3.5';
case 'lg': return 'w-4 h-4';
case 'xl': return 'w-4.5 h-4.5';
case 'xs':
return 'w-2 h-2';
case 'sm':
return 'w-3 h-3';
case 'md':
return 'w-3.5 h-3.5';
case 'lg':
return 'w-4 h-4';
case 'xl':
return 'w-4.5 h-4.5';
case '2xl':
return 'w-6 h-6';
}
});
@@ -49,31 +62,52 @@ export class UserAvatarComponent {
sizeClasses(): string {
switch (this.size()) {
case 'xs': return 'w-7 h-7';
case 'sm': return 'w-8 h-8';
case 'md': return 'w-10 h-10';
case 'lg': return 'w-12 h-12';
case 'xl': return 'w-16 h-16';
case 'xs':
return 'w-7 h-7';
case 'sm':
return 'w-8 h-8';
case 'md':
return 'w-10 h-10';
case 'lg':
return 'w-12 h-12';
case 'xl':
return 'w-16 h-16';
case '2xl':
return 'w-32 h-32';
}
}
sizePx(): number {
switch (this.size()) {
case 'xs': return 28;
case 'sm': return 32;
case 'md': return 40;
case 'lg': return 48;
case 'xl': return 64;
case 'xs':
return 28;
case 'sm':
return 32;
case 'md':
return 40;
case 'lg':
return 48;
case 'xl':
return 64;
case '2xl':
return 128;
}
}
textClass(): string {
switch (this.size()) {
case 'xs': return 'text-xs';
case 'sm': return 'text-sm';
case 'md': return 'text-base font-semibold';
case 'lg': return 'text-lg font-semibold';
case 'xl': return 'text-xl font-semibold';
case 'xs':
return 'text-xs';
case 'sm':
return 'text-sm';
case 'md':
return 'text-base font-semibold';
case 'lg':
return 'text-lg font-semibold';
case 'xl':
return 'text-xl font-semibold';
case '2xl':
return 'text-4xl font-semibold';
}
}
}