Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix some responsive

Browse Source
This commit is contained in:
Giovanni
2025-12-10 11:51:14 +01:00
parent 6a416abadb
commit 516277c77d
4 changed files with 56 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Event/Event.module.css
+1
View File
@@ -41,6 +41,7 @@
.eventContent { .eventContent {
display: flex; display: flex;
width: 100%;
} }
.eventTitle { .eventTitle {
src/components/SearchBar/SearchBar.jsx
+29 -28
View File
@@ -65,36 +65,37 @@ function SearchBar() {
) : null} ) : null}
</div> </div>
<div className={styles.elementList}>
{searchResults.map((result, i) => ( {searchResults.map((result, i) => (
(location.pathname.includes("events")) ? ( (location.pathname.includes("events")) ? (
<Link to={`/event/` + result.id}> <Link to={`/event/` + result.id}>
<div className={styles.searchedEvent} key={i}> <div className={styles.searchedEvent} key={i}>
<div className={`${styles.eventImageDiv}`}> <div className={`${styles.eventImageDiv}`}>
{result.image == null ? ( {result.image == null ? (
<img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" /> <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
) : ( ) : (
<img src={result.image + `.png`} alt="Photo de l'événement" /> <img src={result.image + `.png`} alt="Photo de l'événement" />
)} )}
</div>
<p>{result.name}</p>
</div> </div>
<p>{result.name}</p> </Link>
</div> ) : location.pathname.includes("volunteers") ? (
</Link> <Link to={`/profile/` + result.id}>
) : location.pathname.includes("volunteers") ? ( <div className={styles.searchedEvent} key={i}>
<Link to={`/profile/` + result.id}> <div className={`${styles.eventImageDiv}`}>
<div className={styles.searchedEvent} key={i}> {result.image == null ? (
<div className={`${styles.eventImageDiv}`}> <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
{result.image == null ? ( ) : (
<img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" /> <img src={result.image + `.png`} alt="Photo de l'événement" />
) : ( )}
<img src={result.image + `.png`} alt="Photo de l'événement" /> </div>
)} <p>{result.name} {result.lastname}</p>
</div> </div>
<p>{result.name} {result.lastname}</p> </Link>
</div> ) : null
</Link> ))}
) : null </div>
))}
</div> </div>
); );
} }
src/components/SearchBar/SearchBar.module.css
+13 -1
View File
@@ -1,6 +1,6 @@
.searchBarContainer{ .searchBarContainer{
position: fixed; position: fixed;
top: 10rem; top: 4rem;
z-index: 100; z-index: 100;
width: 60%; width: 60%;
background: #fff; background: #fff;
@@ -11,6 +11,11 @@
display: flex; display: flex;
} }
.elementList {
max-height: 60vh;
overflow-y: auto;
}
.eventImageDiv { .eventImageDiv {
@@ -72,3 +77,10 @@
.searchBarForm input:focus{ .searchBarForm input:focus{
outline: none; outline: none;
} }
@media screen and (max-width: 480px) {
.searchBarContainer{
width: 80%;
}
}
src/components/ToolBar/ToolBar.module.css
+13 -3
View File
@@ -20,6 +20,7 @@
.filterMenu{ .filterMenu{
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
width: fit-content;
} }
.createButton, .searchButton, .sortButton { .createButton, .searchButton, .sortButton {
@@ -27,9 +28,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: none; border: none;
border-radius: 50%; border-radius: 50% !important;
width: 55px; width: 55px !important;
height: 55px; height: 55px !important;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
@@ -72,6 +73,15 @@
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.createButton,
.searchButton,
.sortButton {
flex: 0 0 55px;
width: 55px !important;
height: 55px !important;
}
.eventsButtons { .eventsButtons {
flex-direction: row; flex-direction: row;
position: relative; position: relative;