Skip to content

Commit 4518f78

Browse files
antongitantongit
committed
Features page is scroller with scrollspy. Home is still switching between "tabs", "more" buttons link to the scroller page + #
1 parent 0b4083f commit 4518f78

8 files changed

Lines changed: 149 additions & 36 deletions

File tree

‎assets/js/creative.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,58 @@
5656
prevEl: '.swiper-button-prev',
5757
},
5858
});
59+
60+
// On the Home, Feature section: scroll to the top of the tab-content
61+
// everytime tab switches.
5962

63+
$('button[data-toggle="tab"]').on('shown.bs.tab', function (e) {
64+
65+
// Find the container holding your tab content
66+
const tabContent = document.querySelector('.tab-content');
67+
68+
if (tabContent) {
69+
// Scroll the top of the tab content into view smoothly
70+
tabContent.scrollIntoView({
71+
behavior: 'smooth',
72+
block: 'start'
73+
});
74+
}
75+
});
76+
77+
// Features Page:
78+
79+
const spyTarget = '#features-menu';
80+
const midScreenOffset = 450;
81+
let finalDestinationId = null;
82+
let isNavClick = false;
83+
84+
// 1. Add scrollspy to Body
85+
$('body').scrollspy({ target: spyTarget, offset: midScreenOffset });
86+
87+
// 2. Listen for clicks on the Bootstrap Nav links
88+
$(`${spyTarget} .nav-link`).on('click', function () {
89+
// Save the exact ID the user clicked on (e.g., "#services")
90+
finalDestinationId = this.hash;
91+
isNavClick = true;
6092

93+
$('body').scrollspy('dispose');
94+
window.location.hash = finalDestinationId;
95+
96+
// Visually lock the active class onto this clicked item immediately
97+
$(`${spyTarget} .nav-link`).removeClass('active');
98+
$(this).addClass('active');
99+
});
100+
101+
window.addEventListener('scrollend', function () {
102+
// Only run this logic if the scroll came from clicking a nav item
103+
if (!isNavClick) return;
104+
105+
isNavClick = false;
106+
107+
// 6. ARRIVAL! The native browser scroll is done.
108+
// Re-initialize ScrollSpy so it tracks normal manual mouse wheel scrolling again.
109+
$('body').scrollspy({ target: spyTarget, offset: midScreenOffset });
110+
$('body').scrollspy('refresh');
111+
});
112+
61113
})(jQuery); // End of use strict

