diff --git a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js index d35a67b8..f001fdf9 100644 --- a/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js +++ b/src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js @@ -8,6 +8,7 @@ import { format } from 'date-fns'; import LoadingSpinner from '../../LoadingSpinner'; import { getSharedAnnotations, getOwnAnnotations } from '../../../utils/annotationUtil'; import { getGroupNameById } from '../../../utils/groupUtil'; +import { FirstNameLastInitial } from '../../../utils/nameUtil'; const DashboardAnnotationList = ({ session, @@ -15,7 +16,7 @@ const DashboardAnnotationList = ({ setAlerts, }) => { const [groupState, setGroupState] = useState({}); - const [key, setKey] = useState('shared'); + const [key, setKey] = useState('mine'); const [listLoading, setListLoading] = useState(true); const [annotations, setAnnotations] = useState([]); @@ -72,38 +73,55 @@ const DashboardAnnotationList = ({ )} {!listLoading && annotations && annotations.length > 0 && ( - - {annotations.sort((a, b) => new Date(b.created) - new Date(a.created)).map( - (annotation) => ( - - - - {annotation.target.document.title} - - - {annotation.permissions.groups && annotation.permissions.groups.length > 0 && ( - - {groupState[annotation.permissions.groups.sort()[0]]} - - )} - <> - {format(new Date(annotation.created), 'MM/dd/yyyy')} - - - - - ), - )} - + <> + + {annotations.sort((a, b) => new Date(b.created) - new Date(a.created)).map( + (annotation) => ( + + + + + {annotation.target.selector.exact} + + + + {annotation.permissions.groups && annotation.permissions.groups.length > 0 && ( + + {groupState[annotation.permissions.groups.sort()[0]]} + + )} + {format(new Date(annotation.created), 'Ppp')} + + + + + {annotation.body.value} + + + + + + {annotation.target.document.title} + {' ('} + {FirstNameLastInitial(annotation.creator.name)} + ) + + + + + ), + )} + + {`See all ${key === 'shared' ? key : 'created'} annotations...`} - - + + )} {!listLoading && (!annotations || annotations.length === 0) && ( diff --git a/src/style/custom.scss b/src/style/custom.scss index cb80cc5e..01ebaaad 100644 --- a/src/style/custom.scss +++ b/src/style/custom.scss @@ -205,5 +205,20 @@ $theme-colors: ( height: 100%; } +.ellipsis { + text-overflow: ellipsis; + max-width: 100%; + overflow: hidden; + white-space: nowrap; +} + +.paragraph-ellipsis { + line-clamp: 3; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + /* import bootstrap */ @import "~bootstrap/scss/bootstrap";