Skip to content

Improvements to map and filtering #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Erik-G-I merged 10 commits into from
May 6, 2025
Merged

Improvements to map and filtering #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
23d8306
small change to the constant popup and zoom when searching and select…
petterr-n May 3, 2025
6c46df0
displaying distance and estimated time for route
petterr-n May 4, 2025
2950bba
added proper styling to info and route finder
petterr-n May 4, 2025
fcb45dc
put footer in the correct spot
petterr-n May 4, 2025
50733d0
trying with filters
petterr-n May 4, 2025
dfe8a21
filters and search works pretty good now
petterr-n May 5, 2025
d2e47eb
removed filter variable from Map
petterr-n May 5, 2025
32e4761
translated to norwegian
petterr-n May 5, 2025
653319a
much faster and better response to applying filters and searching for…
petterr-n May 5, 2025
96d3ff1
colored markers based on type of waste they handle
petterr-n May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions .idea/misc.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion backend/src/main/resources/dev-data/waste.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,6 @@
{"name": "Skap", "type": "Brennbart avfall", "info": "???"},
{"name": "Seng", "type": "Brennbart avfall", "info": "???"},
{"name": "Madrass", "type": "Brennbart avfall", "info": "???"},
{"name": "Teppe", "type": "Brennbart avfall", "info": "???"},
{"name": "Speil", "type": "Restavfall", "info": "???"},
{"name": "Sykkel", "type": "Brennbart avfall", "info": "???"},
{"name": "Barnevogn", "type": "Brennbart avfall", "info": "???"},
Expand Down
1 change: 1 addition & 0 deletions frontend/sortify/app/mainContent.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
flex-direction: column;
align-items: center;
margin: 0 auto;
flex-grow: 1;
}

.title {
Expand Down
5 changes: 2 additions & 3 deletions frontend/sortify/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ const Map = dynamic(() => import('../components/map'), {ssr: false});
import { useSearch } from "@/app/context/searchContext";

export default function Page(){
const { search } = useSearch();
return(
<main className={styles.mainContent}>
<h1 className={styles.title}>Recycling map</h1>
<Map filter={search}/>
<h1 className={styles.title}>Gjenvinningskart</h1>
<Map/>
</main>
);
}
2 changes: 1 addition & 1 deletion frontend/sortify/components/footer/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Footer() {
/>
</a>
<p className={styles.footerText}>
&copy; 2025 Sortify. All rights reserved.
&copy; 2025 Sortify.
</p>
</div>
</div>
Expand Down
131 changes: 131 additions & 0 deletions frontend/sortify/components/map.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/* map.css */

.container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 800px;
position: relative;
}

/* Wrap map and filters horizontally */
.map-and-filters {
display: flex;
flex-direction: row;
width: 100%;
}

.filter-panel {
background-color: #DBBC99;
padding: 20px;
border-radius: 15px;
border: 2px solid #3E4739; /* Dark green border for consistency */
max-width: 180px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
color: #3E4739;
margin-left: 20px; /* Space between map and panel */
height: 100%;
margin-top: 12px;
}

/* Optional: Style for each filter checkbox line */
.filter-panel label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}

/* Adjust map width to allow space for filter panel */
.map {
flex-grow: 1;
height: 500px;
}

/* Route button with .signupButton styles */
.route-button {
display: inline-block;
background-color: #D9996B;
color: #3E4739;
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
transition: all 0.3s ease;
cursor: pointer;
box-sizing: border-box;
border: 2px solid #3E4739;
}

/* Hover effect for the route button */
.route-button:hover {
background-color: #B6CBBC;
}

/* Disabled route button style */
.route-button:disabled {
background-color: #ddd;
cursor: not-allowed;
border: 2px solid #ccc;
}

/* Container for the info box and button */
.info-box-container {
background-color: #DBBC99; /* Warm beige color for the container */
padding: 20px;
border-radius: 8px;
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 220px; /* Limit the width of the container */
width: 100%; /* Makes sure it is responsive */
margin: 0 auto; /* Centers the container horizontally */
}

/* Styling for the info box */
.info-box {
border: 2px solid #3E4739; /* Dark green border for contrast */
border-radius: 8px;
padding: 10px;
min-width: 150px;
background: #f9f9f9; /* Light background */
font-size: 14px;
color: #3E4739; /* Text color to match the border */
}

/* Info box text spacing */
.info-box div {
margin-bottom: 8px;
}

/* Button inside the info box */
.info-box button {
background-color: #D9996B; /* Same background color as route button */
color: #3E4739; /* Text color */
padding: 6px 12px;
cursor: pointer;
font-size: 14px;
border-radius: 30px;
border: 2px solid #3E4739; /* Matching border */
font-weight: 600;
transition: all 0.3s ease;
}

/* Hover effect for info box button */
.info-box button:hover {
background-color: #B6CBBC; /* Lighter color on hover */
}

/* Disabled button in info box */
.info-box button:disabled {
background-color: #ddd;
cursor: not-allowed;
border: 2px solid #ccc;
}
Loading
Loading