diff --git a/map-dashboard-ui/index.html b/map-dashboard-ui/index.html index 8388c4b..a0b157b 100644 --- a/map-dashboard-ui/index.html +++ b/map-dashboard-ui/index.html @@ -4,7 +4,9 @@ - Vite + Vue + + + Map Dashboard
diff --git a/map-dashboard-ui/public/Map_Screenshot_Vue_Test.jpg b/map-dashboard-ui/public/Map_Screenshot_Vue_Test.jpg new file mode 100644 index 0000000..1550687 Binary files /dev/null and b/map-dashboard-ui/public/Map_Screenshot_Vue_Test.jpg differ diff --git a/map-dashboard-ui/public/Program_Earth_Logo_Medium.png b/map-dashboard-ui/public/Program_Earth_Logo_Medium.png new file mode 100644 index 0000000..f3b6008 Binary files /dev/null and b/map-dashboard-ui/public/Program_Earth_Logo_Medium.png differ diff --git a/map-dashboard-ui/public/canopy_polygon_icon.svg b/map-dashboard-ui/public/canopy_polygon_icon.svg new file mode 100644 index 0000000..5c49795 --- /dev/null +++ b/map-dashboard-ui/public/canopy_polygon_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/map-dashboard-ui/public/species_icon.svg b/map-dashboard-ui/public/species_icon.svg new file mode 100644 index 0000000..0670e15 --- /dev/null +++ b/map-dashboard-ui/public/species_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/map-dashboard-ui/public/water_polygon_icon.svg b/map-dashboard-ui/public/water_polygon_icon.svg new file mode 100644 index 0000000..2539264 --- /dev/null +++ b/map-dashboard-ui/public/water_polygon_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/map-dashboard-ui/src/App.vue b/map-dashboard-ui/src/App.vue index c1cb3e7..ba21c67 100644 --- a/map-dashboard-ui/src/App.vue +++ b/map-dashboard-ui/src/App.vue @@ -1,16 +1,135 @@ +import { ref } from 'vue' +const drawer = ref(false) + diff --git a/map-dashboard-ui/src/main.js b/map-dashboard-ui/src/main.js index dc323eb..1fe7aa6 100644 --- a/map-dashboard-ui/src/main.js +++ b/map-dashboard-ui/src/main.js @@ -15,4 +15,7 @@ const vuetify = createVuetify({ }) createApp(App).use(vuetify).mount('#app') -// Register global components, plugins, etc. here if needed \ No newline at end of file +// Register global components, plugins, etc. here if needed + +//import css style sheet +import './style.css' diff --git a/map-dashboard-ui/src/style.css b/map-dashboard-ui/src/style.css index f691315..eb6430c 100644 --- a/map-dashboard-ui/src/style.css +++ b/map-dashboard-ui/src/style.css @@ -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; @@ -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; + } +}