scroll/resizable

This commit is contained in:
Layne 2021-06-19 23:33:08 -04:00
parent 0f0ce48232
commit eeee644bad
26 changed files with 90 additions and 71 deletions

View File

@ -1,20 +1,26 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 7px;
height: 5px; height: 5px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: $border-radius; border-radius: $border-radius;
background: rgba(transparent, 0.1); background: rgba($primary,.4);
box-shadow:inset 1px 0 rgba($black,.2);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: $border-radius; border-radius: $border-radius;
background: rgba($white, 0.7); background: #DCDCDC;
box-shadow:inset 1px 4px $white, inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
width: 4px; width: 4px;
border-left: 1px solid transparent;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba($white, 1); background: rgba($white, 1);
} }
::-webkit-scrollbar-thumb:active {
box-shadow: inset 1px 4px rgba($white,.4), inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
background:#C4C4C4;
}

View File

@ -2,8 +2,11 @@
width: 620px; width: 620px;
.content-area { .content-area {
height: 330px; min-height: 350px;
max-height: 330px; height: 350px;
max-height: 700px;
resize: vertical;
overflow:auto;
} }
} }

View File

@ -105,10 +105,10 @@ export const CatalogView: FC<CatalogViewProps> = props =>
<NitroCardContentView> <NitroCardContentView>
<div className="row h-100"> <div className="row h-100">
{ pageParser && !pageParser.frontPageItems.length && { pageParser && !pageParser.frontPageItems.length &&
<div className="col-3"> <div className="col-3 d-flex flex-column h-100">
<CatalogNavigationView page={ currentNavigationPage } /> <CatalogNavigationView page={ currentNavigationPage } />
</div> } </div> }
<div className="col"> <div className="col h-100">
<CatalogPageView roomPreviewer={ roomPreviewer } /> <CatalogPageView roomPreviewer={ roomPreviewer } />
</div> </div>
</div> </div>

View File

@ -3,8 +3,6 @@
background-color: $grid-bg-color !important; background-color: $grid-bg-color !important;
.navigation-container { .navigation-container {
height: 270px;
max-height: 270px;
overflow-y: auto; overflow-y: auto;
} }
} }

View File

