fix: use same card title approach in all cards

research-software-directory · Dec 1, 2022 · 14ec09d · 14ec09d
1 parent 6f7de9e
commit 14ec09d
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 103 deletions.
diff --git a/frontend/components/layout/CardGrid.tsx b/frontend/components/layout/CardGrid.tsx
diff --git a/frontend/components/layout/CardTitle.tsx 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>
+  )
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -4,19 +4,19 @@
 // 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'
 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
@@ -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
@@ -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
@@ -12,16 +12,17 @@ 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,
     page,
     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"
     />
   )