LukeParke/developer.sailpoint.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/developer.sailpoint.com.git synced 2025-12-06 12:27:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

added details to card menu popup

Browse Source
This commit is contained in:
philip-ellis-sp
2023-06-01 16:14:43 -05:00
parent 1ab2ae00fe
commit a5d637faa3
7 changed files with 98 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
package-lock.json generated
View File

@@ -19,7 +19,9 @@
"docusaurus-theme-openapi-docs": "^1.5.1",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"react-markdown": "^8.0.7",
"react-tabs": "^4.3.0"
},
"devDependencies": {
"@docusaurus/core": "2.2.0",
@@ -11024,8 +11026,9 @@
"license": "MIT"
},
"node_modules/react-markdown": {
"version": "8.0.5",
"license": "MIT",
"version": "8.0.7",
"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
"integrity": "sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==",
"dependencies": {
"@types/hast": "^2.0.0",
"@types/prop-types": "^15.0.0",
@@ -11302,6 +11305,18 @@
"react": ">=15"
}
},
"node_modules/react-tabs": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
"integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
"dependencies": {
"clsx": "^1.1.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
}
},
"node_modules/react-textarea-autosize": {
"version": "8.4.0",
"dev": true,
@@ -21693,7 +21708,9 @@
"version": "1.0.1"
},
"react-markdown": {
"version": "8.0.5",
"version": "8.0.7",
"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
"integrity": "sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==",
"requires": {
"@types/hast": "^2.0.0",
"@types/prop-types": "^15.0.0",
@@ -21858,6 +21875,15 @@
"tiny-warning": "^1.0.0"
}
},
"react-tabs": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
"integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
"requires": {
"clsx": "^1.1.0",
"prop-types": "^15.5.0"
}
},
"react-textarea-autosize": {
"version": "8.4.0",
"dev": true,

4
package.json
View File

@@ -32,7 +32,9 @@
"docusaurus-theme-openapi-docs": "^1.5.1",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"react-markdown": "^8.0.7",
"react-tabs": "^4.3.0"
},
"overrides": {
"mermaid": "9.1.7"

2
src/components/marketplace/MarketplaceCard/index.js
View File

@@ -20,7 +20,7 @@ export default function MarketplaceCard({
}) {
function setFilters(e) {
openDialogFunc(rawData);
openDialogFunc({"rawData": rawData, "title": title, "image": image});
}
return (

41
src/components/marketplace/MarketplaceCardDetail/index.js
View File

@@ -4,14 +4,51 @@ 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 'react-tabs/style/react-tabs.css';
import ReactMarkdown from 'react-markdown'
export default function MarketplaceCardDetail({
details
}) {
const getDivText = (data, id) => {
const requirementPosition = data.indexOf('id="' + id + '"')
const requirementEndPosition = data.indexOf('</div>', requirementPosition)
if (requirementPosition > 0 && requirementEndPosition > 0) {
return data.substring(requirementPosition + 6 + id.length, requirementEndPosition)
} else {
return "No requirements found for this marketplace item"
}
}
return (
<div onClick={(e) => setFilters(e)}>
<div>{details}</div>
<div className={styles.detailContainer}>
<div className={styles.detailHeader}>
<div className={styles.detailTitle}>{details.title}</div>
<img className={styles.detailImage} src={useBaseUrl(details.image)}></img>
</div>
<Tabs className={styles.detailTabs}>
<TabList>
<Tab>Details</Tab>
<Tab>Requirements</Tab>
<Tab>Support</Tab>
</TabList>
<TabPanel>
<ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "details")}</ReactMarkdown>
</TabPanel>
<TabPanel>
<ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "requirements")}</ReactMarkdown>
</TabPanel>
<TabPanel>
<ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "support")}</ReactMarkdown>
</TabPanel>
</Tabs>
</div>
);
}

137
src/components/marketplace/MarketplaceCardDetail/styles.module.css
View File

@@ -1,127 +1,30 @@
/* Getting Started Card */
.card {
position: relative;
margin-top: 20px;
height: 650px;
/* UI Properties */
background: var(--dev-card-background);
box-shadow: var(--dev-card-shadow);
border: 1px solid var(--dev-card-background);
.detailContainer {
max-width: 800px;
}
.detailHeader {
display: flex;
margin: 20px;
}
.detailImage {
border-radius: 40px;
opacity: 1;
transition: all 0.3s;
max-width: 600px;
max-width: 400px;
min-width: 180px;
}
.card:hover {
cursor: pointer;
transform: translate(0px, -5px);
box-shadow: var(--dev-card-selected);
}
.cardText {
position: absolute;
margin: 22px;
min-width: 170px;
top: 10px;
left: 0;
}
.cardTitle {
font-size: 22px;
font-weight: 700;
}
.cardBody {
font-size: 16px;
font-weight: 500;
top: 10px;
left: 0;
}
.tag {
font-size: 16px;
.detailTitle {
margin: 45px;
font-size: 48px;
font-weight: 500;
color: var(--dev-secondary-text);
background-color: var(--dev-tag-highlight);
padding: 0px 8px;
margin-left: 5px;
margin-top: 5px;
text-shadow: rgba(17, 61, 158, 0.64) 1px 2px 2px;
}
.tags {
margin: 0px;
width: 100%;
display: flex;
flex-wrap: wrap;
.detailTabContent {
margin: 20px;
}
.cardUser {
position: absolute;
bottom: 10px;
left: 25px;
display: flex;
.detailTabs {
margin: 10px;
}
.cardFace {
border-radius: 9999px;
margin: auto;
height: 40px;
width: 40px;
}
.cardName {
min-width: 170px;
margin-top: 7px;
margin-left: 10px;
}
.cardData {
position: absolute;
bottom: 50px;
left: 20px;
display: flex;
align-items: center;
}
.cardEye {
fill: #96a9bb;
/* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
margin-left: 5px;
height: 18px;
width: 18px;
}
.cardComment {
margin-left: 10px;
fill: #96a9bb;
/* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
height: 18px;
width: 18px;
margin-bottom: 4px;
}
.cardCommentText {
color: #96a9ba;
/* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
margin-left: 5px;
margin-bottom: 5px;
height: 20px;
font-size: 16px;
}

1
src/components/marketplace/MarketplaceCards/index.js
View File

@@ -63,7 +63,6 @@ export default function BlogCards({
className={styles.modal}
contentLabel="Details">
<div>
Modal Works!
<MarketplaceCardDetail details={details}></MarketplaceCardDetail>
</div>
<button

5
src/components/marketplace/MarketplaceCards/styles.module.css
View File

@@ -31,7 +31,6 @@
.modal {
position: absolute;
margin-top: 50px;
top: 50%;
left: 50%;
right: auto;
@@ -42,6 +41,10 @@
border-radius: 20px;
background-color: var(--dev-card-background);
max-height: 100%;
max-width: 90%;
min-height: 80%;
scroll-behavior: auto;
overflow-y: auto;
}
.modalButton {