Skip to content

Commit 14de4a5

Browse files
rcmtcristianrcmtcristian
authored
Merge pull request #85 from vnewto/dashboard-web-page
Issue 75: Create the map dashboard web page
2 parents d1bfd8c + 92fa24d commit 14de4a5

File tree

9 files changed

+175
-27
lines changed

9 files changed

+175
-27
lines changed

‎map-dashboard-ui/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Vue</title>
7+
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"> <!-- link to Font Awesome version 5-->
8+
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <!-- link to install Vuetify Material Design Icons (MDI) -->
9+
<title>Map Dashboard</title>
810
</head>
911
<body>
1012
<div id="app"></div>

‎map-dashboard-ui/public/images/Map_Screenshot_Vue_Test.jpg‎

49.7 KB
Loading

‎map-dashboard-ui/public/images/Program_Earth_Logo_Medium.png‎

12.2 KB
Loading

‎map-dashboard-ui/public/images/canopy_polygon_icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎map-dashboard-ui/public/images/species_icon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎map-dashboard-ui/public/images/water_polygon_icon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎map-dashboard-ui/src/App.vue‎

Lines changed: 96 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
11
<template>
2-
<!-- Vuetify app root wrapper -->
32
<v-app>
4-
<!-- Navigation bar wrapper -->
3+
<!-- Navigation Bar -->
54
<v-container
5+
fluid
66
class="d-flex align-center"
77
style="height: 72px; background-color: #FFFFFF"
8-
fluid
98
>
10-
<!-- Logo Section -->
11-
<v-col
12-
:cols="$vuetify.display.mdAndUp ? 6 : 10"
13-
class="d-flex align-center"
14-
>
9+
<!-- Logo -->
10+
<v-col :cols="$vuetify.display.mdAndUp ? 6 : 10" class="d-flex align-center">
1511
<v-img
1612
src="@/assets/logo.svg"
1713
alt="PE Logo"
18-
:height="$vuetify.display.mdAndUp ? '36' : '48'"
14+
:height="$vuetify.display.mdAndUp ? 36 : 48"
1915
contain
2016
/>
2117
</v-col>
22-
23-
<!-- Desktop Menu Links -->
18+
19+
<!-- Desktop Menu -->
2420
<v-col
2521
v-if="$vuetify.display.mdAndUp"
2622
cols="6"
@@ -30,35 +26,110 @@
3026
<v-btn text>About</v-btn>
3127
<v-btn text>Contact</v-btn>
3228
</v-col>
33-
34-
<!-- Mobile Hamburger Icon -->
35-
<v-col
36-
v-else
37-
cols="2"
38-
class="d-flex justify-end align-center"
39-
>
29+
30+
<!-- Mobile Hamburger -->
31+
<v-col v-else cols="2" class="d-flex justify-end align-center">
4032
<v-btn
4133
icon
4234
size="36"
4335
style="color: #33691E"
36+
@click="drawer = true"
4437
>
4538
<v-icon>mdi-menu</v-icon>
4639
</v-btn>
4740
</v-col>
4841
</v-container>
4942

