From 14ec09d07a026da15dee7492cdc982d2a471ffb2 Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2020)" <d.mijatovic@dv4all.nl>
Date: Thu, 1 Dec 2022 16:31:50 +0100
Subject: [PATCH] fix: use same card title approach in all cards

---
 frontend/components/layout/CardGrid.tsx       | 31 -------------------
 frontend/components/layout/CardTitle.tsx      | 25 +++++++++++++++
 .../components/layout/FlexibleGridSection.tsx | 27 ++++++++++++++++
 .../organisation/OrganisationCard.tsx         | 18 +++++++----
 .../organisation/OrganisationGrid.tsx         | 14 ++-------
 .../components/organisation/project/index.tsx | 13 ++------
 .../organisation/software/index.tsx           | 12 +++----
 frontend/components/projects/ProjectCard.tsx  | 16 +++++++---
 frontend/components/software/SoftwareCard.tsx | 15 ++++++---
 frontend/components/user/project/index.tsx    | 11 ++++---
 frontend/components/user/software/index.tsx   | 10 +++---
 frontend/pages/projects/index.tsx             | 14 ++-------
 frontend/pages/software/index.tsx             | 12 +++----
 13 files changed, 115 insertions(+), 103 deletions(-)
 delete mode 100644 frontend/components/layout/CardGrid.tsx
 create mode 100644 frontend/components/layout/CardTitle.tsx

