Skip to content

Last 2 patches from cohort issues #1

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

Open
rcmtcristian wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Last 2 patches from cohort issues #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5530526
Add responsive navigation bar with logo and menu 87
rcmtcristian Aug 14, 2025
6b231a6
Images for Issue 75
rcmtcristian Aug 14, 2025
c3cf5c1
Issue 75: Create the map dashboard web page
rcmtcristian Aug 14, 2025
e785bda
Update main.js
rcmtcristian Aug 14, 2025
074568c
Update style.css
rcmtcristian Aug 14, 2025
9b96171
Update index.html
rcmtcristian Aug 14, 2025
9b2d9be
Update App.vue
rcmtcristian Aug 14, 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
4 changes: 3 additions & 1 deletion map-dashboard-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"> <!-- link to Font Awesome version 5-->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"> <!-- link to install Vuetify Material Design Icons (MDI) -->
<title>Map Dashboard</title>
</head>
<body>
<div id="app"></div>
Expand Down
Binary file added map-dashboard-ui/public/Map_Screenshot_Vue_Test.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added map-dashboard-ui/public/Program_Earth_Logo_Medium.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions map-dashboard-ui/public/canopy_polygon_icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions map-dashboard-ui/public/species_icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions map-dashboard-ui/public/water_polygon_icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
131 changes: 125 additions & 6 deletions map-dashboard-ui/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,135 @@
<template>
<v-app>
<!-- Navigation Bar -->
<v-container
fluid
class="d-flex align-center"
style="height: 72px; background-color: #FFFFFF"
>
<!-- Logo -->
<v-col :cols="$vuetify.display.mdAndUp ? 6 : 10" class="d-flex align-center">
<v-img
src="@/assets/logo.svg"
alt="PE Logo"
:height="$vuetify.display.mdAndUp ? 36 : 48"
contain
/>
</v-col>

<!-- Desktop Menu -->
<v-col
v-if="$vuetify.display.mdAndUp"
cols="6"
class="d-flex justify-end align-center"
>
<v-btn text>Home</v-btn>
<v-btn text>About</v-btn>
<v-btn text>Contact</v-btn>
</v-col>

<!-- Mobile Hamburger -->
<v-col v-else cols="2" class="d-flex justify-end align-center">
<v-btn
icon
size="36"
style="color: #33691E"
@click="drawer = true"
>
<v-icon>mdi-menu</v-icon>
</v-btn>
</v-col>
</v-container>

<!-- Mobile Drawer -->
<v-navigation-drawer
v-model="drawer"
temporary
location="right"
style="background-color: #fff"
>
<v-list>
<v-list-item @click="drawer = false"><v-list-item-title>Home</v-list-item-title></v-list-item>
<v-list-item @click="drawer = false"><v-list-item-title>About</v-list-item-title></v-list-item>
<v-list-item @click="drawer = false"><v-list-item-title>Contact</v-list-item-title></v-list-item>
</v-list>
</v-navigation-drawer>

<!-- Main Content & Map Layout -->
<v-main>
<v-container class="pa-10">
<v-alert type="success" title="Vuetify 3 Installed!">
Welcome to the Map Dashboard UI!
</v-alert>
<v-container>
<v-row>
<!-- Map Visualization -->
<v-col cols="12" md="8" class="map-vis-col pa-0" style="border: 1px solid black;">
<v-sheet>
<v-img cover src="/images/Map_Screenshot_Vue_Test.jpg" />
</v-sheet>
</v-col>

<!-- Map Info -->
<v-col cols="12" md="4" class="map-info-col">
<v-sheet class="map-info-reset">
<h1 class="text-h1 mb-6">Biodiversity Conservation</h1>

<!-- Maps Section -->
<v-container class="pa-0 mb-6">
<h2 class="text-h2 mb-4">Maps</h2>
<p>Select to view map layer:</p>
<v-checkbox label="ProgramEarth Conservation Partners" density="compact" hide-details />
<v-checkbox label="USGS Watershed Boundary Dataset" density="compact" hide-details />
<v-checkbox label="Meta's Canopy Heights" density="compact" hide-details />
</v-container>

<!-- Legend -->
<v-container class="pa-0 mb-6">
<h2 class="text-h2 mb-4">Legend</h2>

<div class="points-container">
<h3 class="text-h3 mb-3">Points</h3>
<v-container class="points-item mb-3">
<i class="fas fa-circle" style="color: #424242; font-size: 16px;"></i>
<p>Landmark</p>
</v-container>
<v-container class="points-item mb-3">
<i class="fas fa-dove" style="color: #2196F3; font-size: 16px;"></i>
<p>Animals</p>
</v-container>
<v-container class="points-item">
<i class="fas fa-seedling" style="color: #43A047; font-size: 16px;"></i>
<p>Plants</p>
</v-container>
</div>

<div class="areas-container">
<h3 class="text-h3 mb-3">Areas</h3>
<v-container class="areas-item mb-3" style="width: fit-content;">
<v-img width="30" height="30" src="/images/species_icon.svg" />
<p>Species</p>
</v-container>
<v-container class="areas-item mb-3" style="width: fit-content;">
<v-img width="30" height="30" src="/images/water_polygon_icon.svg" />
<p>Water</p>
</v-container>
<v-container class="areas-item" style="width: fit-content;">
<v-img width="30" height="30" src="/images/canopy_polygon_icon.svg" />
<p>Canopy</p>
</v-container>
</div>
</v-container>
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>

<!-- Footer -->
<v-footer>
Footer goes here
</v-footer>
</v-app>
</template>

<script setup>
// Nothing yet
</script>
import { ref } from 'vue'

const drawer = ref(false)
</script>
5 changes: 4 additions & 1 deletion map-dashboard-ui/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,7 @@ const vuetify = createVuetify({
})

createApp(App).use(vuetify).mount('#app')
// Register global components, plugins, etc. here if needed
// Register global components, plugins, etc. here if needed

//import css style sheet
import './style.css'
62 changes: 62 additions & 0 deletions map-dashboard-ui/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,68 @@ button:focus-visible {
padding: 2em;
}


/* ------------- MAP VISUALIZATION APP --------------*/
/* COLORS
white = #FFFFFF
grey-darken-3 = #424242
blue = #2196F3
green-darken-1 #43A047 */

#app {
max-width: 1280px;
min-width: 360px;
margin: 0 auto;
padding: 2rem;
text-align: center;
background-color: #FFFFFF;
}

/* -------------- Nav Bar and Footer ------------ */
.v-toolbar,
.v-footer {
background-color: #FFFFFF;
}

/* ------ Map Visualization Section ------- */
.map-vis-col {
margin-top: 24px;
margin-bottom: 24px;
}


/* ------ Map Information Section ------- */

/* Remove auto-styling*/
.map-info-reset * {
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
padding: 0 !important;
}

/* Legend Section */
.points-container {
margin-bottom: 16px;
}

.points-item,
.areas-item {
display: flex;
align-items: center;
gap: 8px;
}

.areas-container {
margin-bottom: 24px;
}

.areas-item {
justify-items: flex-start;
}


/* ---------------- MEDIA QUERIES ----------------- */
@media (prefers-color-scheme: light) {
:root {
color: #213547;
Expand All @@ -77,3 +132,10 @@ button:focus-visible {
background-color: #f9f9f9;
}
}

/* Breakpoint for smaller devices */
@media only screen and (max-width: 961px) {
.map-vis-col {
margin-top: 16px;
}
}