50-
<!-- Main content section -->
43+
<!-- Mobile Drawer -->
44+
<v-navigation-drawer
45+
v-model="drawer"
46+
temporary
47+
location="right"
48+
style="background-color: #fff"
49+
>
50+
<v-list>
51+
<v-list-item @click="drawer = false"><v-list-item-title>Home</v-list-item-title></v-list-item>
52+
<v-list-item @click="drawer = false"><v-list-item-title>About</v-list-item-title></v-list-item>
53+
<v-list-item @click="drawer = false"><v-list-item-title>Contact</v-list-item-title></v-list-item>
54+
</v-list>
55+
</v-navigation-drawer>
56+
57+
<!-- Main Content & Map Layout -->
5158
<v-main>
52-
<v-container class="pa-10">
53-
<v-alert type="success" title="Vuetify 3 Installed!">
54-
Welcome to the Map Dashboard UI!
55-
</v-alert>
59+
<v-container>
60+
<v-row>
61+
<!-- Map Visualization -->
62+
<v-col cols="12" md="8" class="map-vis-col pa-0" style="border: 1px solid black;">
63+
<v-sheet>
64+
<v-img cover src="/images/Map_Screenshot_Vue_Test.jpg" />
65+
</v-sheet>
66+
</v-col>
67+
68+
<!-- Map Info -->
69+
<v-col cols="12" md="4" class="map-info-col">
70+
<v-sheet class="map-info-reset">
71+
<h1 class="text-h1 mb-6">Biodiversity Conservation</h1>
72+
73+
<!-- Maps Section -->
74+
<v-container class="pa-0 mb-6">
75+
<h2 class="text-h2 mb-4">Maps</h2>
76+
<p>Select to view map layer:</p>
77+
<v-checkbox label="ProgramEarth Conservation Partners" density="compact" hide-details />
78+
<v-checkbox label="USGS Watershed Boundary Dataset" density="compact" hide-details />
79+
<v-checkbox label="Meta's Canopy Heights" density="compact" hide-details />
80+
</v-container>
81+
82+
<!-- Legend -->
83+
<v-container class="pa-0 mb-6">
84+
<h2 class="text-h2 mb-4">Legend</h2>
85+
86+
<div class="points-container">
87+
<h3 class="text-h3 mb-3">Points</h3>
88+
<v-container class="points-item mb-3">
89+
<i class="fas fa-circle" style="color: #424242; font-size: 16px;"></i>
90+
<p>Landmark</p>
91+
</v-container>
92+
<v-container class="points-item mb-3">
93+
<i class="fas fa-dove" style="color: #2196F3; font-size: 16px;"></i>
94+
<p>Animals</p>
95+
</v-container>
96+
<v-container class="points-item">
97+
<i class="fas fa-seedling" style="color: #43A047; font-size: 16px;"></i>
98+
<p>Plants</p>
99+
</v-container>
100+
</div>
101+
102+
<div class="areas-container">
103+
<h3 class="text-h3 mb-3">Areas</h3>
104+
<v-container class="areas-item mb-3" style="width: fit-content;">
105+
<v-img width="30" height="30" src="/images/species_icon.svg" />
106+
<p>Species</p>
107+
</v-container>
108+
<v-container class="areas-item mb-3" style="width: fit-content;">
109+
<v-img width="30" height="30" src="/images/water_polygon_icon.svg" />
110+
<p>Water</p>
111+
</v-container>
112+
<v-container class="areas-item" style="width: fit-content;">
113+
<v-img width="30" height="30" src="/images/canopy_polygon_icon.svg" />
114+
<p>Canopy</p>
115+
</v-container>
116+
</div>
117+
</v-container>
118+
</v-sheet>
119+
</v-col>
120+
</v-row>
56121
</v-container>
57122
</v-main>
123+
124+
<!-- Footer -->
125+
<v-footer>
126+
Footer goes here
127+
</v-footer>
58128
</v-app>
59129
</template>
60130

61131
<script setup>
62-
// No logic needed for now
63-
</script>
132+
import { ref } from 'vue'
64133
134+
const drawer = ref(false)
135+
</script>

‎map-dashboard-ui/src/main.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,7 @@ const vuetify = createVuetify({
1515
})
1616

1717
createApp(App).use(vuetify).mount('#app')
18-
// Register global components, plugins, etc. here if needed
18+
// Register global components, plugins, etc. here if needed
19+
20+
//import css style sheet
21+
import './style.css'

‎map-dashboard-ui/src/style.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,68 @@ button:focus-visible {
5858
padding: 2em;
5959
}
6060

61+
62+
/* ------------- MAP VISUALIZATION APP --------------*/
63+
/* COLORS
64+
white = #FFFFFF
65+
grey-darken-3 = #424242
66+
blue = #2196F3
67+
green-darken-1 #43A047 */
68+
6169
#app {
6270
max-width: 1280px;
71+
min-width: 360px;
6372
margin: 0 auto;
6473
padding: 2rem;
6574
text-align: center;
75+
background-color: #FFFFFF;
76+
}
77+
78+
/* -------------- Nav Bar and Footer ------------ */
79+
.v-toolbar,
80+
.v-footer {
81+
background-color: #FFFFFF;
82+
}
83+
84+
/* ------ Map Visualization Section ------- */
85+
.map-vis-col {
86+
margin-top: 24px;
87+
margin-bottom: 24px;
88+
}
89+
90+
91+
/* ------ Map Information Section ------- */
92+
93+
/* Remove auto-styling*/
94+
.map-info-reset * {
95+
margin-left: 0 !important;
96+
margin-right: 0 !important;
97+
text-align: left !important;
98+
padding: 0 !important;
99+
}
100+
101+
/* Legend Section */
102+
.points-container {
103+
margin-bottom: 16px;
104+
}
105+
106+
.points-item,
107+
.areas-item {
108+
display: flex;
109+
align-items: center;
110+
gap: 8px;
111+
}
112+
113+
.areas-container {
114+
margin-bottom: 24px;
66115
}
67116

117+
.areas-item {
118+
justify-items: flex-start;
119+
}
120+
121+
122+
/* ---------------- MEDIA QUERIES ----------------- */
68123
@media (prefers-color-scheme: light) {
69124
:root {
70125
color: #213547;
@@ -77,3 +132,10 @@ button:focus-visible {
77132
background-color: #f9f9f9;
78133
}
79134
}
135+
136+
/* Breakpoint for smaller devices */
137+
@media only screen and (max-width: 961px) {
138+
.map-vis-col {
139+
margin-top: 16px;
140+
}
141+
}

0 commit comments

Comments
 (0)