nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-17 01:12:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

catalogue layout changes

Browse Source
This commit is contained in:
Layne 2021-06-20 04:32:04 -04:00
parent 102774187c
commit 2fc70c8270
20 changed files with 111 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/catalog/diamond_info_illustration.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

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

@ -7,12 +7,13 @@
border-radius: $border-radius;
background: rgba($primary,.4);
box-shadow:inset 1px 0 rgba($black,.2);
padding-top:3px;
}
::-webkit-scrollbar-thumb {
border-radius: $border-radius;
background: #DCDCDC;
box-shadow:inset 1px 4px $white, inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
box-shadow:inset 0px 4px $white, inset 0px -4px rgba($black,.2), 0 1px rgba($black,.2);
width: 4px;
}

2
src/views/catalog/CatalogMessageHandler.tsx
View File

@ -31,6 +31,8 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
{
const parser = event.getParser();
console.log(parser)
dispatchCatalogState({
type: CatalogActions.SET_CATALOG_PAGE_PARSER,
payload: {

1
src/views/catalog/views/page/layout/CatalogLayout.scss
View File

@ -6,3 +6,4 @@
@import './spaces-new/CatalogLayoutSpacesView';
@import './trophies/CatalogLayoutTrophiesView';
@import './vip-buy/CatalogLayoutVipBuyView';
@import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';

11
src/views/catalog/views/page/layout/GetCatalogLayout.tsx
View File

@ -1,7 +1,9 @@
import { ICatalogPageParser, RoomPreviewer } from 'nitro-renderer';
import { CatalogLayoutDefaultView } from './default/CatalogLayoutDefaultView';
import { CatalogLayoutFrontpage4View } from './frontpage4/CatalogLayoutFrontpage4View';
import { CatalogLayoutInfoLoyaltyView } from './info-loyalty/CatalogLayoutInfoLoyaltyView';
import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
import { CatalogLayoutPets2View } from './pets2/CatalogLayoutPets2View';
import { CatalogLayoutPets3View } from './pets3/CatalogLayoutPets3View';
import { CatalogLayoutSingleBundleView } from './single-bundle/CatalogLayoutSingleBundleView';
import { CatalogLayoutSpacesView } from './spaces-new/CatalogLayoutSpacesView';
@ -10,16 +12,17 @@ import { CatalogLayoutVipBuyView } from './vip-buy/CatalogLayoutVipBuyView';
export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: RoomPreviewer): JSX.Element
{
switch(pageParser.layoutCode)
{
case 'frontpage_featured':
return null;
return null
case 'frontpage4':
return <CatalogLayoutFrontpage4View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'pets':
return <CatalogLayoutPetView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'pets2':
return null;
return <CatalogLayoutPets2View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'pets3':
return <CatalogLayoutPets3View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'vip_buy':
@ -41,7 +44,9 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer:
case 'spaces_new':
return <CatalogLayoutSpacesView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'trophies':
return <CatalogLayoutTrophiesView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
return <CatalogLayoutTrophiesView roomPreviewer={roomPreviewer} pageParser={pageParser} />;
case 'info_loyalty':
return <CatalogLayoutInfoLoyaltyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'bots':
case 'default_3x3':
default:

15
src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss Normal file
View File

@ -0,0 +1,15 @@
.nitro-catalog-layout-info-loyalty {
.info-loyalty-content {
background-repeat: no-repeat;
background-position: top right;
background-image: url('../../../../../../assets/images/catalog/diamond_info_illustration.gif');
padding-right:123px;
}
.info-image {
width: 123px;
height:350px;
background-image: url('../../../../../../assets/images/catalog/diamond_info_illustration.gif');
}
}

16
src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx Normal file
View File

@ -0,0 +1,16 @@
import { FC } from 'react';
import { GetCatalogPageText } from '../../../../utils/CatalogUtilities';
import { CatalogLayoutInfoLoyaltyViewProps } from './CatalogLayoutInfoLoyaltyView.types';
export const CatalogLayoutInfoLoyaltyView: FC<CatalogLayoutInfoLoyaltyViewProps> = props =>
{
const { pageParser = null } = props;
return (
<div className="h-100 nitro-catalog-layout-info-loyalty text-black d-flex flex-row">
<div className="overflow-auto h-100 d-flex flex-column info-loyalty-content">
<div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 0) } } />
</div>
</div>
);
}

6
src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts Normal file
View File

@ -0,0 +1,6 @@
import { CatalogLayoutProps } from '../CatalogLayout.types';
export interface CatalogLayoutInfoLoyaltyViewProps extends CatalogLayoutProps
{
}

4
src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
View File

@ -141,8 +141,8 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
return (
<div className="row h-100 nitro-catalog-layout-pets">
<div className="col-7">
<div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container">
<div className="col-7 h-100">
<div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 h-100 overflow-auto catalog-offers-container single-bundle-items-container">
{ colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
{
return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">

2
src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss Normal file
View File

@ -0,0 +1,2 @@
.nitro-catalog-layout-pets2 {
}

23
src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx Normal file
View File

@ -0,0 +1,23 @@
import { FC } from 'react';
import { GetCatalogPageImage, GetCatalogPageText } from '../../../../utils/CatalogUtilities';
import { CatalogLayoutPets2ViewProps } from './CatalogLayoutPets2View.types';
export const CatalogLayoutPets2View: FC<CatalogLayoutPets2ViewProps> = props =>
{
const { pageParser = null } = props;
return (
<div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
<div className="overflow-auto h-100 d-flex flex-column">
<div className="d-flex flex-row">
<div className="d-block mb-1 me-1">
<img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
</div>
<h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
</div>
<div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
{GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
</div>
</div>
);
}

6
src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts Normal file
View File

@ -0,0 +1,6 @@
import { CatalogLayoutProps } from '../CatalogLayout.types';
export interface CatalogLayoutPets2ViewProps extends CatalogLayoutProps
{
}

19
src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
View File

@ -7,17 +7,16 @@ export const CatalogLayoutPets3View: FC<CatalogLayoutPets3ViewProps> = props =>
const { pageParser = null } = props;
return (
<div className="row h-100 nitro-catalog-layout-pets3">
<div className="col-7 text-black">
<div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 1) } } />
<div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
<div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 3) } } />
</div>
<div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
<div className="d-block mb-2">
<img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
<div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
<div className="overflow-auto h-100 d-flex flex-column">
<div className="d-flex flex-row">
<div className="d-block mb-1 me-1">
<img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
</div>
<h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
</div>
<div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
<div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
{GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
</div>
</div>
);

4
src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
View File

@ -13,8 +13,8 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
return (
<div className="row h-100 nitro-catalog-layout-single-bundle">
<div className="col-7">
<div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container">
<div className="col-7 h-100">
<div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container h-100 overflow-auto">
{ activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) =>
{
return <CatalogProductView key={ index } isActive={ false } product={ product } />

4
src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
View File

@ -1,7 +1,3 @@
.nitro-catalog-layout-spaces {
.catalog-offers-container {
height: 284px;
max-height: 284px;
}
}

2
src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
View File

@ -70,7 +70,7 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
return (
<div className="row h-100 nitro-catalog-layout-spaces">
<div className="col-7">
<div className="col-7 h-100 d-flex flex-column">
<div className="d-flex">
<div className="btn-group mx-auto mb-1 w-100">
{ groupNames.map((name, index) =>

4
src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
View File

@ -5,8 +5,4 @@
resize: none;
}
.catalog-offers-container {
height: 192px;
max-height: 192px;
}
}

2
src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
View File

@ -17,7 +17,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutTrophiesViewProps> = pro
return (
<div className="row h-100 nitro-catalog-layout-trophies">
<div className="d-flex flex-column col-7">
<div className="d-flex flex-column col-7 h-100">
<CatalogPageOffersView offers={ pageParser.offers } />
<div className="d-flex mt-2">
<textarea className="form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) }></textarea>

4
src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
View File

@ -54,8 +54,8 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
return (
<div className="row h-100 nitro-catalog-layout-vip-buy">
<div className="col-7">
<div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container">
<div className="col-7 h-100">
<div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
{ clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
{
return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">

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

@ -22,10 +22,22 @@ 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 h-100">
<div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
{ offers && (offers.length > 0) && offers.map((offer, index) =>
{
return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
})}
{ offers && (offers.length > 0) && offers.map((offer, index) =>
{
return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
})}
{ offers && (offers.length > 0) && offers.map((offer, index) =>
{
return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
})}
{ offers && (offers.length > 0) && offers.map((offer, index) =>
{
return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
}) }
</div>
);