Merge pull request #939 from research-software-directory/935-software…

…-masonry-card

932 & 935 Software overview page improvements

frontend/components/layout/ContentContainer.tsx

@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+type ContentContainerProps = {
+  element?: 'section' | 'article' | 'main' | 'div'
+  className?: string
+  children: JSX.Element | JSX.Element[]
+}
+
+export default function ContentContainer(props: ContentContainerProps) {
+  // basic container alignment - for lg + breakpoints
+  const classes = `px-4 lg:container lg:mx-auto ${props.className ?? ''}`
+
+  switch (props?.element) {
+    case 'section':
+      return (
+        <section className={classes}>
+          {props.children}
+        </section>
+      )
+    case 'article':
+      return (
+        <article className={classes}>
+          {props.children}
+        </article>
+      )
+    case 'main':
+      return (
+        <main className={classes}>
+          {props.children}
+        </main>
+      )
+    default:
+      return (
+        <div className={classes}>
+          {props.children}
+        </div>
+      )
+  }
+}

frontend/components/software/overview/SoftwareHighlights.tsx

@@ -6,6 +6,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import ContentContainer from '~/components/layout/ContentContainer'
 import {HighlightsCarousel} from './highlights/HighlightsCarousel'
 import {SoftwareHighlight} from '~/components/admin/software-highlights/apiSoftwareHighlights'
 
@@ -20,6 +21,13 @@ export default function SoftwareHighlights({highlights}: { highlights: SoftwareH
 
   return (
     <div className="mt-8">
+      <ContentContainer>
+        <div
+          className="text-3xl"
+        >
+          Software Highlights
+        </div>
+      </ContentContainer>
       <HighlightsCarousel items={highlights} />
     </div>
   )

frontend/components/software/overview/cards/SoftwareMasonryCard.tsx

@@ -63,11 +63,13 @@ export default function SoftwareMasonryCard({item}:SoftwareCardProps){
               visibleNumberOfProgLang={visibleNumberOfProgLang}
             />
             {/* Metrics */}
-            <SoftwareMetrics
-              contributor_cnt={item.contributor_cnt}
-              mention_cnt={item.mention_cnt}
-              downloads={item.downloads}
-            />
+            <div className="flex gap-4">
+              <SoftwareMetrics
+                contributor_cnt={item.contributor_cnt}
+                mention_cnt={item.mention_cnt}
+                downloads={item.downloads}
+              />
+            </div>
           </div>
         </div>
       </div>