diff --git a/src/components/marketplace/MarketplaceCard/index.js b/src/components/marketplace/MarketplaceCard/index.js index 1c40f9af8..93c20181b 100644 --- a/src/components/marketplace/MarketplaceCard/index.js +++ b/src/components/marketplace/MarketplaceCard/index.js @@ -30,6 +30,20 @@ export default function MarketplaceCard({
setFilters(e)}>
+
+ +
{post.title}
+
+ {post.tags?.map((tag, index) => { + if (index > 2) { + return ''; + } + return
{tag}
; + })} +
+
{post.excerpt}
+
+
{post.views}
@@ -45,19 +59,7 @@ export default function MarketplaceCard({ {badge} -
- -
{post.title}
-
- {post.tags?.map((tag, index) => { - if (index > 2) { - return ''; - } - return
{tag}
; - })} -
- {post.excerpt} -
+ diff --git a/src/components/marketplace/MarketplaceCard/styles.module.css b/src/components/marketplace/MarketplaceCard/styles.module.css index 5dd9f3464..942fa2740 100644 --- a/src/components/marketplace/MarketplaceCard/styles.module.css +++ b/src/components/marketplace/MarketplaceCard/styles.module.css @@ -2,7 +2,7 @@ .card { position: relative; margin-top: 20px; - height: 650px; + min-height: 460px; /* UI Properties */ background: var(--dev-card-background); box-shadow: var(--dev-card-shadow); @@ -24,11 +24,17 @@ .cardText { - position: absolute; + display: flex; + flex-direction: column; margin: 22px; min-width: 170px; - top: 10px; - left: 0; + margin-bottom: 75px; +} + +.cardImage { + border-radius: 4px; + justify-content: center; + aspect-ratio: 16/9; } @@ -50,7 +56,7 @@ color: var(--dev-secondary-text); background-color: var(--dev-tag-highlight); padding: 0px 8px; - margin-left: 5px; + margin-right: 5px; margin-top: 5px; } @@ -59,6 +65,7 @@ width: 100%; display: flex; flex-wrap: wrap; + margin-bottom: 10px; } @@ -133,6 +140,6 @@ right: 5px; bottom: 0px; margin-left: 5px; - height: 120px; - width: 120px; + height: 80px; + width: 80px; } \ No newline at end of file diff --git a/src/components/marketplace/MarketplaceCardDetail/index.js b/src/components/marketplace/MarketplaceCardDetail/index.js index 037f8dda9..d4db95fd7 100644 --- a/src/components/marketplace/MarketplaceCardDetail/index.js +++ b/src/components/marketplace/MarketplaceCardDetail/index.js @@ -3,12 +3,12 @@ import styles from './styles.module.css'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; import ThemedImage from '@theme/ThemedImage'; -import {addDarkToFileName} from '../../../util/util'; -import {Tab, Tabs, TabList, TabPanel} from 'react-tabs'; +import { addDarkToFileName } from '../../../util/util'; +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import 'react-tabs/style/react-tabs.css'; import ReactMarkdown from 'react-markdown'; import BounceLoader from 'react-spinners/BounceLoader'; -export default function MarketplaceCardDetail({details, rawPost}) { +export default function MarketplaceCardDetail({ details, rawPost }) { const getDivText = (data, id) => { const requirementPosition = data.indexOf('id="' + id + '"'); const requirementEndPosition = data.indexOf('
', requirementPosition); @@ -19,13 +19,11 @@ export default function MarketplaceCardDetail({details, rawPost}) { ); const incorrectURLPattern = /upload:\/\/([^"]+)/g; const correctURLPattern = - 'https://developer.identitysoon.com/discuss/uploads/short-url/$1'; + 'https://developer.sailpoint.com/discuss/uploads/short-url/$1'; return validContent.replace(incorrectURLPattern, correctURLPattern); } else { return 'No requirements found for this marketplace item'; } - // https://developer.identitysoon.com/discuss/uploads/short-url/f9rlt0eoj7RnpndvL0CHjcEesV0.png?dl=1\ - // upload://f9rlt0eoj7RnpndvL0CHjcEesV0.png }; const goToLink = (link) => { @@ -40,9 +38,22 @@ export default function MarketplaceCardDetail({details, rawPost}) { +
+ Details Requirements @@ -53,32 +64,6 @@ export default function MarketplaceCardDetail({details, rawPost}) { {getDivText(rawPost, 'details')} - - diff --git a/src/components/marketplace/MarketplaceCardDetail/styles.module.css b/src/components/marketplace/MarketplaceCardDetail/styles.module.css index cd921b7da..844b509cf 100644 --- a/src/components/marketplace/MarketplaceCardDetail/styles.module.css +++ b/src/components/marketplace/MarketplaceCardDetail/styles.module.css @@ -6,9 +6,13 @@ display: flex; justify-content: center; align-items: center; - margin: 20px; + margin: 20px 20px 0px 20px; } +.detailImageContainor { + display: flex; + flex-direction: column; +} .detailImage { border-radius: 40px; max-width: 400px; @@ -28,7 +32,8 @@ } .detailTabs { - margin: 10px; + margin: 20px 10px 10px 10px; + position: relative; } @@ -47,11 +52,15 @@ text-align: center; width: 125px; background-color: #ffffff31; + position: absolute; + right: 0px; + top: -25px; + transition: all 0.3s; } .modalButton:hover { cursor: pointer; - top: -2px; + top: -23px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4); background-color: #dae1e9; color: #005fc4; diff --git a/src/components/marketplace/MarketplaceCards/index.js b/src/components/marketplace/MarketplaceCards/index.js index b71c86bf8..6e9c248b3 100644 --- a/src/components/marketplace/MarketplaceCards/index.js +++ b/src/components/marketplace/MarketplaceCards/index.js @@ -19,7 +19,6 @@ export default function MarketplaceCards({filterCallback}) { const getPosts = async () => { const data = await getMarketplacePosts(filterCallback.tags.join('+'), filterCallback.category); - console.log(data) const resultset = []; if (data.topics) { for (const topic of data.topics) { @@ -136,13 +135,22 @@ async function getPostList(topic) { } function getavatarURL(avatar) { - return 'https://developer.sailpoint.com' + avatar.replace('{size}', '120'); + if (avatar.includes("developer.sailpoint.com")) { + return "https://developer.sailpoint.com" + avatar.replace("{size}", "120") + } else { + return avatar.replace("{size}", "120") + } } function styleExcerpt(excerpt) { if (excerpt) { // remove any strings that have colons between them excerpt = excerpt.replace(/:[^:]*:/g, ''); + // get text between "summary" and "Repository Link" + const match = excerpt.match(/Summary([\s\S]*?)Repository Link/) + if (match) { + excerpt = match[1].trim() + } if (excerpt.length > 150) { return excerpt.slice(0, 100) + '...'; } else { diff --git a/src/components/marketplace/MarketplaceCards/styles.module.css b/src/components/marketplace/MarketplaceCards/styles.module.css index 549642a08..ddb9a548a 100644 --- a/src/components/marketplace/MarketplaceCards/styles.module.css +++ b/src/components/marketplace/MarketplaceCards/styles.module.css @@ -39,8 +39,8 @@ transform: translate(-50%, -50%); box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.25); border-radius: 20px; - background-color: var(--dev-card-background); - max-height: 100%; + background-color: var(--dev-popup-background); + max-height: 80%; max-width: 90%; min-height: 80%; scroll-behavior: auto; diff --git a/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js index 8782fdc9b..85b1a094f 100644 --- a/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js +++ b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js @@ -10,6 +10,11 @@ export default function MarketplaceSidebarButton({ category }) { const [isActive, setIsActive] = React.useState(false); + const [checked, setChecked] = React.useState(false); + + const handleChange = () => { + setChecked(!checked); + }; let activeClass = '' if (isCategory && category === id) { activeClass = styles.tagSelected @@ -18,21 +23,30 @@ export default function MarketplaceSidebarButton({ } else { activeClass = isActive ? styles.tagSelected : '' } + + let radioClass = styles.checkbox + if (isCategory) { + radioClass = styles.radio + } //const activeClass = isActive ? styles.tagSelected : '' function setFilters(e, id) { if (isCategory) { if (category === id) { filterCallback({"category": "marketplace"}) + setIsActive(false) } else { filterCallback({"category": id}) + setIsActive(true) } } else { filterCallback({"tag": id}) + setIsActive(current => !current); } - setIsActive(current => !current); + } + // return
return
setFilters(e, id)} className={activeClass + ' ' + styles.tag}>{text}
} diff --git a/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css index 7be4bbadc..8e53664fe 100644 --- a/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css +++ b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css @@ -17,7 +17,7 @@ font-size: 16px; font-weight: 500; background-color: var(--dev-secondary-text); - color: var(--dev-card-background); + color: var(--dev-tag-selected-text); padding: 8px; margin-right: 5px; margin-bottom: 5px; @@ -31,6 +31,25 @@ .tag:hover { cursor: pointer; background-color: var(--dev-text-color-normal); - color: var(--dev-card-background); + color: var(--dev-tag-selected-text); } +/* .radio { + visibility: hidden; + position: absolute; +} +.radio + label:before{ + height:12px; + width:12px; + margin-right: 2px; + content: " "; + display:inline-block; + vertical-align: baseline; + border:1px solid #777; +} +.radio:checked + label:before{ + background-color: var(--ifm-color-primary); +} +.radio + label:before{ + border-radius:50%; +} */ \ No newline at end of file diff --git a/src/components/marketplace/MarketplaceSidebar/index.js b/src/components/marketplace/MarketplaceSidebar/index.js index 96f97dae8..47c562fd3 100644 --- a/src/components/marketplace/MarketplaceSidebar/index.js +++ b/src/components/marketplace/MarketplaceSidebar/index.js @@ -24,7 +24,7 @@ export default function MarketplaceSidebar({ const catIntegrationType = [] for (const category of categoryData.category_list.categories) { - // 59 for marketplace + // 59 for production marketplace, 57 for staging marketplace if (category.id === 59) { for (const subCategory of category.subcategory_list) { @@ -32,8 +32,8 @@ export default function MarketplaceSidebar({ } } } - for (const tagGroup of tagData.extras.tag_groups) { + // 20 for production marketplace, 11 for staging marketplace if (tagGroup.id === 20) { for (const tag of tagGroup.tags) { tagProductResultset.push(tag.text) @@ -73,13 +73,9 @@ export default function MarketplaceSidebar({
Items by Integration Type
{catIntegrationTypeData.map(function(a, index){ - return
10 && filterTags ? styles.hidden : ''} >
+ return })}
-
toggleSeeAll()}> - {filterText} - {/* */} -
); diff --git a/src/css/custom.css b/src/css/custom.css index 40b2367f8..8df9c31a9 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -251,6 +251,8 @@ /*card css*/ --dev-card-background: #e9e9e963; + --dev-tag-selected-text: #ffffffef; + --dev-popup-background: #fdfdfd; --dev-card-shadow: 0px 0px 0px #6b6b6b15; --dev-main-card-shadow: 0px 20px 60px #00000015; --dev-card-selected: 0 4px 5px rgba(0, 0, 0, 0.2); @@ -288,12 +290,14 @@ /*card css*/ --dev-card-background: #2a2b2d; + --dev-popup-background: #2a2b2d; --dev-card-shadow: 0 0px 0px rgba(0, 0, 0, 0.2); --dev-main-card-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); --dev-card-selected: 0 5px 5px rgba(151, 151, 151, 0.2); --dev-secondary-text: #dae1e9; --dev-tag-highlight: #00000075; --dev-button-hover: #c552ae40; + --dev-tag-selected-text: #2a2b2d; /*main hero card*/ --main-hero-card-background: #202122; diff --git a/src/pages/marketplace.js b/src/pages/marketplace.js index 7602e5cd3..7fccc26ca 100644 --- a/src/pages/marketplace.js +++ b/src/pages/marketplace.js @@ -26,11 +26,10 @@ export default function Marketplace() { } } - if (data.category) { - setFilteredProduct({"category": data.category, "tags": [tempFilter]}) + setFilteredProduct({"category": data.category, "tags": tempFilter}) } else { - setFilteredProduct({"category": filteredProduct.category, "tags": [tempFilter]}) + setFilteredProduct({"category": filteredProduct.category, "tags": tempFilter}) }