Merge pull request #74 from cesmii/feature/responsive-display-enhance…

…ments

refine marketplace image display on smaller devices.

api/CESMII.Marketplace.API/Controllers/MarketplaceController.cs

@@ -77,7 +77,7 @@ public async Task<IActionResult> Home()
             {
                 FeaturedItems = _dal.Where(x => x.IsFeatured && x.IsActive, null, null, false, false).Data,
                 //trim down to 4 most recent 
-                NewItems = _dal.Where(x => x.IsActive, null, 3, false, false,
+                NewItems = _dal.Where(x => x.IsActive, null, 4, false, false,
                 new OrderByExpression<MarketplaceItem>() { Expression = x => x.PublishDate, IsDescending = true }).Data
             };
             //calculate most popular based on analytics counts
@@ -120,8 +120,8 @@ public IActionResult GetRecentItems()
             var util = new MarketplaceUtil(_dal, _dalCloudLib, _dalAnalytics, _dalLookup);
             predicates.Add(util.BuildStatusFilterPredicate());
 
-            //trim down to 3 most recent 
-            var result = _dal.Where(predicates, null, 3, false, false,
+            //trim down to 4 most recent 
+            var result = _dal.Where(predicates, null, 4, false, false,
                 new OrderByExpression<MarketplaceItem>() { Expression = x => x.PublishDate, IsDescending = true }).Data;
             return Ok(result);
         }

api/CESMII.Marketplace.API/appsettings.json

@@ -82,20 +82,23 @@
       "Code": "sm-app",
       //"DefaultImageIdSquare": "61dc415dcf40be2136386abb",
       "DefaultImageIdPortrait": "61dcdbf6184f422afc43558b",
+      "DefaultImageIdBanner": "61dcda9f184f422afc435587",
       "DefaultImageIdLandscape": "61dcda9f184f422afc435587"
     },
     "SmHardware": {
       "TypeId": "629763866827ef2028a17d61",
       "Code": "sm-hardware",
       //"DefaultImageIdSquare": "61dc415dcf40be2136386abb",
       "DefaultImageIdPortrait": "61dcdbf6184f422afc43558b",
+      "DefaultImageIdBanner": "61dcda9f184f422afc435587",
       "DefaultImageIdLandscape": "61dcda9f184f422afc435587"
     },
     "SmDatasource": {
       "TypeId": "629763866827ef2028a17d62",
       "Code": "sm-datasource",
       //"DefaultImageIdSquare": "61dc415dcf40be2136386abb",
       "DefaultImageIdPortrait": "61dcdbf6184f422afc43558b",
+      "DefaultImageIdBanner": "61dcda9f184f422afc435587",
       "DefaultImageIdLandscape": "61dcda9f184f422afc435587"
     },
     "SmProfile": {
@@ -104,6 +107,7 @@
       //"DefaultImageIdSquare": "629613b2d6015ee773e6a3c9",
       //note - using landscape version of image because it works better in display.
       "DefaultImageIdPortrait": "6324a95ffa4ba93106a88d45",
+      "DefaultImageIdBanner": "64d3f766d35e41faa6dcd295",
       "DefaultImageIdLandscape": "6324a95ffa4ba93106a88d46"
     },
     "EnableCloudLibSearch": true

api/CESMII.Marketplace.Common/Models/MarketplaceConfig.cs

@@ -17,6 +17,7 @@ public class MarketplaceItemConfig
         public string Code { get; set; }
         //public string DefaultImageIdSquare { get; set; }
         public string DefaultImageIdPortrait { get; set; }
+        public string DefaultImageIdBanner { get; set; }
         public string DefaultImageIdLandscape { get; set; }
     }
 }

api/CESMII.Marketplace.DAL/AdminCloudLibDAL.cs

