Skip to content

Commit 69bc44a

Browse files
digi-julesdigi-jules
committed
Add sticky left column
1 parent 1c5dc8f commit 69bc44a

File tree

3 files changed

+94
-93
lines changed

3 files changed

+94
-93
lines changed

‎frontend/src/components/Header.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default {
3131
}
3232
},
3333
{
34-
threshold: 0.3,
34+
threshold: 0.5,
3535
}
3636
);
3737

‎frontend/src/components/IntroSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default {
8484
}
8585
},
8686
{
87-
threshold: 0.3,
87+
threshold: 0.5,
8888
}
8989
);
9090

‎frontend/src/components/MainSection.vue‎

Lines changed: 92 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,43 @@
22
<v-app>
33
<v-container fluid class="pa-3">
44
<!-- Temperature Section -->
5-
<v-row id="temperature-section">
6-
<v-col :cols="4" class="left-column">
7-
<section>
8-
<h3 class="pb-4">Temperature</h3>
9-
<p>
10-
Over the years, temperatures have shown an overall increase, a clear indicator of climate change. This trend is evident when we look at the historical data of Tempelhofer Feld.
11-
</p>
12-
<p class="pt-6">
13-
The second graph on the right shows average (also called “mean”) temperatures from 1990 to 2008 and how other years differ. Longer red bars indicate warmer years; longer blue bars indicate cooler years. Tempelhof Airport closed in 2008 so that year marks the end of the reference period. Understanding these differences helps us see climate change patterns and impacts. August shows the most extreme deviations.
14-
</p>
15-
16-
<!-- TODO: -->
17-
<!-- <p class="pt-6">
18-
[move month select for difference graph here]
19-
</p> -->
20-
</section>
21-
</v-col>
5+
<div class="section" id="temperature-section">
6+
<v-row>
7+
<v-col :cols="4" class="left-column sticky-left">
8+
<section :class="{ active: activeSection === 'temperature-section' }">
9+
<h3 class="pb-4">Temperature</h3>
10+
<p>
11+
Over the years, temperatures have shown an overall increase, a clear indicator of climate change. This trend is evident when we look at the historical data of Tempelhofer Feld.
12+
</p>
13+
<p class="pt-6">
14+
The second graph on the right shows average (also called “mean”) temperatures from 1990 to 2008 and how other years differ. Longer red bars indicate warmer years; longer blue bars indicate cooler years. Tempelhof Airport closed in 2008 so that year marks the end of the reference period. Understanding these differences helps us see climate change patterns and impacts. August shows the most extreme deviations.
15+
</p>
2216

23-
<v-col :cols="8">
24-
<section>
25-
<v-container>
26-
<MedianTempGraph />
27-
<TempDifferenceGraph />
28-
</v-container>
29-
</section>
30-
</v-col>
31-
</v-row>
17+
<!-- TODO: -->
18+
<!-- <p class="pt-6">
19+
[move month select for difference graph here]
20+
</p> -->
21+
</section>
22+
</v-col>
23+
24+
<v-col :cols="8">
25+
<section>
26+
<v-container>
27+
<MedianTempGraph />
28+
<TempDifferenceGraph />
29+
</v-container>
30+
</section>
31+
</v-col>
32+
</v-row>
33+
</div>
3234

