From f159eaba94d7e48674adbb484b54433aca25f054 Mon Sep 17 00:00:00 2001 From: rajprakash00 Date: Fri, 11 Sep 2020 20:30:49 +0530 Subject: [PATCH 1/2] collapsible feature added --- .../dashboard/Community/CommunitySetting.js | 74 +++-- src/user/dashboard/Community/community.scss | 57 +++- src/user/dashboard/dashboard.js | 88 ++++-- src/user/dashboard/dashboard.scss | 57 +++- src/user/dashboard/insights/Insight.js | 58 ++-- src/user/dashboard/insights/insight.scss | 57 +++- src/user/dashboard/navigation/navigation.scss | 2 +- src/user/dashboard/settings/Settings.js | 48 ++- .../dashboard/settings/styles/settings.scss | 57 +++- src/user/events/events.js | 22 +- src/user/events/events.scss | 55 +++- .../IntegrationsPage/IntegrationsPage.js | 288 +++++++++--------- .../IntegrationsPage/IntegrationsPage.scss | 8 +- .../UserIntegrations/UserIntegrations.js | 23 +- .../UserIntegrations/UserIntegrations.scss | 55 +++- src/user/organization/organization.js | 25 +- src/user/organization/organization.scss | 57 +++- src/user/pinned-posts/pinned-posts.js | 22 +- src/user/pinned-posts/pinned-posts.scss | 61 +++- src/user/profile/profile.js | 22 +- src/user/profile/profile.scss | 57 +++- src/user/projects/proj-info/proj-info.js | 166 ++++++---- src/user/projects/proj-info/proj-info.scss | 44 ++- src/user/projects/projects.js | 91 ++++-- src/user/projects/projects.scss | 156 +++++----- .../ProposalEditor/ProposalEditor.js | 22 +- .../ProposalEditor/ProposalEditor.scss | 55 +++- .../UserProposalDashboard.js | 21 +- 28 files changed, 1284 insertions(+), 464 deletions(-) diff --git a/src/user/dashboard/Community/CommunitySetting.js b/src/user/dashboard/Community/CommunitySetting.js index 3e4615d6..acdd5dc9 100644 --- a/src/user/dashboard/Community/CommunitySetting.js +++ b/src/user/dashboard/Community/CommunitySetting.js @@ -1,14 +1,14 @@ -import React, { Component } from 'react' -import LeftNav from './LeftNav' -import './community.scss' -import OrgProfile from './components/OrgProfile'; -import OrgPermission from './components/OrgPermission' -import OrgSetting from './components/OrgSettings' -import OrgAuth from './components/OrgAuth' -import Navigation from '../navigation/navigation' -import { connect } from 'react-redux' -import OrgMaintenance from './components/OrgMaintenance'; -import Users from '../../Activity/Users' +import React, { Component } from "react"; +import LeftNav from "./LeftNav"; +import "./community.scss"; +import OrgProfile from "./components/OrgProfile"; +import OrgPermission from "./components/OrgPermission"; +import OrgSetting from "./components/OrgSettings"; +import OrgAuth from "./components/OrgAuth"; +import Navigation from "../navigation/navigation"; +import { connect } from "react-redux"; +import OrgMaintenance from "./components/OrgMaintenance"; +import Users from "../../Activity/Users"; class CommunitySetting extends Component { constructor(props) { @@ -20,28 +20,47 @@ class CommunitySetting extends Component { settings: false, permission: false, authentication: false, - maintenance: false - } + maintenance: false, + }, + sideBarOpen: true, }; } componentDidMount() { - this.setState({ view: 'profile' }) + this.setState({ view: "profile" }); } changeOption = (name) => { - const keys = Object.keys(this.state.option) - let item = keys.filter(k => k === name) - console.log('item ', item) - this.setState({ option: { profile: false }}) - this.setState({ option: { [name]: true }}) - this.setState({ view: name }) - } + const keys = Object.keys(this.state.option); + let item = keys.filter((k) => k === name); + console.log("item ", item); + this.setState({ option: { profile: false } }); + this.setState({ option: { [name]: true } }); + this.setState({ view: name }); + }; + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { const { view } = this.state; + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+
@@ -60,9 +79,10 @@ class CommunitySetting extends Component { {view === "authentication" ? : null} {view === "maintenance" ? : null} {view === "activity" ? ( - ) : null } + /> + ) : null}
@@ -75,6 +95,6 @@ const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, user: state.user, - org: state.org -}) -export default connect(mapStateToProps)(CommunitySetting); \ No newline at end of file + org: state.org, +}); +export default connect(mapStateToProps)(CommunitySetting); diff --git a/src/user/dashboard/Community/community.scss b/src/user/dashboard/Community/community.scss index 1be5f14f..1761cb86 100644 --- a/src/user/dashboard/Community/community.scss +++ b/src/user/dashboard/Community/community.scss @@ -1,6 +1,6 @@ .overall_container { display: flex; - .main_navigation { + /*.main_navigation { background: #f5f5f5; flex-grow: 1; border-right: solid 1px #dfe9f1; @@ -9,9 +9,62 @@ bottom: 0px; left: 0px; overflow-y: scroll; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 30px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } .org_settings_view { - margin-left: 13vw; + //margin-left: 13vw; margin-top: 35px; .main_section { display: flex; diff --git a/src/user/dashboard/dashboard.js b/src/user/dashboard/dashboard.js index 428a5151..80355c69 100644 --- a/src/user/dashboard/dashboard.js +++ b/src/user/dashboard/dashboard.js @@ -8,7 +8,7 @@ import NewsFeed from "./news-feed/news-feed"; import notifyUsersLoading from "../../placeholderLoading/notifyUsersLoading/notifyUsersLoading"; import portfolioLoading from "../../placeholderLoading/portfolioLoading/portfolioLoading"; import newsFeedLoading from "../../placeholderLoading/newsFeedLoading/newsFeedLoading"; -import { connect } from 'react-redux' +import { connect } from "react-redux"; import { getAllEvents } from "../../actions/eventAction"; import { getAllPosts } from "../../actions/postAction"; import { getAllProjects } from "../../actions/projectAction"; @@ -22,46 +22,67 @@ class Dashboard extends Component { allPosts: [], allProjects: [], allEvents: [], - allMix: [] + allMix: [], + sideBarOpen: true, }; } componentDidMount() { setTimeout(() => { this.props.getAllEvents(); - }) + }); setTimeout(() => { - this.props.getAllPosts() - }) + this.props.getAllPosts(); + }); setTimeout(() => { - this.props.getAllProjects() - }) + this.props.getAllProjects(); + }); setTimeout(() => { this.setState({ isLoading: false }); }, 1000); } componentWillReceiveProps(nextProps) { - console.log('dashboard ', nextProps) - const { event, project, post } = nextProps - let all = [...event?.allEvents, ...post?.allPosts, ...project?.allProjects] - this.setState({ - allEvents: event?.allEvents, - allPosts: post?.allPosts, - allProjects: project?.allProjects, - allMix: all - }, () => { - console.log('updated dashboard ', this.state) - }) + console.log("dashboard ", nextProps); + const { event, project, post } = nextProps; + let all = [...event?.allEvents, ...post?.allPosts, ...project?.allProjects]; + this.setState( + { + allEvents: event?.allEvents, + allPosts: post?.allPosts, + allProjects: project?.allProjects, + allMix: all, + }, + () => { + console.log("updated dashboard ", this.state); + } + ); } - + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { - const { allMix, allEvents, allProjects, allPosts } = this.state - return ( + const { allMix, allEvents, allProjects, allPosts } = this.state; + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; + return (
-
+
+
{this.state.isLoading ? ( notifyUsersLoading() @@ -71,7 +92,16 @@ class Dashboard extends Component {
)} - {this.state.isLoading ? newsFeedLoading() : } + {this.state.isLoading ? ( + newsFeedLoading() + ) : ( + + )}
{this.state.isLoading ? portfolioLoading() : } @@ -81,13 +111,17 @@ class Dashboard extends Component { } } -// map state to props +// map state to props const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, event: state.event, post: state.post, - project: state.project -}) + project: state.project, +}); -export default connect(mapStateToProps, { getAllEvents, getAllPosts, getAllProjects })(Dashboard); +export default connect(mapStateToProps, { + getAllEvents, + getAllPosts, + getAllProjects, +})(Dashboard); diff --git a/src/user/dashboard/dashboard.scss b/src/user/dashboard/dashboard.scss index b9b0969c..4dcd8b97 100644 --- a/src/user/dashboard/dashboard.scss +++ b/src/user/dashboard/dashboard.scss @@ -3,7 +3,7 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .navigation { + /*.navigation { background: #f5f5f5; flex-grow: 1; border-right: solid 1px #dfe9f1; @@ -12,9 +12,62 @@ bottom: 0px; left: 0px; overflow-y: scroll; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } .news { - margin-left: 13vw; + //margin-left: 13vw; flex-grow: 4; .notify-user { display: flex; diff --git a/src/user/dashboard/insights/Insight.js b/src/user/dashboard/insights/Insight.js index af6197a5..8672f69d 100644 --- a/src/user/dashboard/insights/Insight.js +++ b/src/user/dashboard/insights/Insight.js @@ -1,34 +1,39 @@ -import React, { Component } from 'react' -import './insight.scss' -import Navigation from '../navigation/navigation'; -import CommunityStats from './components/CommunityStats'; -import MemberInfo from './components/MemberInfo'; -import { connect } from 'react-redux' -import { getProfile } from '../../../actions/usersAction' +import React, { Component } from "react"; +import "./insight.scss"; +import Navigation from "../navigation/navigation"; +import CommunityStats from "./components/CommunityStats"; +import MemberInfo from "./components/MemberInfo"; +import { connect } from "react-redux"; +import { getProfile } from "../../../actions/usersAction"; class Insight extends Component { constructor(props) { super(props); this.state = { insight: true, - view: 'org', - userId: '' + view: "org", + userId: "", + sideBarOpen: true, }; } componentDidMount() { - const userId = localStorage.getItem('userId'); - this.props.getProfile(userId) + const userId = localStorage.getItem("userId"); + this.props.getProfile(userId); } onTabChange = (name) => { this.setState({ view: name }, () => { - console.log('State is ', this.state); - }) - } - + console.log("State is ", this.state); + }); + }; + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { const { view, userId } = this.state; + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; let communityInfo = (
@@ -36,14 +41,27 @@ class Insight extends Component { ); let memberInfo = (
- +
); return (
-
+
+
{view === "org" ? communityInfo : memberInfo}
@@ -52,9 +70,9 @@ class Insight extends Component { } } -// map state to props +// map state to props const mapStateToProps = (state) => ({ - user: state.user -}) + user: state.user, +}); export default connect(mapStateToProps, { getProfile })(Insight); diff --git a/src/user/dashboard/insights/insight.scss b/src/user/dashboard/insights/insight.scss index 636a4df0..8072edd7 100644 --- a/src/user/dashboard/insights/insight.scss +++ b/src/user/dashboard/insights/insight.scss @@ -1,6 +1,6 @@ .insight_main_container { display: flex; - .insight_left_nav { + /*.insight_left_nav { border-right: solid 1px #dfe9f1; position: fixed; top: 0px; @@ -8,10 +8,63 @@ left: 0px; overflow-y: scroll; background: #f5f5f5; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } .right_view_container { .right_view { - margin-left: 13vw; + //margin-left: 13vw; margin-top: 10px; .right_view_header { font-family: Qanelas; diff --git a/src/user/dashboard/navigation/navigation.scss b/src/user/dashboard/navigation/navigation.scss index 3d8de512..bd3aac1a 100644 --- a/src/user/dashboard/navigation/navigation.scss +++ b/src/user/dashboard/navigation/navigation.scss @@ -1,5 +1,5 @@ .main-navigation { - width: 13vw; + //width: 13vw; .list-group { background-color: #f5f5f5; .list-group-item { diff --git a/src/user/dashboard/settings/Settings.js b/src/user/dashboard/settings/Settings.js index e75f3731..70f4ba5e 100644 --- a/src/user/dashboard/settings/Settings.js +++ b/src/user/dashboard/settings/Settings.js @@ -1,27 +1,45 @@ -import React, { Component } from 'react' -import Navigation from '../navigation/navigation'; -import SettingContent from './SettingContent'; -import './styles/settings.scss'; +import React, { Component } from "react"; +import Navigation from "../navigation/navigation"; +import SettingContent from "./SettingContent"; +import "./styles/settings.scss"; class Settings extends Component { - constructor(props){ + constructor(props) { super(props); this.state = { - settings: true - } + settings: true, + sideBarOpen: true, + }; } + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
- -
-
- -
+
+ +
+ +
+ +
- ) + ); } } export default Settings; - diff --git a/src/user/dashboard/settings/styles/settings.scss b/src/user/dashboard/settings/styles/settings.scss index 284e9b3f..0cba81ce 100644 --- a/src/user/dashboard/settings/styles/settings.scss +++ b/src/user/dashboard/settings/styles/settings.scss @@ -4,7 +4,7 @@ height: auto; font-family: Muli, sans-serif; - .navigation { + /*.navigation { background: #f5f5f5; flex-grow: 1; border-right: solid 1px #dfe9f1; @@ -13,6 +13,59 @@ bottom: 0px; left: 0px; overflow-y: scroll; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 7px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } .setting-sidebar { border-left: solid 1px #dfe9f1; @@ -20,7 +73,7 @@ .settings-content { flex: 3; - margin-left: 13vw; + //margin-left: 13vw; } .options { color: rgba(0, 0, 0, 0.5); diff --git a/src/user/events/events.js b/src/user/events/events.js index 0689a436..328410d8 100644 --- a/src/user/events/events.js +++ b/src/user/events/events.js @@ -28,6 +28,7 @@ class Events extends Component { singleEvent: {}, editAllowed: true, editingLimit: "", + sideBarOpen: true, }; } @@ -63,10 +64,14 @@ class Events extends Component { console.log("page number ", pageNumber); this.props.getAllEvents(6, pageNumber); }; + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { const { allEvents, editingLimit } = this.state; - + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; const handleToggle = (eventId, event) => { console.log("-handletoggel", eventId); this.setState({ modalShow: true, eventId: eventId, singleEvent: event }); @@ -273,9 +278,22 @@ class Events extends Component { return (
-
+
+

All Events

diff --git a/src/user/events/events.scss b/src/user/events/events.scss index 4f8c4ea8..40e966a2 100644 --- a/src/user/events/events.scss +++ b/src/user/events/events.scss @@ -3,7 +3,7 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .navigation { + /*.navigation { background: #f5f5f5; flex-grow: 1; border-right: solid 1px #dfe9f1; @@ -12,6 +12,59 @@ bottom: 0px; left: 0px; overflow-y: scroll; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } .events { padding: 20px; diff --git a/src/user/integrations/IntegrationsPage/IntegrationsPage.js b/src/user/integrations/IntegrationsPage/IntegrationsPage.js index 485f7ee8..c7fd38e5 100644 --- a/src/user/integrations/IntegrationsPage/IntegrationsPage.js +++ b/src/user/integrations/IntegrationsPage/IntegrationsPage.js @@ -12,25 +12,44 @@ import { Col, } from "react-bootstrap"; import GoogleCalendar from "../../../assets/integrations/Calendar.png"; -import GoogleDrive from '../../../assets/integrations/Drive.png' -import Github from '../../../assets/integrations/Github.png' -import Jitsi from '../../../assets/integrations/Jitsi.png' -import Trello from '../../../assets/integrations/Trello.png' -import SimplePoll from '../../../assets/integrations/SimplePoll.png' +import GoogleDrive from "../../../assets/integrations/Drive.png"; +import Github from "../../../assets/integrations/Github.png"; +import Jitsi from "../../../assets/integrations/Jitsi.png"; +import Trello from "../../../assets/integrations/Trello.png"; +import SimplePoll from "../../../assets/integrations/SimplePoll.png"; class IntegrationsPage extends Component { constructor(props) { super(props); this.state = { integrations: true, + sideBarOpen: true, }; } + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+
Integrations
@@ -48,146 +67,129 @@ class IntegrationsPage extends Component {
+ + + +
+ + Google Calendar + + + Communication + + +
+ + - - - -
- - Google Calendar - - - Communication - - -
- - - - - - -
- - Google Drive - - - File Management - - -
- - + + + +
+ + Google Drive + + + File Management + + +
+ + - - - -
- - Github - - - Source Control - - -
- - - - - -
- - Jitsi Meet - - - Communication - - -
- - + + + +
+ + Github + + + Source Control + + +
+ + + + + +
+ + Jitsi Meet + + + Communication + + +
+ + - - - -
- - Simple Poll - - - Productivity - - -
- - - - - -
- - Trello - - - Communication - - -
- - + + + +
+ + Simple Poll + + + Productivity + + +
+ + + + + +
+ + Trello + + + Communication + + +
+ +
diff --git a/src/user/integrations/IntegrationsPage/IntegrationsPage.scss b/src/user/integrations/IntegrationsPage/IntegrationsPage.scss index 1eda3668..0e9e7630 100644 --- a/src/user/integrations/IntegrationsPage/IntegrationsPage.scss +++ b/src/user/integrations/IntegrationsPage/IntegrationsPage.scss @@ -3,11 +3,11 @@ min-height: 100vh; height: auto; font-family: "Inter"; - .navigation { + /*.navigation { flex: 0.5; border-right: solid 1px #dfe9f1; - } + }*/ .integrations-content { width: 100%; flex: 3; @@ -81,8 +81,8 @@ text-align: center; border-radius: 25px; font-size: 15px; - color: #1A73E8; - background-color: #FFFFFF; + color: #1a73e8; + background-color: #ffffff; width: 60%; } } diff --git a/src/user/integrations/UserIntegrations/UserIntegrations.js b/src/user/integrations/UserIntegrations/UserIntegrations.js index 21040eb3..6d72527d 100644 --- a/src/user/integrations/UserIntegrations/UserIntegrations.js +++ b/src/user/integrations/UserIntegrations/UserIntegrations.js @@ -12,6 +12,7 @@ class UserIntegrations extends Component { integrations: true, integrationSelected: false, selectedIntegration: {}, + sideBarOpen: true, }; } @@ -28,15 +29,31 @@ class UserIntegrations extends Component { integrationSelected: false, }); }; - + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { const { integrationSelected, selectedIntegration } = this.state; - + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+ {integrationSelected ? ( { - this.setState({ type: type }) - } + this.setState({ type: type }); + }; + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { const { orgProfile, type } = this.state; @@ -52,11 +57,25 @@ class Organization extends Component { description, // contactInfo } = orgProfile; + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+
{this.state.isLoading ? ( topBarLoading() diff --git a/src/user/organization/organization.scss b/src/user/organization/organization.scss index 16bd730e..730f895c 100644 --- a/src/user/organization/organization.scss +++ b/src/user/organization/organization.scss @@ -3,7 +3,7 @@ min-height: 100vh; height: auto; font-family: "Inter"; - .navigation { + /*.navigation { overflow-y: scroll; background: #f5f5f5; flex: 0.5; @@ -12,6 +12,59 @@ top: 0px; bottom: 0px; left: 0px; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } h2 { font-size: 20px; @@ -19,7 +72,7 @@ font-family: "Inter"; } .news { - margin-left: 2vw; + //margin-left: 2vw; flex: 3; .notify-user { display: flex; diff --git a/src/user/pinned-posts/pinned-posts.js b/src/user/pinned-posts/pinned-posts.js index 1e1e48d6..f1d5221c 100644 --- a/src/user/pinned-posts/pinned-posts.js +++ b/src/user/pinned-posts/pinned-posts.js @@ -10,6 +10,7 @@ class PinnedPosts extends Component { this.state = { isLoading: true, pinned_posts: true, + sideBarOpen: true, }; } @@ -18,13 +19,30 @@ class PinnedPosts extends Component { this.setState({ isLoading: false }); }, 1000); } - + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+
{this.state.isLoading ? pinnedPostsLoading() : }
diff --git a/src/user/pinned-posts/pinned-posts.scss b/src/user/pinned-posts/pinned-posts.scss index 6713d1f1..5e585948 100644 --- a/src/user/pinned-posts/pinned-posts.scss +++ b/src/user/pinned-posts/pinned-posts.scss @@ -3,14 +3,67 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - h1{ + h1 { font-size: 26px; font-weight: bold; font-family: Muli, sans-serif; } - .navigation { + /*.navigation { flex: 0.5; border-right: solid 1px #dfe9f1; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } .news { flex: 2; @@ -23,10 +76,10 @@ flex: 1; margin: 20px 20px; } - .Pinned-post{ + .Pinned-post { padding: 20px 12px 0px 30px; } - .organization-update{ + .organization-update { padding: 20px 12px 0px 0px; } } diff --git a/src/user/profile/profile.js b/src/user/profile/profile.js index 82207167..ab60fbb2 100644 --- a/src/user/profile/profile.js +++ b/src/user/profile/profile.js @@ -26,6 +26,7 @@ class Profile extends Component { userPosts: [], pinnedPosts: [], userId: "", + sideBarOpen: true, }; } @@ -71,7 +72,10 @@ class Profile extends Component { } ); } - + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { const { userProfile, @@ -81,16 +85,30 @@ class Profile extends Component { userPosts, pinnedPosts, } = this.state; + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
+
diff --git a/src/user/profile/profile.scss b/src/user/profile/profile.scss index 94435f40..00c41c69 100644 --- a/src/user/profile/profile.scss +++ b/src/user/profile/profile.scss @@ -3,7 +3,7 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .navigation { + /*.navigation { flex: 0.5; border-right: solid 1px #dfe9f1; position: fixed; @@ -11,13 +11,66 @@ bottom: 0px; left: 0px; overflow-y: scroll; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } h2 { font-size: 22px; font-weight: 650; } .news { - margin-left: 13vw; + //margin-left: 13vw; flex: 3; .notify-user { display: flex; diff --git a/src/user/projects/proj-info/proj-info.js b/src/user/projects/proj-info/proj-info.js index ab28b74b..a1b1b16b 100644 --- a/src/user/projects/proj-info/proj-info.js +++ b/src/user/projects/proj-info/proj-info.js @@ -1,7 +1,7 @@ import React, { Component } from "react"; -import EditIcon from '@material-ui/icons/Edit'; -import GitHubIcon from '@material-ui/icons/GitHub'; -import LanguageIcon from '@material-ui/icons/Language'; +import EditIcon from "@material-ui/icons/Edit"; +import GitHubIcon from "@material-ui/icons/GitHub"; +import LanguageIcon from "@material-ui/icons/Language"; import Navigation from "../../dashboard/navigation/navigation"; import { Card, Button, Badge, Col, Row } from "react-bootstrap"; import "./proj-info.scss"; @@ -10,11 +10,10 @@ import EditProject from "../popups/edit-project"; import DeleteIcon from "@material-ui/icons/Delete"; import DeleteProject from "../popups/delete-project"; import { makeStyles, Grid } from "@material-ui/core"; -import { connect } from 'react-redux' -import { getProjectById } from '../../../actions/projectAction' -import { checkDeleteRights } from '../../dashboard/utils/checkDeleteRights' -import Moment from 'react-moment' - +import { connect } from "react-redux"; +import { getProjectById } from "../../../actions/projectAction"; +import { checkDeleteRights } from "../../dashboard/utils/checkDeleteRights"; +import Moment from "react-moment"; class ProjInfo extends Component { constructor(props) { @@ -24,44 +23,62 @@ class ProjInfo extends Component { editProject: false, projectInfo: {}, deleteProject: false, - githubLink: '', - bitBucketLink: '', - techStacks: [] + githubLink: "", + bitBucketLink: "", + techStacks: [], + sideBarOpen: true, }; } componentDidMount() { - console.log('project info mounted ',this.props) - // fetch the data from db + console.log("project info mounted ", this.props); + // fetch the data from db setTimeout(() => { - this.props.getProjectById(this.props.match.params.id) - }) + this.props.getProjectById(this.props.match.params.id); + }); } componentWillReceiveProps(nextProps) { - console.log('nextProps ', nextProps) - const { singleProject } = nextProps.project - this.setState({ projectInfo: singleProject, techStacks: singleProject.techStacks }, () => { - console.log('updating project info state ', this.state) - }) - const { links } = singleProject - this.setState({ githubLink: links[0]?.githubLink, bitBucketLink: links[0]?.bitBucketLink }) + console.log("nextProps ", nextProps); + const { singleProject } = nextProps.project; + this.setState( + { projectInfo: singleProject, techStacks: singleProject.techStacks }, + () => { + console.log("updating project info state ", this.state); + } + ); + const { links } = singleProject; + this.setState({ + githubLink: links[0]?.githubLink, + bitBucketLink: links[0]?.bitBucketLink, + }); } - + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { - const { projectInfo, editProject, proj, deleteProject, githubLink, bitBucketLink, techStacks } = this.state + const { + projectInfo, + editProject, + proj, + deleteProject, + githubLink, + bitBucketLink, + techStacks, + } = this.state; - let cancel = () =>{ + let cancel = () => { this.setState({ editProject: false, }); - } + }; let cancel_del = () => { this.setState({ deleteProject: false, - }) - } + }); + }; const useStyles = makeStyles((theme) => ({ root: { @@ -100,18 +117,41 @@ class ProjInfo extends Component { // // )); - let variant = ["primary", "secondary", "success", "danger", "warning", "light", "dark"] + let variant = [ + "primary", + "secondary", + "success", + "danger", + "warning", + "light", + "dark", + ]; const techBadge = techStacks?.map((techs, index) => ( - {techs}{" "} + + {techs} + {" "} - )) - + )); + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+
@@ -128,26 +168,30 @@ class ProjInfo extends Component { - {" "} - {" "} {checkDeleteRights(projectInfo.createdBy?._id) ? ( - ) : null } + ) : null} ) : null} - +

-
- {techBadge} -
+
{techBadge}

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

-

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

+

+ Updated At: + {projectInfo?.createdAt}

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

+

@@ -224,11 +264,11 @@ class ProjInfo extends Component { } } -// map state to props +// map state to props const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, - project: state.project -}) + project: state.project, +}); export default connect(mapStateToProps, { getProjectById })(ProjInfo); diff --git a/src/user/projects/proj-info/proj-info.scss b/src/user/projects/proj-info/proj-info.scss index 376389dc..9a46a713 100644 --- a/src/user/projects/proj-info/proj-info.scss +++ b/src/user/projects/proj-info/proj-info.scss @@ -1,15 +1,15 @@ .container { margin-top: 2vh; - .back{ - position:fixed; + .back { + position: fixed; z-index: 2; - top:0; - left:15%; + top: 0; + left: 15%; } } -.proj_img{ - height:15rem; +.proj_img { + height: 15rem; margin-left: 1vw; max-width: 23vw; max-height: 42vh; @@ -20,30 +20,30 @@ flex: 1; padding: 10px 14px; h1 { - color: #2D2D2D; + color: #2d2d2d; font-size: 40px; font-weight: 500; margin: 0; padding: 0; } - .createAt{ + .createAt { font-family: Inter; font-style: normal; font-weight: normal; - color: #2D2D2D; + color: #2d2d2d; font-size: 12px; margin: 4px 0; padding: 0; } - .tech-stack{ + .tech-stack { margin-top: 3vh; } .short_des { font-family: Inter; font-style: normal; font-weight: normal; - color: #2D2D2D; + color: #2d2d2d; font-size: 18px; font-weight: 500; margin: 4px 0; @@ -56,7 +56,7 @@ font-family: Inter; font-style: normal; font-weight: normal; - color: #2D2D2D; + color: #2d2d2d; font-size: 12px; margin: 4px 0; padding: 0; @@ -68,17 +68,17 @@ font-weight: normal; font-size: 1.5em; line-height: 1.3em; - color: #2D2D2D; + color: #2d2d2d; text-align: justify; max-width: 83%; } } -.description{ - h1{ +.description { + h1 { font-family: Inter; font-style: normal; - color: #2D2D2D; + color: #2d2d2d; font-size: 27px; margin: 0; font-weight: 500; @@ -86,24 +86,23 @@ text-align: left; margin-left: 2%; } - + .desc { font-family: Inter; font-style: normal; font-weight: normal; font-size: 1.2em; line-height: 1.3em; - color: #2D2D2D; + color: #2d2d2d; margin-left: 2%; max-width: 83%; } margin-top: 5vh; } - -.maintainers{ - h1{ - color: #2D2D2D; +.maintainers { + h1 { + color: #2d2d2d; font-size: 30px; font-weight: bold; margin: 0; @@ -113,4 +112,3 @@ margin-top: 2vh; margin-bottom: 1vh; } - diff --git a/src/user/projects/projects.js b/src/user/projects/projects.js index ce995d1b..fe67cb32 100644 --- a/src/user/projects/projects.js +++ b/src/user/projects/projects.js @@ -1,12 +1,21 @@ import React, { Component } from "react"; import "./projects.scss"; import Navigation from "../dashboard/navigation/navigation"; -import { makeStyles,Grid , Card, CardActionArea, CardActions, CardContent, CardMedia, Typography} from "@material-ui/core"; +import { + makeStyles, + Grid, + Card, + CardActionArea, + CardActions, + CardContent, + CardMedia, + Typography, +} from "@material-ui/core"; import { Button } from "react-bootstrap"; -import { connect } from 'react-redux' -import { createProject, getAllProjects } from '../../actions/projectAction' -import { Pagination } from 'antd' -import projectImage from '../../assets/images/project.png' +import { connect } from "react-redux"; +import { createProject, getAllProjects } from "../../actions/projectAction"; +import { Pagination } from "antd"; +import projectImage from "../../assets/images/project.png"; import { withRouter } from "react-router-dom"; class Projects extends Component { @@ -15,35 +24,40 @@ class Projects extends Component { this.state = { proj: true, deleteproject: false, - allProjects: [] + allProjects: [], + sideBarOpen: true, }; } componentDidMount() { setTimeout(() => { this.props.getAllProjects(); // by default 6 projects per page - }) + }); } componentWillReceiveProps(nextProps) { - console.log('project ', nextProps) - const { allProjects } = nextProps.project + console.log("project ", nextProps); + const { allProjects } = nextProps.project; this.setState({ allProjects: allProjects }, () => { - console.log('projects state ', this.state) - }) + console.log("projects state ", this.state); + }); } onShowSizeChange = (currentPage, pageSize) => { - console.log('currentPage pageSize ', currentPage, pageSize) - this.props.getAllProjects(pageSize, currentPage) - } + console.log("currentPage pageSize ", currentPage, pageSize); + this.props.getAllProjects(pageSize, currentPage); + }; handlePagination = (pageNumber) => { - console.log('page number ', pageNumber); - this.props.getAllProjects(6, pageNumber) - } - + console.log("page number ", pageNumber); + this.props.getAllProjects(6, pageNumber); + }; + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { - const { allProjects } = this.state + const { allProjects } = this.state; + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; const useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, @@ -63,7 +77,7 @@ class Projects extends Component { }); let Projects = allProjects.map((Item, index) => ( - + {Item.projectName || "Project Name"} - - {Item.description?.shortDescription || "Short description of the project"} + + {Item.description?.shortDescription || + "Short description of the project"} -

All Projects

@@ -120,14 +153,14 @@ class Projects extends Component { } } -// map state to props +// map state to props const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, - project: state.project -}) + project: state.project, +}); export default connect(mapStateToProps, { createProject, - getAllProjects + getAllProjects, })(withRouter(Projects)); diff --git a/src/user/projects/projects.scss b/src/user/projects/projects.scss index 36d82dae..f1321dcd 100644 --- a/src/user/projects/projects.scss +++ b/src/user/projects/projects.scss @@ -1,87 +1,87 @@ .organization { - 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; - } + display: flex; + min-height: 100vh; + font-family: Muli, sans-serif; + padding-left: 2vw; + .navigation { + flex: 0.5; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + } - .projects { - margin-top: 1vh; - margin-left: 4vw; - margin-right: 6vw; - p { - font-family: Inter; - font-style: normal; - font-weight: normal; - font-size: 1.5em; - line-height: 1.3em; - color: #2D2D2D; - } - #project_header { - font-family: Inter; - font-style: normal; - font-weight: normal; - font-size: 1.5em; - line-height: 1.3em; - color: #2D2D2D; - } + .projects { + margin-top: 1vh; + margin-left: 4vw; + margin-right: 6vw; + p { + font-family: Inter; + font-style: normal; + font-weight: normal; + font-size: 1.5em; + line-height: 1.3em; + color: #2d2d2d; + } + #project_header { + font-family: Inter; + font-style: normal; + font-weight: normal; + font-size: 1.5em; + line-height: 1.3em; + color: #2d2d2d; + } - .card__container{ - max-width: 33.33%; - } + .card__container { + max-width: 33.33%; + } - .MuiCard-root { - overflow: hidden; - height: 42vh; - } + .MuiCard-root { + overflow: hidden; + height: 42vh; + } - img{ - height: 10rem; - width:auto; - object-fit: cover; - } - .create{ - position:fixed; - z-index: 2; - right:5rem; - bottom:5rem; - } + img { + height: 10rem; + width: auto; + object-fit: cover; + } + .create { + position: fixed; + z-index: 2; + right: 5rem; + bottom: 5rem; + } - strong { - color:#1A73E8; - } - - .short-des { - text-align: justify; - font-family: Inter; - font-style: normal; - font-weight: normal; - font-size: 1em; - line-height: 1.3em; - color: #2D2D2D; - /* white-space: nowrap; */ - max-width: 259px; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - } + strong { + color: #1a73e8; + } - .project__pagination__container { - display: flex; - padding-top: 20px; - flex-direction: row; - justify-content: center; - align-items: center; - } + .short-des { + text-align: justify; + font-family: Inter; + font-style: normal; + font-weight: normal; + font-size: 1em; + line-height: 1.3em; + color: #2d2d2d; + /* white-space: nowrap; */ + max-width: 259px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + .project__pagination__container { + display: flex; + padding-top: 20px; + flex-direction: row; + justify-content: center; + align-items: center; } - margin-left: 10%; - } \ No newline at end of file + } + margin-left: 10%; +} diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.js b/src/user/proposals/ProposalEditor/ProposalEditor.js index abf80e7d..cce88eae 100644 --- a/src/user/proposals/ProposalEditor/ProposalEditor.js +++ b/src/user/proposals/ProposalEditor/ProposalEditor.js @@ -6,14 +6,32 @@ import "./ProposalEditor.scss"; class ProposalEditor extends Component { constructor(props) { super(props); - this.state = {}; + this.state = { sideBarOpen: true }; } + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+
diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.scss b/src/user/proposals/ProposalEditor/ProposalEditor.scss index b5f48ddf..be5d1bcd 100644 --- a/src/user/proposals/ProposalEditor/ProposalEditor.scss +++ b/src/user/proposals/ProposalEditor/ProposalEditor.scss @@ -3,9 +3,62 @@ min-height: 100vh; height: auto; font-family: Muli, sans-serif; - .editor__navigation { + /*.editor__navigation { flex: 1; border-right: solid 1px #dfe9f1; + }*/ + .sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; + } + .sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; + } + + .sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } } .editor__content { flex: 5.5; diff --git a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js index 0d39a465..3c2dbef9 100644 --- a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js +++ b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js @@ -10,14 +10,33 @@ class UserProposalDashboard extends Component { this.state = { dashboard: true, isLoading: true, + sideBarOpen: true, }; } + handleViewSidebar = () => { + console.log(this.state.sideBarOpen); + this.setState({ sideBarOpen: !this.state.sideBarOpen }); + }; render() { + var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
-
+
+
From 8e785918247360a0726fb88a5f00f9307ae082b1 Mon Sep 17 00:00:00 2001 From: rajprakash00 Date: Wed, 16 Sep 2020 00:35:33 +0530 Subject: [PATCH 2/2] refactored & removed collapsible feature in small screen sizes --- src/user/_sidebarCommon.scss | 84 +++++++++++++ .../dashboard/Community/CommunitySetting.js | 46 ++++---- src/user/dashboard/Community/community.scss | 54 +-------- src/user/dashboard/dashboard.js | 56 ++++----- src/user/dashboard/dashboard.scss | 54 +-------- src/user/dashboard/insights/Insight.js | 34 +++--- src/user/dashboard/insights/insight.scss | 54 +-------- src/user/dashboard/settings/Settings.js | 12 +- .../dashboard/settings/styles/settings.scss | 54 +-------- src/user/events/events.scss | 54 +-------- .../IntegrationsPage/IntegrationsPage.js | 39 +++++-- .../UserIntegrations/UserIntegrations.scss | 54 +-------- src/user/organization/organization.scss | 52 --------- src/user/pinned-posts/pinned-posts.scss | 54 +-------- src/user/profile/profile.scss | 54 +-------- src/user/projects/proj-info/proj-info.js | 110 ++++++++---------- src/user/projects/projects.js | 55 ++++----- src/user/projects/projects.scss | 4 +- .../ProposalEditor/ProposalEditor.scss | 54 +-------- 19 files changed, 265 insertions(+), 713 deletions(-) create mode 100644 src/user/_sidebarCommon.scss diff --git a/src/user/_sidebarCommon.scss b/src/user/_sidebarCommon.scss new file mode 100644 index 00000000..1fbc3c93 --- /dev/null +++ b/src/user/_sidebarCommon.scss @@ -0,0 +1,84 @@ +.sidebar { + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + transition: 0.3s ease-in-out; + width: 0; + overflow-x: hidden; +} +.sidebar-open { + width: 13vw; + background: #f5f5f5; + flex-grow: 1; + border-right: solid 1px #dfe9f1; + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + overflow-y: scroll; + overflow-x: hidden; + transition: 0.3s ease-in-out; +} + +.sidebar-toggle { + position: sticky; + top: 10px; + left: 0; + bottom: 0; + transition: 0.3s ease-in-out; + width: 2.5rem; + height: 2.5rem; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + background: #007bff; + border-radius: 50%; + border: none; + padding: 5px; + &:focus { + outline: none; + } + div { + width: 1.5rem; + height: 0.25rem; + background: white; + border-radius: 10px; + } +} + +@media screen and (max-width: 768px) { + .sidebar-toggle { + display: none; + } + .dashboard, + .profile, + .pinned-posts { + .news { + margin-left: 13vw; + } + } + .settings-content { + margin-left: 13vw; + } + .org_settings_view { + margin-left: 13vw; + } + .right_view { + margin-left: 13vw; + } + .integrations-content { + margin-left: 13vw; + } + .dashboard__content { + margin-left: 13vw; + } + .editor__content { + margin-left: 13vw; + } +} diff --git a/src/user/dashboard/Community/CommunitySetting.js b/src/user/dashboard/Community/CommunitySetting.js index acdd5dc9..fe3a30d6 100644 --- a/src/user/dashboard/Community/CommunitySetting.js +++ b/src/user/dashboard/Community/CommunitySetting.js @@ -1,14 +1,14 @@ -import React, { Component } from "react"; -import LeftNav from "./LeftNav"; -import "./community.scss"; -import OrgProfile from "./components/OrgProfile"; -import OrgPermission from "./components/OrgPermission"; -import OrgSetting from "./components/OrgSettings"; -import OrgAuth from "./components/OrgAuth"; -import Navigation from "../navigation/navigation"; -import { connect } from "react-redux"; -import OrgMaintenance from "./components/OrgMaintenance"; -import Users from "../../Activity/Users"; +import React, { Component } from 'react' +import LeftNav from './LeftNav' +import './community.scss' +import OrgProfile from './components/OrgProfile'; +import OrgPermission from './components/OrgPermission' +import OrgSetting from './components/OrgSettings' +import OrgAuth from './components/OrgAuth' +import Navigation from '../navigation/navigation' +import { connect } from 'react-redux' +import OrgMaintenance from './components/OrgMaintenance'; +import Users from '../../Activity/Users' class CommunitySetting extends Component { constructor(props) { @@ -26,16 +26,17 @@ class CommunitySetting extends Component { }; } componentDidMount() { - this.setState({ view: "profile" }); + this.setState({ view: 'profile' }) } changeOption = (name) => { - const keys = Object.keys(this.state.option); - let item = keys.filter((k) => k === name); - console.log("item ", item); - this.setState({ option: { profile: false } }); - this.setState({ option: { [name]: true } }); - this.setState({ view: name }); - }; + const keys = Object.keys(this.state.option) + let item = keys.filter(k => k === name) + console.log('item ', item) + this.setState({ option: { profile: false }}) + this.setState({ option: { [name]: true }}) + this.setState({ view: name }) + } + handleViewSidebar = () => { console.log(this.state.sideBarOpen); this.setState({ sideBarOpen: !this.state.sideBarOpen }); @@ -81,8 +82,7 @@ class CommunitySetting extends Component { {view === "activity" ? ( - ) : null} + />) : null }
@@ -95,6 +95,6 @@ const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, user: state.user, - org: state.org, -}); + org: state.org +}) export default connect(mapStateToProps)(CommunitySetting); diff --git a/src/user/dashboard/Community/community.scss b/src/user/dashboard/Community/community.scss index 1761cb86..9a80770f 100644 --- a/src/user/dashboard/Community/community.scss +++ b/src/user/dashboard/Community/community.scss @@ -1,3 +1,5 @@ +@import "../../sidebarCommon"; + .overall_container { display: flex; /*.main_navigation { @@ -10,59 +12,7 @@ left: 0px; overflow-y: scroll; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 30px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .org_settings_view { //margin-left: 13vw; margin-top: 35px; diff --git a/src/user/dashboard/dashboard.js b/src/user/dashboard/dashboard.js index 80355c69..f73243ba 100644 --- a/src/user/dashboard/dashboard.js +++ b/src/user/dashboard/dashboard.js @@ -8,7 +8,7 @@ import NewsFeed from "./news-feed/news-feed"; import notifyUsersLoading from "../../placeholderLoading/notifyUsersLoading/notifyUsersLoading"; import portfolioLoading from "../../placeholderLoading/portfolioLoading/portfolioLoading"; import newsFeedLoading from "../../placeholderLoading/newsFeedLoading/newsFeedLoading"; -import { connect } from "react-redux"; +import { connect } from 'react-redux'; import { getAllEvents } from "../../actions/eventAction"; import { getAllPosts } from "../../actions/postAction"; import { getAllProjects } from "../../actions/projectAction"; @@ -30,40 +30,37 @@ class Dashboard extends Component { componentDidMount() { setTimeout(() => { this.props.getAllEvents(); - }); + }) setTimeout(() => { this.props.getAllPosts(); - }); + }) setTimeout(() => { this.props.getAllProjects(); }); setTimeout(() => { this.setState({ isLoading: false }); - }, 1000); + }, 1000) } componentWillReceiveProps(nextProps) { - console.log("dashboard ", nextProps); - const { event, project, post } = nextProps; - let all = [...event?.allEvents, ...post?.allPosts, ...project?.allProjects]; - this.setState( - { - allEvents: event?.allEvents, - allPosts: post?.allPosts, - allProjects: project?.allProjects, - allMix: all, - }, - () => { - console.log("updated dashboard ", this.state); - } - ); + console.log('dashboard ', nextProps) + const { event, project, post } = nextProps + let all = [...event?.allEvents, ...post?.allPosts, ...project?.allProjects] + this.setState({ + allEvents: event?.allEvents, + allPosts: post?.allPosts, + allProjects: project?.allProjects, + allMix: all + }, () => { + console.log('updated dashboard ', this.state) + }) } handleViewSidebar = () => { console.log(this.state.sideBarOpen); this.setState({ sideBarOpen: !this.state.sideBarOpen }); }; render() { - const { allMix, allEvents, allProjects, allPosts } = this.state; + const { allMix, allEvents, allProjects, allPosts } = this.state var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
@@ -92,16 +89,7 @@ class Dashboard extends Component {
)} - {this.state.isLoading ? ( - newsFeedLoading() - ) : ( - - )} + {this.state.isLoading ? newsFeedLoading() : }
{this.state.isLoading ? portfolioLoading() : } @@ -117,11 +105,7 @@ const mapStateToProps = (state) => ({ error: state.error, event: state.event, post: state.post, - project: state.project, -}); + project: state.project +}) -export default connect(mapStateToProps, { - getAllEvents, - getAllPosts, - getAllProjects, -})(Dashboard); +export default connect(mapStateToProps, { getAllEvents, getAllPosts, getAllProjects })(Dashboard); \ No newline at end of file diff --git a/src/user/dashboard/dashboard.scss b/src/user/dashboard/dashboard.scss index 4dcd8b97..90b300d1 100644 --- a/src/user/dashboard/dashboard.scss +++ b/src/user/dashboard/dashboard.scss @@ -1,3 +1,5 @@ +@import "../sidebarCommon"; + .dashboard { display: flex; min-height: 100vh; @@ -13,59 +15,7 @@ left: 0px; overflow-y: scroll; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .news { //margin-left: 13vw; flex-grow: 4; diff --git a/src/user/dashboard/insights/Insight.js b/src/user/dashboard/insights/Insight.js index 8672f69d..4dec1998 100644 --- a/src/user/dashboard/insights/Insight.js +++ b/src/user/dashboard/insights/Insight.js @@ -1,32 +1,32 @@ -import React, { Component } from "react"; -import "./insight.scss"; -import Navigation from "../navigation/navigation"; -import CommunityStats from "./components/CommunityStats"; -import MemberInfo from "./components/MemberInfo"; -import { connect } from "react-redux"; -import { getProfile } from "../../../actions/usersAction"; +import React, { Component } from 'react' +import './insight.scss' +import Navigation from '../navigation/navigation'; +import CommunityStats from './components/CommunityStats'; +import MemberInfo from './components/MemberInfo'; +import { connect } from 'react-redux' +import { getProfile } from '../../../actions/usersAction' class Insight extends Component { constructor(props) { super(props); this.state = { insight: true, - view: "org", - userId: "", + view: 'org', + userId: '', sideBarOpen: true, }; } componentDidMount() { - const userId = localStorage.getItem("userId"); - this.props.getProfile(userId); + const userId = localStorage.getItem('userId'); + this.props.getProfile(userId) } onTabChange = (name) => { this.setState({ view: name }, () => { - console.log("State is ", this.state); - }); - }; + console.log('State is ', this.state); + }) + } handleViewSidebar = () => { console.log(this.state.sideBarOpen); this.setState({ sideBarOpen: !this.state.sideBarOpen }); @@ -41,7 +41,7 @@ class Insight extends Component { ); let memberInfo = (
- +
); return ( @@ -72,7 +72,7 @@ class Insight extends Component { // map state to props const mapStateToProps = (state) => ({ - user: state.user, -}); + user: state.user +}) export default connect(mapStateToProps, { getProfile })(Insight); diff --git a/src/user/dashboard/insights/insight.scss b/src/user/dashboard/insights/insight.scss index 8072edd7..90c0ab98 100644 --- a/src/user/dashboard/insights/insight.scss +++ b/src/user/dashboard/insights/insight.scss @@ -1,3 +1,5 @@ +@import "../../sidebarCommon"; + .insight_main_container { display: flex; /*.insight_left_nav { @@ -9,59 +11,7 @@ overflow-y: scroll; background: #f5f5f5; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .right_view_container { .right_view { //margin-left: 13vw; diff --git a/src/user/dashboard/settings/Settings.js b/src/user/dashboard/settings/Settings.js index 70f4ba5e..0bcc1bc6 100644 --- a/src/user/dashboard/settings/Settings.js +++ b/src/user/dashboard/settings/Settings.js @@ -1,10 +1,10 @@ -import React, { Component } from "react"; -import Navigation from "../navigation/navigation"; -import SettingContent from "./SettingContent"; -import "./styles/settings.scss"; +import React, { Component } from 'react' +import Navigation from '../navigation/navigation'; +import SettingContent from './SettingContent'; +import './styles/settings.scss'; class Settings extends Component { - constructor(props) { + constructor(props){ super(props); this.state = { settings: true, @@ -39,7 +39,7 @@ class Settings extends Component {
- ); + ) } } export default Settings; diff --git a/src/user/dashboard/settings/styles/settings.scss b/src/user/dashboard/settings/styles/settings.scss index 0cba81ce..67408a65 100644 --- a/src/user/dashboard/settings/styles/settings.scss +++ b/src/user/dashboard/settings/styles/settings.scss @@ -1,3 +1,5 @@ +@import "../../../sidebarCommon"; + .settings { display: flex; min-height: 100vh; @@ -14,59 +16,7 @@ left: 0px; overflow-y: scroll; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 7px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .setting-sidebar { border-left: solid 1px #dfe9f1; } diff --git a/src/user/events/events.scss b/src/user/events/events.scss index 40e966a2..89ef6879 100644 --- a/src/user/events/events.scss +++ b/src/user/events/events.scss @@ -1,3 +1,5 @@ +@import "../sidebarCommon"; + .organization { display: flex; min-height: 100vh; @@ -13,59 +15,7 @@ left: 0px; overflow-y: scroll; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .events { padding: 20px; margin-top: 2vh; diff --git a/src/user/integrations/IntegrationsPage/IntegrationsPage.js b/src/user/integrations/IntegrationsPage/IntegrationsPage.js index c7fd38e5..c25fde19 100644 --- a/src/user/integrations/IntegrationsPage/IntegrationsPage.js +++ b/src/user/integrations/IntegrationsPage/IntegrationsPage.js @@ -12,11 +12,12 @@ import { Col, } from "react-bootstrap"; import GoogleCalendar from "../../../assets/integrations/Calendar.png"; -import GoogleDrive from "../../../assets/integrations/Drive.png"; -import Github from "../../../assets/integrations/Github.png"; -import Jitsi from "../../../assets/integrations/Jitsi.png"; -import Trello from "../../../assets/integrations/Trello.png"; -import SimplePoll from "../../../assets/integrations/SimplePoll.png"; +import GoogleDrive from '../../../assets/integrations/Drive.png' +import Github from '../../../assets/integrations/Github.png' +import Jitsi from '../../../assets/integrations/Jitsi.png' +import Trello from '../../../assets/integrations/Trello.png' +import SimplePoll from '../../../assets/integrations/SimplePoll.png' + class IntegrationsPage extends Component { constructor(props) { @@ -81,7 +82,9 @@ class IntegrationsPage extends Component { Communication -
@@ -102,7 +105,10 @@ class IntegrationsPage extends Component { File Management -
@@ -123,7 +129,10 @@ class IntegrationsPage extends Component { Source Control -
@@ -143,7 +152,10 @@ class IntegrationsPage extends Component { Communication -
@@ -164,7 +176,9 @@ class IntegrationsPage extends Component { Productivity -
@@ -184,7 +198,10 @@ class IntegrationsPage extends Component { Communication -
diff --git a/src/user/integrations/UserIntegrations/UserIntegrations.scss b/src/user/integrations/UserIntegrations/UserIntegrations.scss index b764da52..676db033 100644 --- a/src/user/integrations/UserIntegrations/UserIntegrations.scss +++ b/src/user/integrations/UserIntegrations/UserIntegrations.scss @@ -1,3 +1,5 @@ +@import "../../sidebarCommon"; + .integrations { display: flex; min-height: 100vh; @@ -7,59 +9,7 @@ flex: 0.5; border-right: solid 1px #dfe9f1; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .integrations-content { width: 100%; flex: 3; diff --git a/src/user/organization/organization.scss b/src/user/organization/organization.scss index 730f895c..5cc0c256 100644 --- a/src/user/organization/organization.scss +++ b/src/user/organization/organization.scss @@ -13,59 +13,7 @@ bottom: 0px; left: 0px; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } h2 { font-size: 20px; font-weight: bold; diff --git a/src/user/pinned-posts/pinned-posts.scss b/src/user/pinned-posts/pinned-posts.scss index 5e585948..1ef83939 100644 --- a/src/user/pinned-posts/pinned-posts.scss +++ b/src/user/pinned-posts/pinned-posts.scss @@ -1,3 +1,5 @@ +@import "../sidebarCommon"; + .pinned-posts { display: flex; min-height: 100vh; @@ -12,59 +14,7 @@ flex: 0.5; border-right: solid 1px #dfe9f1; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .news { flex: 2; .notify-user { diff --git a/src/user/profile/profile.scss b/src/user/profile/profile.scss index 00c41c69..2c938c65 100644 --- a/src/user/profile/profile.scss +++ b/src/user/profile/profile.scss @@ -1,3 +1,5 @@ +@import "../sidebarCommon"; + .profile { display: flex; min-height: 100vh; @@ -12,59 +14,7 @@ left: 0px; overflow-y: scroll; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } h2 { font-size: 22px; font-weight: 650; diff --git a/src/user/projects/proj-info/proj-info.js b/src/user/projects/proj-info/proj-info.js index a1b1b16b..05862160 100644 --- a/src/user/projects/proj-info/proj-info.js +++ b/src/user/projects/proj-info/proj-info.js @@ -1,7 +1,7 @@ import React, { Component } from "react"; -import EditIcon from "@material-ui/icons/Edit"; -import GitHubIcon from "@material-ui/icons/GitHub"; -import LanguageIcon from "@material-ui/icons/Language"; +import EditIcon from '@material-ui/icons/Edit'; +import GitHubIcon from '@material-ui/icons/GitHub'; +import LanguageIcon from '@material-ui/icons/Language'; import Navigation from "../../dashboard/navigation/navigation"; import { Card, Button, Badge, Col, Row } from "react-bootstrap"; import "./proj-info.scss"; @@ -10,10 +10,10 @@ import EditProject from "../popups/edit-project"; import DeleteIcon from "@material-ui/icons/Delete"; import DeleteProject from "../popups/delete-project"; import { makeStyles, Grid } from "@material-ui/core"; -import { connect } from "react-redux"; -import { getProjectById } from "../../../actions/projectAction"; -import { checkDeleteRights } from "../../dashboard/utils/checkDeleteRights"; -import Moment from "react-moment"; +import { connect } from 'react-redux' +import { getProjectById } from '../../../actions/projectAction' +import { checkDeleteRights } from '../../dashboard/utils/checkDeleteRights' +import Moment from 'react-moment' class ProjInfo extends Component { constructor(props) { @@ -23,62 +23,48 @@ class ProjInfo extends Component { editProject: false, projectInfo: {}, deleteProject: false, - githubLink: "", - bitBucketLink: "", + githubLink: '', + bitBucketLink: '', techStacks: [], sideBarOpen: true, }; } componentDidMount() { - console.log("project info mounted ", this.props); + console.log('project info mounted ', this.props) // fetch the data from db setTimeout(() => { - this.props.getProjectById(this.props.match.params.id); - }); + this.props.getProjectById(this.props.match.params.id) + }) } componentWillReceiveProps(nextProps) { - console.log("nextProps ", nextProps); - const { singleProject } = nextProps.project; - this.setState( - { projectInfo: singleProject, techStacks: singleProject.techStacks }, - () => { - console.log("updating project info state ", this.state); - } - ); - const { links } = singleProject; - this.setState({ - githubLink: links[0]?.githubLink, - bitBucketLink: links[0]?.bitBucketLink, - }); + console.log('nextProps ', nextProps) + const { singleProject } = nextProps.project + this.setState({ projectInfo: singleProject, techStacks: singleProject.techStacks }, () => { + console.log('updating project info state ', this.state) + }) + const { links } = singleProject + this.setState({ githubLink: links[0]?.githubLink, bitBucketLink: links[0]?.bitBucketLink }) } handleViewSidebar = () => { console.log(this.state.sideBarOpen); this.setState({ sideBarOpen: !this.state.sideBarOpen }); }; render() { - const { - projectInfo, - editProject, - proj, - deleteProject, - githubLink, - bitBucketLink, - techStacks, - } = this.state; + const { projectInfo, editProject, proj, deleteProject, githubLink, bitBucketLink, techStacks } = this.state - let cancel = () => { + let cancel = () =>{ this.setState({ editProject: false, }); - }; + } let cancel_del = () => { this.setState({ deleteProject: false, - }); - }; + }) + } const useStyles = makeStyles((theme) => ({ root: { @@ -128,11 +114,9 @@ class ProjInfo extends Component { ]; const techBadge = techStacks?.map((techs, index) => ( - - {techs} - {" "} + {techs}{" "} - )); + )) var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar"; return (
@@ -168,30 +152,26 @@ class ProjInfo extends Component { - {" "} - {" "} {checkDeleteRights(projectInfo.createdBy?._id) ? ( - ) : null} + ) : null }

-
{techBadge}
+
+ {techBadge} +
@@ -219,11 +201,13 @@ class ProjInfo extends Component { Created At: {projectInfo?.createdAt} - {" "} + + {" "}

-

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

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

{projectInfo.description?.short || "Short description"} @@ -268,7 +252,7 @@ class ProjInfo extends Component { const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, - project: state.project, -}); + project: state.project +}) export default connect(mapStateToProps, { getProjectById })(ProjInfo); diff --git a/src/user/projects/projects.js b/src/user/projects/projects.js index fe67cb32..fe4d0ee1 100644 --- a/src/user/projects/projects.js +++ b/src/user/projects/projects.js @@ -1,21 +1,12 @@ import React, { Component } from "react"; import "./projects.scss"; import Navigation from "../dashboard/navigation/navigation"; -import { - makeStyles, - Grid, - Card, - CardActionArea, - CardActions, - CardContent, - CardMedia, - Typography, -} from "@material-ui/core"; +import { makeStyles,Grid , Card, CardActionArea, CardActions, CardContent, CardMedia, Typography} from "@material-ui/core"; import { Button } from "react-bootstrap"; -import { connect } from "react-redux"; -import { createProject, getAllProjects } from "../../actions/projectAction"; -import { Pagination } from "antd"; -import projectImage from "../../assets/images/project.png"; +import { connect } from 'react-redux' +import { createProject, getAllProjects } from '../../actions/projectAction' +import { Pagination } from 'antd' +import projectImage from '../../assets/images/project.png' import { withRouter } from "react-router-dom"; class Projects extends Component { @@ -31,25 +22,25 @@ class Projects extends Component { componentDidMount() { setTimeout(() => { this.props.getAllProjects(); // by default 6 projects per page - }); + }) } componentWillReceiveProps(nextProps) { - console.log("project ", nextProps); - const { allProjects } = nextProps.project; + console.log('project ', nextProps) + const { allProjects } = nextProps.project this.setState({ allProjects: allProjects }, () => { - console.log("projects state ", this.state); - }); + console.log('projects state ', this.state) + }) } onShowSizeChange = (currentPage, pageSize) => { - console.log("currentPage pageSize ", currentPage, pageSize); - this.props.getAllProjects(pageSize, currentPage); - }; + console.log('currentPage pageSize ', currentPage, pageSize) + this.props.getAllProjects(pageSize, currentPage) + } handlePagination = (pageNumber) => { - console.log("page number ", pageNumber); - this.props.getAllProjects(6, pageNumber); + console.log('page number ', pageNumber); + this.props.getAllProjects(6, pageNumber) }; handleViewSidebar = () => { console.log(this.state.sideBarOpen); @@ -89,14 +80,8 @@ class Projects extends Component { {Item.projectName || "Project Name"} - - {Item.description?.shortDescription || - "Short description of the project"} + + {Item.description?.shortDescription || "Short description of the project"} @@ -157,10 +142,10 @@ class Projects extends Component { const mapStateToProps = (state) => ({ auth: state.auth, error: state.error, - project: state.project, -}); + project: state.project +}) export default connect(mapStateToProps, { createProject, - getAllProjects, + getAllProjects })(withRouter(Projects)); diff --git a/src/user/projects/projects.scss b/src/user/projects/projects.scss index f1321dcd..7c2531ed 100644 --- a/src/user/projects/projects.scss +++ b/src/user/projects/projects.scss @@ -3,14 +3,14 @@ min-height: 100vh; font-family: Muli, sans-serif; padding-left: 2vw; - .navigation { + /*.navigation { flex: 0.5; border-right: solid 1px #dfe9f1; position: fixed; top: 0px; bottom: 0px; left: 0px; - } + }*/ .projects { margin-top: 1vh; diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.scss b/src/user/proposals/ProposalEditor/ProposalEditor.scss index be5d1bcd..8e2f73e6 100644 --- a/src/user/proposals/ProposalEditor/ProposalEditor.scss +++ b/src/user/proposals/ProposalEditor/ProposalEditor.scss @@ -1,3 +1,5 @@ +@import "../../sidebarCommon"; + .editor { display: flex; min-height: 100vh; @@ -7,59 +9,7 @@ flex: 1; border-right: solid 1px #dfe9f1; }*/ - .sidebar { - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - transition: 0.3s ease-in-out; - width: 0; - overflow-x: hidden; - } - .sidebar-open { - width: 13vw; - background: #f5f5f5; - flex-grow: 1; - border-right: solid 1px #dfe9f1; - position: fixed; - top: 0px; - bottom: 0px; - left: 0px; - overflow-y: scroll; - overflow-x: hidden; - transition: 0.3s ease-in-out; - } - .sidebar-toggle { - position: sticky; - top: 10px; - left: 0; - bottom: 0; - transition: 0.3s ease-in-out; - width: 2.5rem; - height: 2.5rem; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - background: #007bff; - border-radius: 50%; - border: none; - padding: 5px; - &:focus { - outline: none; - } - div { - width: 1.5rem; - height: 0.25rem; - background: white; - border-radius: 10px; - } - } .editor__content { flex: 5.5; }