diff --git a/src/components/blog/BlogCards/index.js b/src/components/blog/BlogCards/index.js index dafeb54d1..9980c51c1 100644 --- a/src/components/blog/BlogCards/index.js +++ b/src/components/blog/BlogCards/index.js @@ -12,10 +12,15 @@ export default function BlogCards({ const data = await getBlogPosts(filterCallback.join(',')); console.log(data.topics) const resultset = [] - for (const topic of data.topics) { + if (data.topics) { + for (const topic of data.topics) { resultset.push(await getPostList(topic)) + } + setCardData(resultset); + } else { + setCardData(undefined); } - setCardData(resultset); + }; React.useEffect(() => { @@ -45,7 +50,7 @@ export default function BlogCards({ ); } else { - return
; + return
No Blog Post Found with the Given Search Criteria
; } } diff --git a/src/components/blog/BlogCards/styles.module.css b/src/components/blog/BlogCards/styles.module.css index 2011eee81..2adba3773 100644 --- a/src/components/blog/BlogCards/styles.module.css +++ b/src/components/blog/BlogCards/styles.module.css @@ -17,3 +17,11 @@ .space { height: 200px; } + +.noFound { + font-size: 28px; + font-weight: 500; + color: var(--dev-secondary-text); + padding: 8px; + margin: 50px; +} diff --git a/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css b/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css index 847f4ead7..7be4bbadc 100644 --- a/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css +++ b/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css @@ -4,7 +4,9 @@ font-weight: 500; color: var(--dev-secondary-text); padding: 8px; - margin: 5px; + margin-right: 5px; + margin-top: 5px; + margin-bottom: 5px; border-style: solid; border-width: 1px; border-color: var(--dev-text-color-normal); @@ -17,7 +19,9 @@ background-color: var(--dev-secondary-text); color: var(--dev-card-background); padding: 8px; - margin: 5px; + margin-right: 5px; + margin-bottom: 5px; + margin-top: 5px; border-style: solid; border-width: 1px; border-color: var(--dev-text-color-normal); diff --git a/src/components/blog/BlogSidebar/index.js b/src/components/blog/BlogSidebar/index.js index baf4f5412..1d56b1468 100644 --- a/src/components/blog/BlogSidebar/index.js +++ b/src/components/blog/BlogSidebar/index.js @@ -11,7 +11,7 @@ export default function BlogSidebar({ }) { const [tagProductData, setTagProductData] = React.useState(); const [tagTechnologyData, setTagTechnologyData] = React.useState(); - const [filteredProduct, setFilteredProduct] = React.useState(); + const [filterTags, setFilterTags] = React.useState(true); const getTagData = async () => { const data = await getTags(); @@ -34,15 +34,16 @@ export default function BlogSidebar({ setTagTechnologyData(tagTechnologyResultset) }; + function toggleSeeAll() { + filterTags ? setFilterTags(false) : setFilterTags(true) + } + + React.useEffect(() => { getTagData(); }, []); - function setFilters(e, f) { - e.currentTarget.classList.toggle('selected'); - console.log(e) - filterCallback(f) - } + const filterText = filterTags ? 'See All Tags' : 'See Less Tags' if (tagProductData && tagTechnologyData) { return ( @@ -51,10 +52,20 @@ export default function BlogSidebar({
{tagProductData.map(function(a, index){ return - // return
setFilters(e, a)} className={styles.tag}>{a}
})}
+
Posts by Identity Governance
+
+ {tagTechnologyData.map(function(a, index){ + return
10 && filterTags ? styles.hidden : ''} >
+ })} +
+
toggleSeeAll()}> + {filterText} + {/* */} +
+ ); } else { return
; diff --git a/src/components/blog/BlogSidebar/styles.module.css b/src/components/blog/BlogSidebar/styles.module.css index 1c9bcd27b..8560b833d 100644 --- a/src/components/blog/BlogSidebar/styles.module.css +++ b/src/components/blog/BlogSidebar/styles.module.css @@ -1,34 +1,52 @@ .sidebar { - width: 300px; + width: 400px; height: 100%; - margin: 50px; + margin-left: 50px; } .tagHeader { + margin-top: 10px; font-size: 22px; font-weight: 700; } .tagContainer { display: flex; + flex-wrap: wrap; } -.tag { - font-size: 16px; - font-weight: 500; + +.hidden { + display: none; +} + +.seeAll { + margin-top: 5px; + margin-bottom: 10px; color: var(--dev-secondary-text); - padding: 8px; - margin: 5px; border-style: solid; border-width: 1px; - border-color: var(--dev-text-color-normal); + width: 100%; transition: background-color 500ms; + text-align: center; + } -.tag:hover { +.seeAll:hover { cursor: pointer; background-color: var(--dev-text-color-normal); color: var(--dev-card-background); } +.caretDown { + margin-left: 5px; + height: 26px; + width: 26px; + top: 6px; + position: relative; +} + +.caretDown:hover { + +} \ No newline at end of file diff --git a/static/blog/caret-down-thin.svg b/static/blog/caret-down-thin.svg new file mode 100644 index 000000000..b97785a6a --- /dev/null +++ b/static/blog/caret-down-thin.svg @@ -0,0 +1 @@ + \ No newline at end of file