style: event card description,tickets btn padding

Axelera · May 12, 2022 · 57bf4c5 · 57bf4c5
1 parent fbb38a7
commit 57bf4c5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/apps/sumilan-app/src/app/components/EventCard/EventCardComponent.css b/apps/sumilan-app/src/app/components/EventCard/EventCardComponent.css
@@ -27,4 +27,10 @@
 
 .time-container-loading ion-icon {
     margin: 2px 4px 0 0;
-}
+}
+
+.event-card-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/apps/sumilan-app/src/app/components/EventCard/EventCardComponent.tsx b/apps/sumilan-app/src/app/components/EventCard/EventCardComponent.tsx
@@ -125,16 +125,25 @@ const EventCardComponent: React.FC<Props> = ({ event, history }) => {
                     <EventTimeComponent date={event.start_timestamp} duration={event.duration as number} />
                 </IonCardHeader>
                 <IonCardContent>
-                    <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    <div className="event-card-description">
                         <ReactMarkdown
                             rehypePlugins={[rehypeRaw]}
-                            children={event.event_description?.replace(/\\n/g, '\n') || ''}
+                            children={event.event_description?.split('\n')[0] || ''}
                             components={{
                                 p({ children }) {
                                     return (
                                         <span>{children}</span>
                                     )
-                                }
+                                },
+                                a({ children }) {
+                                    return <span>{children}</span>;
+                                },
+                                ul({ children }) {
+                                    return <span>{children}</span>;
+                                },
+                                li({ children }) {
+                                    return <span>- {children}</span>;
+                                },
                             }}
                         />
                     </div>

diff --git a/apps/sumilan-app/src/app/pages/Event/Info/Info.tsx b/apps/sumilan-app/src/app/pages/Event/Info/Info.tsx
@@ -31,7 +31,11 @@ const Info: React.FC<EventComponentProps> = ({ event }) => {
     return (
         <IonPage>
             <EventHeaderComponent event={event} />
-            <IonContent>
+            <IonContent
+                style={{
+                    '--padding-bottom': '80px', // ~ tickets button height + position
+                }}
+            >
                 <div style={{ width: '100%' }}>
                     <div className="event-image" style={{ backgroundImage: `url(${event.event_image_url})` }}></div>
                 </div>