Skip to content

Commit d5407e4

Browse files
vaibhavdarenvaibhavdaren
authored
Merge pull request #641 from lazycipher/responsive-design
Responsive design for Donut
2 parents 20b2dc6 + 9f1b33c commit d5407e4

File tree

70 files changed

+2256
-1452
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+2256
-1452
lines changed

‎package-lock.json‎

Lines changed: 13 additions & 34 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
"react-mde": "^10.2.1",
4444
"react-moment": "^0.9.7",
4545
"react-redux": "^7.2.0",
46-
"react-responsive": "^8.0.3",
4746
"react-router-dom": "^5.1.2",
47+
"react-router-hash-link": "^2.2.2",
4848
"react-scripts": "^3.4.0",
4949
"react-shapes": "^0.1.0",
5050
"react-share": "^4.2.1",

‎src/assets/svgs/NavigationIcons/menu.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/user/Activity/Activity.js‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import OrgAuth from '../dashboard/Community/components/OrgAuth';
1616
import OrgMaintenance from '../dashboard/Community/components/OrgMaintenance';
1717
import Users from './Users';
1818
import ActivityTimeline from './ActivityTimeline';
19+
import { Accordion, Button } from 'react-bootstrap';
1920

2021
class Activity extends Component {
2122
constructor(props) {
@@ -29,7 +30,8 @@ class Activity extends Component {
2930
authentication: false,
3031
maintenance: false,
3132
activity: true,
32-
details: true
33+
details: true,
34+
sidebarOpen: false
3335
},
3436
};
3537
}
@@ -49,41 +51,58 @@ class Activity extends Component {
4951

5052
render() {
5153
const { view } = this.state
52-
54+
const toggleSidebar = () => {
55+
this.setState((prevState) => {
56+
return {
57+
sidebarOpen: !prevState.sidebarOpen
58+
}
59+
})
60+
}
5361
return (
54-
<div className="overall_container">
55-
<div className="main_navigation">
56-
<Navigation orgSettings={this.state.org} user={this.props.user} />
57-
</div>
58-
<div className="org_settings_view">
59-
<div className="main_section">
60-
<div className="left_nav">
61-
<p className="header_text">Community Settings</p>
62-
<LeftNav
63-
data={{
64-
option: this.state.option,
65-
changeOption: this.changeOption.bind(this),
66-
}}
67-
/>
68-
</div>
69-
<div className="right_section">
70-
{view === "profile" ? <OrgProfile /> : null}
71-
{view === "permission" ? <OrgPermission /> : null}
72-
{view === "settings" ? <OrgSettings /> : null}
73-
{view === "authentication" ? <OrgAuth /> : null}
74-
{view === "maintenance" ? <OrgMaintenance /> : null}
75-
{view === "activity" ? (
76-
<Users
77-
handleOption={{ changeOption: this.changeOption.bind(this) }}
78-
/>
79-
) : null}
80-
{view === "details" ? (
81-
<ActivityTimeline />
82-
) : null}
62+
<>
63+
<Navigation orgSettings={this.state.org} user={this.props.user} />
64+
<div className="main_section">
65+
<div className="left_nav">
66+
<p className="header_text">Community Settings</p>
67+
<div className="left_nav_container">
68+
<LeftNav
69+
data={{
70+
option: this.state.option,
71+
changeOption: this.changeOption.bind(this),
72+
}}
73+
/>
74+
</div>
75+
<Accordion className="activity_accordion">
76+
<Accordion.Toggle onClick={() => toggleSidebar()} variant="outline-secondary" size="sm" as={Button} eventKey="0">
77+
{this.state.sidebarOpen?"Close Menu":"Setting Menu"}
78+
</Accordion.Toggle>
79+
<Accordion.Collapse eventKey="0">
80+
<LeftNav
81+
data={{
82+
option: this.state.option,
83+
changeOption: this.changeOption.bind(this),
84+
}}
85+
/>
86+
</Accordion.Collapse>
87+
</Accordion>
88+
</div>
89+
<div className="right_section">
90+
{view === "profile" ? <OrgProfile /> : null}
91+
{view === "permission" ? <OrgPermission /> : null}
92+
{view === "settings" ? <OrgSettings /> : null}
93+
{view === "authentication" ? <OrgAuth /> : null}
94+
{view === "maintenance" ? <OrgMaintenance /> : null}
95+
{view === "activity" ? (
96+
<Users
97+
handleOption={{ changeOption: this.changeOption.bind(this) }}
98+
/>
99+
) : null}
100+
{view === "details" ? (
101+
<ActivityTimeline />
102+
) : null}
103+
</div>
83104
</div>
84-
</div>
85-
</div>
86-
</div>
105+
</>
87106
);
88107
}
89108
}
@@ -94,4 +113,4 @@ const mapStateToProps = (state) => ({
94113
post: state.post
95114
})
96115

