mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Inventory layout updates
This commit is contained in:
Bill
parent
9769dcf887
commit
a9d97efc98
@ -74,33 +74,55 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="d-flex flex-column h-100 overflow-hidden">
|
||||
<div className="row inventory-badge-overflow">
|
||||
<div className="col-7 d-flex flex-column h-100">
|
||||
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="d-flex flex-column h-100 overflow-hidden">
|
||||
<div className="row h-100">
|
||||
<div className="d-flex flex-column col-7 h-100">
|
||||
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
|
||||
</div>
|
||||
<div className="d-flex flex-column justify-content-between col-5 gap-2 h-100 overflow-hidden">
|
||||
<div className="d-flex flex-column overflow-hidden">
|
||||
<p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
|
||||
<InventoryActiveBadgeResultsView badges={ activeBadges } />
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-auto">
|
||||
{ badge && badge.length &&
|
||||
<div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
|
||||
<div className="d-flex flex-grow-1 current-badge-container">
|
||||
<BadgeImageView badgeCode={ badge } />
|
||||
<div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
|
||||
<p className="mb-0">{ LocalizeBadgeName(badge) }</p>
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden">
|
||||
<BadgeImageView badgeCode={ badge } />
|
||||
<div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
|
||||
</div> }
|
||||
<div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
|
||||
<div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
// <div className="d-flex flex-column h-100 overflow-hidden">
|
||||
// <div className="row inventory-badge-overflow">
|
||||
// <div className="col-7 d-flex flex-column h-100">
|
||||
// <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
|
||||
// </div>
|
||||
// <div className="col">
|
||||
// <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
|
||||
// <InventoryActiveBadgeResultsView badges={ activeBadges } />
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="my-auto">
|
||||
// { badge && badge.length &&
|
||||
// <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
|
||||
// <div className="d-flex flex-grow-1 current-badge-container">
|
||||
// <BadgeImageView badgeCode={ badge } />
|
||||
// <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
|
||||
// <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
|
||||
// </div>
|
||||
// </div>
|
||||
// <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
|
||||
// </div> }
|
||||
// <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
|
||||
// <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </>
|
||||
);
|
||||
}
|
||||
|
||||
@ -81,15 +81,18 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
|
||||
|
||||
return (
|
||||
<div className="row h-100">
|
||||
<div className="col-7 d-flex flex-column h-100">
|
||||
<InventoryBotResultsView botItems={ botItems } />
|
||||
<div className="d-flex flex-column col-7 h-100">
|
||||
<InventoryBotResultsView botItems={ botItems } />
|
||||
</div>
|
||||
<div className="d-flex flex-column col-5 justify-space-between">
|
||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||
{ botItem && <div className="d-flex flex-column flex-grow-1">
|
||||
<p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>
|
||||
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
</div> }
|
||||
<div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
|
||||
<div className="position-relative d-flex flex-column overflow-auto h-100">
|
||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||
</div>
|
||||
{ botItem &&
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<p className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</p>
|
||||
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
</div> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -121,19 +121,21 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
|
||||
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
|
||||
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
|
||||
</div>
|
||||
<div className="position-relative d-flex flex-column col-5 justify-space-between">
|
||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||
{ groupItem && groupItem.stuffData.isUnique &&
|
||||
<div className="stuffdata-extra-container">
|
||||
<LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
|
||||
</div> }
|
||||
{ (groupItem && groupItem.stuffData.rarityLevel > -1) &&
|
||||
<div className="stuffdata-extra-container">
|
||||
<RarityLevelView level={ groupItem.stuffData.rarityLevel } />
|
||||
</div> }
|
||||
<div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
|
||||
<div className="position-relative d-flex flex-column overflow-auto h-100">
|
||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||
{ groupItem && groupItem.stuffData.isUnique &&
|
||||
<div className="stuffdata-extra-container">
|
||||
<LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
|
||||
</div> }
|
||||
{ (groupItem && groupItem.stuffData.rarityLevel > -1) &&
|
||||
<div className="stuffdata-extra-container">
|
||||
<RarityLevelView level={ groupItem.stuffData.rarityLevel } />
|
||||
</div> }
|
||||
</div>
|
||||
{ groupItem &&
|
||||
<div className="d-flex flex-column flex-grow-1">
|
||||
<p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<p className="flex-grow-1 text-black text-truncate">{ groupItem.name }</p>
|
||||
{ !!roomSession &&
|
||||
<button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
</div> }
|
||||
|
||||
@ -81,15 +81,18 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
|
||||
|
||||
return (
|
||||
<div className="row h-100">
|
||||
<div className="col-7 d-flex flex-column h-100">
|
||||
<div className="d-flex flex-column col-7 h-100">
|
||||
<InventoryPetResultsView petItems={ petItems } />
|
||||
</div>
|
||||
<div className="d-flex flex-column col-5 justify-space-between">
|
||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||
{ petItem && <div className="d-flex flex-column flex-grow-1">
|
||||
<p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>
|
||||
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
</div> }
|
||||
<div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
|
||||
<div className="position-relative d-flex flex-column overflow-auto h-100">
|
||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||
</div>
|
||||
{ petItem &&
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<p className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</p>
|
||||
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
</div> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user