diff --git a/src/shared/components/GUIKit/PhotoVideoItem/styles.scss b/src/shared/components/GUIKit/PhotoVideoItem/styles.scss index 93a7a825db..2ab0380c89 100644 --- a/src/shared/components/GUIKit/PhotoVideoItem/styles.scss +++ b/src/shared/components/GUIKit/PhotoVideoItem/styles.scss @@ -18,7 +18,7 @@ } .img-container { - max-height: 100%; + height: 100%; width: 100%; object-fit: cover; } diff --git a/src/shared/components/GUIKit/PhotoVideoPicker/index.jsx b/src/shared/components/GUIKit/PhotoVideoPicker/index.jsx index 0fb0cb39ff..988b2e617b 100644 --- a/src/shared/components/GUIKit/PhotoVideoPicker/index.jsx +++ b/src/shared/components/GUIKit/PhotoVideoPicker/index.jsx @@ -21,6 +21,15 @@ function PhotoVideoPicker({ inputOptions, file, }) { + const renderUpload = () => ( + +

+ {infoText} +

+ +
+ ); + return (
@@ -76,44 +85,48 @@ function PhotoVideoPicker({ })} /> { - file && file.length ? ( -
- {file.map((fileInfo, index) => ( -
- -
- ))} -
- ) : ( - -

- {infoText} -

- -
- ) - } + file && file.length ? ( +
+ {file.map((fileInfo, index) => ( +
+ +
+ ))} + { + file.length < 3 && ( +
+ {renderUpload()} +
+ ) + } +
+ ) : renderUpload() + } - -

- {infoTextMobile} -

