diff --git a/package-lock.json b/package-lock.json index 9ff76f06..e5d3e2fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4845,11 +4845,6 @@ } } }, - "css-mediaquery": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", - "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" - }, "css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -9574,14 +9569,6 @@ "uc.micro": "^1.0.5" } }, - "matchmediaquery": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", - "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", - "requires": { - "css-mediaquery": "^0.1.2" - } - }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -13291,6 +13278,11 @@ "xtend": "^4.0.1" } }, + "react-markdown-editor-lite": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-markdown-editor-lite/-/react-markdown-editor-lite-1.2.2.tgz", + "integrity": "sha512-yHWdwaSiqbR4kdQUBBTBTnpNcBZOwl+a5eL2BrSTr6S2L3dyENF571LglU4zhBPViMJmX8XYYoYJEQVa7+0c2g==" + }, "react-mde": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-mde/-/react-mde-10.2.1.tgz", @@ -13461,17 +13453,6 @@ "tslib": "^1.0.0" } }, - "react-responsive": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.1.0.tgz", - "integrity": "sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==", - "requires": { - "hyphenate-style-name": "^1.0.0", - "matchmediaquery": "^0.3.0", - "prop-types": "^15.6.1", - "shallow-equal": "^1.1.0" - } - }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -13533,6 +13514,14 @@ } } }, + "react-router-hash-link": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.2.2.tgz", + "integrity": "sha512-+8u5aAiRVWAFutH2Zwcm7UiuHmfed3Yn+d6aMVP8WGclMSv2ySAbGx836UifZO/+5o5QVhOS71soYHy0NVJN5g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", @@ -13657,11 +13646,6 @@ "prop-types": "^15.6.2" } }, - "react-tiny-fab": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/react-tiny-fab/-/react-tiny-fab-3.5.0.tgz", - "integrity": "sha512-KjWzs7fsTTvrmCZrtKVV8EKdfoC7BgWCePujtWfczpXiUCECtBYkhP+EvBYLRgU6BAHdtduBfybfN4pTCpw2Zw==" - }, "react-tinymce": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/react-tinymce/-/react-tinymce-0.4.0.tgz", @@ -14638,11 +14622,6 @@ } } }, - "shallow-equal": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", - "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" - }, "shallowequal": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", diff --git a/package.json b/package.json index 0852d7fa..72dac4ae 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,8 @@ "react-mde": "^10.2.1", "react-moment": "^0.9.7", "react-redux": "^7.2.0", - "react-responsive": "^8.0.3", "react-router-dom": "^5.1.2", + "react-router-hash-link": "^2.2.2", "react-scripts": "^3.4.0", "react-shapes": "^0.1.0", "react-share": "^4.2.1", diff --git a/src/assets/svgs/NavigationIcons/menu.svg b/src/assets/svgs/NavigationIcons/menu.svg new file mode 100644 index 00000000..efbde7b3 --- /dev/null +++ b/src/assets/svgs/NavigationIcons/menu.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/user/Activity/Activity.js b/src/user/Activity/Activity.js index 37133b92..290c0395 100644 --- a/src/user/Activity/Activity.js +++ b/src/user/Activity/Activity.js @@ -16,6 +16,7 @@ import OrgAuth from '../dashboard/Community/components/OrgAuth'; import OrgMaintenance from '../dashboard/Community/components/OrgMaintenance'; import Users from './Users'; import ActivityTimeline from './ActivityTimeline'; +import { Accordion, Button } from 'react-bootstrap'; class Activity extends Component { constructor(props) { @@ -29,7 +30,8 @@ class Activity extends Component { authentication: false, maintenance: false, activity: true, - details: true + details: true, + sidebarOpen: false }, }; } @@ -49,41 +51,58 @@ class Activity extends Component { render() { const { view } = this.state - + const toggleSidebar = () => { + this.setState((prevState) => { + return { + sidebarOpen: !prevState.sidebarOpen + } + }) + } return ( -
-
- -
-
-
-
-

Community Settings

- -
-
- {view === "profile" ? : null} - {view === "permission" ? : null} - {view === "settings" ? : null} - {view === "authentication" ? : null} - {view === "maintenance" ? : null} - {view === "activity" ? ( - - ) : null} - {view === "details" ? ( - - ) : null} + <> + +
+
+

Community Settings

