Skip to content

Commit 2e8e8f5

Browse files
lazycipherlazycipher
committed
Project Info Mobile and Tab Responsive Fix
1 parent 22e71c7 commit 2e8e8f5

File tree

2 files changed

+119
-112
lines changed

2 files changed

+119
-112
lines changed

‎src/user/projects/proj-info/proj-info.js‎

Lines changed: 104 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -108,118 +108,116 @@ class ProjInfo extends Component {
108108
))
109109

110110
return (
111-
<div className="organization">
112-
<div className="navigation">
113-
<Navigation proj={proj}></Navigation>
114-
</div>
115-
<div className="news">
116-
<Row>
117-
<Col sm={4}>
118-
<Card.Img variant="top" className="proj_img" src={proj_img} />
119-
</Col>
120-
<Col sm={8}>
121-
<div className="project-info">
122-
<Row>
123-
<Col sm={7}>
124-
<h1 className="proj_name">{projectInfo?.projectName}</h1>
125-
<Badge variant="success">
126-
Version {projectInfo?.version || "1.0.0"}
127-
</Badge>{" "}
128-
</Col>
129-
130-
<Col sm={5}>
131-
<Button variant = "light" onClick = {() => {
132-
window.open(githubLink, '_blank')
133-
}
134-
} >
135-
<GitHubIcon></GitHubIcon>
136-
</Button>{" "}
137-
<Button variant = "light" onClick = {() => {
138-
window.open(bitBucketLink, '_blank')
139-
}
140-
}>
141-
<LanguageIcon></LanguageIcon>
142-
</Button>{" "}
143-
{checkDeleteRights(projectInfo.createdBy?._id) ? (
144-
<Button
145-
variant="light"
146-
onClick={() => this.setState({ editProject: true})}
147-
>
148-
<EditIcon></EditIcon>
149-
</Button>
150-
) : null }
151-
<EditProject
152-
show={editProject}
153-
data={projectInfo}
154-
onHide={cancel}
111+
<>
112+
<Navigation proj={proj} />
113+
<div className="project">
114+
<Row className="project__row">
115+
<Col sm={4}>
116+
<Card.Img variant="top" className="proj_img" src={proj_img} />
117+
</Col>
118+
<Col sm={8}>
119+
<div className="project-info">
120+
<Row>
121+
<Col sm={7}>
122+
<h1 className="proj_name">{projectInfo?.projectName}</h1>
123+
<Badge variant="success">
124+
Version {projectInfo?.version || "1.0.0"}
125+
</Badge>{" "}
126+
</Col>
127+
128+
<Col sm={5}>
129+
<Button variant = "light" onClick = {() => {
130+
window.open(githubLink, '_blank')
131+
}
132+
} >
133+
<GitHubIcon></GitHubIcon>
134+
</Button>{" "}
135+
<Button variant = "light" onClick = {() => {
136+
window.open(bitBucketLink, '_blank')
137+
}
138+
}>
139+
<LanguageIcon></LanguageIcon>
140+
</Button>{" "}
141+
{checkDeleteRights(projectInfo.createdBy?._id) ? (
142+
<Button
143+
variant="light"
144+
onClick={() => this.setState({ editProject: true})}
145+
>
146+
<EditIcon></EditIcon>
147+
</Button>
148+
) : null }
149+
<EditProject
150+
show={editProject}
151+
data={projectInfo}
152+
onHide={cancel}
153+
/>
154+
{checkDeleteRights(projectInfo.createdBy?._id) ? (
155+
<Button
156+
variant="light"
157+
onClick={() => this.setState({ deleteProject: true })}
158+
>
159+
<DeleteIcon></DeleteIcon>
160+
</Button>
161+
) : null}
162+
<DeleteProject
163+
show={deleteProject}
164+
onHide={cancel_del}
165+
projectId={this.props.match.params.id}
155166
/>
156-
{checkDeleteRights(projectInfo.createdBy?._id) ? (
157-
<Button
158-
variant="light"
159-
onClick={() => this.setState({ deleteProject: true })}
160-
>
161-
<DeleteIcon></DeleteIcon>
162-
</Button>
163-
) : null}
164-
<DeleteProject
165-
show={deleteProject}
166-
onHide={cancel_del}
167-
projectId={this.props.match.params.id}
168-
/>
169-
<br></br>
170-
<div className="tech-stack">
171-
{techBadge}
172-
</div>
173-
</Col>
174-
</Row>
175-
176-
<p className="createAt">
177-
Created At:
167+
<br></br>
168+
<div className="tech-stack">
169+
{techBadge}
170+
</div>
171+
</Col>
172+
</Row>
173+
174+
<p className="createAt">
175+
Created At:
176+
<Moment format="DD MMM YYYY">
177+
{projectInfo?.createdAt}
178+
</Moment>
179+
{" "}
180+
</p>
181+
<p className="place">Updated At:
178182
<Moment format="DD MMM YYYY">
179183
{projectInfo?.createdAt}
180184
</Moment>
181-
{" "}
182-
</p>
183-
<p className="place">Updated At:
184-
<Moment format="DD MMM YYYY">
185-
{projectInfo?.createdAt}
186-
</Moment>
187-
</p>
188-
<p className="short_des">
189-
{projectInfo.description?.short || "Short description"}
190185
</p>
191-
</div>
192-
</Col>
193-
</Row>
194-
<Row>
195-
<Col xs={12}>
196-
<div className="description">
197-
<h1>Project Details</h1>
198-
<hr />
199-
200-
<p className="desc">
201-
{projectInfo.description?.long || "Long description"}
202-
</p>
203-
</div>
204-
</Col>
205-
</Row>
206-
207-
{/* <Row>
208-
<Col xs={12}>
209-
<div className="maintainers">
210-
<h1>Maintainers</h1>
211-
<hr />
212-
</div>
213-
</Col>
214-
</Row> */}
215-
216-
<div className={useStyles.root}>
217-
<Grid container spacing={1}>
218-
{/* {maintainers} */}
219-
</Grid>
186+
<p className="short_des">
187+
{projectInfo.description?.short || "Short description"}
188+
</p>
189+
</div>
190+
</Col>
191+
</Row>
192+
<Row className="project__row">
193+
<Col xs={12}>
194+
<div className="description">
195+
<h1>Project Details</h1>
196+
<hr />
197+
198+
<p className="desc">
199+
{projectInfo.description?.long || "Long description"}
200+
</p>
201+
</div>
202+
</Col>
203+
</Row>
204+
205+
{/* <Row>
206+
<Col xs={12}>
207+
<div className="maintainers">
208+
<h1>Maintainers</h1>
209+
<hr />
210+
</div>
211+
</Col>
212+
</Row> */}
213+
214+
<div className={useStyles.root}>
215+
<Grid container spacing={1}>
216+
{/* {maintainers} */}
217+
</Grid>
218+
</div>
220219
</div>
221-
</div>
222-
</div>
220+
</>
223221
);
224222
}
225223
}

‎src/user/projects/proj-info/proj-info.scss‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
.project {
2+
margin-left: 13vw;
3+
}
14
.container {
25
margin-top: 2vh;
36
.back{
@@ -10,10 +13,7 @@
1013

1114
.proj_img{
1215
height:15rem;
13-
margin-left: 1vw;
14-
max-width: 23vw;
15-
max-height: 42vh;
16-
height: 39vh;
16+
max-width: 100%;
1717
}
1818

1919
.project-info {
@@ -48,8 +48,8 @@
4848
font-weight: 500;
4949
margin: 4px 0;
5050
padding: 0;
51-
text-align: justify;
52-
max-width: 80%;
51+
text-align: left;
52+
max-width: 100%
5353
}
5454

5555
.place {
@@ -114,3 +114,12 @@
114114
margin-bottom: 1vh;
115115
}
116116

117+
@media (min-width: 320px) and (max-width: 1024px){
118+
.project {
119+
margin: 0;
120+
width: 100vw;
121+
.project__row {
122+
margin: 0;
123+
}
124+
}
125+
}

0 commit comments

Comments
 (0)