@@ -69,7 +69,8 @@ public AdminCloudLibDAL(ICloudLibWrapper cloudLib,
             //get default images
             _images = dalImages.Where(
                 x => x.ID.Equals(_config.DefaultImageIdLandscape) ||
-                x.ID.Equals(_config.DefaultImageIdPortrait)
+                x.ID.Equals(_config.DefaultImageIdPortrait) ||
+                x.ID.Equals(_config.DefaultImageIdBanner)
                 //|| x.ID.Equals(_config.DefaultImageIdSquare)
                 , null, null, false, false).Data;
 
@@ -290,6 +291,7 @@ protected AdminMarketplaceItemModelWithCursor MapToModelNodesetResult(GraphQlNod
                     Version = entity.Node.Version,
                     IsFeatured = false,
                     ImagePortrait = _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdPortrait)),
+                    ImageBanner = _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdBanner)),
                     ImageLandscape = _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdLandscape))
                 };
             }
@@ -346,6 +348,9 @@ protected AdminMarketplaceItemModelWithCursor MapToModelNamespace(UANameSpace en
                     ImagePortrait = entity.IconUrl == null ?
                         _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdPortrait)) :
                         new ImageItemModel() { Src = entity.IconUrl.ToString() },
+                    ImageBanner = entity.IconUrl == null ?
+                        _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdBanner)) :
+                        new ImageItemModel() { Src = entity.IconUrl.ToString() },
                     ImageLandscape = entity.IconUrl == null ?
                         _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdLandscape)) :
                         new ImageItemModel() { Src = entity.IconUrl.ToString() },

api/CESMII.Marketplace.DAL/AdminMarketplaceDAL.cs

@@ -258,6 +258,7 @@ protected override AdminMarketplaceItemModel MapToModel(MarketplaceItem entity,
                     Publisher = MapToModelPublisher(entity.PublisherId, _publishersAll),
                     IsActive = entity.IsActive,
                     ImagePortrait = entity.ImagePortraitId == null ? null : MapToModelImageSimple(x => x.ID.Equals(entity.ImagePortraitId.ToString()), _imagesAll),
+                    ImageBanner = entity.ImageBannerId == null ? null : MapToModelImageSimple(z => z.ID.Equals(entity.ImageBannerId.ToString()), _imagesAll),
                     ImageLandscape = entity.ImageLandscapeId == null ? null : MapToModelImageSimple(x => x.ID.Equals(entity.ImageLandscapeId.ToString()), _imagesAll),
                     ccName1 = entity._ccName1,
                     ccName2 = entity._ccName2,
@@ -403,6 +404,9 @@ protected override void MapToEntity(ref MarketplaceItem entity, AdminMarketplace
             entity.ImagePortraitId = model.ImagePortrait == null ?
                 MongoDB.Bson.ObjectId.Parse(Common.Constants.BSON_OBJECTID_EMPTY) :
                 MongoDB.Bson.ObjectId.Parse(model.ImagePortrait.ID);
+            entity.ImageBannerId = model.ImageBanner == null ?
+                MongoDB.Bson.ObjectId.Parse(Common.Constants.BSON_OBJECTID_EMPTY) :
+                MongoDB.Bson.ObjectId.Parse(model.ImageBanner.ID);
             entity.ImageLandscapeId = model.ImageLandscape == null ?
                 MongoDB.Bson.ObjectId.Parse(Common.Constants.BSON_OBJECTID_EMPTY) :
                 MongoDB.Bson.ObjectId.Parse(model.ImageLandscape.ID);

api/CESMII.Marketplace.DAL/CloudLibDAL.cs

@@ -70,7 +70,8 @@ public CloudLibDAL(ICloudLibWrapper cloudLib,
             //get default images
             _images = dalImages.Where(
                 x => x.ID.Equals(_config.DefaultImageIdLandscape) ||
-                x.ID.Equals(_config.DefaultImageIdPortrait)
+                x.ID.Equals(_config.DefaultImageIdPortrait) ||
+                x.ID.Equals(_config.DefaultImageIdBanner)
                 //|| x.ID.Equals(_config.DefaultImageIdSquare)
                 , null, null, false, false).Data;
 
@@ -237,7 +238,7 @@ protected MarketplaceItemModelWithCursor MapToModelNodesetResult(GraphQlNodeAndC
                     Version = entity.Node.Version,
                     IsFeatured = false,
                     ImagePortrait = _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdPortrait)),
-                    //ImageSquare = _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdSquare)),
+                    ImageBanner = _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdBanner)),
                     ImageLandscape = _images.FirstOrDefault(x => x.ID.Equals(_config.DefaultImageIdLandscape)),
                     Cursor = entity.Cursor,
 

