Skip to content

Commit

Permalink
Made changes in Event page and made new modal and made some changes i…
Browse files Browse the repository at this point in the history 
…n navbar too
  • Loading branch information
@Shreesh-125
Shreesh-125 committed Nov 10, 2024
1 parent 7a34774 commit 64d5e99
Show file tree
Hide file tree
Showing 13 changed files with 539 additions and 116 deletions.
2 changes: 1 addition & 1 deletion components/BigModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const Modal = (props) => {
router.push('/userLogin')
}
}
let description = props.body.description.replace(/\n/g, '<br>');
let description = (props.body.description || '').replace(/\n/g, '<br />');
return (
<React.StrictMode>
<ToastContainer
Expand Down
60 changes: 60 additions & 0 deletions components/EventItem/Modal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// components/EventItem/Modal.js
import React from 'react'
import styles from './Modal.module.css'
import { IoMdCloseCircleOutline } from "react-icons/io";
const Modal = ({ isOpen, onClose, event }) => {
if (!isOpen) return null

return (
<div className={styles.overlay} onClick={onClose}>
<div className={styles.modal} onClick={(e) => e.stopPropagation()}>
<button className={styles.closeButton} onClick={onClose}>
<IoMdCloseCircleOutline className={styles.closeicon} />
</button>
<div className={styles.title}><h2>{event.name}</h2></div>
<hr style={{height:0.5,margin:14}} />


<div className={styles.innerContainer}>
<div className={styles.leftBLock}>

<img
src={
event.poster
? event.poster
: '/events/poster.png'
}
className={styles.item}
alt="Fest Image"
objectfit={'contain'}
/>
<button className={styles.registerButton}>Register</button>
<button className={styles.ruleBookButton}>Rule Book</button>
</div>
<div className={styles.verticalline}></div>
<div className={styles.rightBlock}>
<p>Date: <span style={{fontWeight:'bold'}}>{event.date? event.date:"17-18 March"}</span></p>
<p>Venue: <span style={{fontWeight:'bold'}}>{event.venue? event.venue:"IIT Patna"}</span></p>
<p>{event.description? event.description:"A title event of Anwesha consisting of group discussion, personal interviews, and a fashion show. A fashion show to show your ramp walk and moves and to flaunt your fashion sense"}</p>
<br />
<p>Individual Participation:</p>
<p>Registration Fee ₹ <span style={{fontWeight:'bold'}}>{event.registerationFee? event.registerationFee:99}</span></p>
<p>Registration closes on <span style={{fontWeight:'bold'}}>{event.registerationclosingdate? event.registerationclosingdate:"Thu March 16 2023"}</span></p>
<p>Prizes Worth: <span style={{fontWeight:'bold'}} >₹ {event.priceworth?event.priceworth:30000}</span></p>
<p>Organizers:</p><br />
{event.organizers.map((item, idx) => (
<>
<span key={idx} style={{ fontWeight: 'bold' }}>
{item.name} : {item.contact}
</span>
<br />
</>
))}
</div>
</div>
</div>
</div>
)
}

export default Modal
167 changes: 167 additions & 0 deletions components/EventItem/Modal.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
/* components/Modal.module.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.modal {
background: black;
padding: 20px;
border-radius: 8px;
width: 700px;
height: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
}
.item {
height: 183px;
width: 224px;
border-radius: 15px;

}
.title {
display: flex;
justify-content: center;
color: white;
font-family: "Inter", sans-serif;
font-weight: 200;
font-optical-sizing: auto;
font-style: normal;
}
.innerContainer {
display: flex;
flex-direction: row;
margin-top: 20px;
font-family: "Inter", sans-serif;
font-weight: 400;
font-optical-sizing: auto;
font-style: normal;

}
.closeButton {
color: white;
position: absolute;
top: 10px;
right: 10px;
background: transparent;
border: none;
font-size: 24px;
cursor: pointer;
}
.closeicon{
color: #6000C5;
}
.content {
padding: 10px 0;
}
.leftBLock{
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
align-items: center;
}

.registerButton{
width: 100%;
background-color: #6000C5;
color: white;
padding: 10px;
border-radius: 10px;
font-family: 'Outfit', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
border: none;
font-size: 15px;
padding-bottom: 12px;
padding-top: 12px;
}

.verticalline {
border-left: 2px dotted white; /* Dotted line color and width */
height: auto;
margin: 0 20px; /* Add space around the line */
align-self: stretch;
}



