Merge pull request #37 from PyConAPAC/update-events-ui-2025-2

Update Events Section UI - make date readable

Author: codemickeycode

src/views/events/EventData.js

@@ -7,60 +7,70 @@ export const events = [
         title: 'PyCon APAC',
         location: 'Ateneo de Manila University, Quezon City, Philippines',
         link: 'https://pycon-apac.python.ph/',
+        countryCode: 'PH',
     },
     {
         date: '18-20 June',
         title: 'PyCon SG',
         location: 'Singapore Institute of Technology, Singapore',
         link: 'https://pycon.sg',
+        countryCode: 'SG',
     },
     {
         date: '15-17 August',
         title: 'PyCon KR',
         location: 'Dongguk University, Seoul, South Korea',
         link: 'https://2025.pycon.kr/',
+        countryCode: 'KR',
     },
     {
         date: '5-7 September',
         title: 'PyCon TW ',
         location: 'Taipei, Taiwan',
         link: 'https://tw.pycon.org/2025/en-us',
+        countryCode: 'TW',
     },
     {
         date: '12-15 Sep',
         title: 'PyCon India',
         location: 'Nimhans Convention Center, Bangalore, India',
         link: 'https://in.pycon.org/2025/',
+        countryCode: 'IN',
     },
     {
         date: '12-16 Sep',
         title: 'PyCon AU',
         location: 'Melbourne, Australia',
         link: 'https://2025.pycon.org.au',
+        countryCode: 'AU',
     },
     {
         date: '26-27 Sep',
         title: 'PyCon JP',
         location: 'Hiroshima, Japan',
         link: 'https://2025.pycon.jp',
+        countryCode: 'JP',
     },
     {
       date: '11-12 Oct (tentative)',
       title: 'PyCon HK',
       location: 'City University of Hong Kong, Hong Kong',  
       link: 'https://pycon.hk',
+      countryCode: 'HK',
     },
     {
       date: '17-18 Oct',
       title: 'PyCon TH',
       location: 'Avani Sukhumvit Bangkok Hotel, Bangkok, Thailand',
       link: 'https://th.pycon.org',
+      countryCode: 'TH',
     },
     {
       date: '21-23 Nov',
       title: 'PyCon NZ',
       location: 'Wellington waterfront, New Zealand',
       link: 'https://kiwipycon.nz',
+      countryCode: 'NZ',
     }
   ];
 

src/views/events/Events.tsx

@@ -33,24 +33,23 @@ export default function Events() {
                 <br />
               </div>
               <div className="medium-text text-white">
-{/*                <ul>
-                  {events.map((event: any, index: number) => (
-                    <li>{event.date}: <strong>{event.title}</strong> {event.location} {event.link && <a href={event.link}>🔗</a>}</li>
-                  ))}
-                </ul>*/}
                 <div className="event-cards">
                   {events.map((event, index) => (
-                    <a
-                      key={index}
-                      href={event.link}
-                      className="event-card"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <span className="event-date">{event.date}</span>
-                      <span className="event-title">{event.title}</span>
-                      <span className="event-location">{event.location}</span>
-                    </a>
+                      <a
+                        key={index}
+                        href={event.link}
+                        className="event-card"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <div className="event-date-card">{event.date}</div>
+                        <div className="event-details">
+                          <div className="event-title">
+                            {countryCodeToFlag(event.countryCode)} {event.title}
+                          </div>
+                          <div className="event-location">{event.location}</div>
+                        </div>
+                      </a>
                   ))}
                 </div>
 
@@ -71,7 +70,7 @@ export default function Events() {
                 <div className="medium-text text-white" style={{opacity: '60%'}}>
                   <ul>
                     {upcomingEvents.map((event: any, index: number) => (
-                      <li key={index}>{event.date}: <strong>{event.title}</strong> {event.location} {event.link && <a href={event.link}>🔗</a>}</li>
+                      <li key={index}>{event.date}:  <strong>{event.title}</strong> {event.location} {event.link && <a href={event.link}>🔗</a>}</li>
                     ))}
                   </ul>
                 </div>
@@ -156,3 +155,10 @@ export default function Events() {
     </div>
   )
 }
+
+
+const countryCodeToFlag = (code: string) => {
+  if (!code || code.length !== 2) return '';
+  const offset = 127397;
+  return String.fromCodePoint(...code.toUpperCase().split('').map(c => c.charCodeAt(0) + offset));
+};

src/views/events/style.css

@@ -142,46 +142,58 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-top: 1rem;
+  width: 100%;
 }
 
 .event-card {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
-  padding: 0.75rem 1rem;
+  padding: 1rem;
   background: #f5f3fa;
   border: 1px solid #ddd;
   border-radius: 8px;
   color: #1a1a1a;
   text-decoration: none;
   transition: background 0.2s ease, transform 0.2s ease;
-  font-size: 0.95rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  gap: 1rem;
+  width: 100%;
 }
 
-.event-card:hover {
-  background: #ece8f5;
+.event-date-card {
+  background: #dcd6f7;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: #2c1e4a;
+  flex-shrink: 0;
 }
 
-.event-date {
-  flex: 0 0 auto;
-  min-width: 100px;
-  color: #555;
+.event-details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
 }
 
 .event-title {
   font-weight: 600;
-  flex: 0 0 auto;
-  min-width: 120px;
-  color: #222;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #1a1a1a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .event-location {
-  flex: 1;
+  font-size: 0.9rem;
+  color: #555;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: #444;
+  white-space: nowrap;
 }