From 2fc70c82705dec940e32eac16dcd86b233827df5 Mon Sep 17 00:00:00 2001 From: Layne Date: Sun, 20 Jun 2021 04:32:04 -0400 Subject: [PATCH] catalogue layout changes --- .../catalog/diamond_info_illustration.gif | Bin 0 -> 3883 bytes src/assets/styles/scrollbars.scss | 3 ++- src/views/catalog/CatalogMessageHandler.tsx | 2 ++ .../views/page/layout/CatalogLayout.scss | 1 + .../views/page/layout/GetCatalogLayout.tsx | 11 ++++++--- .../CatalogLayoutInfoLoyaltyView.scss | 15 ++++++++++++ .../CatalogLayoutInfoLoyaltyView.tsx | 16 ++++++++++++ .../CatalogLayoutInfoLoyaltyView.types.ts | 6 +++++ .../page/layout/pets/CatalogLayoutPetView.tsx | 4 +-- .../layout/pets2/CatalogLayoutPets2View.scss | 2 ++ .../layout/pets2/CatalogLayoutPets2View.tsx | 23 ++++++++++++++++++ .../pets2/CatalogLayoutPets2View.types.ts | 6 +++++ .../layout/pets3/CatalogLayoutPets3View.tsx | 19 +++++++-------- .../CatalogLayoutSingleBundleView.tsx | 4 +-- .../spaces-new/CatalogLayoutSpacesView.scss | 4 --- .../spaces-new/CatalogLayoutSpacesView.tsx | 2 +- .../trophies/CatalogLayoutTrophiesView.scss | 4 --- .../trophies/CatalogLayoutTrophiesView.tsx | 2 +- .../vip-buy/CatalogLayoutVipBuyView.tsx | 4 +-- .../page/offers/CatalogPageOffersView.tsx | 14 ++++++++++- 20 files changed, 111 insertions(+), 31 deletions(-) create mode 100644 src/assets/images/catalog/diamond_info_illustration.gif create mode 100644 src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss create mode 100644 src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx create mode 100644 src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts create mode 100644 src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss create mode 100644 src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx create mode 100644 src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts diff --git a/src/assets/images/catalog/diamond_info_illustration.gif b/src/assets/images/catalog/diamond_info_illustration.gif new file mode 100644 index 0000000000000000000000000000000000000000..d082ef4d7bab28c5ba2721c86b3420873483fcb7 GIT binary patch literal 3883 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 = props => { const parser = event.getParser(); + console.log(parser) + dispatchCatalogState({ type: CatalogActions.SET_CATALOG_PAGE_PARSER, payload: { diff --git a/src/views/catalog/views/page/layout/CatalogLayout.scss b/src/views/catalog/views/page/layout/CatalogLayout.scss index 768a4b81..7482c804 100644 --- a/src/views/catalog/views/page/layout/CatalogLayout.scss +++ b/src/views/catalog/views/page/layout/CatalogLayout.scss @@ -6,3 +6,4 @@ @import './spaces-new/CatalogLayoutSpacesView'; @import './trophies/CatalogLayoutTrophiesView'; @import './vip-buy/CatalogLayoutVipBuyView'; +@import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss'; diff --git a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx index 35d9a507..053e00cc 100644 --- a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx +++ b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx @@ -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 ; case 'pets': return ; case 'pets2': - return null; + return ; case 'pets3': return ; case 'vip_buy': @@ -41,7 +44,9 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: case 'spaces_new': return ; case 'trophies': - return ; + return ; + case 'info_loyalty': + return ; case 'bots': case 'default_3x3': default: diff --git a/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss new file mode 100644 index 00000000..8bb939db --- /dev/null +++ b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss @@ -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'); + } +} diff --git a/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx new file mode 100644 index 00000000..bbca55b2 --- /dev/null +++ b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react'; +import { GetCatalogPageText } from '../../../../utils/CatalogUtilities'; +import { CatalogLayoutInfoLoyaltyViewProps } from './CatalogLayoutInfoLoyaltyView.types'; + +export const CatalogLayoutInfoLoyaltyView: FC = props => +{ + const { pageParser = null } = props; + + return ( +
+
+
+
+
+ ); +} diff --git a/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts new file mode 100644 index 00000000..81405a89 --- /dev/null +++ b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts @@ -0,0 +1,6 @@ +import { CatalogLayoutProps } from '../CatalogLayout.types'; + +export interface CatalogLayoutInfoLoyaltyViewProps extends CatalogLayoutProps +{ + +} diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx index 1b44e5c5..88c8f61a 100644 --- a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx +++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx @@ -141,8 +141,8 @@ export const CatalogLayoutPetView: FC = props => return (
-
-
+
+
{ colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => { return
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss new file mode 100644 index 00000000..1b85077d --- /dev/null +++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss @@ -0,0 +1,2 @@ +.nitro-catalog-layout-pets2 { +} diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx new file mode 100644 index 00000000..c2d0a31a --- /dev/null +++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx @@ -0,0 +1,23 @@ +import { FC } from 'react'; +import { GetCatalogPageImage, GetCatalogPageText } from '../../../../utils/CatalogUtilities'; +import { CatalogLayoutPets2ViewProps } from './CatalogLayoutPets2View.types'; + +export const CatalogLayoutPets2View: FC = props => +{ + const { pageParser = null } = props; + + return ( +
+
+
+
+ +
+
{ GetCatalogPageText(pageParser, 1) }
+
+
+ {GetCatalogPageText(pageParser, 3) &&
} +
+
+ ); +} diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts new file mode 100644 index 00000000..28a4c845 --- /dev/null +++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts @@ -0,0 +1,6 @@ +import { CatalogLayoutProps } from '../CatalogLayout.types'; + +export interface CatalogLayoutPets2ViewProps extends CatalogLayoutProps +{ + +} diff --git a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx index 78239150..ddcf3ef1 100644 --- a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx +++ b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx @@ -7,17 +7,16 @@ export const CatalogLayoutPets3View: FC = props => const { pageParser = null } = props; return ( -
-
-
-
-
-
-
-
- +
+
+
+
+ +
+
{ GetCatalogPageText(pageParser, 1) }
-
{ GetCatalogPageText(pageParser, 0) }
+
+ {GetCatalogPageText(pageParser, 3) &&
}
); diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx index 1e0d5058..9fd95fba 100644 --- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx +++ b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx @@ -13,8 +13,8 @@ export const CatalogLayoutSingleBundleView: FC -
-
+
+
{ activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) => { return diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss index 56e84b55..ce1e1c03 100644 --- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss +++ b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss @@ -1,7 +1,3 @@ .nitro-catalog-layout-spaces { - .catalog-offers-container { - height: 284px; - max-height: 284px; - } } diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx index 6666bcac..b4baaffc 100644 --- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx +++ b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx @@ -70,7 +70,7 @@ export const CatalogLayoutSpacesView: FC = props = return (
-
+
{ groupNames.map((name, index) => diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss index b4e804ae..58637ed9 100644 --- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss +++ b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss @@ -5,8 +5,4 @@ resize: none; } - .catalog-offers-container { - height: 192px; - max-height: 192px; - } } diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx index d282dc0f..a1b3acad 100644 --- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx +++ b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx @@ -17,7 +17,7 @@ export const CatalogLayoutTrophiesView: FC = pro return (
-
+
diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx index 1f10b035..8e997774 100644 --- a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx +++ b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx @@ -54,8 +54,8 @@ export const CatalogLayoutVipBuyView: FC = props = return (
-
-
+
+
{ clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) => { return
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx index 9c67deed..89da4fa9 100644 --- a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx +++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx @@ -22,10 +22,22 @@ export const CatalogPageOffersView: FC = props => }, [ offers, dispatchCatalogState ]); return ( -
+
{ offers && (offers.length > 0) && offers.map((offer, index) => { return + })} + { offers && (offers.length > 0) && offers.map((offer, index) => + { + return + })} + { offers && (offers.length > 0) && offers.map((offer, index) => + { + return + })} + { offers && (offers.length > 0) && offers.map((offer, index) => + { + return }) }
);