Catalog updates

src/views/catalog/views/CatalogViews.scss

@@ -1,5 +1,4 @@
 @import './catalog-icon/CatalogIconView';
+@import './gift/CatalogGiftView';
 @import './navigation/CatalogNavigationView';
 @import './page/CatalogPageView';
-@import './search/CatalogSearchView';
-@import './gift/CatalogGiftView';

src/views/catalog/views/gift/CatalogGiftView.scss

@@ -1,4 +1,5 @@
 .nitro-catalog-gift {
+    width: 325px;
     
     .gift-preview {
         width: 80px;

src/views/catalog/views/navigation/CatalogNavigationView.scss

@@ -18,14 +18,4 @@
             padding: 1px;
         }
     }
-
-    // border-color: $grid-border-color !important;
-    // background-color: $grid-bg-color !important;
-
-    // .navigation-container {
-    //     overflow-y: auto;
-    // }
 }
-
-@import './item/CatalogNavigationItemView';
-@import './set/CatalogNavigationSetView';

src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss

@@ -1,18 +0,0 @@
-.catalog-navigation-item-container {
-
-    .catalog-navigation-item {
-        font-size: $font-size-sm;
-        border-radius: $border-radius;
-
-        i.fas {
-            color: $black;
-            font-size: 10px;
-            padding: 1px;
-        }
-
-        &.active {
-            padding: 1px 2px;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}

src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss

@@ -1,14 +0,0 @@
-.catalog-navigation-set-container {
-
-    .catalog-navigation-set-container {
-        padding-left: 5px;
-
-        .catalog-navigation-item-container {
-            padding-right: 0px !important;
-        }
-    }
-
-    > :last-child {
-        padding-bottom: 0px !important;
-    }
-}

src/views/catalog/views/page-details/CatalogPageDetailsView.tsx

@@ -11,9 +11,9 @@ export const CatalogPageDetailsView: FC<CatalogPageDetailsViewProps> = props =>
     const imageUrl = GetCatalogPageImage(pageParser, 1);
 
     return (
-        <div className="d-flex flex-column justify-content-center align-items-center gap-2 w-100 h-100">
+        <div className="d-flex flex-column justify-content-center align-items-center overflow-hidden h-100">
-            { imageUrl && <img alt="" src={ imageUrl } /> }
+            { imageUrl && <img className="" alt="" src={ imageUrl } /> }
-            <div className="d-flex flex-column fs-6 text-center text-black lh-sm" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 0) } } />
+            <div className="d-flex flex-column fs-6 text-center text-black lh-sm overflow-auto" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 0) } } />
         </div>
     );
 }

src/views/catalog/views/page/CatalogPageView.scss

@@ -1,5 +1,2 @@
 @import './layout/CatalogLayout';
-@import './offer/CatalogPageOfferView';
-@import './offers/CatalogPageOffersView';
 @import './purchase/CatalogPurchaseView';
-@import './search-result/CatalogLayoutSearchResultView';

src/views/catalog/views/page/layout/CatalogLayout.scss

@@ -1,5 +1,3 @@
-@import './default/CatalogLayoutDefaultView';
 @import './frontpage4/CatalogLayoutFrontpage4View';
-@import './pets/CatalogLayoutPetView';
-@import './vip-buy/CatalogLayoutVipBuyView';
 @import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';
+@import './vip-buy/CatalogLayoutVipBuyView';

src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx

@@ -17,7 +17,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
             <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
             </div>
-            <div className="position-relative d-flex flex-column col-5">
+            <div className="position-relative d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
                 <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } />
             </div>
         </div>

src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss

@@ -1,10 +0,0 @@
-.nitro-catalog-layout-pets {
-
-    .color-button {
-        position: absolute;
-        left: 5px;
-        bottom: 5px;
-    }
-
-    @import './name-approval/CatalogPetNameApprovalView';
-}

src/views/catalog/views/page/offer/CatalogPageOfferView.scss

@@ -1,33 +0,0 @@
-.catalog-offer-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .catalog-offer-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        background-position: center;
-        background-repeat: no-repeat;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-    
-        .badge {
-            top: 2px;
-            right: 2px;
-            font-size: 8px;
-        }
-
-        .avatar-image {
-            width: 100% !important;
-            height: 100% !important;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-position-y: -32px !important;
-        }
-    }
-}

src/views/catalog/views/page/offers/CatalogPageOffersView.scss

@@ -1,3 +0,0 @@
-.catalog-offers-container {
-    overflow-y: auto;
-}

src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx

@@ -16,12 +16,16 @@ export const CatalogProductPreviewView: FC<CatalogProductPreviewViewProps> = pro
 
     return (
         <>
-            <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+            <div className="position-relative d-flex flex-column overflow-auto h-100">
-            { product.uniqueLimitedItem &&
+                <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
+                { product.uniqueLimitedItem &&
-            <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
+                    <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
-            { children }
+            </div>
-            <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ extra } disabled={ disabled } />
+            <div className="d-flex flex-column gap-2">
+                <div className="flex-grow-1 text-black text-truncate">{ GetOfferName(activeOffer) }</div>
+                { children }
+                <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ extra } disabled={ disabled } />
+            </div>
         </>
     );
 }

src/views/catalog/views/page/purchase/CatalogPurchaseView.scss

@@ -4,5 +4,3 @@
     width: 29px;
     padding: 3px 5px;
 }
-
-@import './purchase-button/CatalogPurchaseButtonView';

src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss

@@ -1,2 +0,0 @@
-@import './offer/CatalogSearchResultOfferView';
-@import './offers/CatalogSearchResultOffersView';

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

@@ -1,3 +0,0 @@
-.catalog-offers-container {
-    overflow-y: auto;
-}