3335
<!-- NDVI Section -->
34-
<v-row id="ndvi-explanation-section">
35-
<v-col :cols="4" class="left-column">
36-
<section>
37-
<h3 class="pb-4">NDVI Explanation</h3>
38-
<p>
36+
<div class="section" id="ndvi-explanation-section">
37+
<v-row>
38+
<v-col :cols="4" class="left-column sticky-left">
39+
<section :class="{ active: activeSection === 'ndvi-explanation-section' }">
40+
<h3 class="pb-4">NDVI Explanation</h3>
41+
<p>
3942
We chose to look at the health of the plant life on the field (we'll refer to this as "vegetation"). One way to understand the health of vegetation on a large area of land is to look at satellite pictures of it. Or, more precisely, using vegetation indices. These are various combinations of the different wavelengths ("colors") that satellites record. The most notable one is the normalized difference vegetation index or NDVI.
4043
</p>
4144
<p class="pt-6">
@@ -63,22 +66,24 @@
6366
Equation: <strong>NDVI = (NIR-RED) / (NIR+RED)</strong>
6467
</p>
6568
</div>
66-
</section>
67-
</v-col>
68-
69-
<v-col :cols="8">
70-
<section>
71-
<v-container>
72-
<Images />
73-
</v-container>
74-
</section>
75-
</v-col>
76-
</v-row>
69+
</section>
70+
</v-col>
71+
72+
<v-col :cols="8">
73+
<section>
74+
<v-container>
75+
<Images />
76+
</v-container>
77+
</section>
78+
</v-col>
79+
</v-row>
80+
</div>
7781

7882
<!-- NDVI Graph Section -->
79-
<v-row id="ndvi-results-section">
80-
<v-col :cols="4" class="left-column">
81-
<section>
83+
<div class="section" id="ndvi-results-section">
84+
<v-row>
85+
<v-col :cols="4" class="left-column sticky-left">
86+
<section :class="{ active: activeSection === 'ndvi-results-section' }">
8287
<h3 class="pb-4">NDVI Results</h3>
8388
<p>
8489
Our observations of NDVI values across the study area generally ranged between 0.2 and 0.7. One of the lowest recorded values was in December 2018, with an NDVI of 0.1706, while one of the highest was in November 2022, with an NDVI of 0.7010. The data we collected could be improved with more cleaning, as the area includes large concrete sections, is roughly defined, and contains inconsistencies due to changes in land use and purpose over time (like creating the gardening area and introducing sheep).
@@ -104,11 +109,14 @@
104109
</section>
105110
</v-col>
106111
</v-row>
112+
</div>
113+
107114

108115
<!-- Temperature vs. NDVI Section -->
109-
<v-row id="correlations-section">
110-
<v-col :cols="4" class="left-column">
111-
<section>
116+
<div class="section" id="correlations-section">
117+
<v-row>
118+
<v-col :cols="4" class="left-column sticky-left">
119+
<section :class="{ active: activeSection === 'correlations-section' }">
112120
<h3 class="pb-4">Understanding the Dynamics of Tempelhofer Feld’s Temperature and Vegetation</h3>
113121
<p>
114122
The graph on the right illustrates two critical metrics: the yearly mean temperature and the yearly mean NDVI (in general, reflecting the health and density of plant life).
@@ -136,11 +144,13 @@
136144
</section>
137145
</v-col>
138146
</v-row>
147+
</div>
139148

140149
<!-- Conclusion -->
141-
<v-row id="conclusion-section">
142-
<v-col :cols="4" class="left-column pb-16">
143-
<section>
150+
<div class="section" id="conclusion-section">
151+
<v-row>
152+
<v-col :cols="4" class="left-column sticky-left pb-16">
153+
<section :class="{ active: activeSection === 'correlations-section' }">
144154
<h3 class="pb-4">What We Learned and What Comes Next</h3>
145155
<p>
146156
The analysis underscores the growing significance of earth observation tools, like satellite imagery and NDVI metrics, in monitoring urban green spaces such as Tempelhofer Feld. These tools provide insights into how ecosystems respond to climate change and enable data-driven decision-making for urban planning and conservation.
@@ -166,75 +176,58 @@
166176
</section>
167177
</v-col>
168178
</v-row>
179+
</div>
169180
</v-container>
170181
</v-app>
171182
</template>
172183

173184
<script>
174-
import YearlyTemperatureNdviCorrelation from './CorrelationGraphs/YearlyTemperatureNdviCorrelation.vue'
175-
import MedianTempGraph from './WeatherGraphs/MedianTempGraph.vue'
176-
import TempDifferenceGraph from './WeatherGraphs/TempDifferenceGraph.vue'
177-
import Images from './Images.vue'
178-
import YearlyNdviPlot from './NdviGraphs/YearlyNdvi.vue'
179-
import NdviSelectMonthGraph from './NdviGraphs/NdviSelectMonthGraph.vue'
180-
import NdviOverlayGraph from './NdviGraphs/NdviOverlayGraph.vue'
185+
import MedianTempGraph from './WeatherGraphs/MedianTempGraph.vue';
186+
import TempDifferenceGraph from './WeatherGraphs/TempDifferenceGraph.vue';
187+
import Images from './Images.vue';
188+
import YearlyNdviPlot from './NdviGraphs/YearlyNdvi.vue';
189+
import NdviSelectMonthGraph from './NdviGraphs/NdviSelectMonthGraph.vue';
190+
import NdviOverlayGraph from './NdviGraphs/NdviOverlayGraph.vue';
191+
import YearlyTemperatureNdviCorrelation from './CorrelationGraphs/YearlyTemperatureNdviCorrelation.vue';
181192
182193
export default {
183-
name: "MainSection",
194+
name: 'MainSection',
184195
components: {
185196
MedianTempGraph,
186197
TempDifferenceGraph,
187-
YearlyTemperatureNdviCorrelation,
188198
Images,
189199
YearlyNdviPlot,
190200
NdviSelectMonthGraph,
191201
NdviOverlayGraph,
202+
YearlyTemperatureNdviCorrelation,
192203
},
193204
data() {
194205
return {
206+
activeSection: null,
195207
isExpanded: false,
196-
}
208+
};
197209
},
198210
methods: {
199211
toggleExpand() {
200212
this.isExpanded = !this.isExpanded
201213
},
202-
scrollToSection(sectionId) {
203-
const section = document.getElementById(sectionId)
204-
if (section) {
205-
section.scrollIntoView({ behavior: 'smooth', block: 'start' })
206-
}
207-
}
208214
},
209215
mounted() {
210216
const observer = new IntersectionObserver(
211-
([entry]) => {
212-
if (entry.isIntersecting) {
213-
this.scrollToSection(entry.target.id)
214-
}
217+
(entries) => {
218+
entries.forEach((entry) => {
219+
if (entry.isIntersecting) {
220+
this.activeSection = entry.target.id;
221+
}
222+
});
215223
},
216-
{
217-
threshold: 0.3,
218-
}
224+
{ threshold: 0.5 }
219225
);
220226
221-
const sectionsToObserve = [
222-
'temperature-section',
223-
'ndvi-explanation-section',
224-
'ndvi-results-section',
225-
'correlations-section',
226-
'conclusion-section',
227-
'about-section',
228-
];
229-
230-
sectionsToObserve.forEach(sectionId => {
231-
const section = document.getElementById(sectionId)
232-
if (section) {
233-
observer.observe(section)
234-
}
235-
})
236-
}
237-
}
227+
const sections = document.querySelectorAll('.section');
228+
sections.forEach((section) => observer.observe(section));
229+
},
230+
};
238231
</script>
239232

240233
<style scoped>
@@ -250,4 +243,12 @@ p {
250243
.left-column {
251244
background-color: #d6f5d3;
252245
}
246+
247+
248+
.sticky-left {
249+
position: sticky;
250+
top: 0px;
251+
height: fit-content;
252+
align-self: flex-start;
253+
}
253254
</style>

0 commit comments

Comments
 (0)