fix event card text overflow

official-scint · Apr 18, 2024 · 305751c · 305751c
1 parent d2d1b45
commit 305751c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/css/home/events.css b/css/home/events.css
@@ -3,8 +3,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding-top: 3rem;
-    padding-bottom: 3rem;
+    padding: 3rem 4rem;
     gap: 2rem;
 }
 
@@ -24,9 +23,10 @@
     box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
     background-color: #0E1133;
     display: flex;
-    flex-direction: row;
     gap: 1rem;
     transition: 200ms;
+    flex-direction: column;
+    width: 100%;
 }
 
 .event-card-left {
@@ -37,7 +37,7 @@
 }
 
 .event-image {
-    height: 10rem;
+    width: 100%;
     object-fit: cover;
     border-radius: 1rem;
 }
@@ -101,11 +101,6 @@
         justify-content: center;
     }
 
-    .event-card {
-        flex-direction: column;
-        width: 100%;
-    }
-
     .event-card-left {
         flex-direction: column;
         align-items: center;
@@ -140,7 +135,7 @@
     }
 
     .event-image {
-        width: 100%;
+
         aspect-ratio: 3 / 1;
     }
 }
diff --git a/js/home.js b/js/home.js
@@ -231,10 +231,10 @@ fetch("https://api.scint.org/events")
                 <div class="event-card-left">
                     <div class="event-details">
                         <h2 class="event-title">${title}</h2>
-                        <pre class="event-description">${description}</pre>
+                        <p class="event-description">${description.replaceAll("\n", "<br>")}</p>
                     </div>
                     <div class="event-buttons">
-                        <a target="_blank" href="${add_to_calendar_url}" class="event-button">添加行事曆</a>
+                        <a target="_blank" href="${add_to_calendar_url}" class="event-button">添加到行事曆</a>
                     </div>
                 </div>
                 <div class="event-card-right">