api/CESMII.Marketplace.DAL/MarketplaceDAL.cs

@@ -265,7 +265,7 @@ protected override MarketplaceItemModel MapToModel(MarketplaceItem entity, bool
                     Publisher = MapToModelPublisher(entity.PublisherId, _publishersAll),
                     IsActive = entity.IsActive,
                     ImagePortrait = entity.ImagePortraitId == null ? null : MapToModelImageSimple(x => x.ID.Equals(entity.ImagePortraitId.ToString()), _imagesAll),
-                    //ImageSquare = entity.ImageSquareId == null ? null : MapToModelImageSimple(x => x.ID.Equals(entity.ImageSquareId.ToString()), _imagesAll),
+                    ImageBanner = entity.ImageBannerId == null ? null : MapToModelImageSimple(x => x.ID.Equals(entity.ImageBannerId.ToString()), _imagesAll),
                     ImageLandscape = entity.ImageLandscapeId == null ? null : MapToModelImageSimple(x => x.ID.Equals(entity.ImageLandscapeId.ToString()), _imagesAll)
                 };
                 //get additional data under certain scenarios
@@ -351,6 +351,7 @@ protected async Task<List<MarketplaceItemRelatedModel>> MapToModelRelatedItems(L
                             _lookupItemsAll.Where(z => z.LookupType.EnumValue.Equals(LookupTypeEnum.SmItemType)).ToList()),
                     Version = x.Version,
                     ImagePortrait = x.ImagePortraitId == null ? null : MapToModelImageSimple(z => z.ID.Equals(x.ImagePortraitId.ToString()), _imagesAll),
