Merge pull request #36 from PyConAPAC/update-events-ui

Update ui display of events list for readability

Author: codemickeycode

src/views/events/EventData.js

@@ -45,7 +45,7 @@ export const events = [
         link: 'https://2025.pycon.jp',
     },
     {
-      date: '11-12 Oct(tentative)',
+      date: '11-12 Oct (tentative)',
       title: 'PyCon HK',
       location: 'City University of Hong Kong, Hong Kong',  
       link: 'https://pycon.hk',

src/views/events/Events.tsx

@@ -32,12 +32,29 @@ export default function Events() {
                 <h4 className="text-white">Regional PyCon {currentYear} in APAC Schedule</h4>
                 <br />
               </div>
-              <div className="medium-text text-white" style={{opacity: '60%'}}>
-                <ul>
+              <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>
+                </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>
+                  ))}
+                </div>
+
+
               </div>
             </div>
           </div>

src/views/events/style.css

@@ -110,4 +110,78 @@
   .slide-changer {
     display: revert;
   }
-}
+}
+
+
+.event-strip-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.event-strip {
+  background: #f5f3fa;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  color: #1a1a1a;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.9rem;
+}
+
+.event-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.event-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.event-card {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.75rem 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;
+}
+
+.event-card:hover {
+  background: #ece8f5;
+}
+
+.event-date {
+  flex: 0 0 auto;
+  min-width: 100px;
+  color: #555;
+}
+
+.event-title {
+  font-weight: 600;
+  flex: 0 0 auto;
+  min-width: 120px;
+  color: #222;
+}
+
+.event-location {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #444;
+}