97-
export default connect(mapStateToProps, { getEventById, getPostById })(withRouter(Activity));
116+
export default connect(mapStateToProps, { getEventById, getPostById })(withRouter(Activity));

‎src/user/Activity/ActivityTimeline.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default function ActivityTimeline() {
8989
showSizeChanger
9090
onShowSizeChange={onShowSizeChange}
9191
defaultCurrent={1}
92-
total={500}
92+
total={activity.length || 0}
9393
onChange={handlePagination}
9494
/>
9595
</div>

‎src/user/Activity/Users.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ class Users extends Component {
8181
showSizeChanger
8282
onShowSizeChange={this.onShowSizeChange}
8383
defaultCurrent={1}
84-
total={500}
84+
total={users.length || 0}
8585
onChange={this.handlePagination}
8686
/>
8787
</div>
@@ -96,4 +96,4 @@ const mapStateToProps = (state) => ({
9696
insight: state.insight
9797
})
9898

99-
export default connect(mapStateToProps, { getMembers })(withRouter(Users));
99+
export default connect(mapStateToProps, { getMembers })(withRouter(Users));

‎src/user/Activity/activity.scss‎

Lines changed: 54 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,9 @@
1-
.overall_container{
2-
display: flex;
3-
.main_navigation {
4-
left: -1px;
5-
top: -1px;
6-
height: 100vh;
7-
border: 1px solid #CCCCCC;
8-
box-sizing: border-box;
9-
}
10-
.user_activity_view {
11-
margin-top: 35px;
12-
margin-left: 15vw;
13-
margin-left: auto;
14-
margin-right: auto;
15-
.main_section {
1+
.main_section {
2+
margin: 35px auto auto 15vw;
163
display: flex;
174
flex-direction: row;
185
justify-items: center;
196
flex-wrap: wrap;
20-
margin-top: -1.3em;
21-
margin-left: -2vw;
227
.left_nav {
238
max-width: 20%;
249
height: 50%;
@@ -74,45 +59,67 @@
7459
}
7560
}
7661
}
77-
}
78-
}
7962
// mobile
63+
.activity_accordion {
64+
display: none;
65+
}
66+
8067
@media screen and (max-width: 768px) {
81-
.overall_container{
82-
.org_settings_view {
83-
.main_section {
84-
.left_nav {
85-
.navigation {
86-
.list-group {
87-
.link {
88-
display: none;
89-
}
90-
.header_text {
91-
font-size: 10px;
92-
}
93-
}
94-
}
95-
}
96-
}
68+
.main_section {
69+
width: 100%;
70+
margin: 0;
71+
padding: 2.5vh 2.5vw;
72+
flex-direction: column;
73+
.left_nav {
74+
width: 100%;
75+
max-width: 100%;
76+
margin: 10px auto;
77+
.activity_accordion {
78+
display: block;
79+
}
80+
.left_nav_container {
81+
display: none;
82+
}
83+
.navigation {
84+
.list-group {
85+
.link {
86+
display: none;
87+
}
88+
.header_text {
89+
font-size: 10px;
90+
}
91+
}
9792
}
9893
}
9994
}
95+
}
10096

10197
// tablet
102-
@media screen and (min-width: 768px) and (max-width: 1023px) {
103-
.overall_container {
104-
.org_settings_view {
105-
.main_section {
106-
.left_nav {
107-
.navigation {
108-
.list-group {
109-
.link {
110-
font-size: 5px;
111-
}
112-
}
98+
@media screen and (min-width: 768px) and (max-width: 1024px) {
99+
100+
.main_section {
101+
width: 100%;
102+
margin: 0;
103+
padding: 2.5vh 2.5vw;
104+
flex-direction: column;
105+
.left_nav {
106+
width: 100%;
107+
max-width: 100%;
108+
margin: 10px auto;
109+
.activity_accordion {
110+
display: block;
111+
}
112+
.left_nav_container {
113+
display: none;
114+
}
115+
.navigation {
116+
.list-group {
117+
.link {
118+
font-size: 5px;
113119
}
114120
}
115121
}
116122
}
117123
}
118-
}
124+
}
125+

0 commit comments

Comments
 (0)