lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-12 10:45:54 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: color and formatting fixes for local character (#150)

Browse Source
This commit is contained in:
guarzo
2025-02-05 10:22:10 -07:00
committed by GitHub
parent 7073a0e8e6
commit 2f07ec1b74
1 changed files with 23 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
assets/js/hooks/Mapper/components/ui-kit/CharacterCard/CharacterCard.tsx
View File

@@ -26,12 +26,6 @@ export const getShipName = (name: string) => {
); );
}; };
const Divider = () => (
<span className="mx-1 text-gray-400" aria-hidden="true">
|
</span>
);
export const CharacterCard = ({ export const CharacterCard = ({
compact = false, compact = false,
isOwn, isOwn,
@@ -50,6 +44,7 @@ export const CharacterCard = ({
const shipNameText = char.ship?.ship_name ? getShipName(char.ship.ship_name) : ''; const shipNameText = char.ship?.ship_name ? getShipName(char.ship.ship_name) : '';
const tickerText = char.alliance_id ? char.alliance_ticker : char.corporation_ticker; const tickerText = char.alliance_id ? char.alliance_ticker : char.corporation_ticker;
const shipType = char.ship?.ship_type_info?.name; const shipType = char.ship?.ship_type_info?.name;
const locationShown = showSystem && char.location?.solar_system_id;
if (compact) { if (compact) {
return ( return (
@@ -71,18 +66,19 @@ export const CharacterCard = ({
/> />
<div className="flex flex-grow overflow-hidden text-left" style={{ minWidth: 0 }}> <div className="flex flex-grow overflow-hidden text-left" style={{ minWidth: 0 }}>
<div className="overflow-hidden text-ellipsis whitespace-nowrap"> <div className="overflow-hidden text-ellipsis whitespace-nowrap">
<span className="text-gray-200">{char.name}</span> <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>
<Divider /> {char.name}
{showShipName && shipNameText ? ( </span>{" "}
<span className="text-indigo-300">{shipNameText}</span> <span className="text-gray-400">
) : ( {(!locationShown && showShipName && shipNameText)
<span className="text-indigo-300">[{tickerText}]</span> ? `- ${shipNameText}`
)} : `[${tickerText}]`}
</span>
</div> </div>
</div> </div>
{shipType && ( {shipType && (
<div <div
className="text-yellow-400 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0" className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
style={{ maxWidth: '120px' }} style={{ maxWidth: '120px' }}
title={shipType} title={shipType}
> >
@@ -93,8 +89,6 @@ export const CharacterCard = ({
</div> </div>
); );
} else { } else {
const locationShown = showSystem && char.location?.solar_system_id;
return ( return (
<div <div
className={clsx(classes.CharacterCard, 'w-full text-xs box-border')} className={clsx(classes.CharacterCard, 'w-full text-xs box-border')}
@@ -113,14 +107,15 @@ export const CharacterCard = ({
/> />
<div className="flex flex-col flex-grow overflow-hidden" style={{ minWidth: 0 }}> <div className="flex flex-col flex-grow overflow-hidden" style={{ minWidth: 0 }}>
<div className="overflow-hidden text-ellipsis whitespace-nowrap"> <div className="overflow-hidden text-ellipsis whitespace-nowrap">
<span className="text-gray-200">{char.name}</span> <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>
<Divider /> {char.name}
<span className="text-indigo-300">[{tickerText}]</span> </span>{" "}
<span className="text-gray-400">[{tickerText}]</span>
</div> </div>
{locationShown ? ( {locationShown ? (
<div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap"> <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
<SystemView <SystemView
systemId={char?.location?.solar_system_id?.toString() || '' } systemId={char?.location?.solar_system_id?.toString() || ''}
useSystemsCache={useSystemsCache} useSystemsCache={useSystemsCache}
/> />
</div> </div>
@@ -132,25 +127,15 @@ export const CharacterCard = ({
) )
)} )}
</div> </div>
{((shipType) || (locationShown && shipNameText)) && (
<div className="flex-shrink-0 self-start">
{shipType && ( {shipType && (
<div className="flex-shrink-0 self-start">
<div <div
className="text-yellow-400 overflow-hidden text-ellipsis whitespace-nowrap" className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap"
style={{ maxWidth: '200px' }} style={{ maxWidth: '200px' }}
title={shipType} title={shipType}
> >
{shipType} {shipType}
</div> </div>
)}
{locationShown && shipNameText && (
<div
className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap text-right"
style={{ maxWidth: '200px' }}
>
{shipNameText}
</div>
)}
</div> </div>
)} )}
</div> </div>