.rightBlock{
color: white;
width: auto;
max-width: 400px;
overflow-y: auto; /* Adds a scroll bar if content exceeds height */
word-wrap: break-word; /* Wraps long words */
word-break: break-word;
height: 100%;
font-size: 15px;
font-weight: 200;
font-family: "Inter", sans-serif;

}
.ruleBookButton{
width: 100%;

border-color: #6000C5;
border: 2px solid #6000C5;
padding: 10px;
border-radius: 10px;
color: white;
background-color: black;
font-family: 'Outfit', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 15px;
padding-top: 12px;
padding-bottom: 12px;

}

@media screen and (max-width: 768px) {
.innerContainer{
flex-direction: column;
}

.verticalline {
border-left: none; /* Remove the vertical line */
border-top: 2px dashed white; /* Horizontal dashed line */
width: 100%; /* Adjust width to full width */
margin: 20px 0; /* Adjust margin for horizontal line */
align-self: center;
}

.modal {
width: 90%; /* Adjust width for mobile/tablet screens */
padding: 15px;
border-radius: 6px;
max-height: 80vh; /* Limit height to 80% of viewport height */
overflow-y: auto; /* Add vertical scrolling */
border-radius: 6px; /* Slightly smaller border-radius */
}
}

@media (max-width: 480px) {
.modal {
width: 90%; /* Further reduce width for smaller screens */
padding: 10px;
/* padding-bottom: 12px; */
border-radius: 5px;
max-height: 80vh; /* Limit height to 80% of viewport height */
overflow-y: auto; /* Enable vertical scrolling */
}
.innerContainer{
margin-bottom: 10px;

}
}
33 changes: 24 additions & 9 deletions components/EventItem/eventitem.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
.card {
background-color: white;
background-color: black;
width: fit-content;
height: fit-content;
border-radius: 15px;
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.15);

}

.imageWrap {
position: relative;
width: 320px;
width: 293px;
max-width: 90vw;
height: 320px;
height: 239px;
max-height: 90vw;
overflow: hidden;
border-radius: 15px;
Expand Down Expand Up @@ -42,15 +44,28 @@
border-radius: 15px;
}

.imageWrap:hover .img__description {
/* .imageWrap:hover .img__description {
visibility: visible;
opacity: 1;
}
} */

.eventName {
font-size: 20px;
margin: 10px 18px;
color: #102B71;
font-weight: 600;
font-size: 22px;
margin-top: 8px;
color: white;

width: 284px;
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

.smalldescription {
color: #9D9D9D;
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
font-size: 14px;
}
12 changes: 7 additions & 5 deletions components/EventItem/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Image from 'next/image'
import styles from './eventitem.module.css'
import { motion } from 'framer-motion'
import Modal from '../BigModal'
// import Modal from '../BigModal'
import { useState } from 'react'

const index = ({ event }) => {
const index = ({ event,onClick }) => {
const [modal, setModal] = useState(false)

const close = () => {
Expand All @@ -15,7 +15,8 @@ const index = ({ event }) => {
<>
<div
className={styles.card}
onClick={() => setModal(true)}
onClick={onClick}

>
{/* {event.is_active ? null : (
<img
Expand Down Expand Up @@ -53,16 +54,17 @@ const index = ({ event }) => {
</p>
</div>
<div className={styles.eventName}>{event.name}</div>
<div className={styles.smalldescription}>{event.smalldescription}</div>
</div>
{modal && (
{/* {modal && (
<>
<Modal
title={event.name}
body={event}
closeHandler={close}
/>
</>
)}
)} */}
</>
)
}
Expand Down
Loading

0 comments on commit 64d5e99

Please sign in to comment.