nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +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

48
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 inventory-badge-overflow"> <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">
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } /> <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
</div> </div>
<div className="col"> <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> <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">
<div className="d-flex flex-grow-1 gap-2 align-items-center current-badge-container overflow-hidden">
<BadgeImageView badgeCode={ badge } /> <BadgeImageView badgeCode={ badge } />
<div className="d-flex flex-column justify-content-center flex-grow-1 ms-2"> <div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
<p className="mb-0">{ LocalizeBadgeName(badge) }</p>
</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>
// </>
); );
} }

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

@ -81,13 +81,16 @@ 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">
<div className="position-relative d-flex flex-column overflow-auto h-100">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ botItem && <div className="d-flex flex-column flex-grow-1"> </div>
<p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p> { 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> } { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
</div> } </div> }
</div> </div>

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

@ -121,7 +121,8 @@ 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">
<div className="position-relative d-flex flex-column overflow-auto h-100">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ groupItem && groupItem.stuffData.isUnique && { groupItem && groupItem.stuffData.isUnique &&
<div className="stuffdata-extra-container"> <div className="stuffdata-extra-container">
@ -131,9 +132,10 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
<div className="stuffdata-extra-container"> <div className="stuffdata-extra-container">
<RarityLevelView level={ groupItem.stuffData.rarityLevel } /> <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
</div> } </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> }

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

@ -81,13 +81,16 @@ 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">
<div className="position-relative d-flex flex-column overflow-auto h-100">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ petItem && <div className="d-flex flex-column flex-grow-1"> </div>
<p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p> { 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> } { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
</div> } </div> }
</div> </div>