Skip to content

Commit 1c5dc8f

Browse files
digi-julesdigi-jules
committed
Add expandable sections and scroll feature
1 parent 615f81f commit 1c5dc8f

File tree

9 files changed

+242
-66
lines changed

9 files changed

+242
-66
lines changed

‎frontend/src/assets/images/no-snow-thf-dec-2024.png‎

26.9 KB
Loading

‎frontend/src/assets/images/snow-thf-dec-2010.png‎

-6.08 KB
Loading

‎frontend/src/components/AboutSection.vue‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-container class="about-section pt-16" fluid>
2+
<v-container id="about-section" class="about-section pt-16" fluid>
33
<v-row justify="center">
44
<v-col cols="12" md="10">
55
<h3>A CODE University Professor-led Project </h3>
@@ -16,18 +16,22 @@
1616
The success of this project was made possible by the collaborative efforts of our team members:
1717
</p>
1818
<ul class="pt-4">
19-
<li>[team member]</li>
20-
<li>[team member]</li>
21-
<li>[team member]</li>
22-
<li>[team member]</li>
23-
<li>[team member]</li>
24-
<li>[team member]</li>
25-
</ul>
26-
<p class="about-text pt-4">
19+
<li>Essam Ali</li>
20+
<li>Till Ermold</li>
21+
<li>Tom-Perry Lustig</li>
22+
<li>Jules Morley</li>
23+
<li>Péter T. Winkler</li>
24+
</ul>
25+
<p class="about-text pt-4 pb-6">
26+
And, of course, a huge thank you goes out to Prof. Dr. Adam Roe for coming up with the idea for the project and guiding us along the way.
27+
</p>
28+
<p class="about-text pt-4 pb-6">
2729
Looking ahead, we hope this work inspires further studies and applications in urban climate resilience.
2830
</p>
2931
<p class="about-text pt-4">
30-
[insert github repo link]
32+
Github Repository:
33+
<br/>
34+
<a href="https://github.com/codeuniversity/thf-climate">https://github.com/codeuniversity/thf-climate</a>
3135
</p>
3236
</v-col>
3337
</v-row>
@@ -48,7 +52,7 @@
4852
<style scoped>
4953
.about-section {
5054
text-align: center;
51-
height: 100vh;
55+
background-color: #e8fae6;
5256
}
5357
5458
.about-text {

‎frontend/src/components/Footer.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<style scoped>
1212
.footer-container {
1313
text-align: center;
14+
background-color: #e8fae6;
1415
}
1516
1617
.footer-text {

‎frontend/src/components/Header.vue‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="overlay">
55
<h1 class="title">Climates of Tempelhofer Feld</h1>
66
<h2 class="subtitle">An Earth Observation Project</h2>
7-
<v-btn icon density="comfortable">
7+
<v-btn icon density="comfortable" @click="scrollToIntro">
88
<v-icon>mdi-chevron-down</v-icon>
99
</v-btn>
1010
</div>
@@ -15,9 +15,29 @@
1515
<script>
1616
export default {
1717
name: 'Header',
18-
data() {
19-
return {
20-
//
18+
methods: {
19+
scrollToIntro() {
20+
const introSection = document.getElementById('introduction-section')
21+
if (introSection) {
22+
introSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
23+
}
24+
}
25+
},
26+
mounted() {
27+
const observer = new IntersectionObserver(
28+
([entry]) => {
29+
if (entry.isIntersecting) {
30+
this.scrollToIntro()
31+
}
32+
},
33+
{
34+
threshold: 0.3,
35+
}
36+
);
37+
38+
const introSection = document.getElementById('introduction-section')
39+
if (introSection) {
40+
observer.observe(introSection)
2141
}
2242
}
2343
}
@@ -26,13 +46,17 @@ export default {
2646
<style scoped>
2747
.header-container {
2848
position: relative;
49+
padding: 0;
50+
margin: 0;
51+
height: 100vh;
2952
}
3053
3154
.header-image {
32-
height: 100vh;
55+
height: 100%;
3356
width: 100%;
3457
object-fit: cover;
3558
object-position: center;
59+
display: block;
3660
}
3761
3862
.overlay {

‎frontend/src/components/IntroSection.vue‎

Lines changed: 111 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,57 @@
11
<template>
2-
<v-container class="introduction-section pb-16" fluid>
2+
<v-container class="introduction-section pb-16" fluid id="introduction-section">
33
<v-row justify="center">
44
<v-col cols="12" md="10" class="pt-10">
55
<p style="font-weight: 600; font-size: 1.4rem">
66
The climate is changing, and so is the vegetation at Berlin’s beloved Tempelhofer Feld.
77
</p>
88
<p class="intro-text pt-10">
9-
Climate Change is affecting the whole globe, but changes are also visible in small local scope. “Tempelhofer Feld” is a unique urban oasis in Berlin. Once an airport in the middle of the city, this vast field has transformed into a public park, offering a fascinating case study of how urban green spaces evolve and respond to changes in climate.
9+
Climate change affects the entire globe, but its impacts are also evident on a smaller, local scale. Tempelhofer Feld, a unique urban oasis in Berlin, serves as an example of this. Once an airport in the middle of the city, this vast field has transformed into a public park, offering a fascinating case study of how urban green spaces evolve and respond to changes in climate.
1010
</p>
1111
<p class="intro-text pt-6">
12-
We analyzed the micro-climate of this unique area by deriving vegetation indices from high-resolution satellite imagery and utilizing long-term in-vitro sensors. Check out the results yourself.
12+
We analyzed the microclimate of this unique area by deriving vegetation indices from high-resolution satellite imagery and utilizing long-term in-vitro sensors.
1313
</p>
14-
<p class="pt-10">
15-
Quick Navigation:
16-
+++ Temperature
17-
+++ What is NDVI
18-
+++ NDVI
19-
+++ Correlations
20-
+++ Interpretation
21-
+++ Team and Project
14+
<p class="intro-text pt-6">
15+
Check out the results yourself below.
2216
</p>
23-
<img
24-
src="@/assets/images/snow-thf-dec-2010.png"
25-
alt="Several centimeters of snow and people cross country skiing on Tempelhofer Feld"
26-
class="pt-10"
27-
/>
28-
<br />
29-
<img
30-
src="@/assets/images/no-snow-thf-dec-2024.png"
31-
alt="People enjoying Tempelhofer Feld"
32-
class="pt-10"
33-
/>
17+
18+
<div class="navigation-links pt-4">
19+
<div @click="toggleNavigation" class="toggle-header">
20+
<span>{{ isNavigationOpen ? '▼' : '►' }}</span>
21+
Quick Navigation
22+
</div>
23+
<ul v-if="isNavigationOpen" class="toggle-list">
24+
<li><a href="#temperature-section">Temperature</a></li>
25+
<li><a href="#ndvi-explanation-section">What is NDVI</a></li>
26+
<li><a href="#ndvi-results-section">NDVI</a></li>
27+
<li><a href="#correlations-section">Correlations</a></li>
28+
<li><a href="#conclusion-section">Conclusion</a></li>
29+
<li><a href="#about-section">About</a></li>
30+
</ul>
31+
</div>
32+
33+
<v-row justify="center" align="center" class="pt-10" dense>
34+
<v-col cols="12" md="5" class="d-flex flex-column align-items-center my-6 mx-4">
35+
<img
36+
src="@/assets/images/snow-thf-dec-2010.png"
37+
alt="Several centimeters of snow and people cross country skiing on Tempelhofer Feld"
38+
class="image"
39+
/>
40+
<p class="caption">
41+
<a href="https://www.flickr.com/people/gojade/">© Jan Gold</a>
42+
</p>
43+
</v-col>
44+
<v-col cols="12" md="5" class="d-flex flex-column align-items-center mx-4">
45+
<img
46+
src="@/assets/images/no-snow-thf-dec-2024.png"
47+
alt="People enjoying Tempelhofer Feld"
48+
class="image"
49+
/>
50+
<p class="caption">
51+
<a href="https://www.flickr.com/people/29949005@N02/">© Berlin-Knipser</a>
52+
</p>
53+
</v-col>
54+
</v-row>
3455
</v-col>
3556
</v-row>
3657
</v-container>
@@ -41,7 +62,35 @@ export default {
4162
name: 'IntroSection',
4263
data() {
4364
return {
44-
//
65+
isNavigationOpen: false,
66+
}
67+
},
68+
methods: {
69+
toggleNavigation() {
70+
this.isNavigationOpen = !this.isNavigationOpen;
71+
},
72+
scrollToTemperature() {
73+
const temperatureSection = document.getElementById('temperature-section')
74+
if (temperatureSection) {
75+
temperatureSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
76+
}
77+
}
78+
},
79+
mounted() {
80+
const observer = new IntersectionObserver(
81+
([entry]) => {
82+
if (entry.isIntersecting) {
83+
this.scrollToTemperature()
84+
}
85+
},
86+
{
87+
threshold: 0.3,
88+
}
89+
);
90+
91+
const temperatureSection = document.getElementById('temperature-section')
92+
if (temperatureSection) {
93+
observer.observe(temperatureSection)
4594
}
4695
}
4796
}
@@ -50,10 +99,49 @@ export default {
5099
<style scoped>
51100
.introduction-section {
52101
text-align: center;
102+
background-color: #e8fae6;
53103
}
54104
55105
.intro-text {
56106
font-size: 1.2rem;
57107
font-weight: 300;
58108
}
109+
110+
.navigation-links {
111+
margin: 20px 0;
112+
font-weight: 600;
113+
cursor: pointer;
114+
}
115+
116+
.toggle-list {
117+
list-style-type: none;
118+
margin: 10px 0 0;
119+
padding: 0;
120+
}
121+
122+
.toggle-list li {
123+
margin: 5px 0;
124+
}
125+
126+
.toggle-list li a {
127+
text-decoration: none;
128+
color: #007BFF;
129+
font-weight: 400;
130+
}
131+
132+
.toggle-list li a:hover {
133+
text-decoration: underline;
134+
}
135+
136+
.image {
137+
max-width: 100%;
138+
height: auto;
139+
}
140+
141+
.caption {
142+
font-size: 0.9rem;
143+
color: #555;
144+
text-align: center;
145+
margin-top: 0.5rem;
146+
}
59147
</style>

0 commit comments

Comments
 (0)