Skip to content

Commit

Permalink
conference request page made responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayushi25sep
ayushi25sep committed Apr 6, 2021
1 parent 5698982 commit 1356d3e
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 26 deletions.
Binary file added src/assets/check.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/pending.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/remove.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 26 additions & 5 deletions src/components/conferenceDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,40 @@ class ConferenceDashboard extends Component {
<h1 style={{ margin: "20px 0px" }}>Conference Requests</h1>
</Row>
<Row justify="center" className="conference-table-heading">
<Col className="conference-table-heading-column" span={6}>

<Col className="conference-table-heading-column" xl={4}
lg={5}
md={6}
sm={6}
xs={6}>
<h2 className="conference-heading">Title</h2>
</Col>
<Col className="conference-table-heading-column" span={3}>
<Col className="conference-table-heading-column" xl={4}
lg={4}
md={4}
sm={4}
xs={4}>
<h2 className="conference-heading">Venue</h2>
</Col>
<Col className="conference-table-heading-column" span={6}>
<Col className="conference-table-heading-column" xl={4}
lg={4}
md={5}
sm={7}
xs={7}>
<h2 className="conference-heading">Date</h2>
</Col>
<Col className="conference-table-heading-column" span={6}>
<Col className="conference-table-heading-column" xl={4}
lg={4}
md={5}
sm={0}
xs={0}>
<h2 className="conference-heading">Time</h2>
</Col>
<Col className="conference-table-heading-column" span={3}>
<Col className="conference-table-heading-column" xl={4}
lg={4}
md={4}
sm={7}
xs={7}>
<h2 className="conference-heading">Status</h2>
</Col>
</Row>
Expand Down
51 changes: 37 additions & 14 deletions src/components/conferenceDashboardCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React, { Component } from "react";
import { Row, Col } from "antd";
import moment from "moment";

import pending from "../assets/pending.png";
import remove from "../assets/remove.png";
import check from "../assets/check.png";
import "./styles/conferenceDashboardCard.css";

class ConferenceDashboardCard extends Component {
Expand All @@ -11,32 +13,53 @@ class ConferenceDashboardCard extends Component {
return (
<div className={this.props.color}>
<Row justify="center">
<Col className="dashboard-card-column" span={6}>
<h2 className="dashboard-card-heading">{this.props.event.title}</h2>

<Col className="dashboard-card-column" xl={4}
lg={5}
md={6}
sm={6}
xs={6}>
<h2 className="dashboard-card-heading">{this.props.event.title.toUpperCase()}</h2>
</Col>
<Col className="dashboard-card-column" span={3}>
<Col className="dashboard-card-column" xl={4}
lg={4}
md={4}
sm={4}
xs={4}>
<h2 className="dashboard-card-heading">
{this.props.event.roomId.name}
</h2>
</Col>
<Col className="dashboard-card-column" span={6}>
<Col className="dashboard-card-column" xl={4}
lg={4}
md={5}
sm={7}
xs={7}>
<h2 className="dashboard-card-heading">
{moment(startTime).format("MMMM Do YYYY")}
{moment(startTime).format(" DD-MM-YY")}
</h2>
</Col>
<Col className="dashboard-card-column" span={6}>
<Col className="dashboard-card-column" xl={4}
lg={4}
md={5}
sm={0}
xs={0}>
<h2 className="dashboard-card-heading">{`${moment(startTime)
.format("hh:mm a")
.toUpperCase()} to ${moment(endTime)
.format("hh:mm a")
.format("HH:MM ")
.toUpperCase()} - ${moment(endTime)
.format("HH:MM ")
.toUpperCase()}`}</h2>
</Col>
<Col className="dashboard-card-column" span={3}>
<Col className="dashboard-card-column" xl={4}
lg={4}
md={4}
sm={7}
xs={7}>
{this.props.event.status == 0
? "PENDING"
? < img src={pending} style={{width:"15%"}}></img>
: this.props.event.status == 1
? "APPROVED"
: "DECLINED"}
? < img src={check} style={{width:"15%"}}></img>
: < img src={remove} style={{width:"15%"}}></img>}
</Col>
</Row>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/components/styles/conferenceDashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,5 @@
}

.conference-table-heading-column {
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
}
16 changes: 12 additions & 4 deletions src/components/styles/conferenceDashboardCard.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.main-container-dashboard-card {
width: 84%;
width: 90%;
border-bottom: 2.5px solid white;
margin: 0px auto;
}
Expand All @@ -8,6 +8,7 @@
font-weight: 400;
margin: 0px;
padding: 4.5px 0px;
text-align:center;
}
.color1 {
background-image: linear-gradient(to right, #bad9e3, #94bed4);
Expand All @@ -17,7 +18,14 @@
}

.dashboard-card-column {
display: flex !important;
justify-content: center;
align-items: center;
text-align: center;
font-size: 1.1rem;
}

@media only screen and (max-width:720px)
{
.dashboard-card-heading {
text-align: center;
font-size: 0.9rem;
}
}

0 comments on commit 1356d3e

Please sign in to comment.