+                    ImageBanner = x.ImageBannerId == null ? null : MapToModelImageSimple(z => z.ID.Equals(x.ImageBannerId.ToString()), _imagesAll),
                     ImageLandscape = x.ImageLandscapeId == null ? null : MapToModelImageSimple(z => z.ID.Equals(x.ImageLandscapeId.ToString()), _imagesAll),
                     //assumes only one related item per type
                     RelatedType = MapToModelLookupItem(items.Find(z => z.MarketplaceItemId.ToString().Equals(x.ID)).RelatedTypeId,
@@ -384,6 +385,7 @@ protected List<MarketplaceItemRelatedModel> MapToModelRelatedProfiles(List<Relat
                     Type = x.Type,
                     Version = x.Version,
                     ImagePortrait = x.ImagePortrait,
+                    ImageBanner = x.ImageBanner,
                     ImageLandscape = x.ImageLandscape,
                     //assumes only one related item per type
                     RelatedType = MapToModelLookupItem(items.Find(z => z.ProfileId.ToString().Equals(x.ID)).RelatedTypeId,

api/CESMII.Marketplace.DAL/models/MarketplaceItemModel.cs

@@ -101,8 +101,7 @@ Publish Date
 
         public ImageItemSimpleModel ImagePortrait { get; set; }
 
-        [Obsolete("Retire ImageSquare")]
-        public ImageItemSimpleModel ImageSquare { get; set; }
+        public ImageItemSimpleModel ImageBanner { get; set; }
         public ImageItemSimpleModel ImageLandscape { get; set; }
 
         public virtual List<JobDefinitionSimpleModel> JobDefinitions { get; set; }
@@ -196,6 +195,7 @@ public class MarketplaceItemRelatedModel //: MarketplaceItemSimpleModel
         public virtual LookupItemModel Type { get; set; }
 
         public ImageItemSimpleModel ImagePortrait { get; set; }
+        public ImageItemSimpleModel ImageBanner { get; set; }
 
         public ImageItemSimpleModel ImageLandscape { get; set; }
 

api/CESMII.Marketplace.Data/Entities/MarketplaceItem.cs

@@ -101,7 +101,7 @@ Publish Date
         public DateTime? PublishDate { get; set; }
 
         public BsonObjectId ImagePortraitId { get; set; }
-        public BsonObjectId ImageSquareId { get; set; }
+        public BsonObjectId ImageBannerId { get; set; }
         public BsonObjectId ImageLandscapeId { get; set; }
 
         public string _ccName1;

frontend/src/App.scss

@@ -752,8 +752,39 @@ select.minimal:focus {
     background-color: color("hlBlue");
 }
 
+//on small displays
+//convert an image displayed to left of content to now display atop content. Give it some arbitrary height.
+.transpose-image-horizontal-sm {
+    @include media-breakpoint-down(sm) {
+        min-height: 150px;
+
+        &.contain-sm {
+            .overlay-icon {
+                background-size: contain !important;
+            }
+        }
+
+        .overlay-icon {
+            min-height: inherit;
+        }
+    }
+}
 
+.transpose-image-horizontal-md {
+    @include media-breakpoint-down(md) {
+        min-height: 150px;
 
+        &.contain-md {
+            .overlay-icon {
+                background-size: contain !important;
+            }
+        }
+
+        .overlay-icon {
+            min-height: inherit;
+        }
+    }
+}
 
 /// IMPORT PARTIALS
 @import "./components/styles/HexOpacityValues";

frontend/src/services/MarketplaceService.js

@@ -1,4 +1,6 @@
-import { generateLogMessageString, getUserPreferences, setUserPreferences } from '../utils/UtilityService';
+import { useHistory } from 'react-router-dom'
+
+import { generateLogMessageString, getImageUrl, getUserPreferences, setUserPreferences } from '../utils/UtilityService';
 import MarketplaceTileList from '../views/shared/MarketplaceTileList';
 
 const CLASS_NAME = "MarketplaceService";
@@ -131,7 +133,7 @@ export function MarketplaceRelatedItems(props) {
                         <div className="card-body">
                             <div className="row" >
                                 <div className="col-sm-12">
-                                    <MarketplaceTileList items={itm.items} layout="banner-abbreviated" colCount={4} />
+                                    <MarketplaceTileList items={itm.items} layout="banner-abbreviated" colCssClass="col-lg-3 col-md-6" />
                                 </div>
                             </div>
                         </div>
@@ -154,4 +156,68 @@ export function MarketplaceRelatedItems(props) {
         </div>
     );
 
-}
+}
+
+
+//-------------------------------------------------------------------
+// Web part - Render Image BG for featured panel, marketplace item row, marketplace item header
+//-------------------------------------------------------------------
+export function RenderImageBg (props) {
+
+    const history = useHistory();
+
+    //-------------------------------------------------------------------
+    // Region: Event Handling of child component events
+    //-------------------------------------------------------------------
+    const navigateToMarketplaceItem = (e) => {
+        history.push({
+            pathname: `/library/${props.item.name}`,
+            state: { id: `${props.item.name}` }
+        });
+    };
+
+    /*
+    var imgSrc = props.item.imagePortrait == null ? "" : getImageUrl(props.item.imagePortrait);
+    return (
+        <div className="image-bg" >
+            <div className="clickable d-flex" onClick={navigateToMarketplaceItem} >
+                <img className="z" src={imgSrc} alt={`${props.item.name}-${getImageAlt(props.item.imagePortrait)}`} />
+            </div>
+        </div>
+    );
+    */
+
+    /*
+        Example of displaying diff images based on screen size.
+        <div className="d-flex align-items-center mb-2" >
+            <picture>
+                <source srcset={getImageUrl(props.item.imageLandscape)} media="(max-width: 767px)" />
+                <img src={getImageUrl(props.item.imagePortrait)} alt="" />
+            </picture>
+        </div>
+     */
+    const bgImageStyleDefault = props.defaultImage == null ? {} :
+        {
+            backgroundImage: `url(${getImageUrl(props.defaultImage)})`
+        };
+
+    const bgImageStyleResponsive = props.responsiveImage == null ? {} :
+        {
+            backgroundImage: `url(${getImageUrl(props.responsiveImage)})`
+        };
+
+    //backward compatability - banner null, transpose the portrait and show as a banner
+    //if banner not null, then show both images and hide visiblity based on screen size
+    return (
+        <>
+            <div className={`image-bg ${props.responsiveImage != null ? 'd-none d-sm-block' : 'transpose-image-horizontal-sm'}`} >
+                <div className="overlay-icon cover clickable" style={bgImageStyleDefault} onClick={navigateToMarketplaceItem} >&nbsp;</div>
+            </div>
+            {props.responsiveImage != null &&
+                <div className="image-bg d-block d-sm-none transpose-image-horizontal-sm" >
+                    <div className="overlay-icon cover clickable" style={bgImageStyleResponsive} onClick={navigateToMarketplaceItem} >&nbsp;</div>
+                </div>
+            }
+        </>
+    )
+};

frontend/src/views/Home.js

@@ -342,7 +342,7 @@ function Home() {
                                 </div>
                             )
                             :
-                            <MarketplaceTileList items={_dataRowsNew} layout="banner" colCount={3} />
+                            <MarketplaceTileList items={_dataRowsNew} layout="banner" colCssClass="col-lg-6" />
                         }
                     </div>
                 </div>
@@ -367,7 +367,7 @@ function Home() {
                                 </div>
                             )
                             :
-                            <MarketplaceTileList items={_dataRowsPopular} layout="thumbnail" colCount={2} />
+                            <MarketplaceTileList items={_dataRowsPopular} layout="thumbnail" colCssClass="col-lg-6" />
                         }
                     </div>
                 </div>
