Skip to content

Commit ff2dc7e

Browse files
lazycipherlazycipher
committed
Org Settings Mobile Responsive
1 parent 1370e89 commit ff2dc7e

File tree

6 files changed

+140
-78
lines changed

6 files changed

+140
-78
lines changed

‎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}
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/users.scss‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.activity__main__container {
2-
margin-left: 18vw;
2+
margin-left: 15vw;
33
.main-navigation {
44
border-right: 1px solid #cccccc;
55
}
@@ -29,9 +29,9 @@
2929
display: flex;
3030
flex-direction: row;
3131
flex-wrap: wrap;
32+
padding-top: 20px;
3233
.pagination__container {
33-
position: fixed;
34-
margin-top: 78vh;
34+
width: 100%;
3535
}
3636
.user__wrapper {
3737
display: flex;
@@ -62,4 +62,28 @@
6262
}
6363
}
6464
}
65-
}
65+
}
66+
67+
68+
@media (min-width: 320px) and (max-width: 1024px){
69+
.activity__main__container {
70+
margin: 0;
71+
.header__text {
72+
margin: 20px 0 0 0;
73+
}
74+
}
75+
.timeline__container {
76+
max-width: 100%;
77+
margin: 0;
78+
width: 100%;
79+
padding: 20px;
80+
max-height: 100%;
81+
ul {
82+
width: 100%;
83+
}
84+
.pagination__container {
85+
margin-top: 0;
86+
width: 100%;
87+
}
88+
}
89+
}

‎src/user/dashboard/Community/CommunitySetting.js‎

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import Navigation from '../navigation/navigation'
99
import { connect } from 'react-redux'
1010
import OrgMaintenance from './components/OrgMaintenance';
1111
import Users from '../../Activity/Users'
12+
import { Mobile, Desktop } from '../../../utils/breakpoints';
13+
import { Accordion, Button } from 'react-bootstrap';
1214

1315
class CommunitySetting extends Component {
1416
constructor(props) {
@@ -20,7 +22,8 @@ class CommunitySetting extends Component {
2022
settings: false,
2123
permission: false,
2224
authentication: false,
23-
maintenance: false
25+
maintenance: false,
26+
sidebarOpen: false
2427
}
2528
};
2629
}
@@ -37,36 +40,61 @@ class CommunitySetting extends Component {
3740
}
3841
render() {
3942
const { view } = this.state;
43+
44+
const toggleSidebar = () => {
45+
this.setState((prevState) => {
46+
return {
47+
sidebarOpen: !prevState.sidebarOpen
48+
}
49+
})
50+
}
4051
return (
41-
<div className="overall_container">
42-
<div className="main_navigation">
43-
<Navigation orgSettings={this.state.org} user={this.props.user} />
44-
</div>
45-
<div className="org_settings_view">
46-
<div className="main_section">
47-
<div className="left_nav">
48-
<p className="header_text">Community Settings</p>
49-
<LeftNav
50-
data={{
51-
option: this.state.option,
52-
changeOption: this.changeOption.bind(this),
53-
}}
54-
/>
55-
</div>
56-
<div className="right_section">
57-
{view === "profile" ? <OrgProfile /> : null}
58-
{view === "permission" ? <OrgPermission /> : null}
59-
{view === "settings" ? <OrgSetting /> : null}
60-
{view === "authentication" ? <OrgAuth /> : null}
61-
{view === "maintenance" ? <OrgMaintenance /> : null}
62-
{view === "activity" ? (
63-
<Users
64-
handleOption={{ changeOption: this.changeOption.bind(this) }}
65-
/>) : null }
52+
<>
53+
<Navigation orgSettings={this.state.org} user={this.props.user} />
54+
<div className="overall_container">
55+
<div className="org_settings_view">
56+
<div className="main_section">
57+
<div className="left_nav">
58+
<p className="header_text">Community Settings</p>
59+
<Desktop>
60+
<LeftNav
61+
data={{
62+
option: this.state.option,
63+
changeOption: this.changeOption.bind(this),
64+
}}
65+
/>
66+
</Desktop>
67+
<Mobile>
68+
<Accordion>
69+
<Accordion.Toggle onClick={() => toggleSidebar()} variant="outline-secondary" size="sm" as={Button} eventKey="0">
70+
{this.state.sidebarOpen?"Close Menu":"Setting Menu"}
71+
</Accordion.Toggle>
72+
<Accordion.Collapse eventKey="0">
73+
<LeftNav
74+
data={{
75+
option: this.state.option,
76+
changeOption: this.changeOption.bind(this),
77+
}}
78+
/>
79+
</Accordion.Collapse>
80+
</Accordion>
81+
</Mobile>
82+
</div>
83+
<div className="right_section">
84+
{view === "profile" ? <OrgProfile /> : null}
85+
{view === "permission" ? <OrgPermission /> : null}
86+
{view === "settings" ? <OrgSetting /> : null}
87+
{view === "authentication" ? <OrgAuth /> : null}
88+
{view === "maintenance" ? <OrgMaintenance /> : null}
89+
{view === "activity" ? (
90+
<Users
91+
handleOption={{ changeOption: this.changeOption.bind(this) }}
92+
/>) : null }
93+
</div>
6694
</div>
6795
</div>
6896
</div>
69-
</div>
97+
</>
7098
);
7199
}
72100
}
@@ -77,4 +105,4 @@ const mapStateToProps = (state) => ({
77105
user: state.user,
78106
org: state.org
79107
})
80-
export default connect(mapStateToProps)(CommunitySetting);
108+
export default connect(mapStateToProps)(CommunitySetting);

