diff --git a/src/assets/bell.svg b/public/bell.svg similarity index 100% rename from src/assets/bell.svg rename to public/bell.svg diff --git a/src/assets/close.svg b/public/close.svg similarity index 100% rename from src/assets/close.svg rename to public/close.svg diff --git a/public/empty.png b/public/empty.png new file mode 100644 index 0000000..2ad3933 Binary files /dev/null and b/public/empty.png differ diff --git a/src/assets/logo.png b/public/logo.png similarity index 100% rename from src/assets/logo.png rename to public/logo.png diff --git a/src/assets/person.svg b/public/person.svg similarity index 100% rename from src/assets/person.svg rename to public/person.svg diff --git a/src/assets/react.svg b/public/react.svg similarity index 100% rename from src/assets/react.svg rename to public/react.svg diff --git a/public/sortByAlpha.svg b/public/sortByAlpha.svg new file mode 100644 index 0000000..28789ca --- /dev/null +++ b/public/sortByAlpha.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/sortByAntiAlpha.svg b/public/sortByAntiAlpha.svg new file mode 100644 index 0000000..f74e5d8 --- /dev/null +++ b/public/sortByAntiAlpha.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/timerArrowDown.svg b/public/timerArrowDown.svg new file mode 100644 index 0000000..df66463 --- /dev/null +++ b/public/timerArrowDown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/timerArrowUp.svg b/public/timerArrowUp.svg new file mode 100644 index 0000000..861ced2 --- /dev/null +++ b/public/timerArrowUp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Event/Event.jsx b/src/components/Event/Event.jsx new file mode 100644 index 0000000..deaec58 --- /dev/null +++ b/src/components/Event/Event.jsx @@ -0,0 +1,79 @@ +import styles from "./Event.module.css"; +import {useState, useEffect} from "react"; +import {Link} from "react-router"; +import Button from "/src/components/ui/button/button.jsx" + +function Event({event}){ + const [eventMenu, seteventMenu] = useState(false); + const [windowSize, setWindowSize] = useState({ + width: null, + height: null, + }); + + useEffect(() => { + function handleResize() { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + window.addEventListener("resize", handleResize); + handleResize(); + return () => window.removeEventListener("resize", handleResize); + }, []); + + + + + return ( +
+
+
+
+ {event.image == null ? ( + Pas de photo de l'événement + ) : ( + Photo de l'événement + )} +
+
+

{event.name}

+

{event.description}

+
+
    + {event.tasks + .slice(0,5) + .map((task, index) => ( +
  • - {task.name}
    • + ))} + {event.tasks.length > 5 ? ( +
  • ...
    • + ) : null} +
+
+
+
+ {windowSize.width > 768 ? ( +
+ +
+ ) : null} +
+
+ {(windowSize.width <= 768 || eventMenu) ? ( + + + + ) : null} +
+
+ ) +} + +export default Event; \ No newline at end of file diff --git a/src/components/Event/Event.module.css b/src/components/Event/Event.module.css new file mode 100644 index 0000000..142d004 --- /dev/null +++ b/src/components/Event/Event.module.css @@ -0,0 +1,135 @@ +.eventContainer { + display: flex; + flex-direction: column; + margin: 1rem 0; + width: 80%; +} + +.eventContainerTop { + display: flex; +} + +.eventContainerBottom{ + display: flex; + align-items: center; + justify-content: end; +} + +.moreLink { + width: fit-content; +} + +.eventImageDiv { + display: flex; + align-items: center; + justify-content: center; + margin-right: 1rem; + width: auto; + height: 6rem; + flex-shrink: 0; +} + +.eventImage { + max-width: 100%; + max-height: 100%; + object-fit: contain; + border-radius: 20px; +} + + +.eventContent { + display: flex; +} + +.eventTitle { + font-size: 2rem; +} + + + + + + +.eventButtons { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + width: fit-content; + overflow: visible; +} + +.eventButtons a { + white-space: nowrap; +} + + + + +.moreButton { + background: none; + border: none; + color: #019AFF; + font-size: 1.5rem; + transition: all 0.2s ease; + cursor: pointer; + border-radius: 50%; + width: 55px; + height: 55px; +} + +.moreButton:hover { + font-size: 2rem; + background: rgba(191, 191, 191, 0.5); +} + +.moreButton:focus { + outline: none; +} +.moreButton:focus-visible { + outline: 2px solid black; +} + +.moreButtonClicked { + rotate: 90deg; +} + + +.eventMenuOpen { + display: flex; +} + +.eventMenuClose { + display: none; +} + + + + + +@media screen and (max-width: 768px) { + .eventImage { + width: 100%; + height: auto; + display: block; + object-fit: cover; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + .eventContainer{ + padding: 0; + } + + .eventImageDiv { + margin: 0; + } + + .eventContent { + flex-direction: column; + } + + .eventInfos, .eventContainerBottom { + padding: 10px; + } +} \ No newline at end of file diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx new file mode 100644 index 0000000..e0f39e2 --- /dev/null +++ b/src/components/Filter/Filter.jsx @@ -0,0 +1,61 @@ +import styles from "./Filter.module.css"; + +function Filter({isFilterVisible, filters, setFilters}){ + const setAlphabeticalOrder = (order) => { + setFilters(prev => ({ + ...prev, + alphabetical : prev.alphabetical === order ? null : order + })); + }; + + const setYearOrder = (order) => { + setFilters(prev => ({ + ...prev, + yearOrder: prev.yearOrder === order ? null : order + })); + }; + + return ( +
+ + + + + + + + + + + + + + + +
+ ) +} + +export default Filter; \ No newline at end of file diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css new file mode 100644 index 0000000..b316702 --- /dev/null +++ b/src/components/Filter/Filter.module.css @@ -0,0 +1,85 @@ +.filterContainer { + display: flex; + flex-direction: column; + gap: 0.4rem; + overflow: hidden; + max-height: 0; + opacity: 0; + transition: max-height 0.5s ease, opacity 0.8s ease, transform 0.5s ease; +} + +.filterOpen { + max-height: 200px; + opacity: 1; + transform: translateY(0); +} + +.filterClose{ + max-height: 200px; + opacity: 0; +} + + +.filterTag { + border: none; + background: none; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: 45px; + height: 45px; +} + + +.filterTag:focus { + outline: none; +} +.filterTag:focus-visible { + outline: 2px solid black; +} + +.filterTag:hover { + cursor: pointer; + svg{ + fill: #019AFF; + } +} + + +.filterTag svg { + transform: scale(1); + color: black; +} + + +.active { + border: 1px solid #019AFF; +} + +.active svg { + fill: #019AFF; + transform: scale(1); +} + +@media screen and (max-width: 768px){ + .filterContainer { + flex-direction: row; + flex-wrap: wrap; + } + + .filterOpen{ + display: flex; + } + .filterClose{ + display: none; + } + + .filterMenu { + width: 100%; + } + + abbr { + width: fit-content; + } +} \ No newline at end of file diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index ea9ad80..2a8ea25 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -41,7 +41,7 @@ function Header() {