nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

scroll/resizable

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/styles/scrollbars.scss
View File

@ -1,20 +1,26 @@
::-webkit-scrollbar {
width: 5px;
width: 7px;
height: 5px;
}
::-webkit-scrollbar-track {
border-radius: $border-radius;
background: rgba(transparent, 0.1);
background: rgba($primary,.4);
box-shadow:inset 1px 0 rgba($black,.2);
}
::-webkit-scrollbar-thumb {
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;
border-left: 1px solid transparent;
}
::-webkit-scrollbar-thumb:hover {
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;
}

7
src/views/catalog/CatalogView.scss
View File

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

4
src/views/catalog/CatalogView.tsx
View File

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

2
src/views/catalog/views/navigation/CatalogNavigationView.scss
View File

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

4
src/views/catalog/views/navigation/CatalogNavigationView.tsx
View File

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

2
src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
View File

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

1
src/views/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.scss
View File

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

2
src/views/catalog/views/page/offers/CatalogPageOffersView.scss
View File

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

2
src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
View File

@ -22,7 +22,7 @@ export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
}, [ offers, dispatchCatalogState ]);
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) =>
{
return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />

2
src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
View File

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

2
src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
View File

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

2
src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
View File

@ -19,7 +19,7 @@ export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProp
}, [ offers ]);
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) =>
{
const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id));

7
src/views/inventory/InventoryView.scss
View File

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

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

@ -76,27 +76,31 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
return (
<>
<div className="row h-100">
<div className="d-flex flex-column col-7">
<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>
{ 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 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>
<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 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-' + (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>
</>
);

4
src/views/inventory/views/badge/results/InventoryBadgeResultsView.scss
View File

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

9
src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
View File

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

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

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

9
src/views/inventory/views/bot/results/InventoryBotResultsView.tsx
View File

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

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

@ -117,7 +117,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
return (
<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 } />
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
</div>

3
src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
View File

@ -41,7 +41,8 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
return (
<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 }>
<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 &&
<div className="position-absolute unique-item-counter">
<LimitedEditionStyledNumberView value={ groupItem.stuffData.uniqueNumber } />

9
src/views/inventory/views/furniture/results/InventoryFurnitureResultsView.tsx
View File

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

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

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

9
src/views/inventory/views/pet/results/InventoryPetResultsView.tsx
View File

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

5
src/views/navigator/NavigatorView.scss
View File

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

2
src/views/navigator/NavigatorView.tsx
View File

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

10
src/views/navigator/views/search-result-set/NavigatorSearchResultSetView.tsx
View File

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