diff --git a/frontend/components/layout/CardGrid.tsx b/frontend/components/layout/CardGrid.tsx
deleted file mode 100644
index 1c5632f49..000000000
--- a/frontend/components/layout/CardGrid.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// SPDX-FileCopyrightText: 2021 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2021 dv4all
-//
-// SPDX-License-Identifier: Apache-2.0
-
-import {ReactNode} from 'react'
-import styled from '@mui/system/styled'
-
-const SectionStyled = styled('section')(({theme})=>({
-  display:'grid',
-  gridTemplateColumns: '1fr',
-  gridGap:'0.125rem',
-  padding:'1rem 0.0625rem',
-  '@media (min-width: 640px)':{
-    gridTemplateColumns: '1fr 1fr',
-  },
-  '@media (min-width: 1024px)':{
-    gridTemplateColumns: '1fr 1fr 1fr',
-  },
-  '@media (min-width: 1920px)':{
-    gridTemplateColumns: '1fr 1fr 1fr 1fr',
-  }
-}))
-
-export default function CardGrid({children}:{children:ReactNode}) {
-  return (
-    <SectionStyled>
-      {children}
-    </SectionStyled>
-  )
-}
diff --git a/frontend/components/layout/CardTitle.tsx b/frontend/components/layout/CardTitle.tsx
new file mode 100644
index 000000000..828f4f19b
--- /dev/null
+++ b/frontend/components/layout/CardTitle.tsx
@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 dv4all
+//
+// SPDX-License-Identifier: Apache-2.0
+
+type CardTitleProps = {
+  title: string,
+  children: any,
+  className?: string
+}
+
+/**
+ * Card title max 3 lines with line clamp
+ * @returns 
+ */
+export default function CardTitle({title,children,className=''}:CardTitleProps) {
+  return (
+    <h2
+      title={title}
+      className={`group-hover:text-white line-clamp-3 max-h-[6.5rem] ${className}`}
+    >
+      {children}
+    </h2>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/layout/FlexibleGridSection.tsx b/frontend/components/layout/FlexibleGridSection.tsx
index f28f8436a..60866c89e 100644
--- a/frontend/components/layout/FlexibleGridSection.tsx
+++ b/frontend/components/layout/FlexibleGridSection.tsx
@@ -4,6 +4,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import styled from '@mui/system/styled'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import {useTheme} from '@mui/material/styles'
 
 export type FlexGridProps = {
   minWidth?: string,
@@ -12,6 +14,31 @@ export type FlexGridProps = {
   maxHeight?: string,
   height?: string
 }
+/**
+ * Hook that returns adviced cell dimensions to be passed to FlexibleGridSelection
+ */
+export function useAdvicedDimensions(source:'software'|'project'|'organisation' = 'project') {
+  const theme = useTheme()
+  // use media query hook for small screen logic
+  const smallScreen = useMediaQuery(theme.breakpoints.down('lg'))
+  // adjust grid width and height for mobile
+  const minWidth = smallScreen ? '18rem' : '26rem'
+  let itemHeight = smallScreen ? '26rem' : '18rem'
+
+  if (source === 'software' &&
+    itemHeight === '26rem') {
+    // software card does not have image
+    // it needs less height
+    itemHeight = '22rem'
+  }
+
+  return {
+    minWidth,
+    maxWidth:'1fr',
+    itemHeight
+  }
+}
+
 
 export const FlexibleGridSection = styled('section', {
   // do not forward this props to html element
diff --git a/frontend/components/organisation/OrganisationCard.tsx b/frontend/components/organisation/OrganisationCard.tsx
index f45da3008..d40e72093 100644
--- a/frontend/components/organisation/OrganisationCard.tsx
+++ b/frontend/components/organisation/OrganisationCard.tsx
@@ -8,8 +8,8 @@ import {OrganisationForOverview} from '../../types/Organisation'
 import {getImageUrl} from '~/utils/editImage'
 import StatCounter from '../layout/StatCounter'
 import VerifiedIcon from '@mui/icons-material/Verified'
-import SingleLineTitle from '../layout/SingleLineTitle'
 import LogoAvatar from '../layout/LogoAvatar'
+import CardTitle from '../layout/CardTitle'
 
 export default function OrganisationCard(organisation: OrganisationForOverview) {
 
@@ -34,8 +34,14 @@ export default function OrganisationCard(organisation: OrganisationForOverview)
       <article
         className="flex flex-col border h-full min-h-[16rem] overflow-hidden">
         {/* <h2 className='h-[5rem]'>{organisation.name}</h2> */}
-        <div className="pl-8 flex">
-          <SingleLineTitle
+        <div className="pl-8 pt-8 flex">
+          <CardTitle
+            title={organisation.name}
+            className={`${organisation.is_tenant ? 'mr-[5rem]' : 'mr-[2rem]' }`}
+          >
+            {organisation.name}
+          </CardTitle>
+          {/* <SingleLineTitle
             title={organisation.name}
             sx={{
               padding: '1.5rem 0rem',
@@ -44,14 +50,14 @@ export default function OrganisationCard(organisation: OrganisationForOverview)
             }}
           >
             {organisation.name}
-          </SingleLineTitle>
+          </SingleLineTitle> */}
           {
             organisation.is_tenant && <span title="Officially registered organisation">
               <VerifiedIcon
                 sx={{
                   position: 'absolute',
-                  right: '0.75rem',
-                  top: '0.75rem',
+                  right: '0.5rem',
+                  top: '0.5rem',
                   width: '4rem',
                   height: '4rem',
                   opacity: 0.4,
diff --git a/frontend/components/organisation/OrganisationGrid.tsx b/frontend/components/organisation/OrganisationGrid.tsx
index 1f7a5dba8..2b198adbf 100644
--- a/frontend/components/organisation/OrganisationGrid.tsx
+++ b/frontend/components/organisation/OrganisationGrid.tsx
@@ -3,23 +3,15 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import useMediaQuery from '@mui/material/useMediaQuery'
-import {useTheme} from '@mui/material/styles'
-
 import {OrganisationForOverview} from '../../types/Organisation'
 import OrganisationCard from './OrganisationCard'
-import FlexibleGridSection from '../layout/FlexibleGridSection'
+import FlexibleGridSection, { useAdvicedDimensions } from '../layout/FlexibleGridSection'
 import NoContent from '../layout/NoContent'
 
 // render organisation cards
 export default function OrganisationsGrid({organisations}:
   { organisations: OrganisationForOverview[] }) {
-  const theme = useTheme()
-  // use media query hook for small screen logic
-  const smallScreen = useMediaQuery(theme.breakpoints.down('lg'))
-  // adjust grid width and height for mobile
-  const minWidth = smallScreen ? '17rem' : '26rem'
-  const itemHeight = smallScreen ? '26rem' : '17rem'
+  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions('organisation')
 
   if (organisations.length === 0) {
     return <NoContent />
@@ -30,7 +22,7 @@ export default function OrganisationsGrid({organisations}:
       className="gap-[0.125rem] p-[0.125rem] pt-4 pb-12"
       height={itemHeight}
       minWidth={minWidth}
-      maxWidth='1fr'
+      maxWidth={maxWidth}
     >
       {organisations.map(item=>{
         return(
diff --git a/frontend/components/organisation/project/index.tsx b/frontend/components/organisation/project/index.tsx
index 0afd4d995..8f470414b 100644
--- a/frontend/components/organisation/project/index.tsx
+++ b/frontend/components/organisation/project/index.tsx
@@ -4,21 +4,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useEffect} from 'react'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import {useTheme} from '@mui/material/styles'
 
 import {useSession} from '~/auth'
 import usePaginationWithSearch from '~/utils/usePaginationWithSearch'
 import useOrganisationProjects from './useOrganisationProjects'
 import NoContent from '~/components/layout/NoContent'
-import FlexibleGridSection from '~/components/layout/FlexibleGridSection'
+import FlexibleGridSection, {useAdvicedDimensions} from '~/components/layout/FlexibleGridSection'
 import ProjectCardWithMenu from './ProjectCardWithMenu'
 import ProjectCard from '~/components/projects/ProjectCard'
 import {OrganisationComponentsProps} from '../OrganisationNavItems'
 
 export default function OrganisationProjects({organisation, isMaintainer}:OrganisationComponentsProps) {
   const {token} = useSession()
-  const theme = useTheme()
+  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions()
   const {searchFor,page,rows,setCount} = usePaginationWithSearch(`Find project in ${organisation.name}`)
   const {loading, projects, count} = useOrganisationProjects({
     organisation: organisation.id,
@@ -28,11 +26,6 @@ export default function OrganisationProjects({organisation, isMaintainer}:Organi
     token,
     isMaintainer
   })
-  // use media query hook for small screen logic
-  const smallScreen = useMediaQuery(theme.breakpoints.down('lg'))
-  // adjust grid for mobile to 18rem
-  const minWidth = smallScreen ? '17rem' : '26rem'
-  const itemHeight = smallScreen ? '26rem' : '17rem'
 
   useEffect(() => {
     if (count && loading === false) {
@@ -51,7 +44,7 @@ export default function OrganisationProjects({organisation, isMaintainer}:Organi
     <FlexibleGridSection
       height={itemHeight}
       minWidth={minWidth}
-      maxWidth='1fr'
+      maxWidth={maxWidth}
       className="gap-[0.125rem] p-[0.125rem] pt-2 pb-12"
     >
       {projects.map(item => {
diff --git a/frontend/components/organisation/software/index.tsx b/frontend/components/organisation/software/index.tsx
index b783d7061..432b613c4 100644
--- a/frontend/components/organisation/software/index.tsx
+++ b/frontend/components/organisation/software/index.tsx
@@ -4,12 +4,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useEffect} from 'react'
-import useMediaQuery from '@mui/material/useMediaQuery'
 
 import {useSession} from '~/auth'
 import useOrganisationSoftware from '../../../utils/useOrganisationSoftware'
 import usePaginationWithSearch from '../../../utils/usePaginationWithSearch'
-import FlexibleGridSection from '~/components/layout/FlexibleGridSection'
+import FlexibleGridSection, {useAdvicedDimensions} from '~/components/layout/FlexibleGridSection'
 import SoftwareCard from '~/components/software/SoftwareCard'
 import NoContent from '~/components/layout/NoContent'
 import {OrganisationComponentsProps} from '../OrganisationNavItems'
@@ -17,6 +16,7 @@ import SoftwareCardWithMenu from './SoftwareCardWithMenu'
 
 export default function OrganisationSoftware({organisation, isMaintainer}: OrganisationComponentsProps) {
   const {token} = useSession()
+  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions('software')
   const {searchFor,page,rows,setCount} = usePaginationWithSearch(`Find software in ${organisation.name}`)
   const {loading, software, count} = useOrganisationSoftware({
     organisation: organisation.id,
@@ -26,10 +26,6 @@ export default function OrganisationSoftware({organisation, isMaintainer}: Organ
     isMaintainer,
     token
   })
-  // use media query hook for small screen logic
-  const smallScreen = useMediaQuery('(max-width:600px)')
-  // adjust grid min width for mobile to 18rem
-  const minWidth = smallScreen ? '18rem' : '26rem'
 
   useEffect(() => {
     if (count && loading === false) {
@@ -47,9 +43,9 @@ export default function OrganisationSoftware({organisation, isMaintainer}: Organ
   return (
     <FlexibleGridSection
       className="gap-[0.125rem] p-[0.125rem] pt-2 pb-12"
-      height='17rem'
+      height={itemHeight}
       minWidth={minWidth}
-      maxWidth='1fr'
+      maxWidth={maxWidth}
     >
       {software.map(item => {
         if (isMaintainer) {
diff --git a/frontend/components/projects/ProjectCard.tsx b/frontend/components/projects/ProjectCard.tsx
index 3cced5e88..992d704a6 100644
--- a/frontend/components/projects/ProjectCard.tsx
+++ b/frontend/components/projects/ProjectCard.tsx
@@ -10,6 +10,7 @@ import ImageAsBackground from '../layout/ImageAsBackground'
 import {getImageUrl} from '../../utils/editImage'
 import FeaturedIcon from '~/components/icons/FeaturedIcon'
 import NotPublishedIcon from '~/components/icons/NotPublishedIcon'
+import CardTitle from '../layout/CardTitle'
 
 export type ProjectCardProps = {
   slug: string,
@@ -62,7 +63,7 @@ export default function ProjectCard(
       <article className="flex-1 flex flex-col lg:flex-row h-full p-4 gap-4 overflow-hidden">
         <section
           title={subtitle ?? title}
-          className="flex-[3] lg:flex-[2] h-full"
+          className="flex-[3] h-full"
           >
           <ImageAsBackground
             alt={title}
@@ -73,13 +74,18 @@ export default function ProjectCard(
             noImgMsg='no image'
           />
         </section>
-        <section className="flex-[3] flex flex-col">
-          <h2
+        <section className="flex-[4] flex flex-col">
+          <CardTitle
+            title={title}
+            className={titleMargin}
+          >
+            {renderIcon()} {title}
+          </CardTitle>
+          {/* <h2
             title={title}
             className={`max-h-[6rem] overflow-clip ${titleMargin}`}>
             {renderIcon()} {title}
-          </h2>
-
+          </h2> */}
           <p className="flex-1 my-4 overflow-auto">
             {subtitle}
           </p>
diff --git a/frontend/components/software/SoftwareCard.tsx b/frontend/components/software/SoftwareCard.tsx
index c46f7804e..911c44c84 100644
--- a/frontend/components/software/SoftwareCard.tsx
+++ b/frontend/components/software/SoftwareCard.tsx
@@ -11,6 +11,7 @@ import InsertCommentOutlinedIcon from '@mui/icons-material/InsertCommentOutlined
 import {getTimeAgoSince} from '../../utils/dateFn'
 import FeaturedIcon from '~/components/icons/FeaturedIcon'
 import NotPublishedIcon from '~/components/icons/NotPublishedIcon'
+import CardTitle from '~/components/layout/CardTitle'
 
 export type SoftwareCardType = {
   href: string
@@ -78,14 +79,20 @@ export default function SoftwareCard({href, brand_name, short_statement, is_feat
       className="flex flex-col h-full"
       passHref>
       {/* anchor tag MUST be first element after Link component */}
-      <article className={`flex-1 flex flex-col bg-base-200 text-content ${opacity} hover:bg-secondary group`}>
+      <article className={`flex-1 flex flex-col bg-base-200 text-content ${opacity} hover:bg-secondary group overflow-hidden`}>
         <div className="relative flex">
-          <h2
+          <CardTitle
             title={brand_name}
-            className="p-4 flex-1 mr-[4rem] overflow-hidden text-ellipsis whitespace-nowrap group-hover:text-white"
+            className="p-4 mr-[4rem]"
           >
             {renderPublished()} {brand_name}
-          </h2>
+          </CardTitle>
+          {/* <h2
+            title={brand_name}
+            className="p-4 flex-1 mr-[4rem] group-hover:text-white line-clamp-3 max-h-[7rem]"
+          >
+            {renderPublished()} {brand_name}
+          </h2> */}
           <div
             className="flex w-[4rem] h-[4rem] justify-center items-center bg-white text-base text-[1.5rem] absolute top-0 right-0 group-hover:text-secondary">
             {getInitals()}
diff --git a/frontend/components/user/project/index.tsx b/frontend/components/user/project/index.tsx
index bb5b1b845..c1569a12c 100644
--- a/frontend/components/user/project/index.tsx
+++ b/frontend/components/user/project/index.tsx
@@ -12,8 +12,10 @@ import ProjectsGrid from '~/components/projects/ProjectsGrid'
 import usePaginationWithSearch from '~/utils/usePaginationWithSearch'
 
 import useUserProjects from './useUserProjects'
+import {useAdvicedDimensions} from '~/components/layout/FlexibleGridSection'
 
-export default function UserProjects({session}: {session: Session}) {
+export default function UserProjects({session}: { session: Session }) {
+  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions()
   const {searchFor, page, rows, setCount} = usePaginationWithSearch('Filter projects')
   const {loading, projects, count} = useUserProjects({
     searchFor,
@@ -21,7 +23,6 @@ export default function UserProjects({session}: {session: Session}) {
     rows,
     session
   })
-
   useEffect(() => {
     if (count && loading === false) {
       setCount(count)
@@ -31,9 +32,9 @@ export default function UserProjects({session}: {session: Session}) {
   return (
     <ProjectsGrid
       projects={projects}
-      height='17rem'
-      minWidth='26rem'
-      maxWidth='1fr'
+      height={itemHeight}
+      minWidth={minWidth}
+      maxWidth={maxWidth}
       className="gap-[0.125rem] pt-4 pb-12"
     />
   )
diff --git a/frontend/components/user/software/index.tsx b/frontend/components/user/software/index.tsx
index d0c5946d5..9d20cad4f 100644
--- a/frontend/components/user/software/index.tsx
+++ b/frontend/components/user/software/index.tsx
@@ -9,8 +9,10 @@ import {Session} from '~/auth'
 import SoftwareGrid from '~/components/software/SoftwareGrid'
 import usePaginationWithSearch from '~/utils/usePaginationWithSearch'
 import useUserSoftware from './useUserSoftware'
+import {useAdvicedDimensions} from '~/components/layout/FlexibleGridSection'
 
-export default function UserSoftware({session}:{session:Session}) {
+export default function UserSoftware({session}: { session: Session }) {
+  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions('software')
   const {searchFor,page,rows, setCount} = usePaginationWithSearch('Filter software')
   const {loading, software, count} = useUserSoftware({
     searchFor,
@@ -29,9 +31,9 @@ export default function UserSoftware({session}:{session:Session}) {
     <SoftwareGrid
       software={software}
       grid={{
-        height:'17rem',
-        minWidth:'25rem',
-        maxWidth:'1fr'
+        height:itemHeight,
+        minWidth,
+        maxWidth
       }}
       className="gap-[0.125rem] pt-4 pb-12"
     />
diff --git a/frontend/pages/projects/index.tsx b/frontend/pages/projects/index.tsx
index b9ba7074e..a7aaf3604 100644
--- a/frontend/pages/projects/index.tsx
+++ b/frontend/pages/projects/index.tsx
@@ -10,8 +10,6 @@ import {useRouter} from 'next/router'
 
 import TablePagination from '@mui/material/TablePagination'
 import Pagination from '@mui/material/Pagination'
-import useMediaQuery from '@mui/material/useMediaQuery'
-import {useTheme} from '@mui/material/styles'
 
 import {app} from '~/config/app'
 import {rowsPerPageOptions} from '~/config/pagination'
@@ -25,6 +23,7 @@ import PageTitle from '~/components/layout/PageTitle'
 import ProjectsGrid from '~/components/projects/ProjectsGrid'
 import ProjectFilter from '~/components/projects/filter'
 import {getResearchDomainInfo, ResearchDomain} from '~/components/projects/filter/projectFilterApi'
+import {useAdvicedDimensions} from '~/components/layout/FlexibleGridSection'
 
 type ProjectsIndexPageProps = {
   count: number,
@@ -43,14 +42,7 @@ export default function ProjectsIndexPage(
 ) {
   // use next router (hook is only for browser)
   const router = useRouter()
-  const theme = useTheme()
-  // use media query hook for small screen logic
-  const smallScreen = useMediaQuery(theme.breakpoints.down('lg'))
-  // adjust grid width and height for mobile
-  const minWidth = smallScreen ? '17rem' : '26rem'
-  const itemHeight = smallScreen ? '26rem' : '17rem'
-
-  // console.log('ProjectsIndexPage...domains...', domains)
+  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions()
 
   function handleTablePageChange(
     event: MouseEvent<HTMLButtonElement> | null,
@@ -146,7 +138,7 @@ export default function ProjectsIndexPage(
         projects={projects}
         height={itemHeight}
         minWidth={minWidth}
-        maxWidth='1fr'
+        maxWidth={maxWidth}
         className="gap-[0.125rem] p-[0.125rem] pt-4 pb-12"
       />
 
diff --git a/frontend/pages/software/index.tsx b/frontend/pages/software/index.tsx
index 4d7d18363..9915a503c 100644
--- a/frontend/pages/software/index.tsx
+++ b/frontend/pages/software/index.tsx
@@ -23,6 +23,7 @@ import {getSoftwareList} from '../../utils/getSoftware'
 import {ssrSoftwareParams} from '../../utils/extractQueryParam'
 import {softwareListUrl,ssrSoftwareUrl} from '../../utils/postgrestUrl'
 import SoftwareFilter from '~/components/software/filter'
+import { useAdvicedDimensions } from '~/components/layout/FlexibleGridSection'
 
 type SoftwareIndexPageProps = {
   count: number,
@@ -40,13 +41,8 @@ export default function SoftwareIndexPage(
 ) {
   // use next router (hook is only for browser)
   const router = useRouter()
-  const theme = useTheme()
-  // use media query hook for small screen logic
-  const smallScreen = useMediaQuery(theme.breakpoints.down('lg'))
-  // adjust grid width and height for mobile
-  const minWidth = smallScreen ? '17rem' : '26rem'
-  const itemHeight = smallScreen ? '17em' : '17rem'
-
+  const {itemHeight, minWidth, maxWidth} = useAdvicedDimensions('software')
+  
   // next/previous page button
   function handleTablePageChange(
     event: MouseEvent<HTMLButtonElement> | null,
@@ -146,7 +142,7 @@ export default function SoftwareIndexPage(
         grid={{
           height: itemHeight,
           minWidth,
-          maxWidth:'1fr'
+          maxWidth
         }}
         software={software}
       />