Skip to content

Commit ca702ea

Browse files
JumpLinkJumpLink
committed
Implement fixed call button component: add dfw-fixed-call-button to display a call button that appears during scrolling, enhance styles for visibility transitions, and update layouts to replace the deprecated fixed call button partial. Refactor hero section to remove unused call-to-action text.
1 parent 03f490e commit ca702ea

13 files changed

Lines changed: 29 additions & 45 deletions

File tree

‎src/content/site.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ description: "Krosses Hähnchen, Pommes, Wurst, Fisch und mehr an der Wurster No
99

1010
# Hero section (start page)
1111
hero_subtitle: "Dein Imbisstaurant für krossen Geschmack"
12-
hero_cta_text: "Jetzt telefonisch bestellen & kross abholen"
13-
hero_cta_button: "Jetzt anrufen"
1412

1513
# Navigation labels
1614
nav:

‎src/scss/main.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,10 @@
3131
// Bootstrap already applies $headings-font-family and $headings-color to h1-h6 via variables
3232

3333
// German word hyphenation
34-
// hyphens: auto is well-supported (Chrome 55+, Firefox 6+, Safari 5.1+)
35-
// hyphenate-limit-* properties have limited support (Chrome 109+, Firefox 137+)
36-
html {
34+
.text-hyphenate {
3735
hyphens: auto;
3836
}
3937

40-
body {
41-
word-break: break-word; // Fallback for long words
42-
overflow-wrap: break-word; // Modern property name
43-
}
44-
4538
section {
4639
padding: $section-padding-y 0;
4740
}

src/ts/components/dfw-scroll-visibility/dfw-scroll-visibility.component.scss renamed to src/ts/components/dfw-fixed-call-button/dfw-fixed-call-button.component.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
dfw-scroll-visibility {
1+
dfw-fixed-call-button {
22
display: block;
33
/* No size in flow; fixed child is out of flow. visibility on host hides the button. */
44
}
55

6-
dfw-scroll-visibility[data-visible="false"] {
6+
dfw-fixed-call-button[data-visible="false"] {
77
visibility: hidden;
88
opacity: 0;
99
pointer-events: none;
1010
transition: opacity 0.2s ease, visibility 0.2s ease;
1111
}
1212

13-
dfw-scroll-visibility[data-visible="true"] {
13+
dfw-fixed-call-button[data-visible="true"] {
1414
transition: opacity 0.2s ease, visibility 0.2s ease;
1515
}

src/ts/components/dfw-scroll-visibility/dfw-scroll-visibility.component.ts renamed to src/ts/components/dfw-fixed-call-button/dfw-fixed-call-button.component.ts

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,36 @@ import { Component } from "@ribajs/core";
22
import { debounceF } from "@ribajs/utils/src/control.js";
33
import { hasChildNodesTrim } from "@ribajs/utils/src/dom.js";
44

5-
const VISIBLE_SCROLL_START = 0.1; // show after 10% from top
6-
const VISIBLE_SCROLL_END = 0.9; // hide again in last 10%
5+
const HIDE_SCROLL_END = 0.9; // hide in last 10% of scroll range
76

87
/**
9-
* Wrapper component that shows its child content only when the page is scrolled
10-
* in the "middle" 80% (between 10% and 90% of scroll range). Use for fixed
11-
* elements like a call button that should be hidden near the top and bottom.
12-
* Pass the content as child nodes (like dfw-contact-map).
8+
* Fixed call button component that shows the button at the top of the page
9+
* and hides it only when the user scrolls to the bottom (last 10%).
1310
*/
14-
export class DfwScrollVisibilityComponent extends Component {
15-
public static tagName = "dfw-scroll-visibility";
11+
export class DfwFixedCallButtonComponent extends Component {
12+
public static tagName = "dfw-fixed-call-button";
1613

1714
protected autobind = true;
1815

1916
static get observedAttributes(): string[] {
2017
return [];
2118
}
2219

20+
public scope: Record<string, never> = {};
21+
2322
private debouncedUpdateVisibility!: () => void;
2423
private readonly boundUpdateVisibility = () => this.debouncedUpdateVisibility();
2524

2625
protected connectedCallback() {
2726
super.connectedCallback();
28-
this.setAttribute("data-visible", "false");
29-
this.init(DfwScrollVisibilityComponent.observedAttributes);
27+
this.setAttribute("data-visible", "true");
28+
this.init(DfwFixedCallButtonComponent.observedAttributes);
3029

3130
this.debouncedUpdateVisibility = debounceF(() => {
3231
if (!this.isConnected) return;
3332
const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
34-
const visible =
35-
maxScroll <= 0 ||
36-
(window.scrollY >= maxScroll * VISIBLE_SCROLL_START &&
37-
window.scrollY <= maxScroll * VISIBLE_SCROLL_END);
33+
// Hide only in the last 10% of scroll range, visible everywhere else (including top)
34+
const visible = maxScroll <= 0 || window.scrollY <= maxScroll * HIDE_SCROLL_END;
3835
this.setAttribute("data-visible", visible ? "true" : "false");
3936
});
4037
}
@@ -58,6 +55,6 @@ export class DfwScrollVisibilityComponent extends Component {
5855
if (hasChildNodesTrim(this)) {
5956
return null;
6057
}
61-
return `<p>Provide child content to show in the middle 80% scroll range.</p>`;
58+
return `<p>Provide child content for the fixed call button.</p>`;
6259
}
6360
}

‎src/ts/components/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
@import './dfw-background-gears/dfw-background-gears.component';
22
@import './dfw-contact-map/dfw-contact-map.component';
33
@import './dfw-gallery/dfw-gallery.component';
4-
@import './dfw-scroll-visibility/dfw-scroll-visibility.component';
4+
@import './dfw-fixed-call-button/dfw-fixed-call-button.component';

‎src/ts/components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export { DfwBackgroundGearsComponent } from "./dfw-background-gears/dfw-background-gears.component.js";
22
export { DfwContactMapComponent } from "./dfw-contact-map/dfw-contact-map.component.js";
33
export { DfwGalleryComponent } from "./dfw-gallery/dfw-gallery.component.js";
4-
export { DfwScrollVisibilityComponent } from "./dfw-scroll-visibility/dfw-scroll-visibility.component.js";
4+
export { DfwFixedCallButtonComponent } from "./dfw-fixed-call-button/dfw-fixed-call-button.component.js";

‎src/views/layouts/main.pug‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ html(lang='de')
1818
router-view#main(listen-all-links='true')
1919
block content
2020
include ../partials/footer.pug
21-
dfw-scroll-visibility
22-
include ../partials/fixed-call-button.pug
21+
dfw-fixed-call-button
22+
a.btn.btn-primary.position-fixed.bottom-0.end-0.m-3.m-md-4.text-uppercase.fw-bold.z-offcanvas-backdrop(
23+
href='tel:' + contact.phone.replace(/\s/g, '')
24+
)
25+
| Jetzt anrufen
26+
2327
script(src=basePath + '/ts/main.ts', type='module')

‎src/views/pages/datenschutz.pug‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ extends ../layouts/main.pug
33
block content
44
- const pageTitle = datenschutz.title || 'Datenschutzerklärung'
55
section(id=slugify(pageTitle))
6-
.container
6+
.container.text-hyphenate
77
h2.section-title.text-shine= pageTitle
88
.page-content!= datenschutz.html

‎src/views/pages/impressum.pug‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ extends ../layouts/main.pug
33
block content
44
- const pageTitle = impressum.title || 'Impressum'
55
section(id=slugify(pageTitle))
6-
.container
6+
.container.text-hyphenate
77
h2.section-title.text-shine= pageTitle
88
.page-content!= impressum.html

‎src/views/pages/qualitaet.pug‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ block content
55
section(id=slugify(pageTitle))
66
.container
77
h2.section-title.text-shine= pageTitle
8-
.page-content!= quality.html
8+
.page-content.lead!= quality.html

0 commit comments

Comments
 (0)