@ -20,8 +20,8 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
return ( return (
<> <>
<CatalogSearchView /> <CatalogSearchView />
<div className="border border-2 rounded overflow-hidden nitro-catalog-navigation"> <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
<div className="navigation-container m-1"> <div className="navigation-container h-100">
<CatalogNavigationSetView page={ page } isFirstSet={ true } /> <CatalogNavigationSetView page={ page } isFirstSet={ true } />
</div> </div>
</div> </div>

View File

@ -17,7 +17,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
return ( return (
<div className="row h-100"> <div className="row h-100">
<div className="col-7"> <div className="col-7 h-100">
<CatalogPageOffersView offers={ pageParser.offers } /> <CatalogPageOffersView offers={ pageParser.offers } />
</div> </div>
{ !product && { !product &&

View File

@ -1,4 +1,5 @@
.nitro-catalog-layout-frontpage4 { .nitro-catalog-layout-frontpage4 {
max-height:600px;
.front-page-item { .front-page-item {
position: relative; position: relative;

View File

@ -1,5 +1,3 @@
.catalog-offers-container { .catalog-offers-container {
height: 314px;
max-height: 314px;
overflow-y: auto; overflow-y: auto;
} }

View File

@ -22,7 +22,7 @@ export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
}, [ offers, dispatchCatalogState ]); }, [ offers, dispatchCatalogState ]);
return ( return (
<div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container"> <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
{ offers && (offers.length > 0) && offers.map((offer, index) => { offers && (offers.length > 0) && offers.map((offer, index) =>
{ {
return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } /> return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />

View File

@ -17,7 +17,7 @@ export const CatalogLayoutSearchResultView: FC<CatalogLayoutSearchResultViewProp
return ( return (
<div className="row h-100"> <div className="row h-100">
<div className="col-7"> <div className="col-7 h-100">
<CatalogSearchResultOffersView offers={ furnitureDatas } /> <CatalogSearchResultOffersView offers={ furnitureDatas } />
</div> </div>
{ product && { product &&

View File

@ -1,5 +1,3 @@
.catalog-offers-container { .catalog-offers-container {
height: 314px;
max-height: 314px;
overflow-y: auto; overflow-y: auto;
} }

View File

@ -19,7 +19,7 @@ export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProp
}, [ offers ]); }, [ offers ]);
return ( return (
<div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container"> <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
{ offers && (offers.length > 0) && offers.map((offer, index) => { offers && (offers.length > 0) && offers.map((offer, index) =>
{ {
const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id)); const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id));

View File

@ -2,8 +2,11 @@
width: 475px; width: 475px;
.content-area { .content-area {
height: calc(220px + (#{$container-padding-x} * 2)); min-height: 240px;
max-height: calc(220px + (#{$container-padding-x} * 2)); height: 240px;
max-height: 430px;
resize: vertical;
overflow:auto;
} }
.empty-image { .empty-image {

View File

@ -76,27 +76,31 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
return ( return (
<> <>
<div className="row h-100"> <div className="d-flex flex-column h-100 overflow-hidden">
<div className="d-flex flex-column col-7"> <div className="row inventory-badge-overflow">
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } /> <div className="col-7 d-flex flex-column h-100">
</div> <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
<div className="col">
<p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
<InventoryActiveBadgeResultsView badges={ activeBadges } />
</div>
</div>
{ badge && badge.length &&
<div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-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> </div>
<button type="button" className={ 'btn btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button> <div className="col">
</div> } <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
<div className="d-flex justify-content-center align-items-center bg-primary rounded p-1"> <InventoryActiveBadgeResultsView badges={ activeBadges } />
<div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div> </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-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !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>
</> </>
); );

View File

@ -3,3 +3,7 @@
max-height: 139px; max-height: 139px;
overflow-y: auto; overflow-y: auto;
} }
.inventory-badge-overflow {
height:calc(100% - 86px)
}

View File

@ -1,5 +1,4 @@
import { FC } from 'react'; import { FC } from 'react';
import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
import { InventoryBadgeItemView } from '../item/InventoryBadgeItemView'; import { InventoryBadgeItemView } from '../item/InventoryBadgeItemView';
import { InventoryBadgeResultsViewProps } from './InventoryBadgeResultsView.types'; import { InventoryBadgeResultsViewProps } from './InventoryBadgeResultsView.types';
@ -8,15 +7,15 @@ export const InventoryBadgeResultsView: FC<InventoryBadgeResultsViewProps> = pro
const { badges = [], activeBadges = [] } = props; const { badges = [], activeBadges = [] } = props;
return ( return (
<div className="d-flex flex-grow-1"> <div className="h-100 overflow-hidden">
<ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100"> <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
{ badges && (badges.length > 0) && badges.map((code, index) => { badges && (badges.length > 0) && badges.map((code, index) =>
{ {
if(activeBadges.indexOf(code) >= 0) return null; if(activeBadges.indexOf(code) >= 0) return null;
return <InventoryBadgeItemView key={ index } badge={ code } /> return <InventoryBadgeItemView key={ index } badge={ code } />
}) } }) }
</ScrollableAreaView> </div>
</div> </div>
); );
} }

View File

@ -82,7 +82,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
return ( return (
<div className="row h-100"> <div className="row h-100">
<div className="d-flex flex-column col-7"> <div className="col-7 d-flex flex-column 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 justify-space-between">

View File

@ -1,5 +1,4 @@
import { FC } from 'react'; import { FC } from 'react';
import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
import { InventoryBotItemView } from '../item/InventoryBotItemView'; import { InventoryBotItemView } from '../item/InventoryBotItemView';
import { InventoryBotResultsViewProps } from './InventoryBotResultsView.types'; import { InventoryBotResultsViewProps } from './InventoryBotResultsView.types';
@ -8,13 +7,13 @@ export const InventoryBotResultsView: FC<InventoryBotResultsViewProps> = props =
const { botItems = [] } = props; const { botItems = [] } = props;
return ( return (
<div className="d-flex flex-grow-1"> <div className="h-100 overflow-hidden">
<ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100"> <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
{ botItems && (botItems.length > 0) && botItems.map((item, index) => { botItems && (botItems.length > 0) && botItems.map((item, index) =>
{ {
return <InventoryBotItemView key={ index } botItem={ item } /> return <InventoryBotItemView key={ index } botItem={ item } />
}) } }) }
</ScrollableAreaView> </div>
</div> </div>
); );
} }

View File

@ -117,7 +117,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
return ( return (
<div className="row h-100"> <div className="row h-100">
<div className="d-flex flex-column col-7"> <div className="col-7 d-flex flex-column h-100">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } /> <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } /> <InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
</div> </div>

View File

@ -41,7 +41,8 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
return ( return (
<div className="col pe-1 pb-1 inventory-furniture-item-container"> <div className="col pe-1 pb-1 inventory-furniture-item-container">
<div className={ 'position-relative border border-2 rounded inventory-furniture-item cursor-pointer ' + (isActive ? 'active ' : '') + (groupItem.stuffData.isUnique ? 'unique-item ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }> <div className={ 'position-relative border border-2 rounded inventory-furniture-item cursor-pointer ' + (isActive ? 'active ' : '') + (groupItem.stuffData.isUnique ? 'unique-item ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{ groupItem.getUnlockedCount() }</span> {groupItem.getUnlockedCount() > 1 &&
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{groupItem.getUnlockedCount()}</span> }
{ groupItem.stuffData.isUnique && { groupItem.stuffData.isUnique &&
<div className="position-absolute unique-item-counter"> <div className="position-absolute unique-item-counter">
<LimitedEditionStyledNumberView value={ groupItem.stuffData.uniqueNumber } /> <LimitedEditionStyledNumberView value={ groupItem.stuffData.uniqueNumber } />

View File

@ -1,5 +1,4 @@
import { FC } from 'react'; import { FC } from 'react';
import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView'; import { InventoryFurnitureItemView } from '../item/InventoryFurnitureItemView';
import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types'; import { InventoryFurnitureResultsViewProps } from './InventoryFurnitureResultsView.types';
@ -8,13 +7,13 @@ export const InventoryFurnitureResultsView: FC<InventoryFurnitureResultsViewProp
const { groupItems = [] } = props; const { groupItems = [] } = props;
return ( return (
<div className="d-flex flex-grow-1"> <div className="h-100 overflow-hidden">
<ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100"> <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
{ groupItems && (groupItems.length > 0) && groupItems.map((item, index) => { groupItems && (groupItems.length > 0) && groupItems.map((item, index) =>
{ {
return <InventoryFurnitureItemView key={ index } groupItem={ item } /> return <InventoryFurnitureItemView key={ index } groupItem={ item } />
}) } }) }
</ScrollableAreaView> </div>
</div> </div>
); );
} }

View File

@ -82,7 +82,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
return ( return (
<div className="row h-100"> <div className="row h-100">
<div className="d-flex flex-column col-7"> <div className="col-7 d-flex flex-column 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 justify-space-between">

View File

@ -1,5 +1,4 @@
import { FC } from 'react'; import { FC } from 'react';
import { ScrollableAreaView } from '../../../../../layout/scrollable-area/ScrollableAreaView';
import { InventoryPetItemView } from '../item/InventoryPetItemView'; import { InventoryPetItemView } from '../item/InventoryPetItemView';
import { InventoryPetResultsViewProps } from './InventoryPetResultsView.types'; import { InventoryPetResultsViewProps } from './InventoryPetResultsView.types';
@ -8,13 +7,13 @@ export const InventoryPetResultsView: FC<InventoryPetResultsViewProps> = props =
const { petItems = [] } = props; const { petItems = [] } = props;
return ( return (
<div className="d-flex flex-grow-1"> <div className="h-100 overflow-hidden">
<ScrollableAreaView className="row row-cols-5 align-content-start g-0 w-100"> <div className="row row-cols-5 align-content-start g-0 w-100 h-100 overflow-auto">
{ petItems && (petItems.length > 0) && petItems.map((item, index) => { petItems && (petItems.length > 0) && petItems.map((item, index) =>
{ {
return <InventoryPetItemView key={ index } petItem={ item } /> return <InventoryPetItemView key={ index } petItem={ item } />
}) } }) }
</ScrollableAreaView> </div>
</div> </div>
); );
} }

View File

@ -2,8 +2,11 @@
width: 400px; width: 400px;
.content-area { .content-area {
min-height: 400px;
height: 400px; height: 400px;
max-height: 400px; max-height: 700px;
resize: vertical;
overflow:auto;
} }
} }

View File

@ -98,8 +98,10 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
</NitroCardTabsItemView> </NitroCardTabsItemView>
</NitroCardTabsView> </NitroCardTabsView>
<NitroCardContentView> <NitroCardContentView>
<div className="d-flex flex-column h-100">
<NavigatorSearchView sendSearch={ sendSearch } /> <NavigatorSearchView sendSearch={ sendSearch } />
<NavigatorSearchResultSetView /> <NavigatorSearchResultSetView />
</div>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> } </NitroCardView> }
</NavigatorContextProvider> </NavigatorContextProvider>

View File

@ -12,10 +12,12 @@ export const NavigatorSearchResultSetView: FC<NavigatorSearchResultSetViewProps>
return ( return (
<> <>
{ (searchResult.results.map((result, index) => <div className="h-100 overflow-auto">
{ { (searchResult.results.map((result, index) =>
return <NavigatorSearchResultView key={ index } searchResult={ result } /> {
})) } return <NavigatorSearchResultView key={ index } searchResult={ result } />
})) }
</div>
</> </>
); );
} }