hr-design-system-handlebars 0.36.0 → 0.37.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.
Files changed (8) hide show
  1. package/.storybook/main.js +11 -2
  2. package/.storybook/preview.js +5 -4
  3. package/CHANGELOG.md +37 -0
  4. package/dist/assets/index.css +11 -9
  5. package/dist/views/components/Header/Header.hbs +8 -5
  6. package/package.json +9 -9
  7. package/src/assets/tailwind.css +29 -25
  8. package/src/stories/views/components/Header/Header.hbs +8 -5
package/.storybook/main.js CHANGED
@@ -11,7 +11,14 @@ module.exports = {
11
11
  addons: [
12
12
  '@storybook/addon-links',
13
13
  '@storybook/addon-essentials',
14
- '@storybook/addon-postcss',
14
+ {
15
+ name: '@storybook/addon-postcss',
16
+ options: {
17
+ postcssLoaderOptions: {
18
+ implementation: require('postcss'),
19
+ },
20
+ },
21
+ },
15
22
  '@whitespace/storybook-addon-html',
16
23
  '@storybook/addon-a11y',
17
24
  'storybook-conditional-toolbar-selector',
@@ -26,6 +33,7 @@ module.exports = {
26
33
  config.resolve.alias = {
27
34
  ...config.resolve.alias,
28
35
  components: path.resolve(__dirname, '../src/stories/views/components'),
36
+ tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
29
37
  hrQueryNew$: path.resolve(
30
38
  __dirname,
31
39
  '../src/stories/views/components/generic/hrQueryNew.js'
@@ -39,12 +47,13 @@ module.exports = {
39
47
  '../build/webpack/feature-loader/initializer/loader.js'
40
48
  ),
41
49
  }
50
+
42
51
  config.module.rules.push(
43
52
  {
44
53
  test: /\.handlebars|hbs$/,
45
54
  loader: 'handlebars-loader',
46
55
  include: path.resolve(__dirname, '../'),
47
- query: {
56
+ options: {
48
57
  helperDirs: [path.resolve(__dirname, '../build/helpers')],
49
58
  partialDirs: [path.resolve(__dirname, '../src/stories/views')],
50
59
  },
package/.storybook/preview.js CHANGED
@@ -1,9 +1,10 @@
1
- import '../src/assets/tailwind.css'
1
+ import '!style-loader!css-loader!postcss-loader!tailwind'
2
+ import 'tailwind'
2
3
 
3
4
  import hrDesignsystemDark from './HRDesignsystemDark'
4
5
  import hrDesignsystemLight from './HRDesignsystemLight'
5
6
  import { withThemeDecorator } from './withThemeDecorator'
6
- import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
7
+ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
7
8
 
8
9
  import Initializer from '../build/webpack/feature-loader/initializer/initializer'
9
10
  import loadFeature from '../build/webpack/feature-loader/initializer/loader'
@@ -24,7 +25,7 @@ if (process.env.NODE_ENV !== 'production') {
24
25
  export const parameters = {
25
26
  viewport: {
26
27
  viewports: INITIAL_VIEWPORTS,
27
- },
28
+ },
28
29
  backgrounds: {
29
30
  default: 'white',
30
31
  values: [
@@ -43,7 +44,7 @@ export const parameters = {
43
44
  cellAmount: 8,
44
45
  offsetX: 0, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
45
46
  offsetY: 0, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
46
- }
47
+ },
47
48
  },
48
49
  // Storybook a11y addon configuration
49
50
  a11y: {
package/CHANGELOG.md CHANGED
@@ -1,3 +1,40 @@
1
+ # v0.37.0 (Wed Mar 09 2022)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - Build/tailwind [#184](https://github.com/mumprod/hr-design-system-handlebars/pull/184) ([@szuelch](https://github.com/szuelch))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@szuelch](https://github.com/szuelch)
10
+
11
+ ---
12
+
13
+ # v0.36.2 (Wed Mar 09 2022)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - Height Menu&Service flyout ist not 100% if that higher than viewport [#182](https://github.com/mumprod/hr-design-system-handlebars/pull/182) (zouhair1 [@selbaciri](https://github.com/selbaciri))
18
+
19
+ #### Authors: 2
20
+
21
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
22
+ - selbaciri (zouhair1)
23
+
24
+ ---
25
+
26
+ # v0.36.1 (Mon Mar 07 2022)
27
+
28
+ #### 🐛 Bug Fix
29
+
30
+ - FEATURE: adds storybook hook class [#181](https://github.com/mumprod/hr-design-system-handlebars/pull/181) ([@szuelch](https://github.com/szuelch))
31
+
32
+ #### Authors: 1
33
+
34
+ - [@szuelch](https://github.com/szuelch)
35
+
36
+ ---
37
+
1
38
  # v0.36.0 (Mon Mar 07 2022)
2
39
 
3
40
  #### 🚀 Enhancement
package/dist/assets/index.css CHANGED
@@ -316,7 +316,7 @@
316
316
 
317
317
  /*! purgecss end ignore */
318
318
 
319
- /*! tailwindcss v3.0.13 | MIT License | https://tailwindcss.com */
319
+ /*! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com */
320
320
 
321
321
  /*
322
322
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -1283,7 +1283,9 @@ Ensure the default browser behavior of the `hidden` attribute.
1283
1283
  max-width: 1024px;
1284
1284
  }
1285
1285
  }
1286
- [x-cloak] { display: none !important; }
1286
+ [x-cloak] {
1287
+ display: none !important;
1288
+ }
1287
1289
  .btn {
1288
1290
  display: inline-block;
1289
1291
  cursor: pointer;
@@ -2236,14 +2238,14 @@ Ensure the default browser behavior of the `hidden` attribute.
2236
2238
 
2237
2239
  .hide-scroll-bar {
2238
2240
  -ms-overflow-style: none;
2239
- scrollbar-width: none;
2240
- scroll-behavior: smooth;
2241
- }
2241
+ scrollbar-width: none;
2242
+ scroll-behavior: smooth;
2243
+ }
2242
2244
  .hide-scroll-bar::-webkit-scrollbar {
2243
2245
  display: none;
2244
- }
2246
+ }
2245
2247
 
2246
- .arrow-left-background{
2248
+ .arrow-left-background {
2247
2249
  background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgb(255, 255, 255)));
2248
2250
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
2249
2251
  -webkit-transition: -webkit-transform 150ms ease-in-out 0s;
@@ -2251,7 +2253,7 @@ Ensure the default browser behavior of the `hidden` attribute.
2251
2253
  transition: transform 150ms ease-in-out 0s;
2252
2254
  transition: transform 150ms ease-in-out 0s, -webkit-transform 150ms ease-in-out 0s;
2253
2255
  }
2254
- .arrow-right-background{
2256
+ .arrow-right-background {
2255
2257
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgb(255, 255, 255)));
2256
2258
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
2257
2259
  -webkit-transition: -webkit-transform 150ms ease-in-out 0s;
@@ -2806,4 +2808,4 @@ Ensure the default browser behavior of the `hidden` attribute.
2806
2808
  .tablet\:first\:border-l:first-child {
2807
2809
  border-left-width: 1px;
2808
2810
  }
2809
- }
2811
+ }
package/dist/views/components/Header/Header.hbs CHANGED
@@ -62,7 +62,7 @@
62
62
  <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
63
63
  x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')"
64
64
  x-show="$store.searchFieldOpen"
65
- class="flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-102 lg:hidden print:hidden"
65
+ class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-102 lg:hidden print:hidden"
66
66
  @search-close.window="$store.searchFieldOpen = false"
67
67
  @click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
68
68
  x-transition:enter="transition ease-out duration-200"
@@ -196,15 +196,16 @@
196
196
  if (window.innerWidth < 1024) {
197
197
  this.$refs.sectionnavigation.style.maxHeight='0px'
198
198
  } else {
199
- this.$refs.sectionnavigation.style.maxHeight = ''
199
+ this.$refs.sectionnavigation.style.maxHeight = ''
200
200
  }
201
201
  } else {
202
202
  let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
203
203
  let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
204
+ let brandNavHeight = this.percent > 0 ? 40 : 0
204
205
 
205
206
  if(navheight > winheightcorr){
206
207
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
207
- this.$refs.sectionnavigation.style.maxHeight = winheightcorr+'px'
208
+ this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
208
209
 
209
210
  } else {
210
211
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
@@ -271,12 +272,13 @@
271
272
  this.toggleScrolling(!this.$store.serviceNavIsOpen)
272
273
 
273
274
  let myFlyout = document.querySelector('#flyout-'+this.$el.id)
275
+ let brandNavHeight = this.percent > 0 ? 40 : 0
274
276
 
275
277
  if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
276
278
  window.setTimeout(function(){
277
279
  if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
278
280
  myFlyout.style.height = 'auto'
279
- window.innerHeight <= 414 && window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 +'px'
281
+ window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
280
282
  myFlyout.style.overflowY = 'scroll'
281
283
  } else {
282
284
  myFlyout.style.maxHeight = ''
@@ -299,6 +301,7 @@
299
301
  //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
300
302
  this.$watch('dropped', value => {
301
303
  let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
304
+ let brandNavHeight = this.percent > 0 ? 40 : 0
302
305
  if(window.innerWidth < 1024) {
303
306
  if(value == true ) {
304
307
 
@@ -306,7 +309,7 @@
306
309
  this.$refs.sectionnavigation.style.maxHeight = a +'px'
307
310
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
308
311
  } else {
309
- this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop +'px'
312
+ this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
310
313
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
311
314
  }
312
315
  } else {
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": "0.36.0",
9
+ "version": "0.37.0",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
@@ -33,14 +33,14 @@
33
33
  "devDependencies": {
34
34
  "@babel/cli": "^7.13.16",
35
35
  "@babel/core": "^7.12.10",
36
- "@storybook/addon-a11y": "^6.4.9",
37
- "@storybook/addon-actions": "^6.4.9",
38
- "@storybook/addon-essentials": "^6.4.9",
39
- "@storybook/addon-links": "^6.4.9",
36
+ "@storybook/addon-a11y": "^6.4.19",
37
+ "@storybook/addon-actions": "^6.4.19",
38
+ "@storybook/addon-essentials": "^6.4.19",
39
+ "@storybook/addon-links": "^6.4.19",
40
40
  "@storybook/addon-postcss": "^2.0.0",
41
- "@storybook/addons": "^6.4.9",
42
- "@storybook/html": "^6.4.9",
43
- "@storybook/theming": "^6.4.9",
41
+ "@storybook/addons": "^6.4.19",
42
+ "@storybook/html": "^6.4.19",
43
+ "@storybook/theming": "^6.4.19",
44
44
  "@whitespace/storybook-addon-html": "^5.0.0",
45
45
  "auto": "^10.26.0",
46
46
  "autoprefixer": "^10.4.2",
@@ -66,7 +66,7 @@
66
66
  "prettier": "^2.2.1",
67
67
  "rimraf": "^3.0.2",
68
68
  "storybook-conditional-toolbar-selector": "^1.0.3",
69
- "tailwindcss": "^3.0.13",
69
+ "tailwindcss": "^3.0.23",
70
70
  "tailwindcss-important": "^1.0.0"
71
71
  },
72
72
  "dependencies": {
package/src/assets/tailwind.css CHANGED
@@ -363,39 +363,43 @@
363
363
  }
364
364
 
365
365
  .-currentBrand {
366
- @apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6
366
+ @apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
367
367
  }
368
368
  .-currentService {
369
- @apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12
369
+ @apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
370
370
  }
371
371
  .-currentSection {
372
- @apply before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0 lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8
372
+ @apply before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0 lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
373
373
  }
374
374
  .-warnung {
375
375
  @apply text-red-600 !important;
376
- @apply fill-black
376
+ @apply fill-black;
377
377
  }
378
378
 
379
- .-video-podcast, .-weather, .-traffic {
380
- @apply fill-white
379
+ .-video-podcast,
380
+ .-weather,
381
+ .-traffic {
382
+ @apply fill-white;
381
383
  }
382
- .link-focus-inset{
383
- @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50
384
+ .link-focus-inset {
385
+ @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-grey-scorpion/50;
384
386
  }
385
- .link-focus{
386
- @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50
387
+ .link-focus {
388
+ @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-grey-scorpion/50;
387
389
  }
388
- .link-focus-inset-white{
389
- @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50
390
+ .link-focus-inset-white {
391
+ @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-inset focus-visible:ring-white/50;
390
392
  }
391
- .link-focus-white{
392
- @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-white/50
393
+ .link-focus-white {
394
+ @apply focus-visible:outline-none focus-visible:ring focus-visible:ring-white/50;
393
395
  }
394
396
  }
395
397
 
396
398
  @layer components {
397
- [x-cloak] { display: none !important; }
398
-
399
+ [x-cloak] {
400
+ display: none !important;
401
+ }
402
+
399
403
  .btn {
400
404
  @apply inline-block font-sans font-bold leading-none cursor-pointer rounded-3xl;
401
405
  }
@@ -426,25 +430,25 @@
426
430
  }
427
431
 
428
432
  @layer utilities {
429
- .placeholder-text-xs::placeholder{
430
- @apply text-xs
433
+ .placeholder-text-xs::placeholder {
434
+ @apply text-xs;
431
435
  }
432
436
  }
433
437
 
434
438
  .hide-scroll-bar {
435
439
  -ms-overflow-style: none;
436
- scrollbar-width: none;
437
- scroll-behavior: smooth;
438
- }
440
+ scrollbar-width: none;
441
+ scroll-behavior: smooth;
442
+ }
439
443
  .hide-scroll-bar::-webkit-scrollbar {
440
444
  display: none;
441
- }
445
+ }
442
446
 
443
- .arrow-left-background{
447
+ .arrow-left-background {
444
448
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
445
449
  transition: transform 150ms ease-in-out 0s;
446
450
  }
447
- .arrow-right-background{
451
+ .arrow-right-background {
448
452
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
449
453
  transition: transform 150ms ease-in-out 0s;
450
- }
454
+ }
package/src/stories/views/components/Header/Header.hbs CHANGED
@@ -62,7 +62,7 @@
62
62
  <div x-cloak :class="shouldServiceNavBeHidden() ? 'hidden -mt-40' : ''"
63
63
  x-effect="$el.setAttribute('id', 'flyout-' + $store.searchID.current + '-2');$el.setAttribute('aria-expanded', $store.searchFieldOpen);$el.setAttribute('aria-hidden', !$store.searchFieldOpen);$el.setAttribute('aria-labelledby', 'flyout-' + $store.searchID.current + '-1')"
64
64
  x-show="$store.searchFieldOpen"
65
- class="flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-102 lg:hidden print:hidden"
65
+ class="sb-quick-search-flyout flex tablet:w-half-screen tablet:ml-half-screen justify-end order-4 w-full max-w-full p-2 px-5 py-3.5 bg-white drop-shadow-md md:mt-0 z-102 lg:hidden print:hidden"
66
66
  @search-close.window="$store.searchFieldOpen = false"
67
67
  @click.outside="$store.searchFieldOpen = false; $dispatch('search-mobile-click-outside'); dropped = false; toggleScrolling(!$store.serviceNavIsOpensearchFieldOpen && !$store.burgeropen)"
68
68
  x-transition:enter="transition ease-out duration-200"
@@ -196,15 +196,16 @@
196
196
  if (window.innerWidth < 1024) {
197
197
  this.$refs.sectionnavigation.style.maxHeight='0px'
198
198
  } else {
199
- this.$refs.sectionnavigation.style.maxHeight = ''
199
+ this.$refs.sectionnavigation.style.maxHeight = ''
200
200
  }
201
201
  } else {
202
202
  let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
203
203
  let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
204
+ let brandNavHeight = this.percent > 0 ? 40 : 0
204
205
 
205
206
  if(navheight > winheightcorr){
206
207
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
207
- this.$refs.sectionnavigation.style.maxHeight = winheightcorr+'px'
208
+ this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
208
209
 
209
210
  } else {
210
211
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
@@ -271,12 +272,13 @@
271
272
  this.toggleScrolling(!this.$store.serviceNavIsOpen)
272
273
 
273
274
  let myFlyout = document.querySelector('#flyout-'+this.$el.id)
275
+ let brandNavHeight = this.percent > 0 ? 40 : 0
274
276
 
275
277
  if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
276
278
  window.setTimeout(function(){
277
279
  if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
278
280
  myFlyout.style.height = 'auto'
279
- window.innerHeight <= 414 && window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 +'px'
281
+ window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
280
282
  myFlyout.style.overflowY = 'scroll'
281
283
  } else {
282
284
  myFlyout.style.maxHeight = ''
@@ -299,6 +301,7 @@
299
301
  //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
300
302
  this.$watch('dropped', value => {
301
303
  let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
304
+ let brandNavHeight = this.percent > 0 ? 40 : 0
302
305
  if(window.innerWidth < 1024) {
303
306
  if(value == true ) {
304
307
 
@@ -306,7 +309,7 @@
306
309
  this.$refs.sectionnavigation.style.maxHeight = a +'px'
307
310
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
308
311
  } else {
309
- this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop +'px'
312
+ this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
310
313
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
311
314
  }
312
315
  } else {