- -
+ { + (file || []).length < 3 && ( + +

+ {infoTextMobile} +

+ +
+ ) + }
diff --git a/src/shared/components/GUIKit/PhotoVideoPicker/styles.scss b/src/shared/components/GUIKit/PhotoVideoPicker/styles.scss index 2a7c0a133c..8713f81db3 100644 --- a/src/shared/components/GUIKit/PhotoVideoPicker/styles.scss +++ b/src/shared/components/GUIKit/PhotoVideoPicker/styles.scss @@ -103,6 +103,13 @@ justify-content: center; position: relative; + &.browse-button { + display: flex; + flex-direction: column; + width: 100%; + padding: 0 10px; + } + @media (max-width: 768px) { height: 100px; border: none; diff --git a/src/shared/containers/timeline-wall/index.jsx b/src/shared/containers/timeline-wall/index.jsx index 34795a95dd..ea1492f780 100644 --- a/src/shared/containers/timeline-wall/index.jsx +++ b/src/shared/containers/timeline-wall/index.jsx @@ -106,6 +106,7 @@ function TimelineWallContainer(props) { const deleteEvent = (id) => { deleteEventById(authToken, id, () => { getPendingApprovals(authToken); + getTimelineEvents(); }); }; @@ -115,9 +116,15 @@ function TimelineWallContainer(props) { }); }; - const removeEvent = (id, body) => { - rejectEventById(authToken, id, body, () => { + const removeEvent = (event = {}, body) => { + const rejectBody = body; + const id = event.id ? event.id : event; + if (!body.reason) { + rejectBody.reason = 'Deleted by admin.'; + } + rejectEventById(authToken, id, rejectBody, () => { getPendingApprovals(authToken); + getTimelineEvents(); }); }; @@ -188,6 +195,7 @@ function TimelineWallContainer(props) { getAvatar={getAvatar} userAvatars={userAvatars} uploading={uploading} + deleteEvent={deleteEvent} /> { diff --git a/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx b/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx index bfdedf9691..7bfd6e6a83 100644 --- a/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx +++ b/src/shared/containers/timeline-wall/pending-approvals/approval-item/index.jsx @@ -67,7 +67,7 @@ function ApprovalItem({ { diff --git a/src/shared/containers/timeline-wall/pending-approvals/approval-item/styles.scss b/src/shared/containers/timeline-wall/pending-approvals/approval-item/styles.scss index 029b4ec33d..1dab5a0499 100644 --- a/src/shared/containers/timeline-wall/pending-approvals/approval-item/styles.scss +++ b/src/shared/containers/timeline-wall/pending-approvals/approval-item/styles.scss @@ -100,7 +100,7 @@ display: flex; justify-content: space-between; align-items: center; - margin-top: 16px; + margin-top: 36px; .btn-trash { border: none; diff --git a/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx b/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx index de5001fc19..fc8f790e2a 100644 --- a/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/add-event/index.jsx @@ -149,7 +149,7 @@ function AddEvents({ files: files.slice(0, 3), }); }} - infoText={'Drag & drop your photo or video here\nYou can upload only up to 3 photos/videos'} + infoText={'Drag & drop your photo or video here\nYou can upload up to 3 photos/videos'} infoTextMobile="Drag & drop your photo or video here" btnText="BROWSE" options={{ 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 6c9f25fd86..6a000d6392 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, removeEvent, isAdmin, userAvatars, + className, isLeft, eventItem, removeEvent, deleteEvent, isAdmin, userAvatars, }) { const [isExpanded, setIsExpanded] = useState(false); const [showModalPhoto, setShowModalPhoto] = useState(false); @@ -112,6 +112,7 @@ function EventItem({ {showModalDelete ? ( { if (result === true) { @@ -119,6 +120,7 @@ function EventItem({ } setShowModalDelete(false); }} + deleteEvent={deleteEvent} /> ) : null} @@ -150,6 +152,7 @@ EventItem.propTypes = { removeEvent: PT.func, isAdmin: PT.bool, userAvatars: PT.shape(), + deleteEvent: PT.func.isRequired, }; 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 4075843800..a53e0409ad 100644 --- a/src/shared/containers/timeline-wall/timeline-events/events/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/events/index.jsx @@ -6,7 +6,7 @@ import EventItem from './event-item'; const colors = ['green', 'red', 'purple']; function Events({ - events, removeEvent, isAuthenticated, getAvatar, userAvatars, + events, removeEvent, isAuthenticated, getAvatar, userAvatars, isAdmin, deleteEvent, }) { const [leftItems, setLeftItems] = useState([]); const [rightItems, setRightItems] = useState([]); @@ -65,6 +65,8 @@ function Events({ }} getAvatar={getAvatar} userAvatars={userAvatars} + isAdmin={isAdmin} + deleteEvent={deleteEvent} /> ))} @@ -80,6 +82,8 @@ function Events({ }} getAvatar={getAvatar} userAvatars={userAvatars} + isAdmin={isAdmin} + deleteEvent={deleteEvent} /> ))} @@ -95,6 +99,8 @@ function Events({ }} getAvatar={getAvatar} userAvatars={userAvatars} + isAdmin={isAdmin} + deleteEvent={deleteEvent} /> ))} @@ -110,6 +116,7 @@ Events.defaultProps = { removeEvent: () => { }, isAuthenticated: false, userAvatars: {}, + isAdmin: false, }; /** @@ -121,6 +128,8 @@ Events.propTypes = { isAuthenticated: PT.bool, getAvatar: PT.func.isRequired, userAvatars: PT.shape(), + isAdmin: PT.bool, + deleteEvent: PT.func.isRequired, }; export default Events; diff --git a/src/shared/containers/timeline-wall/timeline-events/index.jsx b/src/shared/containers/timeline-wall/timeline-events/index.jsx index 721b555ee4..ffb87e8166 100644 --- a/src/shared/containers/timeline-wall/timeline-events/index.jsx +++ b/src/shared/containers/timeline-wall/timeline-events/index.jsx @@ -22,6 +22,7 @@ function TimelineEvents({ userAvatars, onDoneAddEvent, uploading, + deleteEvent, }) { return (
@@ -44,6 +45,7 @@ function TimelineEvents({ }} getAvatar={getAvatar} userAvatars={userAvatars} + deleteEvent={deleteEvent} /> ) : null} @@ -112,6 +114,7 @@ TimelineEvents.propTypes = { onDoneAddEvent: PT.func.isRequired, userAvatars: PT.shape(), uploading: PT.bool, + deleteEvent: PT.func.isRequired, }; export default TimelineEvents; diff --git a/src/shared/containers/timeline-wall/timeline-events/right-filter/styles.scss b/src/shared/containers/timeline-wall/timeline-events/right-filter/styles.scss index c73925939f..6cd6cf43e5 100644 --- a/src/shared/containers/timeline-wall/timeline-events/right-filter/styles.scss +++ b/src/shared/containers/timeline-wall/timeline-events/right-filter/styles.scss @@ -52,6 +52,10 @@ width: 120px; border-radius: 8px; padding: 10px 0; + position: fixed; + right: 0; + max-height: 70%; + overflow: scroll; @media (max-width: 768px) { border-radius: 0;