made EventCardDisplay on front page responsive, added hover effect an…

…d other improvments (#770) * finished making eventCardDisplay resposnive and cleaned up last code * removed code smells * removed code smells * removed code smells * removed code smells --------- Co-authored-by: endre2112 <[email protected]>
Fotogjengen · Oct 26, 2023 · 680933e · 680933e
1 parent 10e8e50
commit 680933e
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 102 deletions.
diff --git a/src/components/Frontpage/EventCards/EventCards.module.css b/src/components/Frontpage/EventCards/EventCards.module.css
@@ -0,0 +1,72 @@
+@import "../../../styles/variables.css";
+
+.cardsContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+
+.card {
+    display: flex;
+    width: calc(100%);
+    box-shadow: var(--box-shadow-1);
+    position: relative;
+
+}
+
+
+.card::before {
+    transition: width ease-in-out 0.1s;
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 0.2rem;
+
+    background-color: var(--hilfling-color-red);
+}
+
+
+.card:hover::before {
+    width: 0.6rem;
+}
+
+.cardImg {
+    width: 40%;
+    box-shadow: var(--box-shadow-1);
+    aspect-ratio: 4 / 3;
+}
+
+.cardText {
+    width: fit-content;
+    gap: 0.2rem;
+    padding: 0.5rem 1rem;
+}
+
+.cardTextTitle {
+    font-size: 2rem;
+    border-bottom: 0.2rem solid var(--hilfling-color-red);
+}
+
+.cardText>* {
+    min-width: fit-content;
+}
+
+.cardText b {
+    margin-right: 0.2rem;
+}
+
+@media only screen and (max-width: 600px) {
+    .card {
+        border: none;
+        flex-direction: column;
+    }
+
+    .cardImg {
+        width: 100%;
+    }
+
+}
diff --git a/src/components/Frontpage/EventCards/EventCards.tsx b/src/components/Frontpage/EventCards/EventCards.tsx
@@ -0,0 +1,61 @@
+import React, { FC } from "react";
+import { Link } from "react-router-dom";
+
+import styles from "./EventCards.module.css";
+import { MotiveDto } from "../../../../generated";
+
+interface Props {
+  event: string;
+  motiveResponse: MotiveDto[];
+}
+
+const EventCards: FC<Props> = ({ event, motiveResponse }) => {
+  const motiveEventResponse = motiveResponse
+    .filter((motiveObject) => {
+      return motiveObject.eventOwnerDto.name === event;
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.dateCreated);
+      const dateB = new Date(b.dateCreated);
+      return dateB.getTime() - dateA.getTime();
+    });
+
+  return (
+    <div className={styles.cardsContainer}>
+      {motiveEventResponse.map((motiveObject) => {
+        const id = motiveObject.motiveId.id || "default";
+        return (
+          <Link
+            className={styles.card}
+            key={`motive-card-${id}`}
+            to={`/motive/${id}`}
+          >
+            <img
+              className={styles.cardImg}
+              src="https://www.w3schools.com/css/img_lights.jpg"
+              alt="img"
+            />
+
+            <div className={styles.cardText}>
+              <div className={styles.cardTextTitle}>{motiveObject.title}</div>
+              <div>
+                <b>Date:</b>
+                {motiveObject.dateCreated.toString()}
+              </div>
+              <div>
+                <b>Location:</b>
+                {"Blåfjell"}
+              </div>
+              <div>
+                <b>Images:</b>
+                {"367"}
+              </div>
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+};
+
+export default EventCards;
diff --git a/src/components/Frontpage/EventCardsDisplayer/EventCardsDisplayer.module.css b/src/components/Frontpage/EventCardsDisplayer/EventCardsDisplayer.module.css
@@ -1,4 +1,15 @@
+
+
 .container {
   background-color: white;
-  padding: 1.2rem;
+  padding: 1rem;
 }
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Frontpage/EventCardsDisplayer/EventCardsDisplayer.tsx b/src/components/Frontpage/EventCardsDisplayer/EventCardsDisplayer.tsx
@@ -1,19 +1,13 @@
 import React, { FC, SyntheticEvent, useState } from "react";
-import {
-  GuiCardPreamble,
-  GuiCardTitle,
-  GuiImageCard,
-} from "../../../gui-components";
+
 import { AppBar, Tabs, Tab } from "@mui/material";
 import TabPanel from "../../TabPanel/TabPanel";
 import { useEffect } from "react";
-import { Link } from "react-router-dom";
-import { EventOwnerDto, MotiveDto } from "../../../../generated";
-import { MotiveApi } from "../../../utils/api/MotiveApi";
-import { EventOwnerApi } from "../../../utils/api/EventOwnerApi";
 
+import { MotiveApi } from "../../../utils/api/MotiveApi";
+import { MotiveDto } from "../../../../generated";
 
-const EventTypes: string[] = ["Samfundet", "ISFIT", "UKA"];
+import EventCards from "../EventCards/EventCards";
 
 interface Props {
   title?: string;
@@ -26,101 +20,13 @@ interface Props {
 const EventCardsDisplayer: FC<Props> = () => {
   const [value, setValue] = useState<number>(0);
   const [motiveResponse, setMotiveResponse] = useState<MotiveDto[]>([]);
-  const [, setEventOwners] = useState<EventOwnerDto[]>([]);
 
   useEffect(() => {
     MotiveApi.getAll()
       .then((res) => setMotiveResponse(res.data.currentList))
       .catch((e) => console.log(e));
-    EventOwnerApi.getAll()
-      .then((res) => setEventOwners(res.data.currentList))
-      .catch((err) => console.error(err));
   }, []);
 
-  const imageCardsSamf = motiveResponse.map((motiveObject, index) => {
-    // TODO: IDK hvordan å løse dette? Muligens heller bruke .filter() jeg vet ikke
-    const samf =
-      motiveObject.eventOwnerDto.name === EventTypes[0] ? true : false;
-    const id = motiveObject.motiveId.id || "default";
-    if (samf) {
-      return (
-        // TODO: Placement, type, location, type and image should be from motiveObject when backend is done
-        <Link key={index} to={`/motive/${id}`}>
-          <GuiImageCard
-            key={`image-card-${index}`}
-            placement="left"
-            type="samfundet"
-            image="https://www.w3schools.com/css/img_lights.jpg"
-          >
-            <GuiCardTitle capitalized title={motiveObject.title} />
-            <GuiCardPreamble
-              color="red"
-              date={motiveObject.dateCreated.toString()}
-              images={69420}
-              location="Blåfjell"
-              type="EventCard"
-            />
-          </GuiImageCard>
-        </Link>
-      );
-    }
-  });
-
-  const imageCardsIsfit = motiveResponse.map((motiveObject, index) => {
-    const samf =
-      motiveObject.eventOwnerDto.name === EventTypes[1] ? true : false;
-    const id = motiveObject.motiveId.id || "default";
-    if (samf) {
-      return (
-        // TODO: Placement, type, location, type and image should be from motiveObject when backend is done
-        <Link key={index} to={`/motive/${id}`}>
-          <GuiImageCard
-            key={`image-card-${index}`}
-            placement="left"
-            type="samfundet"
-            image="https://www.w3schools.com/css/img_lights.jpg"
-          >
-            <GuiCardTitle capitalized title={motiveObject.title} />
-            <GuiCardPreamble
-              color="red"
-              date={motiveObject.dateCreated.toString()}
-              images={69420}
-              location="Blåfjell"
-              type="EventCard"
-            />
-          </GuiImageCard>
-        </Link>
-      );
-    }
-  });
-
-  const imageCardsUka = motiveResponse.map((motiveObject, index) => {
-    const samf =
-      motiveObject.eventOwnerDto.name === EventTypes[2] ? true : false;
-    const id = motiveObject.motiveId.id || "default";
-    if (samf) {
-      return (
-        // TODO: Placement, type, location, type and image should be from motiveObject when backend is done
-        <Link key={index} to={`/motive/${id}`}>
-          <GuiImageCard
-            key={`image-card-${index}`}
-            placement="left"
-            type="samfundet"
-            image="https://www.w3schools.com/css/img_lights.jpg"
-          >
-            <GuiCardTitle capitalized title={motiveObject.title} />
-            <GuiCardPreamble
-              color="red"
-              date={motiveObject.dateCreated.toString()}
-              images={69420}
-              location="Blåfjell"
-              type="EventCard"
-            />
-          </GuiImageCard>
-        </Link>
-      );
-    }
-  });
   const handleChange = (event: SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
@@ -142,13 +48,13 @@ const EventCardsDisplayer: FC<Props> = () => {
         </Tabs>
       </AppBar>
       <TabPanel value={value} index={0}>
-        {imageCardsSamf}
+        <EventCards event={"Samfundet"} motiveResponse={motiveResponse} />
       </TabPanel>
       <TabPanel value={value} index={1}>
-        {imageCardsIsfit}
+        <EventCards event={"Samfundet"} motiveResponse={motiveResponse} />
       </TabPanel>
       <TabPanel value={value} index={2}>
-        {imageCardsUka}
+        <EventCards event={"Samfundet"} motiveResponse={motiveResponse} />
       </TabPanel>
     </>
   );

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -56,4 +56,7 @@
 
   --color-black: #000;
   --color-white: #fff;
+
+
+  --box-shadow-1: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
 }