Improved Admin Page CSS

swapnilnarad2000 · Feb 11, 2024 · b0d7470 · b0d7470
1 parent 3d31807
commit b0d7470
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/App.css b/src/App.css
@@ -653,6 +653,17 @@
 	padding-bottom: 20px;
 }
 
+@media (max-width: 992px){
+	.admin-panel-page .card-title{
+    	display: block;
+		font-size: 15px;
+	}
+}
+
+.admin-panel-page .card-text{
+	display: block !important;
+}
+
 .admin-error-modal{
 	position: absolute;
 	z-index: 10;
@@ -707,6 +718,10 @@
 	text-align: left;
 }
 
+.admin-card-item{
+	margin-bottom: 10px;
+}
+
 /* Google Icom */
 .google-login-icon{
 	cursor: pointer;

diff --git a/src/Components/Helpers/AdminPanel.js b/src/Components/Helpers/AdminPanel.js
@@ -35,7 +35,7 @@ let AdminPanel = (props) => {
             <Container>
                 <Row>
                     <h1 className="admin-panel-title">Welcome {props.currentUser} ! Here are some latest feedbacks...</h1>
-                    {data.length ? data.map(item => (<Col md={4} sm={12} xs={12}><FeedbackCard data={item} /></Col>)) : <p> Couldnt Reach Servers Right Now 😒!!! </p>}
+                    {data.length ? data.map(item => (<Col md={4} sm={12} xs={12} className="admin-card-item"><FeedbackCard data={item} /></Col>)) : <p> Couldnt Reach Servers Right Now 😒!!! </p>}
                 </Row>
             </Container>
         </div>

diff --git a/src/Components/Helpers/FeedbackCard.js b/src/Components/Helpers/FeedbackCard.js
@@ -4,10 +4,10 @@ let FeedbackCard = (props) => {
     return (
         <Card>
             <Card.Body>
-                <Card.Title>Name: {props.data.fullName}</Card.Title>
+                <Card.Title>Full Name: {props.data.fullName}</Card.Title>
                 Feedback: <Card.Subtitle className="mb-2 text-muted">{props.data.message}</Card.Subtitle>
-                Contact: <Card.Link href="#">{props.data.phone}</Card.Link>
-                <Card.Link href={`mailto:` + props.data.email}>{props.data.email}</Card.Link>
+                Phone: <Card.Text>{props.data.phone}</Card.Text>
+                E-mail: <Card.Link href={`mailto:` + props.data.email}>{props.data.email}</Card.Link>
             </Card.Body>
         </Card>
     );