nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Inventory layout updates

Browse Source
This commit is contained in:
Bill 2021-09-23 05:20:15 -04:00
parent 9769dcf887
commit a9d97efc98
4 changed files with 75 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/inventory/views/badge/InventoryBadgeView.tsx
View File

@ -74,33 +74,55 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
} }
return ( return (
<> <div className="d-flex flex-column h-100 overflow-hidden">
<div className="d-flex flex-column h-100 overflow-hidden"> <div className="row h-100">
<div className="row inventory-badge-overflow"> <div className="d-flex flex-column col-7 h-100">
<div className="col-7 d-flex flex-column h-100"> <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } /> </div>
</div> <div className="d-flex flex-column justify-content-between col-5 gap-2 h-100 overflow-hidden">
<div className="col"> <div className="d-flex flex-column overflow-hidden">
<p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p> <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
<InventoryActiveBadgeResultsView badges={ activeBadges } /> <InventoryActiveBadgeResultsView badges={ activeBadges } />
</div> </div>
</div>
<div className="my-auto">
{ badge && badge.length && { 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-column gap-2">
<div className="d-flex flex-grow-1 current-badge-container"> <div className="d-flex justify-content-between align-items-center">
<BadgeImageView badgeCode={ badge } /> <div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden">
<div className="d-flex flex-column justify-content-center flex-grow-1 ms-2"> <BadgeImageView badgeCode={ badge } />
<p className="mb-0">{ LocalizeBadgeName(badge) }</p> <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
</div> </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> <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> }
<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>
</> </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>
// </>
); );
} }

19
src/views/inventory/views/bot/InventoryBotView.tsx
View File

@ -81,15 +81,18 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
return ( return (
<div className="row h-100"> <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">
<InventoryBotResultsView botItems={ botItems } /> <InventoryBotResultsView botItems={ botItems } />
</div> </div>
<div className="d-flex flex-column col-5 justify-space-between"> <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <div className="position-relative d-flex flex-column overflow-auto h-100">
{ botItem && <div className="d-flex flex-column flex-grow-1"> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p> </div>
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> } { botItem &&
</div> } <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>
</div> </div>
); );

26
src/views/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -121,19 +121,21 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } /> <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } /> <InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
</div> </div>
<div className="position-relative d-flex flex-column col-5 justify-space-between"> <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <div className="position-relative d-flex flex-column overflow-auto h-100">
{ groupItem && groupItem.stuffData.isUnique && <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<div className="stuffdata-extra-container"> { groupItem && groupItem.stuffData.isUnique &&
<LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } /> <div className="stuffdata-extra-container">
</div> } <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
{ (groupItem && groupItem.stuffData.rarityLevel > -1) && </div> }
<div className="stuffdata-extra-container"> { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
<RarityLevelView level={ groupItem.stuffData.rarityLevel } /> <div className="stuffdata-extra-container">
</div> } <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
</div> }
</div>
{ groupItem && { groupItem &&
<div className="d-flex flex-column flex-grow-1"> <div className="d-flex flex-column gap-2">
<p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p> <p className="flex-grow-1 text-black text-truncate">{ groupItem.name }</p>
{ !!roomSession && { !!roomSession &&
<button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> } <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
</div> } </div> }

17
src/views/inventory/views/pet/InventoryPetView.tsx
View File

@ -81,15 +81,18 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
return ( return (
<div className="row h-100"> <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 } /> <InventoryPetResultsView petItems={ petItems } />
</div> </div>
<div className="d-flex flex-column col-5 justify-space-between"> <div className="d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <div className="position-relative d-flex flex-column overflow-auto h-100">
{ petItem && <div className="d-flex flex-column flex-grow-1"> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p> </div>
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> } { petItem &&
</div> } <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>
</div> </div>
); );