@@ -419,10 +419,10 @@ function Home() {
             </Helmet>
             {renderHeaderRow()}
             <div className="row" >
-                <div className="col-sm-3 order-2 order-sm-1" >
+                <div className="col-md-3 order-2 order-md-1" >
                     <MarketplaceFilter searchCriteria={_searchCriteriaLocal} selectMode="linkable" onItemClick={filterOnItemClick} showLimited={true} />
                 </div>
-                <div className="col-sm-9 mb-4 order-1 order-sm-2" >
+                <div className="col-md-9 mb-4 order-1 order-md-2" >
                     {renderFeatured()}
                     {renderNew()}
                     {renderPopular()}

frontend/src/views/MarketplaceEntity.js

@@ -215,7 +215,7 @@ function MarketplaceEntity() {
     //
     const renderSubTitle = () => {
         return (
-            <span onClick={onBack} className="px-2 btn btn-text-solo align-items-center auto-width ml-auto justify-content-end d-flex clickable hover" ><i className="material-icons">chevron_left</i>Back</span>
+            <span onClick={onBack} className="px-2 btn btn-text-solo align-items-center auto-width ml-md-auto justify-content-end d-flex clickable hover" ><i className="material-icons">chevron_left</i>Back</span>
         );
     }
 
@@ -284,10 +284,10 @@ function MarketplaceEntity() {
                     {renderMarketplaceBreadcrumbs()}
                     {renderHeaderRow()}
                     <div className="row" >
-                    <div className="col-sm-3 order-2 order-sm-1" >
+                    <div className="col-md-3 order-2 order-md-1" >
                         <MarketplaceEntitySidebar item={item} className="light" />
                         </div>
-                    <div className="col-sm-9 mb-4 order-1 order-sm-2" >
+                    <div className="col-md-9 mb-4 order-1 order-md-2" >
                             {(!loadingProps.isLoading && !isLoading) &&
                                 <div className="marketplace-entity">
                                     {renderItemRow()}