+
+ +
+ + toggleSidebar()} variant="outline-secondary" size="sm" as={Button} eventKey="0"> + {this.state.sidebarOpen?"Close Menu":"Setting Menu"} + + + + + +
+
+ {view === "profile" ? : null} + {view === "permission" ? : null} + {view === "settings" ? : null} + {view === "authentication" ? : null} + {view === "maintenance" ? : null} + {view === "activity" ? ( + + ) : null} + {view === "details" ? ( + + ) : null} +
-
-
-
+ ); } } @@ -94,4 +113,4 @@ const mapStateToProps = (state) => ({ post: state.post }) -export default connect(mapStateToProps, { getEventById, getPostById })(withRouter(Activity)); \ No newline at end of file +export default connect(mapStateToProps, { getEventById, getPostById })(withRouter(Activity)); diff --git a/src/user/Activity/ActivityTimeline.js b/src/user/Activity/ActivityTimeline.js index a1fb6097..977d99d3 100644 --- a/src/user/Activity/ActivityTimeline.js +++ b/src/user/Activity/ActivityTimeline.js @@ -89,7 +89,7 @@ export default function ActivityTimeline() { showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={1} - total={500} + total={activity.length || 0} onChange={handlePagination} />
diff --git a/src/user/Activity/Users.js b/src/user/Activity/Users.js index a147ad28..68bf6c87 100644 --- a/src/user/Activity/Users.js +++ b/src/user/Activity/Users.js @@ -81,7 +81,7 @@ class Users extends Component { showSizeChanger onShowSizeChange={this.onShowSizeChange} defaultCurrent={1} - total={500} + total={users.length || 0} onChange={this.handlePagination} /> @@ -96,4 +96,4 @@ const mapStateToProps = (state) => ({ insight: state.insight }) -export default connect(mapStateToProps, { getMembers })(withRouter(Users)); \ No newline at end of file +export default connect(mapStateToProps, { getMembers })(withRouter(Users)); diff --git a/src/user/Activity/activity.scss b/src/user/Activity/activity.scss index 37cb5935..a34bf1a9 100644 --- a/src/user/Activity/activity.scss +++ b/src/user/Activity/activity.scss @@ -1,24 +1,9 @@ -.overall_container{ - display: flex; - .main_navigation { - left: -1px; - top: -1px; - height: 100vh; - border: 1px solid #CCCCCC; - box-sizing: border-box; - } - .user_activity_view { - margin-top: 35px; - margin-left: 15vw; - margin-left: auto; - margin-right: auto; - .main_section { + .main_section { + margin: 35px auto auto 15vw; display: flex; flex-direction: row; justify-items: center; flex-wrap: wrap; - margin-top: -1.3em; - margin-left: -2vw; .left_nav { max-width: 20%; height: 50%; @@ -74,45 +59,67 @@ } } } - } -} // mobile +.activity_accordion { + display: none; +} + @media screen and (max-width: 768px) { - .overall_container{ - .org_settings_view { - .main_section { - .left_nav { - .navigation { - .list-group { - .link { - display: none; - } - .header_text { - font-size: 10px; - } - } - } - } - } +.main_section { + width: 100%; + margin: 0; + padding: 2.5vh 2.5vw; + flex-direction: column; + .left_nav { + width: 100%; + max-width: 100%; + margin: 10px auto; + .activity_accordion { + display: block; + } + .left_nav_container { + display: none; + } + .navigation { + .list-group { + .link { + display: none; + } + .header_text { + font-size: 10px; + } + } } } } +} // tablet -@media screen and (min-width: 768px) and (max-width: 1023px) { - .overall_container { - .org_settings_view { - .main_section { - .left_nav { - .navigation { - .list-group { - .link { - font-size: 5px; - } - } +@media screen and (min-width: 768px) and (max-width: 1024px) { + + .main_section { + width: 100%; + margin: 0; + padding: 2.5vh 2.5vw; + flex-direction: column; + .left_nav { + width: 100%; + max-width: 100%; + margin: 10px auto; + .activity_accordion { + display: block; + } + .left_nav_container { + display: none; + } + .navigation { + .list-group { + .link { + font-size: 5px; } } } } } -} \ No newline at end of file +} + diff --git a/src/user/Activity/activityTimeline.scss b/src/user/Activity/activityTimeline.scss index 172e5e11..9b12932a 100644 --- a/src/user/Activity/activityTimeline.scss +++ b/src/user/Activity/activityTimeline.scss @@ -14,8 +14,8 @@ } } .activities__list { - max-height: 75vh; - overflow-y: auto; + max-height: 100%; + overflow-y: hidden; width: 75vw; margin-top: 4px; overflow-x: hidden; @@ -23,9 +23,26 @@ display: flex; flex-direction: row; flex-wrap: wrap; + padding-top: 1rem; .pagination__container { - position: fixed; - margin-top: 78vh; + width: 100%; } } -} \ No newline at end of file +} + +@media (min-width: 320px) and (max-width: 1024px){ + .activity__timeline { + margin: 0; + padding-top: 2.5vh; + .activities__list { + max-height: 100%; + overflow: hidden; + width: 75vw; + padding: 2.5vh 0 0 0; + margin: 0 auto; + .pagination__container { + width: 100%; + } + } + } +} diff --git a/src/user/Activity/users.scss b/src/user/Activity/users.scss index 91897eca..f6cdef81 100644 --- a/src/user/Activity/users.scss +++ b/src/user/Activity/users.scss @@ -1,5 +1,5 @@ .activity__main__container { - margin-left: 18vw; + margin-left: 15vw; .main-navigation { border-right: 1px solid #cccccc; } @@ -29,9 +29,9 @@ display: flex; flex-direction: row; flex-wrap: wrap; + padding-top: 20px; .pagination__container { - position: fixed; - margin-top: 78vh; + width: 100%; } .user__wrapper { display: flex; @@ -62,4 +62,28 @@ } } } -} \ No newline at end of file +} + + +@media (min-width: 320px) and (max-width: 1024px){ + .activity__main__container { + margin: 0; + .header__text { + margin: 20px 0 0 0; + } + } + .timeline__container { + max-width: 100%; + margin: 0; + width: 100%; + padding: 20px; + max-height: 100%; + ul { + width: 100%; + } + .pagination__container { + margin-top: 0; + width: 100%; + } + } +} diff --git a/src/user/Admin/Tickets/Filter/Filter.js b/src/user/Admin/Tickets/Filter/Filter.js index 4caee865..5154df37 100644 --- a/src/user/Admin/Tickets/Filter/Filter.js +++ b/src/user/Admin/Tickets/Filter/Filter.js @@ -262,17 +262,19 @@ class Filter extends Component { /> - - {isAdmin && ( - - )} + {isAdmin && ( + + )} +
diff --git a/src/user/Admin/Tickets/Filter/Filter.scss b/src/user/Admin/Tickets/Filter/Filter.scss index 300b4987..e7fa2eb1 100644 --- a/src/user/Admin/Tickets/Filter/Filter.scss +++ b/src/user/Admin/Tickets/Filter/Filter.scss @@ -65,3 +65,16 @@ } } } + +@media (min-width: 320px) and (max-width: 1024px){ + .searchbar-container { + flex-direction: column;; + .searchbar { + flex: 1; + margin: 0 0 10px 0; + } + .searchbar-action { + flex: 1; + } + } +} diff --git a/src/user/Admin/Tickets/TicketDashboard.js b/src/user/Admin/Tickets/TicketDashboard.js index 403f90e8..9d271cde 100644 --- a/src/user/Admin/Tickets/TicketDashboard.js +++ b/src/user/Admin/Tickets/TicketDashboard.js @@ -219,89 +219,89 @@ class TicketDashboard extends Component { /> ); return ( -
-
- -
-
- } - styles={{ - spinner: (base) => ({ - ...base, - width: "100px", - "& svg circle": { - stroke: "rgba(26, 115, 232, 0.5)", - }, - }), - }} - > -
-
- Tickets - + <> + +
+
+ } + styles={{ + spinner: (base) => ({ + ...base, + width: "100px", + "& svg circle": { + stroke: "rgba(26, 115, 232, 0.5)", + }, + }), + }} + > +
+
+ Tickets + +
+ {!editorMode && !viewingTicket && ticketDashboard} + {editorMode && !viewingTicket && ( + this.toggleNewTicketEditor(false)} + /> + )} + {viewingTicket && ticeketDiscussion}
- {!editorMode && !viewingTicket && ticketDashboard} - {editorMode && !viewingTicket && ( - this.toggleNewTicketEditor(false)} - /> - )} - {viewingTicket && ticeketDiscussion} -
- - - - {notifications && - notifications.map((notification, index) => ( - -
{notification.tag}
-
{notification.heading}
-
- -
-
{notification.content}
-
- - ))} - - - + + + + {notifications && + notifications.map((notification, index) => ( + +
{notification.tag}
+
{notification.heading}
+
+ +
+
{notification.content}
+
+ + ))} + + + +
-
+ ); } } diff --git a/src/user/Admin/Tickets/TicketDashboard.scss b/src/user/Admin/Tickets/TicketDashboard.scss index 952d7db4..f3159e7f 100644 --- a/src/user/Admin/Tickets/TicketDashboard.scss +++ b/src/user/Admin/Tickets/TicketDashboard.scss @@ -3,16 +3,6 @@ height: 100vh; font-family: Muli, sans-serif; - .navigation { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - } .ticket-details { ._loading_overlay_wrapper { height: 100%; @@ -36,7 +26,7 @@ .ticket-description { display: flex; flex-direction: column; - height: 100vh; + min-height: 100vh; overflow-y: hidden; .dashboard-title { font-family: Inter; @@ -97,3 +87,12 @@ flex-grow: 0; } } + +@media (min-width: 320px) and (max-width: 1024px){ + .ticket{ + .ticket-details { + margin-left: 0; + } + } +} + diff --git a/src/user/auth/login-form/login-form.js b/src/user/auth/login-form/login-form.js index c1133b8d..bd022278 100644 --- a/src/user/auth/login-form/login-form.js +++ b/src/user/auth/login-form/login-form.js @@ -121,7 +121,6 @@ class LoginForm extends Component {
- - - - -
this.setState({ open: true })} - > - jitsi -
- {this.state.open ? ( - - ) : null} - - - - -
+
+ ); } } diff --git a/src/user/dashboard/navigation/navigation.scss b/src/user/dashboard/navigation/navigation.scss index 3d8de512..d0469544 100644 --- a/src/user/dashboard/navigation/navigation.scss +++ b/src/user/dashboard/navigation/navigation.scss @@ -1,5 +1,13 @@ -.main-navigation { +.navigation { width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; .list-group { background-color: #f5f5f5; .list-group-item { @@ -9,13 +17,13 @@ border: none; font-style: normal; font-family: "Inter"; - font-size: 0.729vw; + font-size: 0.8rem; letter-spacing: 0.1px; text-decoration: none; span { font-style: normal; font-family: "Inter"; - font-size: 0.729vw; + font-size: 0.8rem; letter-spacing: 0.1px; text-decoration: none; margin-left: 1.4vw; @@ -31,13 +39,13 @@ border: none; font-style: normal; font-family: "Inter"; - font-size: 0.729vw; + font-size: 0.8rem; letter-spacing: 0.1px; text-decoration: none; span { font-style: normal; font-family: "Inter"; - font-size: 0.729vw; + font-size: 0.8rem; letter-spacing: 0.1px; text-decoration: none; margin-left: 1.4vw; @@ -46,7 +54,7 @@ font-family: Inter; font-style: normal; font-weight: 600; - font-size: 0.729vw; + font-size: 0.8rem; line-height: 21px; .integration-add { margin-left: 3.9vw; @@ -71,7 +79,7 @@ width: 50px; } -.main-navigation { +.navigation { .list-group { .link { text-decoration: none; @@ -94,7 +102,7 @@ } } -.main-navigation { +.navigation { .list-group { .link { .inactive { @@ -113,7 +121,7 @@ } } -.main-navigation { +.navigation { .list-group { .list-group-item { svg { @@ -141,7 +149,7 @@ padding: 0px 10px 0px 10px; } -.main-navigation { +.navigation { .list-group { .active { .icon { @@ -169,8 +177,55 @@ color: rgba(0, 0, 0, 0.5); bottom: 2em; } -.main-navigation { +.navigation { hr { margin-bottom: 0; } } + +.nav-bar { + background: #FFFFFF; + box-shadow: 0px 3px 10px rgba(115, 143, 147, 0.3); +} + +.navigation::-webkit-scrollbar { + display: none; +} + +.nav-collection { + width: 100%; + .nav-row { + align-items: center; + } +} + +.icon-container { + display: inline-block; +} + +.nav-container .navbar{ + display: none; +} + +@media (min-width: 320px) and (max-width: 1024px){ + .navigation { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + max-width: 80vw; + min-width: 70vw; + transition: 0.5s; + z-index: 1022; + } + .hide-nav { + transform: translateX(-105%); + } + .nav-container .navbar{ + display: block; + } +} diff --git a/src/user/dashboard/news-feed/news-feed.js b/src/user/dashboard/news-feed/news-feed.js index c72a269d..580398ea 100644 --- a/src/user/dashboard/news-feed/news-feed.js +++ b/src/user/dashboard/news-feed/news-feed.js @@ -14,7 +14,7 @@ import { CardMedia, } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; -import { Button, Dropdown } from "react-bootstrap"; +import { Button, Dropdown, Row, Col } from "react-bootstrap"; import AddEventModal from "./popups/AddEventModal"; import AddProjectModal from "./popups/AddProjectModal"; import PostReactionModal from "./popups/PostReactionsModal"; @@ -320,318 +320,318 @@ function NewsFeed(props) { votes.donut?.user.length; return ( -
- - - - - - - I - - - -

navigateToProfile(post.userId?._id)}> - {post?.userId?.name?.firstName + - " " + - post?.userId?.name?.lastName} -

- {post?.createdAt} - - onPinPost(post._id)} - /> - - - - - {post?.userId?._id === userId ? ( - - handleShow("edit", post)} - > - Edit - - - showSharePostModal( - post?.content.replace(FILTER_TAGS_REGEX, "") - ) - } - > - Share - - showDeletePostModal(post._id)} - > - Delete - - - ) : ( - - - showSharePostModal( - post?.content.replace(/(<([^>]+)>)/gi, "") - ) - } - > - Share - - - )} - - -
{parse(post?.content)}
- - {/* onUpvote(post._id)} - > - - - {post?.votes?.upVotes?.user.length} - */} - - {/* openReactionsModal(post.votes)} - > - {post?.votes?.upVotes?.user.length} - */} - - - - - - - - -
+ {post?.votes?.upVotes?.user.length} + */} + + + + + + + + +
+ ); }); let projectsContent = projects?.map((project) => { return ( -
- - - - -
-

{project?.projectName}

-

By {project?.projectOwner || "CODEUINO"}

-
+ +
+ + + + +
+

{project?.projectName}

+

By {project?.projectOwner || "CODEUINO"}

+
+ +
+
+ + + + + + + I + + + +

navigateToProfile(project.createdBy?._id)}> + {project?.createdBy?.name?.firstName + + " " + + project?.createdBy?.name?.lastName} +

+ {project?.createdAt} + + +
{project?.description?.short}
+ + + -
-
- - - - - - - I - - - -

navigateToProfile(project.createdBy?._id)}> - {project?.createdBy?.name?.firstName + - " " + - project?.createdBy?.name?.lastName} -

- {project?.createdAt} - - -
{project?.description?.short}
- - - - - - - - - -
+ + + + + +
+ ); }); let eventsContent = events?.map((event) => { return ( -
- - - - -
-

{event?.eventName}

-
-
-
- DATE -
- {event?.eventDate} + +
+ + + + +
+

{event?.eventName}

+
+
+
+ DATE +
+ {event?.eventDate} +
-
-
-
- Location -

{event?.location}

+
+
+ Location +

{event?.location}

+
+
+ +
-
- -
+ + + + + + + I + + + +

navigateToProfile(event?.createdBy?._id)}> + {event?.createdBy?.name?.firstName + + " " + + event?.createdBy?.name?.lastName} +

+ {event?.createdAt} + + +
+ {event?.description?.shortDescription}
- - - - - - - I - - - -

navigateToProfile(event?.createdBy?._id)}> - {event?.createdBy?.name?.firstName + - " " + - event?.createdBy?.name?.lastName} -

- {event?.createdAt} - - -
- {event?.description?.shortDescription} -
- - - - -
+ + + + +
+ ); }); - let content; - if (type === "Project") { - content = projectsContent; - } - if (type === "Post") { - content = postContent; - } - if (type === "Event") { - content = eventsContent; - } - - return ( - <> + let createPost = (
- - - - -
- - - - + + + +
+ +
-
{ @@ -667,72 +667,94 @@ function NewsFeed(props) { />
+ ) + + let content; + if (type === "Project") { + content = projectsContent; + } + if (type === "Post") { + content = postContent; + } + if (type === "Event") { + content = eventsContent; + } + + return ( + <>
-
- -
    -
  • - All -
    • -
  • +
    +
      - Posts - -
    • - Events -
      • -
    • - Projects -
      • -
    - -
    -
    - {Boolean(type !== "All") ? ( - content - ) : ( - <> - {postContent} - {eventsContent} - {projectsContent} - - - )} -
    +
  • + All +
    • +
  • + Posts +
    • +
  • + Events +
    • +
  • + Projects +
    • +
+
+
+ + + + + + {Boolean(type !== "All") ? ( + content + ) : ( + <> + {postContent} + {eventsContent} + {projectsContent} + + + )} + + +
); diff --git a/src/user/dashboard/news-feed/news-feed.scss b/src/user/dashboard/news-feed/news-feed.scss index aa69a2d7..299808e8 100644 --- a/src/user/dashboard/news-feed/news-feed.scss +++ b/src/user/dashboard/news-feed/news-feed.scss @@ -11,6 +11,9 @@ max-height: 55px; max-width: 1500px; } + .article__row, .content__row{ + width: 100%; + } } .cta { // padding: 5px 8px; @@ -377,6 +380,7 @@ color: #ff0000; } .news__feed__container { + padding: 0 30px; .news-feed { .post-article { .article { @@ -456,9 +460,15 @@ } .tabs__container { width: 140%; - margin-left: 27px; + // margin-left: 27px; margin-top: 10px; .nav__tab { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + margin-top: 2vh; .nav__list__container { display: flex; justify-content: center; @@ -532,3 +542,56 @@ .post .main h2 { cursor: pointer; } + +@media (min-width: 320px) and (max-width: 1024px){ + .news__feed__container { + margin-bottom: 0px; + padding: 0px; + .post { + width: 100vw; + margin-bottom: 17px; + + [class^="col-"] { + .content__row { + width: 100vw; + margin: 0 auto; + } + } + } + .news-feed { + width: 100vw; + padding: 0; + .post-article { + height: auto; + .article { + justify-content: center; + margin-top: 20px; + } + } + } + .cta { + padding-top: 10px; + text-align: center; + button { + padding: 0 1rem; + } + } + } + .tabs__container { + width: 100%; + margin: 0; + .nav__tab { + padding: 0; + .nav__list__container { + justify-content: space-between; + padding: 15px 10px 0px 10px; + margin-top: 10px; + margin-bottom: 0px; + .nav__single__tab { + padding: 0; + margin: 0; + } + } + } + } +} diff --git a/src/user/dashboard/news-feed/popups/AddPostModal.js b/src/user/dashboard/news-feed/popups/AddPostModal.js index fd5c49c7..54bbca5a 100644 --- a/src/user/dashboard/news-feed/popups/AddPostModal.js +++ b/src/user/dashboard/news-feed/popups/AddPostModal.js @@ -82,7 +82,7 @@ const AddPostModal = (props) => {
{type === "Write" ? ( - + { <> )} {type === "Preview" ? ( - + { + this.setState((prevState) => { + return { + sidebarOpen: !prevState.sidebarOpen + } + }) + } return (
- +
+ +
+ + toggleSidebar()} variant="outline-secondary" size="sm" as={Button} eventKey="0"> + {this.state.sidebarOpen?"Close Menu":"Setting Menu"} + + + + +
diff --git a/src/user/dashboard/settings/Settings.js b/src/user/dashboard/settings/Settings.js index e75f3731..646722b3 100644 --- a/src/user/dashboard/settings/Settings.js +++ b/src/user/dashboard/settings/Settings.js @@ -12,14 +12,14 @@ class Settings extends Component { } render() { return ( -
-
- + <> + +
+
+ +
-
- -
-
+ ) } } diff --git a/src/user/dashboard/settings/styles/SettingSidebar.scss b/src/user/dashboard/settings/styles/SettingSidebar.scss index ee896d48..fb50a186 100644 --- a/src/user/dashboard/settings/styles/SettingSidebar.scss +++ b/src/user/dashboard/settings/styles/SettingSidebar.scss @@ -1,10 +1,14 @@ .settings__right__container { display: flex; .settings__left__nav { - max-width: 17%; - height: 50%; margin-top: 38px; margin-left: 10px; + .settings__left__nav__container { + display: block; + } + .settings__left__nav__accordion { + display: none; + } } .settings__right__content { width: 80vw; @@ -40,4 +44,36 @@ } } } -} \ No newline at end of file +} + +@media (min-width: 320px) and (max-width: 1024px){ + .settings__right__container { + flex-flow: column; + padding: 2.5vh 2.5vw; + .settings__left__nav { + flex: 1; + margin: 0; + padding: 0; + .settings__left__nav__container { + display: none; + } + .settings__left__nav__accordion { + display: block; + } + } + .settings__right__content { + flex: 3; + margin: 4vh 0; + padding: 0; + width: 100%; + max-width: 100%; + .right__setting__option__content { + width: 100%; + .row { + margin: 0; + padding: 0; + } + } + } + } +} diff --git a/src/user/dashboard/settings/styles/settings.scss b/src/user/dashboard/settings/styles/settings.scss index 284e9b3f..f987bb31 100644 --- a/src/user/dashboard/settings/styles/settings.scss +++ b/src/user/dashboard/settings/styles/settings.scss @@ -4,21 +4,11 @@ height: auto; font-family: Muli, sans-serif; - .navigation { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - } - .setting-sidebar { + .setting__sidebar { border-left: solid 1px #dfe9f1; } - .settings-content { + .settings__content { flex: 3; margin-left: 13vw; } @@ -26,3 +16,11 @@ color: rgba(0, 0, 0, 0.5); } } + +@media (min-width: 320px) and (max-width: 1024px){ + .settings { + .settings__content { + margin-left: 0; + } + } +} diff --git a/src/user/events/events.js b/src/user/events/events.js index 0689a436..75010e78 100644 --- a/src/user/events/events.js +++ b/src/user/events/events.js @@ -134,30 +134,32 @@ class Events extends Component { }; let Events = allEvents?.map((Item, index) => ( - + {Date.parse(Item.eventDate) >= Date.parse(new Date()) ? ( - - - {Item.isCancelled ? ( -
{""}
- ) : ( -
{""}
- )} - - - - {Item?.eventDate} - - - -
- {Item?.eventDate} -
- - + + + + {Item.isCancelled ? ( +
{""}
+ ) : ( +
{""}
+ )} + + + + {Item?.eventDate} + + + +
+ {Item?.eventDate} +
+ + +

{Item?.eventName}

@@ -205,25 +207,25 @@ class Events extends Component { - - - {Item.isCancelled ? ( -
{""}
- ) : ( -
{""}
- )} - - - - {Item?.eventDate} - - - -
- {Item?.eventDate} -
- - + + + + {Item.isCancelled ? ( +
{""}
+ ) : ( +
{""}
+ )} + + + + {Item?.eventDate} + + + + {Item?.eventDate} + + +

{Item.eventName}

@@ -272,24 +274,24 @@ class Events extends Component { )); return ( -
-
- -
-
-

All Events

- - {Events} - + <> + +
+
+

All Events

+ + {Events} + -
- +
+ +
-
+ ); } } diff --git a/src/user/events/events.scss b/src/user/events/events.scss index 4f8c4ea8..9193c55d 100644 --- a/src/user/events/events.scss +++ b/src/user/events/events.scss @@ -3,16 +3,6 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .navigation { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - } .events { padding: 20px; margin-top: 2vh; @@ -31,9 +21,7 @@ } .MuiCard-root { overflow: hidden; - height: 42vh; } - .event__pagination__container { display: flex; flex-direction: row; @@ -98,13 +86,13 @@ font-size: 3rem; } -.div3 { +.date { background-color: #ffffff; width: auto; text-align: center; font-size: 1.45rem; - margin-left: 7vw; - margin-right: -12vw; + display: flex; + align-items: center; .day { font-weight: 25px; } @@ -114,6 +102,7 @@ } .inside { + width: 100%; margin-right: 2vw; margin-left: 2vw; } @@ -163,3 +152,18 @@ color: #1a73ed; } } + +@media (min-width: 320px) and (max-width: 1024px){ + .organization { + margin-left: 0; + .events { + margin: 0; + .event_header { + text-align: center; + } + .card__container { + max-width: 100%; + } + } + } +} diff --git a/src/user/organization/org-contact/OrgContact.js b/src/user/organization/org-contact/OrgContact.js index 7c8d90a9..c0c18f95 100644 --- a/src/user/organization/org-contact/OrgContact.js +++ b/src/user/organization/org-contact/OrgContact.js @@ -1,8 +1,9 @@ import React, { Component } from "react"; import "./org-contact.scss"; -import { Card, Avatar, CardContent } from '@material-ui/core'; +import { Avatar, CardContent } from '@material-ui/core'; import { connect } from 'react-redux' import { getOrgProfile } from '../../../actions/orgAction' +import { Card, ListGroup } from 'react-bootstrap'; class OrgContact extends Component { constructor(props) { @@ -24,27 +25,28 @@ class OrgContact extends Component {

Contact

- -
+ +

Email


-
- {this.props.admins.map(i => { return
R

{i.email}

})} -
-
- {this.props.admins.map(i => { return

{i.designation}

})} -
+ + {this.props.admins.map(i => { return R
{i.email} {i.designation}
})} +
-
+

Website

-

{this.state.website}

-

Community

+ + {this.state.website} +
-
+

Community email

-

{this.state.email}

+ + {this.state.email} +

- + +
) diff --git a/src/user/organization/org-contact/org-contact.scss b/src/user/organization/org-contact/org-contact.scss index f69a24f6..f5889c86 100644 --- a/src/user/organization/org-contact/org-contact.scss +++ b/src/user/organization/org-contact/org-contact.scss @@ -6,33 +6,38 @@ border: solid 1px #dfe9f1; overflow: auto; margin-bottom: 5px; - .email-content { + .contact__content { display: flex; flex-direction: row; - justify-content: space-between; + margin-bottom: 1vh; .designation { - text-align: right; color: rgba(0, 0, 0, 0.5); - font-weight: 650; + font-weight: bold; } .initial { color: rgba(0, 0, 0, 0.5); font-weight: 550; + flex: 1; + } + .data_container { + flex: 2; + } + .data { + display: block; } .hidden { visibility: hidden; } - .email-info { + .contact__content__collection { + flex: 3; + } + .contact_item { display: flex; - flex-direction: column; - .info { - display: flex; - flex-direction: row; - .avatar { - width: 25px; - height: 25px; - margin-right: 5px; - } + padding: 0; + border: 0; + margin-bottom: 1rem; + div { + margin-right: 10px; } } } diff --git a/src/user/organization/org-info/org-info.scss b/src/user/organization/org-info/org-info.scss index 2e99b9eb..b93a396c 100644 --- a/src/user/organization/org-info/org-info.scss +++ b/src/user/organization/org-info/org-info.scss @@ -120,3 +120,29 @@ .org-followbtn { margin: 10px; } + +@media (min-width: 320px) and (max-width: 1024px){ + + .org-details { + width: 100%; + margin: auto 2vw; + .org-image { + width: 100%; + flex: 1; + .org-pic { + .orgpic { + width: 120px; + height: 120px; + } + } + } + .org-data { + width: 100%; + flex: 2; + .fa_icon__container { + margin-top: 0; + } + } + } + +} diff --git a/src/user/organization/organization.js b/src/user/organization/organization.js index e3ad9a10..45c38c7f 100644 --- a/src/user/organization/organization.js +++ b/src/user/organization/organization.js @@ -3,7 +3,7 @@ import "./organization.scss"; import Navigation from "../dashboard/navigation/navigation"; import OrgInfo from "./org-info/org-info"; import Portfolio from "../dashboard/portfolio/portfolio"; -import { Card, CardContent } from "@material-ui/core"; +// import { Card, CardContent } from "@material-ui/core"; import Updates from "./updates/updates"; import OrgContact from "./org-contact/OrgContact"; import orginfo from "../../assets/jsonData/orginfo"; @@ -14,7 +14,7 @@ import cardLoading from "../../placeholderLoading/cardLoading/cardLoading"; import { connect } from "react-redux"; import { getOrgProfile } from "../../actions/orgAction"; import { Link } from "react-router-dom"; -import { Button } from "react-bootstrap"; +import { Button, Card } from "react-bootstrap"; import NewTicket from "./popups/NewTicket"; class Organization extends Component { @@ -53,121 +53,123 @@ class Organization extends Component { description, // contactInfo } = orgProfile; + + const handleClick = (type) => { + this.setState({ type: type }) + } + + const aboutContent = ( + + +
{orgProfile?.name}
+
Short description
+

+ {description?.shortDescription || + "Short details of organization"} +

+
About us in details
+

+ {description?.longDescription || + "Long description of the organization"} +

+ + + ) + + const contactContent = ( + <> + {this.state.isLoading ? ( + contactLoading() + ) : ( + + )} + + ) + + const updatesContent = ( + <> + {this.state.isLoading ? ( +
{orgUpdatesLoading()}
+ ) : ( +
+ +
+ )} + + ) + + let content; + if (type === "About") { + content = aboutContent; + } + if (type === "Updates") { + content = updatesContent; + } + if (type === "Contact") { + content = contactContent; + } + + return ( -
-
- -
-
- {this.state.isLoading ? ( - topBarLoading() - ) : ( -
- - -
- )} -
+
+ +
+
{this.state.isLoading ? ( - cardLoading() + topBarLoading() ) : ( -
-
-
- -
    -
  • - Overview -
    • - {/*
  • - Posts -
    • -
  • - Events -
    • -
  • - Projects -
    • */} -
- -
+
+ +
+
- - -
{orgProfile?.name}
-
Short description
-

- {description?.shortDescription || - "Short details of organization"} -

-
About us in details
-

- {description?.longDescription || - "Long description of the organization"} -

- -
)} - -
- - - +
{this.state.isLoading ? ( -
{orgUpdatesLoading()}
+ cardLoading() ) : ( -
- -
+ <> +
+
+
+
    +
  • handleClick("Overview")} + > + Overview +
    • +
+
+
+ {aboutContent} +
+
+ + + + {updatesContent} + {contactContent} +
+ )} - -
- {this.state.isLoading ? ( - contactLoading() - ) : ( - - )} -
+
diff --git a/src/user/organization/organization.scss b/src/user/organization/organization.scss index 16bd730e..d0f09075 100644 --- a/src/user/organization/organization.scss +++ b/src/user/organization/organization.scss @@ -1,18 +1,9 @@ -.organization { +.organization__container { display: flex; min-height: 100vh; height: auto; font-family: "Inter"; - .navigation { - overflow-y: scroll; - background: #f5f5f5; - flex: 0.5; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - } + margin-left: 10%; h2 { font-size: 20px; font-weight: bold; @@ -40,7 +31,7 @@ display: flex; flex-direction: row; padding-right: 10px; - .posts { + .details { flex-grow: 2; margin-top: -1rem; h2 { @@ -144,7 +135,6 @@ font-weight: 600; font-size: 16px; line-height: 27px; - color: #ffffff; } } @@ -163,3 +153,59 @@ .navigation::-webkit-scrollbar { display: none; } + +.details { + .tabs__container { + width: 100%; + } +} + +@media (min-width: 320px) and (max-width: 1024px){ + .organization__container { + margin-left: 0; + .news { + margin: 2vh 0 0 0; + width: 100%; + .notify-user { + padding: 0; + justify-content: center; + .notify-user-portfolio { + display: none; + } + } + .org-info { + padding: 0; + margin: 2vh 2vw; + flex-direction: column; + .details { + flex: 1; + margin-bottom: 20px; + } + .proposal-btn { + margin-left: 0; + width: 100%; + } + .about-us { + margin: 5px auto; + width: 100%; + } + .sideinfo { + .org-updates { + margin: 20px auto; + } + } + } + } + .details__content { + margin-top: 20px; + } + .details__proposal { + width: 100%; + margin: 10px 0; + display: flex; + .details__proposal_btn { + margin: 0 auto; + } + } + } +} diff --git a/src/user/organization/updates/updates.scss b/src/user/organization/updates/updates.scss index 32c0d885..342e0d7b 100644 --- a/src/user/organization/updates/updates.scss +++ b/src/user/organization/updates/updates.scss @@ -36,3 +36,10 @@ } } } + + +@media (min-width: 320px) and (max-width: 1024px){ + .updates { + margin: 0 auto; + } +} diff --git a/src/user/pinned-posts/posts/posts.scss b/src/user/pinned-posts/posts/posts.scss index a81460cc..d69db218 100644 --- a/src/user/pinned-posts/posts/posts.scss +++ b/src/user/pinned-posts/posts/posts.scss @@ -112,6 +112,9 @@ padding-left: 10px; padding-right: 10px; font-family: Inter; + img { + max-width: 100%; + } } .arrows { padding-right: 0px; diff --git a/src/user/profile/profile-feed.js b/src/user/profile/profile-feed.js index 888e77ec..cc6f5df5 100644 --- a/src/user/profile/profile-feed.js +++ b/src/user/profile/profile-feed.js @@ -143,7 +143,7 @@ class ProfileFeed extends Component {
- +
- +
diff --git a/src/user/profile/profile-feed.scss b/src/user/profile/profile-feed.scss index be642fb0..95852f50 100644 --- a/src/user/profile/profile-feed.scss +++ b/src/user/profile/profile-feed.scss @@ -1,7 +1,7 @@ .feed-posts { display: flex; flex-direction: column; - width: 140%; + width: 100%; h1 { font-size: 26px; font-weight: bold; @@ -124,6 +124,11 @@ margin-top: 5px; line-height: 21px; color: #000000; + p { + img { + max-width: 100%; + } + } } .cardTag { @@ -138,3 +143,42 @@ } } } + +@media (min-width: 320px) and (max-width: 1024px){ + .postsContainer { + width: 100%; + margin: 0; + .gridContainer { + grid-template-columns: repeat(1, 1fr); + margin: 0.5vh 2.5vw; + .postItem { + margin: 0; + } + } + } + .feed-posts { + width: 100%; + .categories { + overflow: hidden; + max-width: 100vw; + margin: 0 1vw; + .tab__container { + .nav__tab { + .nav__list__container { + border: none; + overflow-x: scroll; + .nav__single__tab { + font-size: small; + width: 100%; + margin: 0; + padding: 0; + } + } + .nav__list__container::-webkit-scrollbar { + display: none; + } + } + } + } + } +} diff --git a/src/user/profile/profile.js b/src/user/profile/profile.js index 82207167..d63253e1 100644 --- a/src/user/profile/profile.js +++ b/src/user/profile/profile.js @@ -82,40 +82,37 @@ class Profile extends Component { pinnedPosts, } = this.state; return ( -
-
- -
-
-
- - -
-
-
- {/* */} - + <> + +
+
+
+ +
+ +
+
+
+
+ {/* */} + +
-
+ ); } } diff --git a/src/user/profile/profile.scss b/src/user/profile/profile.scss index 94435f40..34541931 100644 --- a/src/user/profile/profile.scss +++ b/src/user/profile/profile.scss @@ -3,15 +3,6 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .navigation { - flex: 0.5; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - } h2 { font-size: 22px; font-weight: 650; @@ -60,3 +51,31 @@ .navigation::-webkit-scrollbar { display: none; } + +@media (min-width: 320px) and (max-width: 1024px){ + .profile { + margin: 0; + .news { + margin-left: 0; + width: 100vw; + .notify-user { + display: flex; + justify-content: center; + padding: 0; + padding-top: 2.5vh; + margin: 2.5vh 2.5vw; + .user-detail { + width: 100%; + } + .notify-user-portfolio { + display: none; + } + } + } + } + .two { + .posts-profile { + max-width: 100vw; + } + } +} diff --git a/src/user/profile/user-info/user-info.scss b/src/user/profile/user-info/user-info.scss index a14489e2..63d6117c 100644 --- a/src/user/profile/user-info/user-info.scss +++ b/src/user/profile/user-info/user-info.scss @@ -125,3 +125,26 @@ } } + +@media (min-width: 320px) and (max-width: 1024px){ + .user-detail { + padding: 5px; + .user-image { + text-align: center; + margin: 0; + .edit-option { + .useredit { + border-radius: 100px; + font-size: 14px; + } + } + .user-pic { + display: inline-block; + .userpic { + width: 120px; + height: 120px; + } + } + } + } +} diff --git a/src/user/projects/proj-info/proj-info.js b/src/user/projects/proj-info/proj-info.js index ab28b74b..e2805054 100644 --- a/src/user/projects/proj-info/proj-info.js +++ b/src/user/projects/proj-info/proj-info.js @@ -108,118 +108,116 @@ class ProjInfo extends Component { )) return ( -
-
- -
-
- - - - - -
- - -

{projectInfo?.projectName}

- - Version {projectInfo?.version || "1.0.0"} - {" "} - - - - {" "} - {" "} - {checkDeleteRights(projectInfo.createdBy?._id) ? ( - - ) : null } - + +
+ + + + + +
+ + +

{projectInfo?.projectName}

+ + Version {projectInfo?.version || "1.0.0"} + {" "} + + + + {" "} + {" "} + {checkDeleteRights(projectInfo.createdBy?._id) ? ( + + ) : null } + + {checkDeleteRights(projectInfo.createdBy?._id) ? ( + + ) : null} + - {checkDeleteRights(projectInfo.createdBy?._id) ? ( - - ) : null} - -

-
- {techBadge} -
- - - -

- Created At: +

+

+ {techBadge} +
+ + + +

+ Created At: + + {projectInfo?.createdAt} + + {" "} +

+

Updated At: {projectInfo?.createdAt} - {" "} -

-

Updated At: - - {projectInfo?.createdAt} - -

-

- {projectInfo.description?.short || "Short description"}

-
- - - - -
-

Project Details

-
- -

- {projectInfo.description?.long || "Long description"} -

-
- - - - {/* - -
-

Maintainers

-
-
- - */} - -
- - {/* {maintainers} */} - +

+ {projectInfo.description?.short || "Short description"} +

+
+ + + + +
+

Project Details

+
+ +

+ {projectInfo.description?.long || "Long description"} +

+
+ + + + {/* + +
+

Maintainers

+
+
+ + */} + +
+ + {/* {maintainers} */} + +
-
-
+ ); } } diff --git a/src/user/projects/proj-info/proj-info.scss b/src/user/projects/proj-info/proj-info.scss index 376389dc..ab11c249 100644 --- a/src/user/projects/proj-info/proj-info.scss +++ b/src/user/projects/proj-info/proj-info.scss @@ -1,3 +1,6 @@ +.project { + margin-left: 13vw; +} .container { margin-top: 2vh; .back{ @@ -10,10 +13,7 @@ .proj_img{ height:15rem; - margin-left: 1vw; - max-width: 23vw; - max-height: 42vh; - height: 39vh; + max-width: 100%; } .project-info { @@ -48,8 +48,8 @@ font-weight: 500; margin: 4px 0; padding: 0; - text-align: justify; - max-width: 80%; + text-align: left; + max-width: 100% } .place { @@ -114,3 +114,12 @@ margin-bottom: 1vh; } +@media (min-width: 320px) and (max-width: 1024px){ + .project { + margin: 0; + width: 100vw; + .project__row { + margin: 0; + } + } +} diff --git a/src/user/projects/projects.js b/src/user/projects/projects.js index ce995d1b..f73264eb 100644 --- a/src/user/projects/projects.js +++ b/src/user/projects/projects.js @@ -44,27 +44,10 @@ class Projects extends Component { render() { const { allProjects } = this.state - const useStyles = makeStyles((theme) => ({ - root: { - flexGrow: 1, - }, - paper: { - padding: theme.spacing(2), - textAlign: "center", - color: theme.palette.text.secondary, - }, - })); - - const useStyles2 = makeStyles({ - root: { - maxWidth: 345, - marginTop: "20px", - }, - }); let Projects = allProjects.map((Item, index) => ( - - + + -
- -
-
-

All Projects

-
+ <> + +
+
+

All Projects

{Projects} -
-
- +
+ +
-
+ ); } } diff --git a/src/user/projects/projects.scss b/src/user/projects/projects.scss index 36d82dae..349ef72a 100644 --- a/src/user/projects/projects.scss +++ b/src/user/projects/projects.scss @@ -2,17 +2,9 @@ display: flex; min-height: 100vh; font-family: Muli, sans-serif; - .navigation { - flex: 0.5; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - } - .projects { - margin-top: 1vh; + width: 100%; + padding: 20px; margin-left: 4vw; margin-right: 6vw; p { @@ -31,20 +23,12 @@ line-height: 1.3em; color: #2D2D2D; } - - .card__container{ - max-width: 33.33%; - } - .MuiCard-root { overflow: hidden; - height: 42vh; } img{ - height: 10rem; - width:auto; - object-fit: cover; + height: 15rem; } .create{ position:fixed; @@ -84,4 +68,20 @@ } margin-left: 10%; - } \ No newline at end of file + } + + @media (min-width: 320px) and (max-width: 1024px){ + .organization { + margin-left: 0; + .projects { + margin: 0; + #projects_header { + text-align: center; + } + .card__container { + max-width: 100%; + } + } + } + } + \ No newline at end of file diff --git a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss index 38eb7df0..320dc158 100644 --- a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss +++ b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss @@ -91,3 +91,26 @@ } } } + + +@media (min-width: 320px) and (max-width: 1024px){ + .discussion-content { + padding: 2.5vh 2.5vw; + height: 100%; + .discussion-toppanel { + width: 100%; + flex-direction: column; + margin: 2.5vh 0; + align-items: center; + } + .discussion-bottompanel { + flex-direction: column; + .proposal-preview { + min-height: 50vh; + } + .comments { + padding: 0; + } + } + } +} diff --git a/src/user/proposals/ProposalDiscussion/ProposalDiscussion.js b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.js index 2adb0adf..9e422790 100644 --- a/src/user/proposals/ProposalDiscussion/ProposalDiscussion.js +++ b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.js @@ -10,14 +10,14 @@ class ProposalDiscussion extends Component { } render() { return ( -
-
- + <> + +
+
+ +
-
- -
-
+ ); } } diff --git a/src/user/proposals/ProposalDiscussion/ProposalDiscussion.scss b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.scss index 462ca8f7..db94b72d 100644 --- a/src/user/proposals/ProposalDiscussion/ProposalDiscussion.scss +++ b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.scss @@ -3,11 +3,14 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .discussion__navigation { - flex: 1; - border-right: solid 1px #dfe9f1; - } + margin-left: 13%; .discussion__content { flex: 5.5; } } + +@media (min-width: 320px) and (max-width: 1024px){ + .discussion { + margin-left: 0; + } +} diff --git a/src/user/proposals/ProposalEditor/EditorContent/EditorContent.js b/src/user/proposals/ProposalEditor/EditorContent/EditorContent.js index 69f9abe4..587cc2d5 100644 --- a/src/user/proposals/ProposalEditor/EditorContent/EditorContent.js +++ b/src/user/proposals/ProposalEditor/EditorContent/EditorContent.js @@ -225,6 +225,7 @@ class EditorContent extends Component {
+
{this.state.newProposal ? ( ) : null} - +
{!this.state.newProposal ? ( -
- + <> + +
+
+ +
-
- -
-
+ ); } } diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.scss b/src/user/proposals/ProposalEditor/ProposalEditor.scss index b5f48ddf..66ba7fce 100644 --- a/src/user/proposals/ProposalEditor/ProposalEditor.scss +++ b/src/user/proposals/ProposalEditor/ProposalEditor.scss @@ -3,6 +3,7 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; + margin-left: 13%; .editor__navigation { flex: 1; border-right: solid 1px #dfe9f1; @@ -11,3 +12,15 @@ flex: 5.5; } } + +@media (min-width: 320px) and (max-width: 1024px){ + .editor { + padding: 2vh 2.5vw; + width: 100%; + margin-left: 0; + .editor__content { + padding: 0; + width: 100%; + } + } +} diff --git a/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss index adba28e2..256ecbcb 100644 --- a/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss +++ b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss @@ -6,6 +6,7 @@ .searchbar-container { flex-grow: 0.5; + flex-direction: column; .searchbar { border-radius: 25px; } @@ -177,3 +178,36 @@ } } } + +@media (min-width: 320px) and (max-width: 1024px){ + .dashboard-content { + padding: 0; + height: 100%; + .searchbar-container { + .button-container { + .posts { + width: 100%; + .category { + text-align: center; + button { + margin: 5px; + } + } + } + } + } + .proposal-container{ + .proposals { + .single-proposal { + .proposal-content { + .proposal-options { + .option-btn { + margin-top: 5px; + } + } + } + } + } + } + } +} diff --git a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js index 0d39a465..3266aa81 100644 --- a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js +++ b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js @@ -14,17 +14,17 @@ class UserProposalDashboard extends Component { } render() { return ( -
-
- + <> + +
+
+ +
+
+ +
-
- -
-
- -
-
+ ); } } diff --git a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss index 7cd07c4b..28b9b104 100644 --- a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss +++ b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss @@ -1,16 +1,24 @@ -.dashboard { +.proposal_dashboard { display: flex; min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .dashboard__navigation { - flex: 1; - border-right: solid 1px #dfe9f1; - } - .dashboard__content { + margin-left: 13%; + .proposal_dashboard__content { flex: 4; } - .dashboard__rightpanel { + .proposal_dashboard__rightpanel { flex: 2; } } + +@media (min-width: 320px) and (max-width: 1024px){ + .proposal_dashboard { + padding: 2.5vh 2.5vw; + margin-left: 0; + flex-direction: column; + .proposal_dashboard__content, .proposal_dashboard__rightpanel { + flex: 1; + } + } +} diff --git a/src/user/setup/components/about.scss b/src/user/setup/components/about.scss index bc7bec79..b0a74cc6 100644 --- a/src/user/setup/components/about.scss +++ b/src/user/setup/components/about.scss @@ -69,4 +69,40 @@ // border-radius: 100px; } } -} \ No newline at end of file +} + +@media (min-width: 320px) and (max-width: 1024px){ + .about_main_content { + padding: 2.5vh 2.5vw; + box-shadow: 1px 3px 18px rgba(0, 0, 0, 0.1); + .about_header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + } + .donut_text { + flex: 2; + } + p { + flex: 1; + } + .about_content { + .about_content_text { + width: 100%; + } + } + .feature_content { + .feature_content_text { + width: 100%; + } + } + .switch_step { + .next_btn { + height: auto; + width: auto; + } + } + } +} diff --git a/src/user/setup/components/preview.scss b/src/user/setup/components/preview.scss index 847148ff..52cef812 100644 --- a/src/user/setup/components/preview.scss +++ b/src/user/setup/components/preview.scss @@ -98,4 +98,42 @@ line-height: 15px; color: #C9C9C9; } -} \ No newline at end of file +} + +@media (min-width: 320px) and (max-width: 1024px){ + .setup_form_main_content { + padding: 2.5vh 2.5vw; + box-shadow: 1px 3px 18px rgba(0, 0, 0, 0.1); + .switch_step { + width: 100%; + display: flex; + .finish_btn { + width: 100%; + height: 100%; + background: #1A73E8; + // border-radius: 100px; + flex: 1; + } + .prev_btn { + width: 100%; + height: 100%; + background: rgb(250, 251, 252); + // border-radius: 100px; + color: #1A73E8; + margin-right: 1em; + flex: 1; + } + } + .setup_content { + .form_content { + .preview_section { + .dashboard_preview { + height: 100%; + width: 100%; + padding: 1em; + } + } + } + } + } +} diff --git a/src/user/setup/components/setupform.scss b/src/user/setup/components/setupform.scss index e97980e8..92c858f4 100644 --- a/src/user/setup/components/setupform.scss +++ b/src/user/setup/components/setupform.scss @@ -89,4 +89,42 @@ line-height: 15px; color: #C9C9C9; } -} \ No newline at end of file +} + + +@media (min-width: 320px) and (max-width: 1024px){ + .setup_form_main_content { + padding: 2.5vh 2.5vw; + box-shadow: 1px 3px 18px rgba(0, 0, 0, 0.1); + .setup_header { + width: 100%; + align-items: center; + .community_text { + flex: 3; + } + p { + flex: 1; + } + } + .switch_step { + width: 100%; + display: flex; + .next_btn { + width: 100%; + height: 100%; + background: #1A73E8; + // border-radius: 100px; + flex: 1; + } + .prev_btn { + width: 100%; + height: 100%; + background: rgb(250, 251, 252); + // border-radius: 100px; + color: #1A73E8; + margin-right: 1em; + flex: 1; + } + } + } +} diff --git a/src/user/setup/setup.scss b/src/user/setup/setup.scss index 166c8d49..7d913398 100644 --- a/src/user/setup/setup.scss +++ b/src/user/setup/setup.scss @@ -38,4 +38,22 @@ box-shadow: 1px 3px 18px rgba(0, 0, 0, 0.1); position: relative; } -} \ No newline at end of file +} + +@media (min-width: 320px) and (max-width: 1024px){ + .main_setup_section { + .donut_footer{ + display: flex; + flex-direction: row; + align-items: flex-start; + margin-top: -15vh; + } + .setup_steps { + width: 100%; + height: 100%; + padding: 2.5vh 2.5vw; + margin: 0; + box-shadow: none; + } + } +} diff --git a/src/utils/Backdrop.js b/src/utils/Backdrop.js new file mode 100644 index 00000000..e6d063f7 --- /dev/null +++ b/src/utils/Backdrop.js @@ -0,0 +1,10 @@ +import React from 'react'; +import './Backdrop.scss'; + +const Backdrop = (props) => { + return( + props.show ?
: null + ); +} + +export default Backdrop; diff --git a/src/utils/Backdrop.scss b/src/utils/Backdrop.scss new file mode 100644 index 00000000..c0fbe292 --- /dev/null +++ b/src/utils/Backdrop.scss @@ -0,0 +1,10 @@ +.backdrop { + width: 100%; + height: 100%; + position: fixed; + z-index: 1021; + left: 0; + top: 0; + background-color: rgba(0, 0, 0, 0.5); + transition: 0.5s; +} diff --git a/src/utils/SVGIcon.js b/src/utils/SVGIcon.js index e0fc7cd7..e8d5ac23 100644 --- a/src/utils/SVGIcon.js +++ b/src/utils/SVGIcon.js @@ -33,6 +33,8 @@ const getViewBox = (name) => { return "0 0 18 19"; case "JitsiMeet": return "0 0 17 29"; + case "DashboardMenu": + return "0 0 24 24"; case "Tickets": return "0 0 1024 1024"; default: @@ -186,6 +188,14 @@ const getPath = (name, props) => { /> ); + case "DashboardMenu": + return( + <> + + + + + ) case "Tickets": return ( { - const isDesktop = useMediaQuery({ minWidth: 768 }); - return isDesktop ? children : null; -}; -// const Tablet = ({ children }) => { -// const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 }); -// return isTablet ? children : null; -// }; -const Mobile = ({ children }) => { - const isMobile = useMediaQuery({ maxWidth: 767 }); - return isMobile ? children : null; -}; -const Default = ({ children }) => { - const isNotMobile = useMediaQuery({ minWidth: 768 }); - return isNotMobile ? children : null; -}; - -export { Desktop, Mobile, Default };