‎src/user/dashboard/Community/community.scss‎

Lines changed: 20 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
.overall_container {
22
display: flex;
3-
.main_navigation {
4-
background: #f5f5f5;
5-
flex-grow: 1;
6-
border-right: solid 1px #dfe9f1;
7-
position: fixed;
8-
top: 0px;
9-
bottom: 0px;
10-
left: 0px;
11-
overflow-y: scroll;
12-
}
133
.org_settings_view {
144
margin-left: 13vw;
155
margin-top: 35px;
@@ -44,47 +34,34 @@
4434
}
4535
}
4636
}
47-
// mobile
48-
@media screen and (max-width: 768px) {
49-
.overall_container {
50-
.org_settings_view {
51-
.main_section {
52-
.left_nav {
53-
.navigation {
54-
.list-group {
55-
.link {
56-
display: none;
57-
}
58-
.header_text {
59-
font-size: 10px;
60-
}
61-
}
62-
}
63-
}
64-
}
65-
}
66-
}
37+
38+
39+
40+
.main_navigation::-webkit-scrollbar {
41+
display: none;
6742
}
6843

69-
// tablet
70-
@media screen and (min-width: 768px) and (max-width: 1023px) {
44+
@media (min-width: 320px) and (max-width: 1024px){
7145
.overall_container {
46+
display: flex;
47+
padding: 2.5vh 2.5vw;
7248
.org_settings_view {
49+
margin: 0;
50+
width: 100%;
7351
.main_section {
52+
flex-direction: column;
53+
margin-top: 0;
7454
.left_nav {
75-
.navigation {
76-
.list-group {
77-
.link {
78-
font-size: 5px;
79-
}
80-
}
81-
}
55+
max-width: 100%;
56+
height: auto;
57+
margin: 0;
58+
}
59+
.right_section {
60+
width: 100%;
61+
max-width: 100%;
62+
margin-top: 0;
8263
}
8364
}
8465
}
8566
}
8667
}
87-
88-
.main_navigation::-webkit-scrollbar {
89-
display: none;
90-
}

‎src/user/dashboard/Community/components/maintenance.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,11 @@
3434
}
3535
}
3636
}
37+
38+
@media (min-width: 320px) and (max-width: 1024px){
39+
.main__maintenance__container {
40+
.description__container {
41+
margin: 0;
42+
}
43+
}
44+
}

‎src/user/dashboard/Community/components/profile.scss‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,29 @@
103103
}
104104
}
105105
}
106-
}
106+
}
107+
108+
@media (min-width: 320px) and (max-width: 640px){
109+
.profile_content {
110+
.container{
111+
.form {
112+
.upload_img {
113+
width: 50%;
114+
}
115+
}
116+
}
117+
}
118+
}
119+
120+
121+
@media (min-width: 641px) and (max-width: 1024px){
122+
.profile_content {
123+
.container{
124+
.form {
125+
.upload_img {
126+
width: 33%;
127+
}
128+
}
129+
}
130+
}
131+
}

0 commit comments

Comments
 (0)