Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 8331c9d

Browse files
WholloranWholloran
authored
Merge pull request #340 from openforge/fix/home-page-scroll-339
fix(home): fix broken scroll on home page
2 parents 66bb492 + 0d9f8c5 commit 8331c9d

File tree

4 files changed

+53
-74
lines changed

4 files changed

+53
-74
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/app-cta/app-cta.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
.row {
99
height: 100%;
10+
width: 100vw;
1011
background: linear-gradient(to bottom, rgba(108, 144, 152, 0.99), #3f5a60);
1112
}
1213

‎src/pages/app-home/app-home.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.home {
22
font-family: 'Muli', sans-serif;
3-
overflow-x: hidden;
3+
width: auto;
44

55
.hero {
66
background-color: white;
@@ -211,6 +211,7 @@
211211

212212
.work {
213213
height: auto;
214+
width: 100%;
214215

215216
.main-content {
216217
background-color: $gray-100;
@@ -222,10 +223,17 @@
222223
}
223224

224225
.sidebar {
226+
min-height: 100%;
225227
width: 50%;
226228
@include media-breakpoint-down(sm) {
227229
display: none;
228230
}
231+
232+
#sticky-sidebar-inner {
233+
position: -webkit-sticky;
234+
position: sticky;
235+
top: 0;
236+
}
229237
}
230238

231239
.content {

‎src/pages/app-home/app-home.tsx‎

Lines changed: 42 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, Prop } from '@stencil/core';
22
import { RouterHistory } from '@stencil/router';
3-
import stickySidebar from 'sticky-sidebar';
43

54
import { translate } from '../../services/translation.service';
65

@@ -19,7 +18,7 @@ export class AppHome {
1918
@Prop({ context: 'isServer' })
2019
private isServer: boolean;
2120

22-
private sticky;
21+
// private sticky;
2322

2423
componentDidLoad() {
2524
// isServer is false when running in the browser
@@ -30,14 +29,13 @@ export class AppHome {
3029

3130
/* tslint:disable-next-line */
3231
$(window).on('scroll resize', function() {
33-
const pos = $('#content-panel-inner').offset().top + $('#content-panel-inner').height();
32+
const pos = $('#content-panel-inner').offset().top + $('#content-panel-inner').height() / 2;
3433
let done = false;
3534
$('.content-panel').each(function() {
3635
if (!done && pos <= Math.floor($(this).offset().top + $(this).height())) {
3736
const newDescr = $(this)
3837
.find('.description')
3938
.html();
40-
4139
$('#content-panel-inner').html(newDescr);
4240

4341
done = true;
@@ -61,42 +59,11 @@ export class AppHome {
6159

6260
/* tslint:disable-next-line */
6361
$(document).ready(function() {
64-
/* tslint:disable-next-line */
65-
const self = this;
66-
/* tslint:disable-next-line */
67-
window.setTimeout(function() {
68-
console.log('init sticky');
69-
self.sticky = new stickySidebar('.sidebar', {
70-
topSpacing: 75.45,
71-
bottomSpacing: 0,
72-
containerSelector: '.main-content',
73-
innerWrapperSelector: '.content-panel-inner',
74-
minWidth: 767,
75-
});
76-
self.sticky.updateSticky();
77-
}, 0);
78-
7962
$('[data-slide-to=0]').trigger('click');
80-
8163
$(window).trigger('scroll'); // init the value
82-
83-
if (
84-
$('.sidebar')
85-
.first()
86-
.hasClass('is-affixed')
87-
) {
88-
$('.sidebar')
89-
.first()
90-
.removeClass('is-affixed');
91-
$('#content-panel-inner').css({ width: 'initial' });
92-
}
9364
});
9465
}
9566

96-
componentDidUnload() {
97-
this.sticky.destroy();
98-
}
99-
10067
scrollToForm() {
10168
const form = document.getElementById('services');
10269
form.scrollIntoView({ block: 'start', behavior: 'smooth' });
@@ -244,8 +211,10 @@ export class AppHome {
244211

245212
<section id="work" class="work">
246213
<div class="main-content">
247-
<div class="sidebar">
248-
<div class="sidebar__inner content-panel-inner" id="content-panel-inner" />
214+
<div id="sticky-sidebar" class="sidebar">
215+
<div id="sticky-sidebar-inner">
216+
<div id="content-panel-inner" class="content-panel-inner" />
217+
</div>
249218
</div>
250219
<div class="content">
251220
<div class="content-panel loudcloud">
@@ -259,16 +228,18 @@ export class AppHome {
259228
<h2>
260229
<app-translate key="home.services.mobileTechnology.example" />
261230
</h2>
262-
<div class="row store-buttons">
263-
<div class="col-6 text-right">
264-
<a href="https://itunes.apple.com/us/app/loudcloud-disposable-numbers/id723331666?mt=8" target="_blank" rel="noopener">
265-
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
266-
</a>
267-
</div>
268-
<div class="col-6 text-left">
269-
<a href="https://play.google.com/store/apps/details?id=com.ignitras.loudcloud&hl=en" target="_blank" rel="noopener">
270-
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
271-
</a>
231+
<div class="container">
232+
<div class="row store-buttons">
233+
<div class="col-6 text-right">
234+
<a href="https://itunes.apple.com/us/app/loudcloud-disposable-numbers/id723331666?mt=8" target="_blank" rel="noopener">
235+
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
236+
</a>
237+
</div>
238+
<div class="col-6 text-left">
239+
<a href="https://play.google.com/store/apps/details?id=com.ignitras.loudcloud&hl=en" target="_blank" rel="noopener">
240+
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
241+
</a>
242+
</div>
272243
</div>
273244
</div>
274245
<img src="/assets/shared-graphic-loudcloud.png" class="phone-image" alt="loudcloud" />
@@ -285,16 +256,18 @@ export class AppHome {
285256
<h2>
286257
<app-translate key="home.services.digitalExperience.example" />
287258
</h2>
288-
<div class="row store-buttons">
289-
<div class="col-6 text-right">
290-
<a href="https://itunes.apple.com/us/app/the-voyage-by-new-ocean-health/id779637437?mt=8" target="_blank" rel="noopener">
291-
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
292-
</a>
293-
</div>
294-
<div class="col-6 text-left">
295-
<a href="https://play.google.com/store/apps/details?id=com.carecaminnovations.mobile" target="_blank" rel="noopener">
296-
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
297-
</a>
259+
<div class="container">
260+
<div class="row store-buttons">
261+
<div class="col-6 text-right">
262+
<a href="https://itunes.apple.com/us/app/the-voyage-by-new-ocean-health/id779637437?mt=8" target="_blank" rel="noopener">
263+
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
264+
</a>
265+
</div>
266+
<div class="col-6 text-left">
267+
<a href="https://play.google.com/store/apps/details?id=com.carecaminnovations.mobile" target="_blank" rel="noopener">
268+
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
269+
</a>
270+
</div>
298271
</div>
299272
</div>
300273
<img src="/assets/shared-graphic-voyage.png" class="phone-image" alt="voyage" />
@@ -311,16 +284,18 @@ export class AppHome {
311284
<h2>
312285
<app-translate key="home.services.brandingDesign.example" />
313286
</h2>
314-
<div class="row store-buttons">
315-
<div class="col-6 text-right">
316-
<a href="https://itunes.apple.com/us/app/digi-thermo/id1307130445?mt=8" target="_blank" rel="noopener">
317-
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
318-
</a>
319-
</div>
320-
<div class="col-6 text-left">
321-
<a href="https://play.google.com/store/apps/details?id=com.webjuntollc.digithermoapp" target="_blank" rel="noopener">
322-
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
323-
</a>
287+
<div class="container">
288+
<div class="row store-buttons">
289+
<div class="col-6 text-right">
290+
<a href="https://itunes.apple.com/us/app/digi-thermo/id1307130445?mt=8" target="_blank" rel="noopener">
291+
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
292+
</a>
293+
</div>
294+
<div class="col-6 text-left">
295+
<a href="https://play.google.com/store/apps/details?id=com.webjuntollc.digithermoapp" target="_blank" rel="noopener">
296+
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
297+
</a>
298+
</div>
324299
</div>
325300
</div>
326301
<img src="/assets/shared-graphic-juntoscope.png" class="phone-image" alt="juntoscope" />

0 commit comments

Comments
 (0)