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";