Fix layout distortion due to untruncated title description of events

PalisadoesFoundation · Nov 6, 2023 · 7c289c8 · 7c289c8
1 parent 0980326
commit 7c289c8
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 9 deletions.
diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css
@@ -17,9 +17,24 @@
 .cards a:hover {
   color: black;
 }
+.cards {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+}
 .dispflex {
   display: flex;
-  justify-content: space-between;
+  height: 50px;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+}
+.cards:hover {
+  transform: scale(2.5);
+  z-index: 5;
+}
+.cards:hover h2 {
+  font-size: 0.4vmax;
+  margin-bottom: 0;
 }
 .iconContainer {
   display: flex;

diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx
@@ -140,7 +140,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
         >
           <div className={styles.dispflex}>
             <h2>
-              {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+              {props.eventName ? (
+                <>
+                  {props.eventName.length > 150 ? (
+                    <>{props.eventName.substring(0, 150)}...</>
+                  ) : (
+                    <>{props.eventName}</>
+                  )}
+                </>
+              ) : (
+                <>Dogs Care</>
+              )}
             </h2>
           </div>
         </div>
@@ -162,7 +172,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               <p className={styles.preview}>
                 {t('eventTitle')}:{' '}
                 <span className={styles.view}>
-                  {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+                  {props.eventName ? (
+                    <>
+                      {props.eventName.length > 100 ? (
+                        <>{props.eventName.substring(0, 100)}...</>
+                      ) : (
+                        <>{props.eventName}</>
+                      )}
+                    </>
+                  ) : (
+                    <>Dogs Care</>
+                  )}
                 </span>
               </p>
               <p className={styles.preview}>
@@ -177,7 +197,11 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               </p>
               <p className={styles.preview}>
                 {t('description')}:{' '}
-                <span className={styles.view}>{props.eventDescription}</span>
+                <span className={styles.view}>
+                  {props.eventDescription && props.eventDescription.length > 256
+                    ? props.eventDescription.substring(0, 256) + '...'
+                    : props.eventDescription}
+                </span>
               </p>
               <p className={styles.preview}>
                 {t('on')}: <span className={styles.view}>{props.regDate}</span>

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -84,8 +84,16 @@ const leftDrawerEvent = ({
               />
             </div>
             <div className={styles.profileText}>
-              <span className={styles.primaryText}>{event.title}</span>
-              <span className={styles.secondaryText}>{event.description}</span>
+              <span className={styles.primaryText}>
+                {event.title && event.title.length > 20
+                  ? event.title.substring(0, 20) + '...'
+                  : event.title}
+              </span>
+              <span className={styles.secondaryText}>
+                {event.description && event.description.length > 30
+                  ? event.description.substring(0, 30) + '...'
+                  : event.description}
+              </span>
             </div>
           </button>
         </div>

diff --git a/src/screens/EventDashboard/EventDashboard.module.css b/src/screens/EventDashboard/EventDashboard.module.css
@@ -41,7 +41,7 @@
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  width: 26%;
+  width: 100%;
 }
 .tagdetailsGreen > button {
   background-color: #31bb6b;

diff --git a/src/screens/EventDashboard/EventDashboard.tsx b/src/screens/EventDashboard/EventDashboard.tsx
@@ -80,7 +80,7 @@ const EventDashboard = (): JSX.Element => {
       setShowAddEventProjectModal={setShowAddEventProjectModal}
     >
       <Row>
-        <Col sm={3}>
+        <Col sm={4}>
           <div className={styles.sidebar}>
             <div className={styles.sidebarsticky}>
               {/* Side Bar - Static Information about the Event */}
@@ -110,7 +110,7 @@ const EventDashboard = (): JSX.Element => {
             </div>
           </div>
         </Col>
-        <Col sm={8} className="mt-sm-0 mt-5 ml-4 ml-sm-0">
+        <Col sm={6} className="mt-sm-0 mt-5 ml-4 ml-sm-0">
           {/* Main Screen Container */}
           <Container>
             <div className={styles.mainpageright}>