From aef3381bfbaad287e0a3f23ede21be3dda751983 Mon Sep 17 00:00:00 2001 From: scoxen1 Date: Thu, 10 Aug 2023 09:45:29 -0400 Subject: [PATCH] refine marketplace image display on smaller devices. --- .../Controllers/MarketplaceController.cs | 6 +- api/CESMII.Marketplace.API/appsettings.json | 4 ++ .../Models/MarketplaceConfig.cs | 1 + .../AdminCloudLibDAL.cs | 7 +- .../AdminMarketplaceDAL.cs | 4 ++ api/CESMII.Marketplace.DAL/CloudLibDAL.cs | 5 +- api/CESMII.Marketplace.DAL/MarketplaceDAL.cs | 4 +- .../models/MarketplaceItemModel.cs | 4 +- .../Entities/MarketplaceItem.cs | 2 +- frontend/src/App.scss | 31 ++++++++ frontend/src/services/MarketplaceService.js | 72 ++++++++++++++++++- frontend/src/views/Home.js | 8 +-- frontend/src/views/MarketplaceEntity.js | 6 +- frontend/src/views/MarketplaceList.js | 12 ++-- frontend/src/views/PublisherEntity.js | 2 +- .../src/views/admin/AdminMarketplaceEntity.js | 16 ++--- .../shared/MarketplaceItemEntityHeader.js | 27 ++----- .../src/views/shared/MarketplaceItemRow.js | 34 ++------- .../src/views/shared/MarketplaceTileList.js | 15 ++-- frontend/src/views/shared/ProfileItemRow.js | 21 ++---- 20 files changed, 173 insertions(+), 108 deletions(-) diff --git a/api/CESMII.Marketplace.API/Controllers/MarketplaceController.cs b/api/CESMII.Marketplace.API/Controllers/MarketplaceController.cs index 9eb3786a..d87a127c 100644 --- a/api/CESMII.Marketplace.API/Controllers/MarketplaceController.cs +++ b/api/CESMII.Marketplace.API/Controllers/MarketplaceController.cs @@ -77,7 +77,7 @@ public async Task 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() { 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() { Expression = x => x.PublishDate, IsDescending = true }).Data; return Ok(result); } diff --git a/api/CESMII.Marketplace.API/appsettings.json b/api/CESMII.Marketplace.API/appsettings.json index af8e428c..1d4c3396 100644 --- a/api/CESMII.Marketplace.API/appsettings.json +++ b/api/CESMII.Marketplace.API/appsettings.json @@ -82,6 +82,7 @@ "Code": "sm-app", //"DefaultImageIdSquare": "61dc415dcf40be2136386abb", "DefaultImageIdPortrait": "61dcdbf6184f422afc43558b", + "DefaultImageIdBanner": "61dcda9f184f422afc435587", "DefaultImageIdLandscape": "61dcda9f184f422afc435587" }, "SmHardware": { @@ -89,6 +90,7 @@ "Code": "sm-hardware", //"DefaultImageIdSquare": "61dc415dcf40be2136386abb", "DefaultImageIdPortrait": "61dcdbf6184f422afc43558b", + "DefaultImageIdBanner": "61dcda9f184f422afc435587", "DefaultImageIdLandscape": "61dcda9f184f422afc435587" }, "SmDatasource": { @@ -96,6 +98,7 @@ "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 diff --git a/api/CESMII.Marketplace.Common/Models/MarketplaceConfig.cs b/api/CESMII.Marketplace.Common/Models/MarketplaceConfig.cs index 0204eddd..4a1365f2 100644 --- a/api/CESMII.Marketplace.Common/Models/MarketplaceConfig.cs +++ b/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; } } } diff --git a/api/CESMII.Marketplace.DAL/AdminCloudLibDAL.cs b/api/CESMII.Marketplace.DAL/AdminCloudLibDAL.cs index 545e73cb..3718e13f 100644 --- a/api/CESMII.Marketplace.DAL/AdminCloudLibDAL.cs +++ b/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() }, diff --git a/api/CESMII.Marketplace.DAL/AdminMarketplaceDAL.cs b/api/CESMII.Marketplace.DAL/AdminMarketplaceDAL.cs index adc6f045..4cb9c796 100644 --- a/api/CESMII.Marketplace.DAL/AdminMarketplaceDAL.cs +++ b/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); diff --git a/api/CESMII.Marketplace.DAL/CloudLibDAL.cs b/api/CESMII.Marketplace.DAL/CloudLibDAL.cs index 328a8a13..557e0a07 100644 --- a/api/CESMII.Marketplace.DAL/CloudLibDAL.cs +++ b/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, diff --git a/api/CESMII.Marketplace.DAL/MarketplaceDAL.cs b/api/CESMII.Marketplace.DAL/MarketplaceDAL.cs index 60c2f524..faac8826 100644 --- a/api/CESMII.Marketplace.DAL/MarketplaceDAL.cs +++ b/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> 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 MapToModelRelatedProfiles(List z.ProfileId.ToString().Equals(x.ID)).RelatedTypeId, diff --git a/api/CESMII.Marketplace.DAL/models/MarketplaceItemModel.cs b/api/CESMII.Marketplace.DAL/models/MarketplaceItemModel.cs index 2b517706..53626a6e 100644 --- a/api/CESMII.Marketplace.DAL/models/MarketplaceItemModel.cs +++ b/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 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; } diff --git a/api/CESMII.Marketplace.Data/Entities/MarketplaceItem.cs b/api/CESMII.Marketplace.Data/Entities/MarketplaceItem.cs index 638e5beb..4bef484f 100644 --- a/api/CESMII.Marketplace.Data/Entities/MarketplaceItem.cs +++ b/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; diff --git a/frontend/src/App.scss b/frontend/src/App.scss index c1d7298d..f77d9153 100644 --- a/frontend/src/App.scss +++ b/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"; diff --git a/frontend/src/services/MarketplaceService.js b/frontend/src/services/MarketplaceService.js index 85f696ff..af3e6770 100644 --- a/frontend/src/services/MarketplaceService.js +++ b/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) {
- +
@@ -154,4 +156,68 @@ export function MarketplaceRelatedItems(props) { ); -} \ No newline at end of file +} + + +//------------------------------------------------------------------- +// 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 ( +
+
+ {`${props.item.name}-${getImageAlt(props.item.imagePortrait)}`} +
+
+ ); + */ + + /* + Example of displaying diff images based on screen size. +
+ + + + +
+ */ + 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 ( + <> +
+
 
+
+ {props.responsiveImage != null && +
+
 
+
+ } + + ) +}; diff --git a/frontend/src/views/Home.js b/frontend/src/views/Home.js index d43999e1..2d57669b 100644 --- a/frontend/src/views/Home.js +++ b/frontend/src/views/Home.js @@ -342,7 +342,7 @@ function Home() { ) : - + } @@ -367,7 +367,7 @@ function Home() { ) : - + } @@ -419,10 +419,10 @@ function Home() { {renderHeaderRow()}
-
+
-
+
{renderFeatured()} {renderNew()} {renderPopular()} diff --git a/frontend/src/views/MarketplaceEntity.js b/frontend/src/views/MarketplaceEntity.js index 4004f928..a2b60080 100644 --- a/frontend/src/views/MarketplaceEntity.js +++ b/frontend/src/views/MarketplaceEntity.js @@ -215,7 +215,7 @@ function MarketplaceEntity() { // const renderSubTitle = () => { return ( - chevron_leftBack + chevron_leftBack ); } @@ -284,10 +284,10 @@ function MarketplaceEntity() { {renderMarketplaceBreadcrumbs()} {renderHeaderRow()}
-
+
-
+
{(!loadingProps.isLoading && !isLoading) &&
{renderItemRow()} diff --git a/frontend/src/views/MarketplaceList.js b/frontend/src/views/MarketplaceList.js index 7ff9f684..5fdccc24 100644 --- a/frontend/src/views/MarketplaceList.js +++ b/frontend/src/views/MarketplaceList.js @@ -393,8 +393,8 @@ function MarketplaceList() { {(_dataRows.itemCount != null && _dataRows.itemCount > 0) && {_dataRows.itemCount}{_dataRows.itemCount === 1 ? ' item' : ' items'} } - {`${_filterToggle ? "Hide" : "Show"}`}filter_alt - Clear Allupdate + {`${_filterToggle ? "Hide" : "Show"}`}filter_alt + Clear Allupdate ); } @@ -428,19 +428,19 @@ function MarketplaceList() { {renderHeaderRow()}
-
+
-
+
{renderSubTitle()} {/*{renderGridActions()}*/}
-
+
-
+
{/**/} {renderItemsGrid()} {renderPagination()} diff --git a/frontend/src/views/PublisherEntity.js b/frontend/src/views/PublisherEntity.js index 589685b2..994261e9 100644 --- a/frontend/src/views/PublisherEntity.js +++ b/frontend/src/views/PublisherEntity.js @@ -196,7 +196,7 @@ function PublisherEntity() {
- +
diff --git a/frontend/src/views/admin/AdminMarketplaceEntity.js b/frontend/src/views/admin/AdminMarketplaceEntity.js index b54d16a1..3af3a649 100644 --- a/frontend/src/views/admin/AdminMarketplaceEntity.js +++ b/frontend/src/views/admin/AdminMarketplaceEntity.js @@ -46,7 +46,7 @@ function AdminMarketplaceEntity() { const [_isValid, setIsValid] = useState({ name: true, nameFormat: true, displayName: true, abstract: true, description: true, status: true, type: true, publisher: true, publishDate: true, - images: { imagePortrait: true, imageSquare: true, imageLandscape: true }, + images: { imagePortrait: true, imageBanner: true, imageLandscape: true }, relatedItems: true, relatedProfiles: true, actionLinks: true }); const [_deleteModal, setDeleteModal] = useState({ show: false, items: null }); @@ -343,7 +343,7 @@ function AdminMarketplaceEntity() { setIsValid({ ..._isValid, images: { "imagePortrait": e.target.id === "imagePortrait" ? isValid : _isValid.images.imagePortrait, - "imageSquare": true, //e.target.id === "imageSquare" ? isValid : _isValid.images.imageSquare, + "imageBanner": true, //e.target.id === "imageBanner" ? isValid : _isValid.images.imageBanner, "imageLandscape": e.target.id === "imageLandscape" ? isValid : _isValid.images.imageLandscape } }); @@ -379,7 +379,7 @@ function AdminMarketplaceEntity() { _isValid.publisher = item.publisher != null && item.publisher.id.toString() !== "-1"; _isValid.publishDate = item.publishDate != null && item.publishDate.trim().length > 0; _isValid.images.imagePortrait = item.imagePortrait != null && item.imagePortrait.id.toString() !== "-1"; - _isValid.images.imageSquare = true; //item.imageSquare != null && item.imageSquare.id.toString() !== "-1"; + _isValid.images.imageBanner = true; //item.imageBanner != null && item.imageBanner.id.toString() !== "-1"; _isValid.images.imageLandscape = item.imageLandscape != null && item.imageLandscape.id.toString() !== "-1"; _isValid.relatedItems = validateForm_relatedItems(); _isValid.relatedProfiles = validateForm_relatedProfiles(); @@ -388,7 +388,7 @@ function AdminMarketplaceEntity() { setIsValid(JSON.parse(JSON.stringify(_isValid))); return (_isValid.name && _isValid.nameFormat && _isValid.displayName && _isValid.abstract && _isValid.description && _isValid.status && _isValid.publisher && _isValid.publishDate && - _isValid.images.imagePortrait && _isValid.images.imageSquare && _isValid.images.imageLandscape && + _isValid.images.imagePortrait && _isValid.images.imageBanner && _isValid.images.imageLandscape && _isValid.relatedItems && _isValid.relatedProfiles && _isValid.type && _isValid.actionLinks); } @@ -567,7 +567,7 @@ function AdminMarketplaceEntity() { //note you must update the state value for the input to be read only. It is not enough to simply have the onChange handler. switch (e.target.id) { case "imagePortrait": - case "imageSquare": + case "imageBanner": case "imageLandscape": if (e.target.value.toString() === "-1") item[e.target.id] = null; else { @@ -1175,9 +1175,9 @@ function AdminMarketplaceEntity() {
{renderImageSelection("imagePortrait", "Portrait Image", "Recommended aspect ratio 3:4. Used by: Home page ('Featured Solution' banner image, 'Popular' items tiles), Library page (result tiles)")}
- {/*
*/} - {/* {renderImageSelection("imageSquare", "Square Image (Deprecated)", "Recommended aspect ratio 1:1. Deprecated.")}*/} - {/*
*/} +
+ {renderImageSelection("imageBanner", "Banner Image", "Recommended aspect ratio 1:3.5. Used when displaying marketplace item image on small screens. Suggest minimum size of 150px x 350px.")} +
{renderImageSelection("imageLandscape", "Landscape Image", "Recommended: 320px w by 180px h (16:9) Used by: Home page ('New' items tiles), Marketplace item page (banner image, 'Related' items tiles)")}
diff --git a/frontend/src/views/shared/MarketplaceItemEntityHeader.js b/frontend/src/views/shared/MarketplaceItemEntityHeader.js index ec96141d..80182dc6 100644 --- a/frontend/src/views/shared/MarketplaceItemEntityHeader.js +++ b/frontend/src/views/shared/MarketplaceItemEntityHeader.js @@ -4,6 +4,7 @@ import color from '../../components/Constants'; import { useLoadingContext } from '../../components/contexts/LoadingContext'; import DownloadNodesetModal from '../../components/DownloadNodesetModal'; +import { RenderImageBg } from '../../services/MarketplaceService'; import { AppSettings } from '../../utils/appsettings'; import { formatItemPublishDate, generateLogMessageString, getImageUrl, renderMenuColorIcon, renderMenuColorMaterialIcon } from '../../utils/UtilityService'; import { MarketplaceItemJobLauncher } from './MarketplaceItemJobLauncher'; @@ -54,28 +55,14 @@ function MarketplaceItemEntityHeader(props) { //props are item, showActions //------------------------------------------------------------------- // Region: Render helpers //------------------------------------------------------------------- - const renderImageBg = () => { - - const bgImageStyle = props.item.imageLandscape == null ? {} : - { - backgroundImage: `url(${getImageUrl(props.item.imageLandscape)})` - }; - - return ( -
-
 
-
- ); - }; - const renderMarketplaceHeader = () => { return ( <>
-
- {renderImageBg()} +
+
-
+
{/*

{props.item.name}

*/} {props.item.abstract != null &&
@@ -102,10 +89,10 @@ function MarketplaceItemEntityHeader(props) { //props are item, showActions return ( <>
-
- {renderImageBg()} +
+
-
+
{props.item.abstract != null &&
} diff --git a/frontend/src/views/shared/MarketplaceItemRow.js b/frontend/src/views/shared/MarketplaceItemRow.js index 49e969c4..37acf339 100644 --- a/frontend/src/views/shared/MarketplaceItemRow.js +++ b/frontend/src/views/shared/MarketplaceItemRow.js @@ -2,13 +2,13 @@ import React from 'react' import { useHistory } from 'react-router-dom' import { Button } from 'react-bootstrap' -import { formatItemPublishDate, generateLogMessageString, getImageUrl, getRandomArrayIndexes } from '../../utils/UtilityService'; -import { clearSearchCriteria, generateSearchQueryString, toggleSearchFilterSelected } from '../../services/MarketplaceService' +import { formatItemPublishDate, getImageUrl, getRandomArrayIndexes } from '../../utils/UtilityService'; +import { clearSearchCriteria, generateSearchQueryString, RenderImageBg, toggleSearchFilterSelected } from '../../services/MarketplaceService' import { useLoadingContext } from '../../components/contexts/LoadingContext' import { SvgVisibilityIcon } from '../../components/SVGIcon' import color from '../../components/Constants' -const CLASS_NAME = "MarketplaceItemRow"; +//const CLASS_NAME = "MarketplaceItemRow"; function MarketplaceItemRow(props) { //props are item, showActions @@ -121,30 +121,6 @@ function MarketplaceItemRow(props) { //props are item, showActions return renderCategoryTagsRandom(item.industryVerticals, 3); } - const renderImageBg = () => { - - /* - var imgSrc = props.item.imagePortrait == null ? "" : getImageUrl(props.item.imagePortrait); - return ( -
-
- {`${props.item.name}-${getImageAlt(props.item.imagePortrait)}`} -
-
- ); - */ - const bgImageStyle = props.item.imagePortrait == null ? {} : - { - backgroundImage: `url(${getImageUrl(props.item.imagePortrait)})` - }; - - return ( -
-
 
-
- ); - }; - //build the row //------------------------------------------------------------------- // Region: Render final output @@ -156,8 +132,8 @@ function MarketplaceItemRow(props) { //props are item, showActions return ( <>
-
- {renderImageBg()} +
+
diff --git a/frontend/src/views/shared/MarketplaceTileList.js b/frontend/src/views/shared/MarketplaceTileList.js index 76730e74..64345c05 100644 --- a/frontend/src/views/shared/MarketplaceTileList.js +++ b/frontend/src/views/shared/MarketplaceTileList.js @@ -3,6 +3,7 @@ import { Card } from 'react-bootstrap'; import stockTilePhoto from '../../components/img/icon-molecule-landscape.svg' import iconMolecule from '../../components/img/icon-molecule-portrait.svg' +import { RenderImageBg } from '../../services/MarketplaceService'; import { AppSettings } from '../../utils/appsettings'; import { getImageAlt, getImageUrl } from '../../utils/UtilityService'; import '../styles/MarketplaceTileList.scss'; @@ -95,10 +96,10 @@ function MarketplaceTileList(props) { return ( -
- {renderImageBg(item)} +
+
-
+
{renderDisplayName(item)}
@@ -107,7 +108,7 @@ function MarketplaceTileList(props) { ); } - const renderImageBg = (item) => { + const renderImageBg = (item, transpose = false) => { const imgSrc = item.imagePortrait == null ? iconMolecule : getImageUrl(item.imagePortrait); const bgImageStyle = { @@ -115,7 +116,7 @@ function MarketplaceTileList(props) { }; return ( -
+
 
); @@ -130,7 +131,7 @@ function MarketplaceTileList(props) { ) } - const colCountCss = props.colCount == null ? 'col-sm-4' : `col-sm-${(12 / props.colCount).toString()}`; + const colCssClass = props.colCssClass == null ? 'col-sm-6' : props.colCssClass; const mainBody = props.items.map((itm, counter) => { const isFirst = counter === 0; @@ -149,7 +150,7 @@ function MarketplaceTileList(props) { `/library/${itm.name}`; return ( -
+
{tile} diff --git a/frontend/src/views/shared/ProfileItemRow.js b/frontend/src/views/shared/ProfileItemRow.js index 7432143a..4b5f6b77 100644 --- a/frontend/src/views/shared/ProfileItemRow.js +++ b/frontend/src/views/shared/ProfileItemRow.js @@ -3,6 +3,7 @@ import { useHistory } from 'react-router-dom' import { Button } from 'react-bootstrap' import { formatItemPublishDate, getImageUrl, getRandomArrayIndexes } from '../../utils/UtilityService'; +import { RenderImageBg } from '../../services/MarketplaceService'; //const CLASS_NAME = "ProfileItemRow"; @@ -72,20 +73,6 @@ function ProfileItemRow(props) { //props are item, showActions return renderCategoryTagsRandom(item.industryVerticals, 3); } - const renderImageBg = () => { - - var bgImageStyle = props.item.imagePortrait == null ? {} : - { - backgroundImage: `url(${getImageUrl(props.item.imagePortrait)})` - }; - - return ( -
-
 
-
- ); - }; - const renderImageCompact = () => { const style = @@ -104,10 +91,10 @@ function ProfileItemRow(props) { //props are item, showActions const renderRow = () => { return (
-
- {renderImageBg()} +
+
-
+

SM Profile: {props.item.displayName}