‎assets/scss/_features.scss‎

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,43 @@
33
#Features
44
{
55

6+
@media (max-width: 769px) {
7+
padding-top: 2rem;
8+
}
9+
10+
section {
11+
padding: 0rem 0rem 3rem;
12+
border-bottom: 1px solid #000;
13+
14+
&:not(:first-of-type)
15+
{
16+
padding-top: 3.5rem;
17+
}
18+
19+
20+
@media (max-width: 769px) {
21+
scroll-margin-top: 90px;
22+
23+
&:first-of-type
24+
{
25+
scroll-margin-top: 200px;
26+
}
27+
}
28+
29+
@media (min-width: 769px) {
30+
scroll-margin-top: -30px;
31+
&:not(:first-of-type)
32+
{
33+
scroll-margin-top: -80px;
34+
}
35+
36+
&:last-of-type
37+
{
38+
border-bottom: none;
39+
}
40+
}
41+
}
42+
643
.nav-tabs{
744
border-bottom: none;
845
}
@@ -45,12 +82,15 @@
4582
max-width: 1300px;
4683
margin: 0 auto;
4784

48-
padding-top: 0;
85+
padding-top: 0;
4986

5087
p, ul{
5188
width: 90%;
5289
}
5390

91+
scroll-margin-top: 270px;
92+
93+
5494
@media (max-width: 1200px) {
5595
p, ul{
5696
width: 100%;
@@ -84,52 +124,66 @@
84124
}
85125
}
86126

87-
h1, h2, h3{
127+
h1, h2, h3, h4{
128+
88129
margin-bottom: 1.2rem;
89130
font-weight: bold;
90131
color: #000;
132+
133+
&:not(:first-child)
134+
{
135+
margin-top: 3rem;
136+
}
137+
}
138+
139+
h1{
140+
font-size: 3rem;
141+
padding-bottom: 1rem;
91142
}
92143

93144
h2{
94145
font-size: 2.5rem;
146+
color: #666;
95147
}
96148

97149
h3{
98-
font-size: 1.7rem;
99-
}
100-
101-
h1, h2, h3, h4{
102-
103-
&:not(:first-child)
104-
{
105-
margin-top: 3rem;
106-
}
150+
font-size: 1.5rem;
151+
color: #333;
107152
}
108153

109154
@media (min-width: 768px) {
110155
aside {
111156
position: sticky;
112157
top: 7rem;
113158
}
159+
.aside{
160+
z-index: 10;
161+
}
114162
}
115163

116164
@media (max-width: 769px) {
117-
118-
padding-top: 1rem;
119-
120165
aside {
121166
position: static;
122167
}
168+
169+
.aside{
170+
top: 61px;
171+
padding-top: 0.5rem;
172+
background-color: #fff;
173+
z-index: 10;
174+
}
175+
123176
}
124177

125178
aside {
126179
padding: 0;
127180
height: fit-content;
181+
position: sticky;
128182
}
129183

130184
main {
131185
min-width: 0; /* prevents overflow issues */
132-
186+
133187
a:not(:has(img))
134188
{
135189
text-decoration: underline;

‎content/Features/DeveloperFriendly/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ When installing vvvv, you only get the most basic feature set. Any additional li
5050
### Open Source
5151
While the core of vvvv (editor and compiler) are proprietary, all [libraries are open-source](https://github.com/vvvv). This means not getting stuck when you're facing a bug or missing a feature. In addition, being able to inspect libraries down to the bits is also a great learning resource.
5252

53-
### Deployment
53+
### Deployment Options
5454
vvvv offers multiple [deployment options](/features/deployment/), including a commandline compiler. This allows to include the export of vvvv apps in automated build processes.
5555

5656
### No DRM

‎layouts/_partials/features.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ <h1 class="section-heading">{{ $featuresPage.Title }}</h1>
1212
</div>
1313
</div>
1414
<div class="container">
15-
<h1></h1>
1615
<div class="row">
17-
<div class="col-12 col-md-3 mr-4">
16+
<div class="col-12 col-md-3 mr-4 sticky-top aside">
1817
<aside>
1918
<nav>
2019
<ul class="nav nav-tabs featuresMenu" role="tablist">
@@ -36,7 +35,7 @@ <h1></h1>
3635
<h2>{{$elem.Title}}</h2>
3736
{{ if (in .RawContent "<!--more-->") }}
3837
{{ .Summary }}
39-
<a class="btn btn-secondary" href="{{$elem.RelPermalink | absURL}}" title="More">Read more</a>
38+
<a class="btn btn-secondary" href="/features#{{$elem.Title | anchorize}}" title="More">Read more</a>
4039
{{ else }}
4140
{{ .Content }}
4241
{{ end }}

‎layouts/_partials/features/sidebar.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
{{ $ctx := .context }}
33
{{ $pages := $ctx.CurrentSection.RegularPages.ByWeight }}
44

5-
<nav>
6-
<ul class="featuresMenu">
5+
<nav id="features-menu">
6+
<ul class="nav featuresMenu">
77
{{ range $pages }}
8-
<li>
9-
<a href="{{ .RelPermalink }}" class="nav-link{{ if eq .RelPermalink $current.RelPermalink }} active{{ end }}">{{ .Title }}</a>
8+
<li class="nav-item">
9+
<a href="#{{ .Title | anchorize }}" class="nav-link">{{ .Title }}</a>
1010
</li>
1111
{{ end }}
1212
</ul>

‎layouts/features/baseof.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
<section id="Features">
1111
<div class="container">
1212
<div class="row">
13-
<div class="col-12 col-md-3 mr-4">
13+
<div class="col-12 col-md-3 mr-4 sticky-top aside">
1414
<aside>
1515
{{ block "sidebar" . }}{{ end }}
1616
</aside>
1717
</div>
18-
<div class="col-12 col-md-8">
18+
<div class="col-12 col-md-8 feature-content">
1919
<main>
2020
{{ block "main" . }}{{ end }}
2121
</main>

‎layouts/features/list.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
{{ define "sidebar" }}
2-
{{ $pages := .CurrentSection.RegularPages.ByWeight }}
3-
{{ if gt (len $pages) 0 }}
4-
{{ $first := index $pages 0 }}
5-
{{ partial "features/sidebar.html" (dict "current" $first "context" .) }}
6-
{{ end }}
2+
{{ partial "features/sidebar.html" (dict "current" . "context" .) }}
73
{{ end }}
84

95
{{ define "main" }}
6+
107
{{ $pages := .CurrentSection.RegularPages.ByWeight }}
11-
{{ if gt (len $pages) 0 }}
12-
{{ $first := index $pages 0 }}
13-
<h2>{{ $first.Title }}</h2>
14-
{{ $first.Content }}
8+
9+
{{ range $pages }}
10+
<section id="{{ .Title | anchorize }}">
11+
<h1>{{ .Title }}</h1>
12+
{{ .Content }}
13+
</section>
1514
{{ end }}
15+
1616
{{ end }}

‎layouts/features/single.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
{{ end }}
44

55
{{ define "main" }}
6-
<h2>{{ .Title }}</h2>
7-
{{ .Content }}
6+
7+
{{ $pages := .CurrentSection.RegularPages.ByWeight }}
8+
9+
{{ range $pages }}
10+
<section>
11+
<h1>{{ .Title }}</h1>
12+
{{ .Content }}
13+
</section>
14+
{{ end }}
15+
816
{{ end }}

0 commit comments

Comments
 (0)