hr-design-system-handlebars 1.105.2 → 1.107.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/preview-head.html +1 -1
- package/CHANGELOG.md +24 -0
- package/dist/assets/index.css +427 -453
- package/dist/assets/js/components/event/filtererDs.feature.js +11 -11
- package/dist/assets/js/components/event/nativeScrollDs.feature.js +6 -6
- package/dist/views/components/button/utilities/button_variation_classes.hbs +4 -4
- package/dist/views/components/event/calendar/event_calendar_footer.hbs +1 -1
- package/dist/views/components/event/calendar/event_calendar_nav.hbs +6 -6
- package/dist/views/components/event/calendar/event_calendar_nav_item.hbs +2 -2
- package/dist/views/components/event/event_details.hbs +2 -2
- package/dist/views_static/components/button/utilities/button_variation_classes.hbs +4 -4
- package/dist/views_static/components/event/calendar/event_calendar_footer.hbs +1 -1
- package/dist/views_static/components/event/calendar/event_calendar_nav.hbs +6 -6
- package/dist/views_static/components/event/calendar/event_calendar_nav_item.hbs +2 -2
- package/dist/views_static/components/event/event_details.hbs +2 -2
- package/package.json +1 -4
- package/src/assets/css/custom-utilities.css +27 -31
- package/src/stories/views/components/button/utilities/button_variation_classes.hbs +4 -4
- package/src/stories/views/components/event/calendar/event_calendar_footer.hbs +1 -1
- package/src/stories/views/components/event/calendar/event_calendar_nav.hbs +6 -6
- package/src/stories/views/components/event/calendar/event_calendar_nav_item.hbs +2 -2
- package/src/stories/views/components/event/event_details.hbs +2 -2
- package/src/stories/views/components/event/filtererDs.feature.js +11 -11
- package/src/stories/views/components/event/nativeScrollDs.feature.js +6 -6
- package/tailwind.config.js +21 -45
|
@@ -23,11 +23,11 @@ const Filterer = (context) => {
|
|
|
23
23
|
errorDomNodes = hr$(`.${errorClass}`),
|
|
24
24
|
contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
|
|
25
25
|
let targetDomNodes = hr$(`.${targetClass}`, rootElement),
|
|
26
|
-
|
|
26
|
+
currentMonth = document.getElementsByClassName('js-currentMonth')[0];
|
|
27
27
|
|
|
28
|
-
const init = function () {
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
const init = function () {
|
|
29
|
+
currentMonth.classList.add('text-white');
|
|
30
|
+
currentMonth.classList.add('bg-black');
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
for (let i = 0; i < triggerDomNodes.length; i++) {
|
|
@@ -73,15 +73,15 @@ const Filterer = (context) => {
|
|
|
73
73
|
|
|
74
74
|
const doSetSelectedFilter = function (e, forceReset) {
|
|
75
75
|
clearSelected()
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
|
|
77
|
+
|
|
78
78
|
let monthWrapper = e.currentTarget.closest('.js-ns-month');
|
|
79
|
-
let monthName = monthWrapper.querySelector('.js-monthName');
|
|
80
|
-
|
|
79
|
+
let monthName = monthWrapper.querySelector('.js-monthName');
|
|
80
|
+
|
|
81
81
|
if (!forceReset) {
|
|
82
|
-
e.currentTarget.classList.add(navItemSelectedCssTrigger)
|
|
82
|
+
e.currentTarget.classList.add(navItemSelectedCssTrigger)
|
|
83
83
|
if (monthWrapper) {
|
|
84
|
-
|
|
84
|
+
|
|
85
85
|
if (monthName) {
|
|
86
86
|
monthName.classList.remove('text-gray-scorpion')
|
|
87
87
|
monthName.classList.remove('bg-white')
|
|
@@ -106,7 +106,7 @@ const Filterer = (context) => {
|
|
|
106
106
|
currentMonth.classList.add('text-gray-scorpion');
|
|
107
107
|
currentMonth.classList.add('bg-white');
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
|
|
110
110
|
triggerDomNodes.forEach(function (triggerDomNode) {
|
|
111
111
|
|
|
112
112
|
// hacky die würde bald verändert
|
|
@@ -18,7 +18,7 @@ const NativeScroll = function (context) {
|
|
|
18
18
|
}
|
|
19
19
|
const doScroll = function (e) {
|
|
20
20
|
let step = scrollbar.clientWidth - oneScrollbarItem.clientWidth * 1.5,
|
|
21
|
-
direction = e.currentTarget.classList.contains('-left') ? -1 : 1,
|
|
21
|
+
direction = e.currentTarget.classList.contains('js-left') ? -1 : 1,
|
|
22
22
|
distance = direction * step
|
|
23
23
|
console.log(
|
|
24
24
|
'🚀 ~ file: nativeScroll.feature.js ~ line 22 ~ doScroll ~ direction',
|
|
@@ -90,14 +90,14 @@ const NativeScroll = function (context) {
|
|
|
90
90
|
: (time - 1) * (2 * time - 2) * (2 * time - 2) + 1
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
if (hr$('.js-ns-scroll
|
|
94
|
-
scrollbar = hr$('.js-ns-scroll
|
|
93
|
+
if (hr$('.js-ns-scroll.js-horizontal', rootElement).length > 0) {
|
|
94
|
+
scrollbar = hr$('.js-ns-scroll.js-horizontal', rootElement)[0]
|
|
95
95
|
buttons = hr$('.js-ns-button', rootElement)
|
|
96
96
|
oneScrollbarItem = hr$('.js-ns-item', rootElement)[0]
|
|
97
97
|
hasNativeSmoothScroll = isNativeSmoothScrollEnabledOn(scrollbar)
|
|
98
|
-
let initiallySelectedMonth = hr$('.js-ns-month
|
|
98
|
+
let initiallySelectedMonth = hr$('.js-ns-month.js-selected', rootElement)[0]
|
|
99
99
|
if (!initiallySelectedMonth) {
|
|
100
|
-
initiallySelectedMonth = hr$('.js-ns-month
|
|
100
|
+
initiallySelectedMonth = hr$('.js-ns-month.js-currentMonth', rootElement)[0]
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
if (initiallySelectedMonth) {
|
|
@@ -114,7 +114,7 @@ const NativeScroll = function (context) {
|
|
|
114
114
|
}
|
|
115
115
|
} else {
|
|
116
116
|
console.log(
|
|
117
|
-
'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll
|
|
117
|
+
'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.js-horizontal'
|
|
118
118
|
)
|
|
119
119
|
}
|
|
120
120
|
}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
|
-
'[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark ","
|
|
5
|
+
'[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
|
-
|
|
7
|
+
{{else if _disabled~}}
|
|
8
8
|
|
|
9
9
|
{{inline-switch
|
|
10
10
|
_variant
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
{{~inline-switch
|
|
24
24
|
_variant
|
|
25
25
|
'["primary","secondary","tertiary","icon-button"]'
|
|
26
|
-
'[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-inverted
|
|
27
|
-
~}}
|
|
26
|
+
'[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted"," border bg-transparent border-transparent text-button active:bg-button-inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
|
|
27
|
+
~}}
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
30
30
|
{{~#unless _disableButtonPress}} active:scale-95{{/unless}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<footer class='bg-event-calendar-primary text-center'>
|
|
2
2
|
{{#> components/base/link _link=this.link
|
|
3
|
-
_css='block p-2 text-white text-sm font-serif hover:underline underline-offset-
|
|
3
|
+
_css='block p-2 text-white text-sm font-serif hover:underline underline-offset-2'
|
|
4
4
|
}}
|
|
5
5
|
{{loca 'event_calendar_monthly_overview_link'}}
|
|
6
6
|
{{/components/base/link}}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}'>
|
|
2
|
-
<button class="block border-0 ml-4 absolute left-0 min-w-
|
|
2
|
+
<button class="block border-0 ml-4 absolute left-0 min-w-1 min-h-3 top-1/2 js-ns-button js-left" aria-hidden="true">
|
|
3
3
|
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
|
|
4
4
|
</button>
|
|
5
|
-
<button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
|
|
5
|
+
<button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button js-right" aria-hidden="true">
|
|
6
6
|
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
|
|
7
7
|
</button>
|
|
8
|
-
<div class="flex relative
|
|
9
|
-
<div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
|
|
8
|
+
<div class="flex relative ml-14 mr-14 overflow-hidden box-border border-teal-600">
|
|
9
|
+
<div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll js-horizontal">
|
|
10
10
|
{{#each this}}
|
|
11
11
|
<div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
|
|
12
|
-
this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
|
|
12
|
+
this.hasFutureEventsFromNow}} js-selected{{else}} js-fr-reload-trigger{{/if}}">
|
|
13
13
|
<span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3 {{#if
|
|
14
|
-
this.isCurrentMonth}} -currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
|
|
14
|
+
this.isCurrentMonth}} js-currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
|
|
15
15
|
<ul class="flex">
|
|
16
16
|
{{#each this.days}}
|
|
17
17
|
<li class="inline-block h-full group cursor-pointer js-ns-item{{#if
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white
|
|
1
|
+
<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white{{#if this.isFirstAvailable}} js-selected js-fr-initial{{/if}}"
|
|
2
2
|
data-prop-crit='{{this.date.htmlDate}}'
|
|
3
3
|
data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
|
|
4
4
|
href="{{_contentUrl}}">
|
|
5
5
|
<span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
|
|
6
|
-
<span class="block font-serif text-link font-bold
|
|
6
|
+
<span class="block font-serif text-link font-bold italic text-2xl px-3 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
|
|
7
7
|
</a>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="flex flex-wrap content-center w-full h-full px-2 py-1">
|
|
2
2
|
{{#with this.startTime}}
|
|
3
|
-
<div class="flex grow shrink
|
|
3
|
+
<div class="flex grow shrink basis-6/12 align-top p-2">
|
|
4
4
|
<div class="min-w-3 min-h-3">
|
|
5
5
|
{{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
|
|
6
6
|
</div>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
{{/with}}
|
|
10
10
|
{{#with this.venue}}
|
|
11
|
-
<div class="flex grow
|
|
11
|
+
<div class="flex grow shrink basis-6/12 align-top p-2">
|
|
12
12
|
<div class="min-w-3 min-h-3">
|
|
13
13
|
{{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
|
|
14
14
|
</div>
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
|
-
'[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark ","
|
|
5
|
+
'[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
|
-
|
|
7
|
+
{{else if _disabled~}}
|
|
8
8
|
|
|
9
9
|
{{inline-switch
|
|
10
10
|
_variant
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
{{~inline-switch
|
|
24
24
|
_variant
|
|
25
25
|
'["primary","secondary","tertiary","icon-button"]'
|
|
26
|
-
'[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-inverted
|
|
27
|
-
~}}
|
|
26
|
+
'[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted"," border bg-transparent border-transparent text-button active:bg-button-inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
|
|
27
|
+
~}}
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
30
30
|
{{~#unless _disableButtonPress}} active:scale-95{{/unless}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<footer class='bg-event-calendar-primary text-center'>
|
|
2
2
|
{{#> components/base/link _link=this.link
|
|
3
|
-
_css='block p-2 text-white text-sm font-serif hover:underline underline-offset-
|
|
3
|
+
_css='block p-2 text-white text-sm font-serif hover:underline underline-offset-2'
|
|
4
4
|
}}
|
|
5
5
|
{{loca 'event_calendar_monthly_overview_link'}}
|
|
6
6
|
{{/components/base/link}}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}'>
|
|
2
|
-
<button class="block border-0 ml-4 absolute left-0 min-w-
|
|
2
|
+
<button class="block border-0 ml-4 absolute left-0 min-w-1 min-h-3 top-1/2 js-ns-button js-left" aria-hidden="true">
|
|
3
3
|
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
|
|
4
4
|
</button>
|
|
5
|
-
<button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
|
|
5
|
+
<button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button js-right" aria-hidden="true">
|
|
6
6
|
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
|
|
7
7
|
</button>
|
|
8
|
-
<div class="flex relative
|
|
9
|
-
<div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
|
|
8
|
+
<div class="flex relative ml-14 mr-14 overflow-hidden box-border border-teal-600">
|
|
9
|
+
<div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll js-horizontal">
|
|
10
10
|
{{#each this}}
|
|
11
11
|
<div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
|
|
12
|
-
this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
|
|
12
|
+
this.hasFutureEventsFromNow}} js-selected{{else}} js-fr-reload-trigger{{/if}}">
|
|
13
13
|
<span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3 {{#if
|
|
14
|
-
this.isCurrentMonth}} -currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
|
|
14
|
+
this.isCurrentMonth}} js-currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
|
|
15
15
|
<ul class="flex">
|
|
16
16
|
{{#each this.days}}
|
|
17
17
|
<li class="inline-block h-full group cursor-pointer js-ns-item{{#if
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white
|
|
1
|
+
<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white{{#if this.isFirstAvailable}} js-selected js-fr-initial{{/if}}"
|
|
2
2
|
data-prop-crit='{{this.date.htmlDate}}'
|
|
3
3
|
data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
|
|
4
4
|
href="{{_contentUrl}}">
|
|
5
5
|
<span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
|
|
6
|
-
<span class="block font-serif text-link font-bold
|
|
6
|
+
<span class="block font-serif text-link font-bold italic text-2xl px-3 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
|
|
7
7
|
</a>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="flex flex-wrap content-center w-full h-full px-2 py-1">
|
|
2
2
|
{{#with this.startTime}}
|
|
3
|
-
<div class="flex grow shrink
|
|
3
|
+
<div class="flex grow shrink basis-6/12 align-top p-2">
|
|
4
4
|
<div class="min-w-3 min-h-3">
|
|
5
5
|
{{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
|
|
6
6
|
</div>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
{{/with}}
|
|
10
10
|
{{#with this.venue}}
|
|
11
|
-
<div class="flex grow
|
|
11
|
+
<div class="flex grow shrink basis-6/12 align-top p-2">
|
|
12
12
|
<div class="min-w-3 min-h-3">
|
|
13
13
|
{{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
|
|
14
14
|
</div>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.
|
|
9
|
+
"version": "1.107.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -105,8 +105,6 @@
|
|
|
105
105
|
"storybook-conditional-toolbar-selector": "^1.0.3",
|
|
106
106
|
"style-loader": "^4.0.0",
|
|
107
107
|
"tailwindcss": "^3.0.23",
|
|
108
|
-
"tailwindcss-hyphens": "^0.1.0",
|
|
109
|
-
"tailwindcss-important": "^1.0.0",
|
|
110
108
|
"typescript": "^5.0.4",
|
|
111
109
|
"underscore": "^1.13.2",
|
|
112
110
|
"zepto-modules": "^1.0.1"
|
|
@@ -116,7 +114,6 @@
|
|
|
116
114
|
"@alpinejs/anchor": "^3.13.3",
|
|
117
115
|
"@alpinejs/collapse": "^3.8.1",
|
|
118
116
|
"@alpinejs/intersect": "^3.13.3",
|
|
119
|
-
"@tailwindcss/line-clamp": "^0.4.2",
|
|
120
117
|
"a11y-dialog": "^8.0.4",
|
|
121
118
|
"alpinejs": "^3.14.1",
|
|
122
119
|
"async-alpine": "^1.0.0",
|
|
@@ -405,31 +405,28 @@
|
|
|
405
405
|
content: attr(data-prop-loading);
|
|
406
406
|
}
|
|
407
407
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
padding-bottom: var(--logo-padding-bottom);
|
|
420
|
-
}
|
|
408
|
+
.brand-logo-size-lg {
|
|
409
|
+
padding-top: var(--logo-padding-top-lg);
|
|
410
|
+
padding-bottom: var(--logo-padding-bottom-lg);
|
|
411
|
+
}
|
|
412
|
+
.brand-logo-size-md {
|
|
413
|
+
padding-top: var(--logo-padding-top-md);
|
|
414
|
+
padding-bottom: var(--logo-padding-bottom-md);
|
|
415
|
+
}
|
|
416
|
+
.brand-logo-size {
|
|
417
|
+
padding-top: var(--logo-padding-top);
|
|
418
|
+
padding-bottom: var(--logo-padding-bottom);
|
|
421
419
|
}
|
|
422
420
|
|
|
423
421
|
/*! ****************************/
|
|
424
422
|
/*! Search-Box-border */
|
|
425
423
|
/*! ****************************/
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
}
|
|
424
|
+
|
|
425
|
+
.search-border-mobile {
|
|
426
|
+
border-color: var(--search-border-color-mobile);
|
|
427
|
+
}
|
|
428
|
+
.search-border-desktop {
|
|
429
|
+
border-color: var(--search-border-color-desktop);
|
|
433
430
|
}
|
|
434
431
|
|
|
435
432
|
/*! ***********************************/
|
|
@@ -450,15 +447,15 @@
|
|
|
450
447
|
/*! FORMULAR SELECT */
|
|
451
448
|
/*! ****************************/
|
|
452
449
|
/* Custom CSS to style the label when the first empty option is selected */
|
|
453
|
-
select:has(option:checked:not([value=
|
|
454
|
-
@apply top-px scale-75 translate-y-0
|
|
450
|
+
select:has(option:checked:not([value=''])) + label {
|
|
451
|
+
@apply top-px scale-75 translate-y-0;
|
|
455
452
|
}
|
|
456
453
|
|
|
457
|
-
select:has(option:checked[value=
|
|
458
|
-
@apply text-transparent
|
|
454
|
+
select:has(option:checked[value='']) {
|
|
455
|
+
@apply text-transparent;
|
|
459
456
|
}
|
|
460
457
|
|
|
461
|
-
input[type=
|
|
458
|
+
input[type='checkbox']:checked::after {
|
|
462
459
|
position: absolute;
|
|
463
460
|
content: '';
|
|
464
461
|
width: 15px;
|
|
@@ -472,10 +469,10 @@
|
|
|
472
469
|
transform: rotate(-45deg);
|
|
473
470
|
}
|
|
474
471
|
|
|
475
|
-
input[type=
|
|
472
|
+
input[type='radio']::after {
|
|
476
473
|
content: '';
|
|
477
474
|
position: absolute;
|
|
478
|
-
width: 16px;
|
|
475
|
+
width: 16px;
|
|
479
476
|
height: 16px;
|
|
480
477
|
top: 50%;
|
|
481
478
|
left: 50%;
|
|
@@ -483,9 +480,8 @@
|
|
|
483
480
|
background-color: var(--color-primary-ds);
|
|
484
481
|
border-radius: 50%;
|
|
485
482
|
}
|
|
486
|
-
|
|
487
|
-
input[type=
|
|
488
|
-
transform: translate(-50%, -50%) scale(1);
|
|
483
|
+
|
|
484
|
+
input[type='radio']:checked::after {
|
|
485
|
+
transform: translate(-50%, -50%) scale(1);
|
|
489
486
|
}
|
|
490
|
-
|
|
491
487
|
}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
{{inline-switch
|
|
3
3
|
_variant
|
|
4
4
|
'["primary","secondary","tertiary"]'
|
|
5
|
-
'[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark ","
|
|
5
|
+
'[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
|
|
6
6
|
~}}
|
|
7
|
-
|
|
7
|
+
{{else if _disabled~}}
|
|
8
8
|
|
|
9
9
|
{{inline-switch
|
|
10
10
|
_variant
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
{{~inline-switch
|
|
24
24
|
_variant
|
|
25
25
|
'["primary","secondary","tertiary","icon-button"]'
|
|
26
|
-
'[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-inverted
|
|
27
|
-
~}}
|
|
26
|
+
'[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted"," border bg-transparent border-transparent text-button active:bg-button-inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
|
|
27
|
+
~}}
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
30
30
|
{{~#unless _disableButtonPress}} active:scale-95{{/unless}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<footer class='bg-event-calendar-primary text-center'>
|
|
2
2
|
{{#> components/base/link _link=this.link
|
|
3
|
-
_css='block p-2 text-white text-sm font-serif hover:underline underline-offset-
|
|
3
|
+
_css='block p-2 text-white text-sm font-serif hover:underline underline-offset-2'
|
|
4
4
|
}}
|
|
5
5
|
{{loca 'event_calendar_monthly_overview_link'}}
|
|
6
6
|
{{/components/base/link}}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}'>
|
|
2
|
-
<button class="block border-0 ml-4 absolute left-0 min-w-
|
|
2
|
+
<button class="block border-0 ml-4 absolute left-0 min-w-1 min-h-3 top-1/2 js-ns-button js-left" aria-hidden="true">
|
|
3
3
|
{{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
|
|
4
4
|
</button>
|
|
5
|
-
<button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
|
|
5
|
+
<button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button js-right" aria-hidden="true">
|
|
6
6
|
{{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
|
|
7
7
|
</button>
|
|
8
|
-
<div class="flex relative
|
|
9
|
-
<div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
|
|
8
|
+
<div class="flex relative ml-14 mr-14 overflow-hidden box-border border-teal-600">
|
|
9
|
+
<div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll js-horizontal">
|
|
10
10
|
{{#each this}}
|
|
11
11
|
<div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
|
|
12
|
-
this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
|
|
12
|
+
this.hasFutureEventsFromNow}} js-selected{{else}} js-fr-reload-trigger{{/if}}">
|
|
13
13
|
<span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3 {{#if
|
|
14
|
-
this.isCurrentMonth}} -currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
|
|
14
|
+
this.isCurrentMonth}} js-currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
|
|
15
15
|
<ul class="flex">
|
|
16
16
|
{{#each this.days}}
|
|
17
17
|
<li class="inline-block h-full group cursor-pointer js-ns-item{{#if
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white
|
|
1
|
+
<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white{{#if this.isFirstAvailable}} js-selected js-fr-initial{{/if}}"
|
|
2
2
|
data-prop-crit='{{this.date.htmlDate}}'
|
|
3
3
|
data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
|
|
4
4
|
href="{{_contentUrl}}">
|
|
5
5
|
<span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
|
|
6
|
-
<span class="block font-serif text-link font-bold
|
|
6
|
+
<span class="block font-serif text-link font-bold italic text-2xl px-3 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
|
|
7
7
|
</a>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="flex flex-wrap content-center w-full h-full px-2 py-1">
|
|
2
2
|
{{#with this.startTime}}
|
|
3
|
-
<div class="flex grow shrink
|
|
3
|
+
<div class="flex grow shrink basis-6/12 align-top p-2">
|
|
4
4
|
<div class="min-w-3 min-h-3">
|
|
5
5
|
{{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
|
|
6
6
|
</div>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
{{/with}}
|
|
10
10
|
{{#with this.venue}}
|
|
11
|
-
<div class="flex grow
|
|
11
|
+
<div class="flex grow shrink basis-6/12 align-top p-2">
|
|
12
12
|
<div class="min-w-3 min-h-3">
|
|
13
13
|
{{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
|
|
14
14
|
</div>
|
|
@@ -23,11 +23,11 @@ const Filterer = (context) => {
|
|
|
23
23
|
errorDomNodes = hr$(`.${errorClass}`),
|
|
24
24
|
contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
|
|
25
25
|
let targetDomNodes = hr$(`.${targetClass}`, rootElement),
|
|
26
|
-
|
|
26
|
+
currentMonth = document.getElementsByClassName('js-currentMonth')[0];
|
|
27
27
|
|
|
28
|
-
const init = function () {
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
const init = function () {
|
|
29
|
+
currentMonth.classList.add('text-white');
|
|
30
|
+
currentMonth.classList.add('bg-black');
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
for (let i = 0; i < triggerDomNodes.length; i++) {
|
|
@@ -73,15 +73,15 @@ const Filterer = (context) => {
|
|
|
73
73
|
|
|
74
74
|
const doSetSelectedFilter = function (e, forceReset) {
|
|
75
75
|
clearSelected()
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
|
|
77
|
+
|
|
78
78
|
let monthWrapper = e.currentTarget.closest('.js-ns-month');
|
|
79
|
-
let monthName = monthWrapper.querySelector('.js-monthName');
|
|
80
|
-
|
|
79
|
+
let monthName = monthWrapper.querySelector('.js-monthName');
|
|
80
|
+
|
|
81
81
|
if (!forceReset) {
|
|
82
|
-
e.currentTarget.classList.add(navItemSelectedCssTrigger)
|
|
82
|
+
e.currentTarget.classList.add(navItemSelectedCssTrigger)
|
|
83
83
|
if (monthWrapper) {
|
|
84
|
-
|
|
84
|
+
|
|
85
85
|
if (monthName) {
|
|
86
86
|
monthName.classList.remove('text-gray-scorpion')
|
|
87
87
|
monthName.classList.remove('bg-white')
|
|
@@ -106,7 +106,7 @@ const Filterer = (context) => {
|
|
|
106
106
|
currentMonth.classList.add('text-gray-scorpion');
|
|
107
107
|
currentMonth.classList.add('bg-white');
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
|
|
110
110
|
triggerDomNodes.forEach(function (triggerDomNode) {
|
|
111
111
|
|
|
112
112
|
// hacky die würde bald verändert
|
|
@@ -18,7 +18,7 @@ const NativeScroll = function (context) {
|
|
|
18
18
|
}
|
|
19
19
|
const doScroll = function (e) {
|
|
20
20
|
let step = scrollbar.clientWidth - oneScrollbarItem.clientWidth * 1.5,
|
|
21
|
-
direction = e.currentTarget.classList.contains('-left') ? -1 : 1,
|
|
21
|
+
direction = e.currentTarget.classList.contains('js-left') ? -1 : 1,
|
|
22
22
|
distance = direction * step
|
|
23
23
|
console.log(
|
|
24
24
|
'🚀 ~ file: nativeScroll.feature.js ~ line 22 ~ doScroll ~ direction',
|
|
@@ -90,14 +90,14 @@ const NativeScroll = function (context) {
|
|
|
90
90
|
: (time - 1) * (2 * time - 2) * (2 * time - 2) + 1
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
if (hr$('.js-ns-scroll
|
|
94
|
-
scrollbar = hr$('.js-ns-scroll
|
|
93
|
+
if (hr$('.js-ns-scroll.js-horizontal', rootElement).length > 0) {
|
|
94
|
+
scrollbar = hr$('.js-ns-scroll.js-horizontal', rootElement)[0]
|
|
95
95
|
buttons = hr$('.js-ns-button', rootElement)
|
|
96
96
|
oneScrollbarItem = hr$('.js-ns-item', rootElement)[0]
|
|
97
97
|
hasNativeSmoothScroll = isNativeSmoothScrollEnabledOn(scrollbar)
|
|
98
|
-
let initiallySelectedMonth = hr$('.js-ns-month
|
|
98
|
+
let initiallySelectedMonth = hr$('.js-ns-month.js-selected', rootElement)[0]
|
|
99
99
|
if (!initiallySelectedMonth) {
|
|
100
|
-
initiallySelectedMonth = hr$('.js-ns-month
|
|
100
|
+
initiallySelectedMonth = hr$('.js-ns-month.js-currentMonth', rootElement)[0]
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
if (initiallySelectedMonth) {
|
|
@@ -114,7 +114,7 @@ const NativeScroll = function (context) {
|
|
|
114
114
|
}
|
|
115
115
|
} else {
|
|
116
116
|
console.log(
|
|
117
|
-
'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll
|
|
117
|
+
'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.js-horizontal'
|
|
118
118
|
)
|
|
119
119
|
}
|
|
120
120
|
}
|