diff --git a/src/shared/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index 33d25e08d0..2d80549ffe 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/src/shared/containers/timeline-wall/index.jsx @@ -42,7 +42,7 @@ function TimelineWallContainer(props) { const role = 'Admin User'; const authToken = _.get(auth, 'tokenV3'); const isMobile = useMediaQuery({ - query: '(max-device-width: 768px)', + query: '(max-width: 768px)', }); useEffect(() => { @@ -89,7 +89,7 @@ function TimelineWallContainer(props) { let date = moment(`${currentYear}-${currentMonth + 1}`).format('YYYY-MM'); while (!target) { - target = document.getElementById(`${moment(date).year()}-${(moment(date).month()).toString().padStart(2, '0')}`); + target = document.getElementById(`${isMobile ? 'mobile-' : 'desktop-'}${moment(date).year()}-${(moment(date).month()).toString().padStart(2, '0')}`); if (target || !moment(date).isValid() || moment(date).year() > maxYear) { break; @@ -100,11 +100,7 @@ function TimelineWallContainer(props) { if (target) { const yOffset = -10; const coordinate = target.getBoundingClientRect().top + window.pageYOffset + yOffset; - if (isMobile) { - setTimeout(target.scrollTo(), 100); - } else { - window.scrollTo({ top: coordinate, behavior: 'smooth' }); - } + window.scrollTo({ top: coordinate, behavior: 'smooth' }); } else { window.scrollTo({ top: 0, behavior: 'smooth' }); } diff --git a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx index c12b4c74c0..617770d2fa 100644 --- a/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/events/event-item/index.jsx @@ -16,7 +16,7 @@ import './styles.scss'; import { DEFAULT_AVATAR_URL } from '../../../../../utils/url'; function EventItem({ - className, isLeft, eventItem, deleteEvent, isAdmin, userAvatars, + className, isLeft, eventItem, deleteEvent, isAdmin, userAvatars, idPrefix, }) { const [isExpanded, setIsExpanded] = useState(false); const [showModalPhoto, setShowModalPhoto] = useState(false); @@ -33,7 +33,7 @@ function EventItem({ 'color-red': eventItem.color === 'red', 'color-purple': eventItem.color === 'purple', })} - id={moment(eventItem.eventDate).format('YYYY-MM')} + id={`${idPrefix}${moment(eventItem.eventDate).format('YYYY-MM')}`} > {isLeft ? null : (
)} {isLeft ? null : ()} @@ -137,6 +137,7 @@ EventItem.defaultProps = { }, isAdmin: false, userAvatars: {}, + idPrefix: '', }; /** @@ -149,6 +150,7 @@ EventItem.propTypes = { isAdmin: PT.bool, userAvatars: PT.shape(), deleteEvent: PT.func.isRequired, + idPrefix: PT.string, }; export default EventItem; diff --git a/src/shared/containers/timeline-wall/timeline-events/events/index.jsx b/src/shared/containers/timeline-wall/timeline-events/events/index.jsx index a53e0409ad..784f6d4ed1 100644 --- a/src/shared/containers/timeline-wall/timeline-events/events/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/events/index.jsx @@ -67,6 +67,7 @@ function Events({ userAvatars={userAvatars} isAdmin={isAdmin} deleteEvent={deleteEvent} + idPrefix="desktop-" /> ))}
@@ -84,6 +85,7 @@ function Events({ userAvatars={userAvatars} isAdmin={isAdmin} deleteEvent={deleteEvent} + idPrefix="desktop-" /> ))} @@ -101,6 +103,7 @@ function Events({ userAvatars={userAvatars} isAdmin={isAdmin} deleteEvent={deleteEvent} + idPrefix="mobile-" /> ))}