Add placeholder to fill empty space when no event is selected

datasektionen · Jan 25, 2024 · a81c0cd · a81c0cd
1 parent deb49bc
commit a81c0cd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/components/Frontpage/Frontpage.module.css b/src/components/Frontpage/Frontpage.module.css
@@ -189,7 +189,7 @@
 }
 .content .calendar .yearHeader button {
   height: 90px;
-  width: 49.5px;
+  width: 49px;
   font-size: x-large;
 }
 .content .calendar .monthHeader th {

diff --git a/src/components/Frontpage/eventCalendar.jsx b/src/components/Frontpage/eventCalendar.jsx
@@ -284,8 +284,8 @@ export default function EventCalendar({ events, location, lang }) {
   }
 
   return (
-    <div style={{position: "relative"}} className={cx('calendar', 'flex')}>
-      <table>
+    <div style={{ position: "relative" }} className={cx('calendar', 'flex')}>
+      <table style={{ margin: "auto" }}>
         <thead>
           <tr className={cx("yearHeader")}>
             <td rowSpan='3'>
@@ -305,9 +305,17 @@ export default function EventCalendar({ events, location, lang }) {
           )}
         </tbody>
       </table>
-      <div style={{width: "336px", height: "570px", overflow: "scroll"}}>
+      <div style={{ width: "336px", height: "570px", overflow: "scroll", margin: "auto" }}>
       {
-        selectedEventIndex !== -1 && <NewsItem item={events[selectedEventIndex]} location={location} lang={lang}/>
+        selectedEventIndex !== -1
+        ? <NewsItem item={events[selectedEventIndex]} location={location} lang={lang}/>
+        : <div style={{ height: "100%", width: "100%", padding: "10%", display: "flex", alignItems: "center", backgroundColor: "#eeeeee" }}>
+            <p style={{ fontSize: "24px", textAlign: "center" }}>
+              <Translate>
+                <Swedish>Klicka på en händelse för att visa mer information</Swedish>
+                <English>Click on an event to display more information</English>
+              </Translate></p>
+          </div>
       }
       </div>
       {(widgetWeekGroups

diff --git a/src/components/Frontpage/index.js b/src/components/Frontpage/index.js
@@ -249,8 +249,8 @@ const Frontpage = ({ location, lang }) =>
           {/* Title */}
           <h2 id="sections_intro">
             <Translate>
-              <Swedish>Evenemangs<span>Kalender</span></Swedish>
-              <English>Event <span>Calendar</span></English>
+              <Swedish>Evenemangskalender</Swedish>
+              <English>Event Calendar</English>
             </Translate>
           </h2>